HTML常用标签分类

块级标签

块级标签有哪些

• div 区分大模块
• h1~h6 标题
• p 段落
• ul>li 无序列表
• ol>li 有序列表
• table>tr>td 表格>行>列

块级标签的特点

• 独占一行，从上到下排布
• 可以设置CSS盒子模型的所有属性 （width/height/border/margin/padding)
• 当不设置宽高时，宽是继承父元素的宽度，高是由内容决定
• 可以嵌套其他元素
  • p标签不能嵌套p标签，

行内标签

行内标签

• span 区分行内小模块
• em/i 斜体
• strong/b 加粗
• a 超链接/锚点
• label 描述表单功能的

行内标签的特点

• 在一行显示，从左向右排布
• 不能设置宽高(width/height)，宽高是由内容决定的
• 不可以嵌套块级标签，可以嵌套行内标签
• 在编辑代码时，行内元素与行内元素之间出现空格或回车时，会有间隙出现
  • 解决办法：给父元素或者body设置font-size：0;会出现css元素继承问题,子元素会继承font-size:0;需要给子元素重新设置font-size值即可
• 基线对齐问题

行内块级标签

行内块级标签有哪些？

• img 图片
• input 添加表单功能的
• textarea 文本域
• select 下拉框

行内块级标签的特点

• 在一行显示，从左向右排布
• 可以设置宽高(width/height)
• 在编辑代码时，行内元素与行内元素之间出现空格或回车时，会有间隙出现
  • 解决办法：给父元素或者body设置font-size：0;会出现css元素继承问题,子元素会继承font-size:0;需要给子元素重新设置font-size值即可
• 基线对齐问题
  • 给所有行内元素设置vertical-align属性

块级标签与行内标签之间的相互转化

display

block 块、显示

inline 行内

inline-block 行内块

none 隐藏、消失

给HTML元素设置display:none时，html元素会在页面中完全消失、隐藏。如果再想让这个消失的html元素显示在页面中，给这个html元素设置display:block; 显示

vertical-align 改变行内元素的对齐方式

• top 所有的同级（平级）元素之间，去找（高度）最高的顶部进行对齐
• middle 所有的同级（平级）元素之间，去找（高度）最高的中部进行对齐
• bottom 所有的同级（平级）元素之间，去找（高度）最高的底部进行对齐
• 百分比 % / 像素 px

background:red url(pic_16.png) no-repeat 30px 50px;
background-size: 100px 60px;