HTML 常用标签总结
前言
学习标签是有技巧的，重点是记住每个标签的语义。根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。本文就介绍了HTMl的一些常用标签。部分不常用的标签，感兴趣的可以去官网学习以下是本篇文章正文内容，下面案例可供参考
常用标签一
1、title 标签
定义了不同文档的标题，显示在浏览器标题栏
代码：
<title>标题</title>
代码效果：
2、meta 标签
描述一些基本的元数据，元数据不显示在浏览器上但被浏览器解析
<meta/>使用实例：
<!--1、声明编码-->
<meta charset="utf-8">
<!--2、刷新当前页面-->
<meta http-equiv="refresh" content="1">
3、link 标签
定义了文档于外部资源的关系。通常用于链接样式表
代码：
<link rel="stylesheet" href="style.css">
4、script 标签
用于加载脚本文件或写脚本代码
代码：
<!--1、加载脚本文件-->
<script src=""></script>
<!--写脚本代码-->
<script>
var username = this.getQueryString("username");
....
</script>
5、style 标签
定义了HTML文档的样式引用地址，或直接添加样式来渲染HTML文档
代码：
<style>
*b {
margin: 0;
padding: 0;
}
</style>
6、换行标签
如果希望某段文字强制换行，需要使用换行标签<br/>
注：单词break的缩写，意为打断、换行
标签语义：强制换行
特点：
1、<br/>是个单标签
2、<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
代码：
<p>这是一<br> 段文字</p>
代码效果：
7、分割线
需要在页面中添加分割线，用分割线标签<hr/>
注：单词hr意为水平分隔线
特点：
<hr/>是个单标签
代码：
<hr/>
代码效果：
8、注释
HTML中的注释以<!--开头，以-->结束
快捷键：Ctrl+/
代码：
<!--HTML的注释-->
9、文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线的效果。这时需要HTML中的文本格式化标签，使文字以特殊的方式显示
标签语义：突出重要性，比普通文字更重要
常用的格式化标签：
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong>标签，语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签，语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签，语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签，语义更强烈 |
| 上标字 | <sup></sup> | |
| 下标字 | <sub></sub> |
代码：
我是 <strong>马冬梅</strong> 我现在 <b>很胖</b> <br>
一下课就 <em> 歪三倒四</em> 还有一个 <i>标签也是倾斜</i> <br>
不要 <del>996</del> 不要 <s>995</s> 现价<strong> 007</strong>带回家
<br>
天上 <ins>星河</ins> 转， <u>人间帘幕垂</u> <br>
代码效果：
10、特殊字符
在HTMl页面中，一些特殊的符号不方便直接使用，此时我们就可以使用下面的字符来代替。
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 不间断空格 | | |
| 全角空格（1em=16px） |   | |
| 半角空格 |   | |
| > | 大于号 | > |
| < | 小于号 | < |
| & | 和号 | & |
| ‘’ | 引号 | " |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ￥ | 人民币 | ¥ |
| ™ | 商标 | ™ |
注：除了空格、大于号、小于号这三个，其余的使用很少
常用标签二
1、标题标签 h1~h6
为了使网页更具有语义化，我们经常会在页面中使用标题标签。HTML提供了6个等级的网页标题，即h1~h6
注：
单词head的缩写，以为头部，标题
标签语义：
作为标题使用，并且依据重要性递减
特点：
1、加了标题的文字会变的加粗，字号也会依次变大。
2、一个标题独占一行
代码：
<h1>标题一共六级选，</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小以此减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
代码效果：
标题标签与size属性的比较
代码：
<font size="7">这是7号字体</font>
<hr>
<h1>这是一号字体</h1>
<font size="6">这是6号字体</font>
<hr>
<h2>这是二号字体</h2>
<font size="5">这是5号字体</font>
<hr>
<h3>这是三号字体</h3>
<font size="4">这是4号字体</font>
<hr>
<h4>这是四号字体</h4>
<font size="3">这是3号字体</font>
<hr>
<h5>这是五号字体</h5>
<font size="2">这是2号字体</font>
<hr>
<h6>这是六号字体</h6>
<font size="1">这是1号字体</font>
代码效果：
2、段落标签
在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示。在HTML标签中，p标签用于定义段落，它可以把整个网页分为若干个段落
注：
单词paragraph的缩写，以为段落
标签语义：
把HTML文档分割为若干段落
特点：
1、文本在一个段落中会根据浏览器窗口的大小自动换行。
2、段落与段落之间有空隙
代码：
<p>这是一个段落</p>
<p>
<a href="#">
<img src="" alt="加载中...">
</a>
</p>
代码效果：
3、div 标签和 span 标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容
注：
单词division 的缩写是div，意为分割、分区；
span意为跨度、跨距；
特点：
1、div 标签用来布局，一行只能放一个 div 大盒子
2、span 标签用来布局，一行上可以有多个 span 小盒子
代码：
<div>我是一个div标签。div就是一个容器，可以理解为一个盒子。特点：独占一行</div>
<div>div是吧，俺也一样</div>
<span>1:我是一个span标签。
这也是一个容器，可以理解为一个装内容的盒子。
特点，不会独占一行
他有多长呢。内容有多少，我就有多长
</span>
<span>
2:span:俺也一样
span不会独占一行。内容如果很多很多， 达到了浏览器末尾，自动换行
</span>
代码效果：
3、图片标签和路径
在HTML标签中，img 标签用于定义HTML页面中的图像。
注：
单词image的缩写，意为图像
必须属性：
“src”是标签的必须属性，用于指定图像文件的路径和文件名
其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| alt | 文本 | 替换文本，图像不能显示时的文字 |
| title | 文本 | 提示文本，鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
注：
1、只设置图像的width/height属性中的一个，图像会等比例缩小或放大
2、图像标签可以拥有多个属性，必须写在开始标签的标签名的后面
3、属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
4、属性采取键值对的格式，即key="value"的格式
路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图形文件的位置
路径可以分为：
1、相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，图片相对于HTML页面的位置
| 分类 | 符号 | 说明 |
|---|---|---|
| 同一路径 | 图像文件与HTML文件在同一级 如<img src="snowflake.jpg"> | |
| 下一级路径 | /或./ | 图像文件位于HTML文件下一级 如 <img src="images/snowflake.jpg"> |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级 如 <img src="../images/snowflake.jpg"> |
注：相对路径是从代码所在的这个文件出发，去寻找目标文件的
2、绝对路径：
是指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径 如：“D:\web\img\logo.png”;
或者完整的网络地址 如 “http://www.baidu.com”;
4、超链接标签
在HTML标签中，a标签用于定义超链接，作用是从一个页面链接到另一个页面
1、链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
注：
单词anchor的缩写，意为锚
2、链接属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| href | url | 用于指定链接目标的URL地址，（必须属性）当为标签应用href属性时，它才具有超链接的功能 |
| target | _self（默认值） | _blank（在新窗口打开） |
| rel | 规定当前文档与目标 URL 之间的关系 | |
| type | 规定目标 URL 的 MIME 类型 |
3、链接的分类
-
外部链接
例如：
<a href="http://www.baidu.com">百度</a> -
内部链接
网站内部页面之间的相互连接，直接链接内部页面名称即可
例如：
<a href="index.html">首页</a> -
空链接
如果当时没有确定链接目标时
<!--1、“#”--> <a href="#">首页</a> <!--2、“javascript;”--> <a href="javascript;">首页</a> -
下载链接
如果href里面的地址是一个文件或者压缩包，会下载这个文件
<a href="xxx.zip">点击下载</a> -
网页元素链接
在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
-
创建图片链接
<a href="#"> <img border="10" src="xx.jpg" alt="" width="" height="" title=""> </a> -
无边框的图片链接
<a href="#"> <img border="0" src="xx.jpg" alt="" width="" height="" title=""> </a> -
链接到图片
<a href="xx.jpj">连接到图片</a>
-
-
锚点链接
用法：
1、在文档中插入id，设置锚点；
2、在HTML文档中（或者其他HTML文档中）创建一个链接可以跳转到设有锚点的位置；
<p id="tips"> 有用的提示部分</p> <a href="#tips">访问有用的提示部分</a> <a href="xx.html/#tips">访问xx.html文档中有用的提示部分</a>
5、表格标签
1、表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。
2、表格标签基本语法
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<tbody>
<tr>
<td>普通单元格1</td>
<td>普通单元格2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>普通单元格3</td>
<td>普通单元格4</td>
</tr>
</tfoot>
</table>
-
表格基础标签：
1、
<table></table>用于定义表格的标签2、
<tr></tr>标签用于定义表格的行，必须嵌套在<table>标签中3、
<th></th>标签用于定义表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示4、
<td></td>标签用于定义表格中的单元格，必须嵌套在标签中5、
<caption></caption>标签用于定义表格的标题，会在表格上方显示 -
表格结构标签：
1、标签——表格的头部
2、 标签——表格主体
3、 标签——表格底部
3、表格属性
表格标签的这部分属性在开发中我们不常用，后面通过css来设置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left | center | right | 规定表格相对周围元素的对齐方式 |
| border | 1或 “ ” | 规定表格单元格是否拥有边框，默认为“ ”，表示没有边框 |
| cellpadding | 像素值 | 规定单元格边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
4、合并单元格
-
跨行合并：rowspan=“合并单元格的个数”
-
跨列合并：colspan=“合并单元格的个数”
代码：
<table border="1" width="500" height="500" align="center" cellpadding="0" cellspacing="0">
<!-- 第一行 -->
<tr>
<td></td>
<!-- 第二列 往后跨1列合并 把第第一行的三列 合并掉-->
<td colspan="2"></td>
<!-- <td></td> -->
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<!-- 被合并掉的单元格一定要记得 删除掉，不然会继续占有位置 挤出去其他的单元格 -->
<!-- <td></td> -->
<td></td>
<td></td>
</tr>
</table>
代码效果：
6、列表标签
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
基本语法：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注：
1、无序列表的各个列表之间没有顺序之分，是并列的；
2、<ul>中只能嵌套<li>，直接在<ul>标签中输入其他标签或者文字的做法是不被允许的；
3、<li>之间相当于一个容器，可以容纳所有元素；
4、无序列表会带有自己的样式属性，在实际使用时，我们会使用css来设置
代码：
<ul>
<li>Web前端</li>
<li>java</li>
<li>python</li>
<li>UI设计</li>
</ul>
代码效果：
有序列表即为有排列顺序，其各个列表会按照一定的顺序排列定义
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项
基本语法：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
注：
1、<ol>中只能嵌套<li>，直接在<ol>标签中输入其他标签或者文字的做法是不被允许的；
2、<li>之间相当于一个容器，可以容纳所有元素；
3、无序列表会带有自己的样式属性，在实际使用时，我们会使用css来设置
代码：
<h2>粉丝排行榜</h2>
<ol>
<li>刘德华 10000</li>
<li>刘若英 1000</li>
<li>迪丽热巴 100</li>
<li> 古力娜扎 10 </li>
<li>马尔扎哈 1</li>
</ol>
代码效果：
自定义列表通常用于对术语的解释和描述，定义列表的列表是没有任何项目符号
在HTML标签中，<dl>标签用于定义描述列表（或定义列表），该标签会与<dt>（定义项目/名字）和<dd>（描述每一个项目/名字）一起使用
基本语法：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词2解释2</dd>
</dl>
注：
1、<dl>里面只能包含<dt>和<dd>
2、<dt>和<dd>个数没有限制
代码：
<!-- 自定义列表 dl dt dd -->
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
<dt>服务支持</dt>
<dd>服务1</dd>
<dd>服务2</dd>
<dd>服务3</dd>
</dl>
代码效果：
7、表单标签
为了收集用户信息
在HTML中，一个完整的表单通常由表单域、表单控件和提示信息3各部分构成
包含表单的区域。在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递；
<form>会把它范围内的表单元素信息提交给服务器
<formb action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | URL | 指定接收并处理表单数据的服务器程序的URL地址 |
| method | get/post | 设置表单数据提交的方式 |
| name | 名称 | 指定表单的名称，以区分同一个页面中的多个表单域 |
-
input表单控件
1、input输入表单元素
<input>用于收集用户信息特点：
<input>标签为单标签，一行上可以有多个<input>小盒子在
<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多形式：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 复选框 |
| file | 输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码字段。该字段中的字符被掩码 |
| radio | 单选按钮 |
| reset | 重置按钮 |
| submit | 提交按钮 |
| text | 单行输入字段，默认宽度20个字符 |
其他常用属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义 | input元素的名称 |
| value | 自定义 | input元素的值 |
| checked | checked | 规定input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
注：
1、name和value是每个表单元素都有的属性值，主要给后台人员使用
2、name表单元素的名称，要求单选按钮要有相同的name值
3、checked属性主要针对单选按钮和复选按钮
4、maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
1、有些表单元素刚打开就默认显示几个文字
方法：
用户名：<input type="text" value="请输入用户名">
代码效果：
2、区分不同的表单
方法：
用户名：<input type="text" value="请输入用户名" name="username">
注：radio如果是一组，我们必须给他们命名相同的名字
3、单选按钮或复选按钮默认选中
方法：
性别：<input type="radio" name="sex" value="man" checked="checked">男
<input type="radio" name="sex" value="woman" checked="checked">
代码效果：
4、点击
方法一：
性别：
<label for="sex1">男</label>
<input type="radio" name="sex" value="man" checked="checked" id="sex1">
<label for="sex2">女</label>
<input type="radio" name="sex" value="woman" checked="checked" id="sex2">
注：
方法二：
性别：
<label>
<input type="radio" name="sex" value="man" checked="checked">男
</label>
<label>
<input type="radio" name="sex" value="woman" checked="checked">女
</label>
代码效果：
语法：
<select>
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
注：
1、<select>中至少包含一对<option>
2、在<option>中定义selected=“selected”时，当前页即为默认选项
代码：
<form action="#">
籍贯：
<select>
<option value="">--请选择你的城市--</option>
<option value="" >河南</option>
<option value="">海南</option>
<!-- <option value="" selected="selected">云南</option> -->
<option value="" >云南</option>
<option value="" selected>安南</option>
</select>
</form>
代码效果：
语法：
<textarea rows="3" cols="20">
文本内容
</textarea>
注：
1、通过<textarea>标签可以轻松创建多行文本输入框
2、cols=“每行中的字符数” ，rows=“显示的行数”，实际开发中不会使用，都是用css来改变大小
代码：
<form action="#">
<!-- cols 控制的是宽度 -->
<!-- rows 控制的是高度 -->
自我介绍：
<textarea name="introduction" cols="10" rows="20" placeholder="听说你上得了厅堂下得了厨房为啥没对象" >
兄弟你放心吧，爱情都轮不上你，疫情也没你啥事
</textarea>
</form>
代码效果：
扫一扫
1525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
