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

96
梁同学de自言自语
2018.01.13 12:00 字数 1791

第2章 语义化

2.1 语义化简介

  • HTML的精髓在于标签的语义。大部分标签都有它自身的语义,比如<p>标签,表示paragraph,一个段落;<h1>,表示header level 1,一级标题。
  • 前端的三大核心技术HTML、CSS和JavaScript,HTML编写网页的结构、CSS处理网页的外观、JavaScript控制网页的行为。其实HTML才是最基础也是最重要的,好比盖房子,房子装饰得再漂亮,如果根基不稳,也容易倒塌。
  • 编写语义良好的页面极其重要,不但有利开发调试和后期维护,也更利于搜索引擎优化。

2.2 标题语义化

  • 标题标签(h1~h6)在搜索引擎优化(SEO)中占有非常重要的地位,其中<h1>权重最高,<h6>权重最低。
  • 关于标题h1~h6的语义化:
    • 一个页面只有一个<h1>标签 :好比一篇文章只有一个主标题,<h1>表示页面中最高层级的标题,搜索引擎会赋予<h1>标签最高权重。如果一个页面出现多个<h1>标签,可能会被判以作弊;
    • h1~h6之间不要出现断层:虽然,我们通常只用到标题h1~h4,而不需要把6个标签全都用上,但标题的顺序应该是不应该出现断层的,比如“h1、h3、h4”而漏掉“h2”;
    • 结构和样式相分离
      1. 不要因为外观样式而滥用h1~h6标签:比如一个页面中,为了调整文本字体大小或者加粗字体而使用标题标签;
      2. 也不要用DIV来替代页面的标题

2.3 图片语义化

  • 如何更语义化的定义<img>标签?

alttitle属性:

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

<figure><ficaption>标签:

<figure>
    <img src="" alt="">
    <figcaption>图注描述</figcaption>
</figure>
  • <figure>元素代表一段独立的内容,经常和<figcaption>配合使用。这种组合标签表示在页面中引用图片、插图、表格、代码段等,比如可以实现“图片 + 图注”的效果。

2.4 表格语义化

  • 要做好表格的语义化,首先要注意<table>标签应该用来展示表格形式的数据,而不是用作页面布局。
  • 标签 说明
    table 表格
    caption 表格标题
    thead 语义划分表格的表头
    tbody 语义划分表格的表身
    tfoot 语义划分表格的表尾
    tr
    th 表头单元格
    td 表格单元格
    另外可以配合使用thtbody等表格标签,使得表格语义更良好,结构更清晰:
标签 说明
table 表格
caption 表格标题
thead 语义划分表格的表头
tbody 语义划分表格的表身
tfoot 语义划分表格的表尾
tr
th 表头单元格
td 表格单元格
  • 实例:
<table>
    <caption>三年二班成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>周杰伦</td>
            <td>80</td>
            <td>80</td>
            <td>80</td>
        </tr>
        <tr>
            <td>韩红</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
        <tr>
            <td>张杰</td>
            <td>100</td>
            <td>100</td>
            <td>100</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均分</td>
            <td>90</td>
            <td>90</td>
            <td>90</td>
        </tr>
    </tfoot>
</table>

2.5 表单语义化

<label>标签的for属性

<div>
    <label for="userName">用户名:</label>
    <input type="text" id="userName" name="userName">
</div>
  • 根据W3C规范的定义,<label>标签是描述输入控件的说明文字。
  • 其中<label>标签的for属性值,应该填入所关联的表单元素控件的idfor属性的作用,一是增强了语义;二是增强操作便捷性,使得鼠标点击范围扩大至<label>元素上。

<fieldset><legend>标签

<fieldset disabled="disabled">
    <legend>补充信息</legend>
    <div>
        <label for="job">职称:</label>
        <input type="text" id="job" name="job">
    </div>
    <div>
        <label for="address">地址:</label>
        <input type="text" id="address" name="address">
    </div>
</fieldset>
  • <fieldset><legend>标签用于为表单元素进行分组。
  • 分组除了可以增强表单的语义,也可以通过<fieldset>元素的disabled属性来禁用分组内的元素。

2.6 其他语义化

不要滥用<br/>换行标签

<p>
    <p>深圳市</p><br/>
    <p>南山区</p><br/>
    <p>深南大道1101号</p>
</p>
  • 根据W3C规定,<br/>标签仅用于段落中的换行,也就是说,<br/>标签只应该出现在<p>标签之中。 而通过<br/>标签进行页面的换行,甚至通过多个<br/>标签来调整元素之间的间距是不符合HTML语义化的。

使用<ul>无序列表标签

<ul>
    <li>
        <span class="point hot"></span>
        走上穷兵黩武,台湾恐难承受
    </li>
    <li>
        <span class="point"></span>
        新版历史教科书删去文革
    </li>
    <li>
        <span class="point"></span>
        2040年日本独居家庭将达四成
    </li>
</ul>
  • 对于列表型的数据,比如菜单、新闻列表等,建议使用<ul>无序列表或者<ol>有序列表,而不是div来实现。

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

使用<strong><em>标签

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

使用<del><ins>标签

<div>
    <p>越南进口火龙果</p>
    <p>
        <del>原价:¥36.90/kg</del>
    </p>
    <p>
        <ins>现在仅售:¥30/kg</ins>
    </p>
</div>
  • <del><ins>标签配合使用,可以实现商品原价和优惠价的HTML结构。
  • <del>标签表示“delete”,用于定义被删除的文本;<ins>标签表示“insert”,用于定义被更新的文本。

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

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

2.7 语义化验证

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

2.8 HTML5舍弃的标签

  • HTML5新增了一些标签,同时也舍弃了一些标签。
  • 舍弃的标签主要有两大类:
    • 仅仅为了定义样式,而没有任何语义的标签。比如<s><font><center>等;
    • 很少使用或已经被新标签替代的。比如<frame><dir>等;
一周一章前端书
Web note ad 1