浓缩解读前端系列书籍程序员一周一章前端书

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

2018-01-13  本文已影响61人  梁同学de自言自语

第2章 语义化

2.1 语义化简介

2.2 标题语义化

2.3 图片语义化

alttitle属性:

<img src='' alt='给搜索引擎的图片描述' title='给用户看的图片描述'>

<figure><ficaption>标签:

<figure>
    <img src="" alt="">
    <figcaption>图注描述</figcaption>
</figure>

2.4 表格语义化

标签 说明
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>

<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>

2.6 其他语义化

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

<p>
    <p>深圳市</p><br/>
    <p>南山区</p><br/>
    <p>深南大道1101号</p>
</p>

使用<ul>无序列表标签

<ul>
    <li>
        <span class="point hot"></span>
        走上穷兵黩武,台湾恐难承受
    </li>
    <li>
        <span class="point"></span>
        新版历史教科书删去文革
    </li>
    <li>
        <span class="point"></span>
        2040年日本独居家庭将达四成
    </li>
</ul>

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

使用<strong><em>标签

<strong>文本加粗</strong>
<em>文本倾斜</em>

使用<del><ins>标签

<div>
    <p>越南进口火龙果</p>
    <p>
        <del>原价:¥36.90/kg</del>
    </p>
    <p>
        <ins>现在仅售:¥30/kg</ins>
    </p>
</div>

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

2.7 语义化验证

2.8 HTML5舍弃的标签

上一篇 下一篇

猜你喜欢

热点阅读