HTML标签整理

HTML常用标签

1.标题标签

2.段落标签

3.换行标签

4.水平线标签

5.文本格式化标签

strong、ins、em、del，表示的强调语义更强烈！

6.媒体标签 (图片标签、音频标签、视频标签）

图片标签

img标签常见属性

音频标签

音频标签目前支持三种格式：MP3、Wav、Ogg
标签常用属性

视频标签

视频标签目前支持三种格式：MP4 、WebM 、Ogg
常用属性

7.链接标签

a标签 + href属性 + target属性

8.列表标签

无序列表最常用，有序列表偶尔用，自定义列表底部导航用

无序列表

有序列表

自定义列表

9.表格标签

表格的相关属性
实际开发时针对于样式效果推荐用CSS设置

展示标题（caption标签书写在table标签内部，th标签书写在tr标签内部（用于替换td标签）

表格的结构标签（可省略）

合并单元格（只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot））

10.表单标签

input系列标签

input标签可以通过type属性值的不同，展示不同效果。

常用属性：


type属性值为radio时：

type属性值为checkbox时：

type属性值为file时：

其他type属性值

如果需要实现以上按钮功能，需要配合form标签使用。form使用方法：用form标签把表单标签一起包裹起来即可

button按钮标签

select下拉菜单标签

select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected：下拉菜单的默认选中

textarea文本域标签

可输入多行文本的表单控件
常用属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
注意：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置

label标签

使用场景：常用于绑定内容与表单标签的关系
使用方法①：

1. 使用label标签把内容（如：文本）包裹起来
2. 在表单标签上添加id属性
3. 在label标签的for属性中设置对应的id属性值

使用方法②：

1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2. 需要把label标签的for属性删除即可
   label中的for属性规定了label与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。
   label中的for属性规定了label与哪个表单元素绑定。for属性的值和表单元素的id值一样，即可完成该label标签与该表单元素的绑定。

11.语义化标签

（1）没有语义的布局标签-div和span
实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
Ø div标签（块状标签）：一行只显示一个（独占一行）
Ø span标签：一行可以显示多个
（2）有语义的布局标签
在HTML5新版本中，推出了一些有语义的布局标签供开发者使用。

12.字符实体

在网页中展示特殊符号效果时，需要使用字符实体替代。