HTML进阶教程

HTML进阶

一、HTML、XML、HTML5的本质区别：

• HTML：指HTML4.01 （HyperText Mark-up Language 超文本标记语言）
• XML：指HTML的过渡版 （EXtensible HyperText Mark-up Language 扩展的超文本标记语言）
• HTML5：指HTML的升级版

二、语义化

优点：1）利于开发调试和后期维护 2）利于搜索引擎优化

2.1 标题语义化

• 一个页面只能有一个h1便签
• h1~h6之间不要断层
• 不要用h1~h6来定义样式
• 不要用div来代替h1~h6

2.2 图片语义化

• alt属性（必需）：图片描述，给搜索引擎看的，当图片无法显示时，页面会显示alt中的文字
• title属性（可选）：图片描述，给用户看的，当鼠标移到图片上时，会显示title中的文字

  <img src="" alt="图片描述(搜索引擎看)" title="图片描述(用户看)"/>
  

• figure元素：用于包含图片和图注
• figcaption元素：用于表示图注文字

  <!--figure元素用来包含图片和图注、figcaption元素用于表示图注文字-->
  <figure>
      <img src="" alt=""/>
      <figcaption></figcaption>
  </figure>
  

2.3 表格语义化

• thead、tbody、tfoot三个标签的语义:表头、表身、表脚。有了这几个标签，表格语义更加良好，结构更加清晰

2.4 表单语义化

• label标签:用于显示在输入控件旁边的说明性文字，将表单元素和说明文字关联起来
  • for属性的2个作用:
    1. 语义上绑定了label元素和表单元素
    2. 增强了鼠标可用性