Web前端基础（四）：HTML元素的分类与嵌套规则

1、HTML元素分为三大类

1）块状元素

• 网页框架基本结构块：html、body、frameset、frame、noframe、iframe
• 表单结构块：form、filedset、legend
• 布局结构块：div
• 段落结构块：p
• 标题结构块：h1-h6
• 列表结构块：ol、ul、dl、dt、dd、menu、dir
• 居中结构块：center
• 预定义结构块：pre
• 引用结构块：blockquote
• 结构装饰线：hr
• 网页标题框：title

2）行内元素

• 行内包含框：span
• 超链接和映射包含框：a、area
• 图像包含框：img
• 格式化信息包含框：abbr、b、bdo、cite、code、del、dfn、em、font、i、ins、kbd、q、s、samp、small、strike、strong、sub、sup、tt、u、var
• 表单对象包含框：button、select、textarea、label
• 可执行的插件或对象包含框：applet、object
• 表格标题包含框：caption
• 无脚本包含框：noscript

3）其他元素

• 1.头部区域隐藏元素
  
  • 头部包含框：head
  • 默认基础字体属性：basefont
  • 链接：link
  • 元信息：meta
  • 脚本：script
  • 样式：style
  • url基础：base
• 2.行内块状元素
  
  • 输入框：input
  • 下拉选框：option
  • 下拉框的分组：optgroup
• 3.列表项元素
  
  • 列表项：li
• 4.结构内隐藏元素
  
  • 图像映射包含框：map
  • 参数：param
  • 换行：br
• 5.表格系列类型元素
  
  • 表格框显示：table
  • 表格行显示：tr
  • 单元格显示：td
  • 表格标题显示：th
  • 表格行组显示：tbody
  • 表格脚注组显示：tfoot
  • 表格标题组显示：thead

2、标签的嵌套规则

• body可以直接包含块状元素、ins、del、script。不可以直接包含行内元素
• ins和del（行内元素）可以包含块状元素或者行内元素，其他任何行内元素都不允许包含块状元素
• p、和h1-h6可以直接包含行内元素和文本信息，但是不允许包含块状元素
• dl元素只允许包含dt、dd，同时dt不能包含块状元素，只允许包含行内元素，对于dd可以包含任何元素
• form元素不能够直接包含input元素。原因在于input元素属于行内元素，form元素仅仅能够包含块状元素
• table元素只能够包含caption、colgroup、col、thead、tbody、tfoot，不能够直接包含tr或者其他任何元素