一周一章前端书·第13周：《HTML与CSS进阶教程》S01E02

第2章 语义化

2.1 语义化简介

• HTML的精髓在于标签的语义。大部分标签都有它自身的语义，比如

  标签，表示paragraph，一个段落；

  ，表示header level 1，一级标题。

• 前端的三大核心技术HTML、CSS和JavaScript，HTML编写网页的结构、CSS处理网页的外观、JavaScript控制网页的行为。其实HTML才是最基础也是最重要的，好比盖房子，房子装饰得再漂亮，如果根基不稳，也容易倒塌。
• 编写语义良好的页面极其重要，不但有利开发调试和后期维护，也更利于搜索引擎优化。

2.2 标题语义化

• 标题标签（h1~h6）在搜索引擎优化(SEO)中占有非常重要的地位，其中

  权重最高，

  权重最低。

• 关于标题h1~h6的语义化：
  • 一个页面只有一个

    标签 ：好比一篇文章只有一个主标题，

    表示页面中最高层级的标题，搜索引擎会赋予

    标签最高权重。如果一个页面出现多个

    标签，可能会被判以作弊；

  • h1~h6之间不要出现断层：虽然，我们通常只用到标题h1~h4，而不需要把6个标签全都用上，但标题的顺序应该是不应该出现断层的，比如“h1、h3、h4”而漏掉“h2”；
  • 结构和样式相分离：
    1. 不要因为外观样式而滥用h1~h6标签：比如一个页面中，为了调整文本字体大小或者加粗字体而使用标题标签；
    2. 也不要用DIV来替代页面的标题

2.3 图片语义化

• 如何更语义化的定义标签？

alt和title属性：

• alt和title属性都表示图片的描述。
• 其中alt的描述文字是给搜索引擎看的并且当图片挂掉时，会显示alt属性值的文字；
• title是给用户看的，当鼠标悬停在图片上时，则显示title中的内容；
• 所以我们应该注意，alt是必填属性，，在SEO中有一定权重；而title是选填属性，可加可不加。

和标签：

    
    
图注描述

• 元素代表一段独立的内容，经常和

  配合使用。这种组合标签表示在页面中引用图片、插图、表格、代码段等，比如可以实现“图片 + 图注”的效果。

2.4 表格语义化

• 要做好表格的语义化，首先要注意标签应该用来展示表格形式的数据，而不是用作页面布局。

  标签	说明
  table	表格
  caption	表格标题
  thead	语义划分表格的表头
  tbody	语义划分表格的表身
  tfoot	语义划分表格的表尾
  tr	行
  th	表头单元格
  td	表格单元格

  另外可以配合使用th、tbody等表格标签，使得表格语义更良好，结构更清晰：

标签	说明
table	表格
caption	表格标题
thead	语义划分表格的表头
tbody	语义划分表格的表身
tfoot	语义划分表格的表尾
tr	行
th	表头单元格
td	表格单元格

• 实例：

    
三年二班成绩表
    

        

            
姓名
            
语文
            
数学
            
英语
        
    
    

        

            
周杰伦
            
80
            
80
            
80
        
        

            
韩红
            
90
            
90
            
90
        
        

            
张杰
            
100
            
100
            
100
        
    
    

        

            
平均分
            
90
            
90
            
90
        
    

2.5 表单语义化

标签的for属性

    用户名:
    

• 根据W3C规范的定义，标签是描述输入控件的说明文字。
• 其中标签的for属性值，应该填入所关联的表单元素控件的id。for属性的作用，一是增强了语义；二是增强操作便捷性，使得鼠标点击范围扩大至元素上。

和

标签

    
补充信息
    

        职称：
        
    
    

        地址：
        
    

• 和

  标签用于为表单元素进行分组。
• 分组除了可以增强表单的语义，也可以通过
  元素的disabled属性来禁用分组内的元素。

2.6 其他语义化

不要滥用
换行标签

    
深圳市

    
南山区

    
深南大道1101号

• 根据W3C规定，
标签仅用于段落中的换行，也就是说，
标签只应该出现在

  标签之中。 而通过
标签进行页面的换行，甚至通过多个
标签来调整元素之间的间距是不符合HTML语义化的。

使用

无序列表标签

    

        
        走上穷兵黩武，台湾恐难承受
    
    

        
        新版历史教科书删去文革
    
    

        
        2040年日本独居家庭将达四成
    

• 对于列表型的数据，比如菜单、新闻列表等，建议使用
  无序列表或者
  有序列表，而不是div来实现。

  由于有序列表标签前的数字外观是固定的，所以大多数情况都是使用无序列表。

  使用和标签

  文本加粗
  文本倾斜
  

  • 在表现上，标签是加粗的文本，标签是斜体文本。
  • 而在W3C规定中，和标签的文本被视为关键字，搜索引擎也赋予了一定的权重。
  • 基于结构和样式分离的原则，通常我们做法是：先通过CSS reset去除和标签的默认样式，然后只为页面中的重要文本加和标签。
  • 和标签的区别：
    • 表示emphasis(强调)，比如“我喜欢胡萝卜”和“我喜欢胡萝卜”强调的东西就不一样；
    • 表示strong importance for its contents(十分重要的内容)，单独对某个句子增加其重要性，比如“警告！该链接不安全 ，是否继续访问？”

  使用和标签

  
      
  越南进口火龙果
      
  
          原价：￥36.90/kg
      
      
  
          现在仅售：￥30/kg
      
  
  

  • 和标签配合使用，可以实现商品原价和优惠价的HTML结构。
  • 标签表示“delete”，用于定义被删除的文本；标签表示“insert”，用于定义被更新的文本。

  页面显示图片该用标签还是CSS的background-img

  • 在页面上显示一张图片，可以用HTML的方式（标签），也可以用CSS的方式（样式背景图片background-img:(url)），那什么情况该采用具体哪种方式呢？
  • 答案是根据HTML语义来做判断，如果图片是作为HTML文档的一部分，并且希望搜索引擎能识别时，就该使用HTML的方式；而如果图片仅仅是起到修饰作用，被不被搜索引擎识别也无所谓的情况下，就该使用CSS的方式。

  2.7 语义化验证

  • 判断HTML的语义是否良好的最简单方式，就是禁用CSS样式，检查页面是否仍然具备很好的可读性。一个语义良好的页面，在“CSS裸奔”之后，可读性也非常高。

  2.8 HTML5舍弃的标签

  • HTML5新增了一些标签，同时也舍弃了一些标签。
  • 舍弃的标签主要有两大类：
    • 仅仅为了定义样式，而没有任何语义的标签。比如、、等；
    • 很少使用或已经被新标签替代的。比如、等；