# 语义化标签

# 下面是一些常用语义化标签

<body>
    <header>header</header>
    <section>
        <aside></aside>
        <article></article>
        <p>这是ruby标签：</p>
        <ruby>
            人<rt>ren</rt>
            <rp>该标签无法显示</rp>
        </ruby>
        <p>这是details标签：</p>
        <details>
            <summary>点击查看更多</summary>
            <p>这是点击后的内容</p>
        </details>
        <p>这是mark标签：</p>
        <p>我最喜欢<mark>数学</mark></p>
        <p>这是progress标签：</p>
        <progress value="30" max="100"></progress>

        <p>这是datalist标签：</p>
        <input type="text" list="cars">
        <datalist id="cars">
            <option value="宝马"></option>
            <option value="奔驰"></option>
            <option value="奥迪"></option>
        </datalist>
        <!-- <embed src="swf/flash5924.swf" tyep="application/x-shockwave-flash">
        </embed> -->
    </section>
    <footer>footer</footer>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

TIP

点击此处 (opens new window)，查看上述代码在浏览器上的表现。

<header> 定义了文档的头部区域，在一个文档中可以定义多个<header>元素。
<footer> 定义文档页脚，它不只是页面的最底部，在文档中也可以定义多个。
<article> 定义页面独立的内容区域，标签定义的内容本身必须是有意义且必须独立于文档的其他部分，可用在的地方：博客文章，新闻，评论等。
<aside> 定义页面的侧边栏内容。
<time> 定义时间或日期，time 标签中的 datetime 属性定义的时间不会被显示，但可能被其他应用使用。
<ruby> 加注释，ruby 标签有两个子元素，rt 注释的内容，rp 是该标签不显示时显示的文字。应用场景：加注释拼音等。
<details> 用于描述文档或者文档某一部分细节，summary 是 details 元素的标题。
<mark> 定义带有几号的文本，它会给你想要突出显示的文本加个背景色
<progress> progress 显示数据的进度，属性 value 指定当前值，max 最大值，最小值 0 不用设置。
<nav> 定义导航栏
<section> section 一般有两个作用，1.定义文档中的节，和 div 类似。2.定义文章，这时一般带有标题。
<video> 定义视频，属性 src 引入资源，controls 视频的控制控件
<audio> 该标签可定义声音，及其他的音频文件，不加 controls 不显示音频的控制界面
<datalist> 提示可能的值，datalist 及其选项不会被显示出来，它仅仅是合法输入值的列表使用 input 元素的 list 属性来邦定 datalist，下面选项使用 option 定义。
<embed> 定义插入的内容，如插件，flash，标签中间不要加内容会显现出来
<canvas> canvas 画布只是个容器，你可以通过控制坐标在 canvas 上绘制图形，一般配合 js 可以实现非常复杂的动画效果。

# 语义化标签的好处

HTML 结构清晰
代码可读性较好
无障碍阅读
搜索引擎可以根据标签的语言确定上下文和权重问题
移动设备能够更完美的展现网页（对 css 支持较弱的设备）
便于团队维护和开发

← 概述离线缓存 →