HTML常用标签
文章目录
其他 前端知识：
前端教程网站：
学习HTML就是学习各种标签，然后针对你想要的内容来使用相应的标签。
HTML标签即“HTML元素”。
一.html标签
整个网页从<html>开始，到<html>结束。
二.head标签
不需要掌握
此标签内定义的内容在浏览器中不可见。
表1 <head>内部标签
| <head>内部标签 | 说明 |
|---|---|
| <title> | 定义网页标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言 |
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 设置关键字 -->
<meta name="keywords"content="HTML,JAVA,WEB前端,">
<!-- 设置描述信息 -->
<meta name="description" content="HTML.....">
<!-- 设置网站的作者 -->
<meta name="author" content="王祖贤">
<!-- 设置网站的跳转 -->
<!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com"> -->
<title>头部标签</title>
<!-- 定义内部的CSS样式 -->
<style>
body{
color:red;
}
</style>
<!-- 引用外部的CSS样式文件 -->
<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">
<!-- 定义或引用脚本 -->
<script></script>
<!-- 定义一个基础路径 -->
<base href="../img/">
</head>
<body>
</body>
</html>
三.body标签
用于定义网页展示内容
1.段落标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <h1>~<h6> | header | 标题 |
| <p> | paragraph | 段落 |
| <br> | break | 换行 |
| <hr> | horizontal rule | 水平线 |
| <div> | division | 分割（块元素） |
| <span> | span | 区域（行内元素） |
2.文本标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <strong> | strong | 加粗 |
| <i> | italic | 斜体标签 |
| <em> | emphasized（强调） | 斜体 |
| <cite> | cite（引用） | 斜体 |
| <sup> | superscripted | 上标 |
| <sub> | subscripted | 下标 |
| <b> | boid | 加粗显示 |
| <del> | delete | 删除线 |
| <bdo> | 设置文本的方向 | 通过属性dir=“ltr” left to right “rtl” right to left从右至左 |
| <abr> | 设置文字的缩写 | 通过title属性设置当鼠标停留在文字上时显示的提示 内容 |
| <ins> | 下划线 | |
| <small> | 相对于当前文字的字号小一号 | |
| <big> | 相当于当前文字的字号大一号 |
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <i>to</i> html！
<br>
welcome <em>to</em> html!
<br>
<hr>
HTML从<b>入门</b>到精通
<br>
HTML从<strong>入门</strong>到精通！
<br>
原价：188元，优惠价：<span style="font-size: 40px;color: #FF7300">98元</span>
<hr>
出版社：<ins>机械出版社</ins>
<br>
<hr>
水的分子表达式：H<sub>2</sub>0
<br>
2<sup>3</sup>=8
<hr>
<bdo dir="rtl">welcome to html！</bdo>
<br>
<bdo dir="rel">welcome to html</bdo>
<br>
<abbr title="Hyper Text Language">HTML</abbr>
<br>
<span title="Hyper Text Language">HTML</span>
<hr>
HTML从<small>入门</small>到精通!
<br>
HTML从<big>入门</big>到精通!
</body>
</html>
效果图：
3.小知识点
（1）空格
空格的代码： 
（2）标签的分类
①一般标签：开始符号和结束符号均有。这之间可以插入其他标签或者文字
②自闭合标签：只有开始符号，不插入其他标签或者文字，只能定义自身的属性。
如：<br/>、<hr/>
（3）HTML元素分类
HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素
①块元素：独占一行、其内部可以容纳其他块元素或行内元素。
如：<div>、<p>、<h1>~<h6>、<br>、<ol>、<ul>
②行内元素（内联元素）：在浏览器中可以与其它行内元素共占一行，只有当多个元素的总宽度大于浏览器的宽度时，才会换行显示。
如：<a>、<span>、<strong>、<b>、<em>、<i>、<img>、<input>、<select>
4.列表标签
| 标签 | 语义 | 说明 |
|---|---|---|
| <ul> | unordered list | 无序列表 |
| <ol> | ordered list | 有序列表 |
| <dl> | definition list | 定义列表 |
（1）无序列表
①指没有顺序的列表项目
②始于<ul>标签，每个列表项始于<li>
③type属性有三个选项:disc实心圆、circle空心圆、square小方块。 默认属性是disc实心园。
④实例
<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--无序列表</title>
</head>
<body>
<ul>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
<li>默认的无序列表</li>
</ul>
<ul>
<li type = "circle">添加circle属性</li>
<li type = "circle">添加circle属性</li>
<li type = "circle">添加circle属性</li>
</ul>
<ul>
<li type = "square">添加square属性</li>
<li type = "square">添加square属性</li>
<li type = "squaare">添加square属性</li>
</ul>
</body>
</html>
效果图:
也可以使用CSS list-style-type属性定义html无序列表样式。
（2）有序列表
①指按照字母或数字等顺序排列的列表项目
②其结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。
③始于<ol>标签，每个列表项始于<li>
| type属性值 | 说明 |
|---|---|
| 1 | 数字1、2、3…… |
| a | 小写英文字母a、b、c…… |
| A | 大写英文字母A、B、C…… |
| i | 小写罗马数字i、ii、iii…… |
| I | 大写罗马数字I、II、III…… |
⑤实例
<ol>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
<li>默认的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li value ="20">第四项</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>
效果图
同样也可以使用CSS list-style-type属性定义html有序列表样式
（3）自定义列表
①自定义列表不仅仅是一列项目，而是项目及其注释的组合。
②以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
③用于对术语或名词进行解释和描述，自定义列表的列表项前没有任何项目符号。
④基本语法：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
</dl>
<dl>即“definition list（定义列表）”，
<dt>即“definition term（定义名词）”，
而<dd>即“definition description（定义描述）”。
⑤实例
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置</dd>
</dl>
效果图
5.表格标签
（1）表格基本标签
| 标签 | 语义 | 说明 |
|---|---|---|
| table | table | 表格 |
| tr | table row | 行 |
| td | table data cell | 单元格 |
| ①表格基本标签必须存在。 |
②基本说明：
<table>和</table>标记着表格的开始和结束，
<tr>和</tr>标记着行的开始和结束，几组表示该表格有几行。
<td>和</td>标记着单元格的开始和结束，表示这一行中有几列。
③举例
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
（2）表格结构标签
| 标签 | 语义 | 说明 |
|---|---|---|
| thead | table head | 表头 |
| tbody | table body | 表身 |
| tfoot | table foot | 表脚 |
| th | table header | 表头单元格 |
| th标签一般用在thead当中设置头部的标题，代替td（标准单元格）标签。 |
th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
表格的标题标签是caption。
（3）小知识点
①合并行
使用td标签的rowspan属性。
②合并列
使用td标签的colspan属性。
6.图像标签
（1）图像标签及其属性
图像标签为<img>，是自闭合标签。
<img src=“…” alt=“…” title=“…”>
表6 <head>标签的属性
| <img>标签的属性 | 说明 |
|---|---|
| src | 图片的文件地址（必须有此标签） |
| alt | 图片显示不出来时的提示文字（必须有此标签） |
| title | 鼠标移到图片上的提示文字 |
（2）图片格式
①“JPEG”格式
JPEG格式，也叫做JPG或JPE格式，是最常用的一种文件格式。
大部分手机相机拍照的照片也是JPE格式。
JPEG格式的压缩技术可将图像有损压缩，会降低图片的质量。
适合应用于互联网，可减少图像的传输和加载时间。
能很好处理大面积色调的图像，如相片、网页一般的图片。
②“PNG”格式
PNG格式图片体积小，无损压缩，能保证网页的打开速度。
支持透明信息。
可以称为“网页设计专用格式”。
③“GIF”格式
分为动态GIF和静态GIF两种。
图片图像效果很差。
支持动态图片，支持透明背景。
7.链接标签
（1）链接属性
<a href=“链接地址（要跳转到到的url）” target=“新页面的打开方式”>链接文本</a>
①href属性
href的本质是指向一个文件，这个文件几乎可以是任意格式的。如果浏览器支持这种格式，那么它就可以在浏览器上显示，比如常见的图片、音频、视频等，如果浏览器不支持这种格式，那么就提示用户下载。
href 使用的路径可以是绝对路径，也可以是相对路径。
绝对路径往往以域名为起点，
相对路径往往以当前文件或者当前域名为起点，例如 ./…/uploads/data_package/Foundation.zip。
②target属性
表6 <a>标签的target属性
| target属性 | 说明 |
|---|---|
| _self | 默认方式，即在当前窗口打开链接 |
| _blank | 在一个全新的空白窗口中打开链接 |
（2）链接分类
超链接根据链接对象的不同分为：外部链接和内部链接，其中内部链接又分为内部页面链接 、锚点链接。
锚点链接（运用普遍）指点击这个超链接，会跳到当前页面的某一部分。又分为不跨页锚点和跨页锚点。
不跨页锚点：
1、设置锚点：<a name=“锚点的名字”>锚点处</a>
2、设置启动开关：<a herf=“#锚点的名字”>点我跳转到锚点处</a>
跨页锚点：
1、设置锚点：<a name=“one”>第一章</a>
2、设置启动开关：<a herf=“要跳转的页面名称.html#one”>点我跳转第一章 </a>
1、开关一定要有 “#”。
2、跨页锚点与不跨页锚点的唯一区别是跨页锚点开关要注明跳转页面路径。
3、网站中的 回到顶部 按钮 就是用锚点做的
4、通常锚点定义只需要写name这个属性，不过在xhtml中更正式是需要写上id。
8.表单标签
form的完整写法：<form action=" 跳转路径(默认是当前页面)" name=" 表单的名字" method="跳转的请求方式 "></form>
method取值：
①get请求：
以查询字符串的形式提交
会在网页跳转后留下用户密码等（在地址栏中能看到）
长度有限制，不安全
默认的是get请求
②post请求：
以表单数据组的形式进行提交
长度无限制，相较安全
（1）input 标签
<input type=“值”/>
表8-1-1 <input>标签的type属性
| type属性 | 说明 |
|---|---|
| text | 单行文本框 |
| password | 密码文本框 |
| radio | 单选按钮 |
| checkbox | 复选框 |
| submit | 提交按钮，具有提交表单的能力（按钮上具有”提交“二字） |
| reset | 重置按钮（按钮上具有”重置“二字） |
| image | 图像形式的提交按钮（按钮是图片） |
| button | 普通按钮，不具备提交能力 |
| file | 选择文件进行上传（按钮上具有”选择文件“几字） |
| 邮箱 | |
| 单行文本框语法：<input type=“text” value=“默认文字” size=“文本框长度” maxlength=“最多输入字符数”/> |
举例：
<form>
用户名称:<input type="text" name="username" required />
用户密码:<input type="password" name="userpassword"/>
</form>
用户性别:<input type="radio" name="gender">女<input type="radio" name="gender" checked/>男
用户爱好:<input type="checkbox"/>篮球
<input type="checkbox"/>足球
<input type="checkbox"/>跑步
表8-1-2 <input>标签的常用属性
| 常用属性 | 说明 |
|---|---|
| readonly | 只能读不能改 |
| required | 提示必填空 |
| disabled | 不可点击 |
| checked | 默认选项 |
| placeholder | 可描述输入字段预期值的提示信息 |
| 举例： |
<input type="text" name="lisi" disabled="disabled"/>
效果图：
举例：
请输入你的邮箱:<input type="email" placeholder="输入邮箱"/>
效果图：
（2）textarea标签
多行文本框
语法：<textarea rows=“行数” cols=“列数”>多行文本框内容</textarea>
（3）select和option标签
下拉列表由标签和标签配合使用。
<form>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
</form>
<select multiple="multiple" size="2">
其中，size表示显示条目的数量。
8.多媒体标签
（1）embed标签
①可用于在网页中插入音频、视频和flash
②<embed src=“多媒体文件地址” width=“播放界面的宽度” height=“播放界面的高度”></embed>
③多媒体文件地址可以是相对地址，也可以是绝对地址。
④width和height使用px作为单位。
（2）bgsound标签
①用于为某个页面设置背景音乐。
②只适用于IE浏览器。
③<bgsound src=“背景音乐的地址”/>
④loop="2"表示重复2次，loop=“infinite"表示无限次循环播放，也可以使用loop=”-1"表示无限次循环播放。
参考：
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
14
0- 0
已为社区贡献4条内容
所有评论(0)