# HTML常用标签的分类
### 块级标签
- 块级标签有
- div 区分大模块
- h1-h6 标题
- p 段落
- ul>li 无序列表
- ol>li 有序列表
- dd>dt dd 自定义列表
- table>tr>td 表格>行>列
- 块级标签的特点
- 独占一行,从上到下排布
- 可以设置CSS盒子模型的所有属性(width/height/border/margin/padding)
- 当不设置宽高时,宽度继承父元素的宽度 ,高度是由内容决定的
- 可以嵌套其他元素
- P标签不能嵌套P标签,也不能嵌套其他块级标签
- dt,dd,h1-h6,一般不会嵌套块级元素,一般嵌套行内标签(a/img)
### 行内标签
#### 行内标签
- 行内标签有
- span 区分行内小模块
- em/i 斜体
- strong/b 加粗
- a 超链接、锚点
- label 描述表单功能
- sup 上标
- sub 下标
行内标签的特点
- 在一行显示,从左向有排布
- 不可以设置宽高(width/height)
- 不可以嵌套块级标签,可以嵌套行内标签
- 在编辑代码时,行内元素与行内元素之间出现空格或回车时,会有间隙问题
- 解决办法:给父元素或者body设置font-size:0;会出现css继承问题,子元素会继承font-size:0;需要给子元素重新设置font-size值即可
- 基线对齐问题
- 给所有的行内元素设置 vertical-align
#### 行内块级标签
- 行内块级标签有
- img 图片
- input 添加表单功能
- textarea 文本域
- select 下拉框
- 行内块级标签的特点
- 在同一行显示,从左向右排布
- 可以设置宽高 (width/height)
- 在编辑代码时,行内元素与行内元素之间出现空格或回车时,会有间隙问题
- 解决办法:给父元素或者body设置font-size:0;会出现css继承问题,子元素会继承font-size:0;需要给子元素重新设置font-size值即可
- 基线对齐问题
- 给所有的行内元素设置 vertical-align
### 块级标签与行内标签的相互转化
**#### display **
#### inline 行内
#### inline-block 行内块
#### block 块级,显示
#### none 隐藏、消失
#### vertical-align 改变行内元素的对齐方式
- top所有同级或平级元素之间,去找高度最高的顶部进行对齐
- middle所有同级或平级元素之间,去找高度最高的中部进行对齐
- bottom所有同级或平级元素之间,去找高度最高的底部进行对齐
- 百分比%/像素px也是可以的
### html5新增标签
作用:让结构一目了然
|标签|描述|
|--|--|
|header|头部区域|
|footer|尾部区域|
|nav|导航区域|
|aside|侧边栏|
|section|区分大模块等同div|
|video|视频|
|audio|音频|
|articel|文章|
|figure|配图|
|figcaption|配图说明|
|main|主体区域|
src="" 标签属性,视频、音频路径/地址
controls 让控件显示
autoplay 自动播放
loop 循环播放
**HTML5新增标签的分类**
块级标签有哪些?
header / footer / nav / aside / section / main / figure / figcaption / article
行内块级标签有哪些?
audio / video