html5 语义化标签

 

html的标签语义化：

直观的认识标签的用途和属性的作用。

直观的语义化标签：

1.header<定义头部>
2. nav<导航栏>
3. article<文章>
4. section<段>
5. footer<尾部>
6. aside<侧边栏>
7. datalist<下拉列表/和文本框一起用>

<!DOCTYPE html>   

<html>   
<head>  
    <meta charset="utf8">  
    <title>HTML5</title>  
    <link rel="stylesheet" href="html5.css">  
</head>  
<header>  
    <h1>Title</h1>  
    <h2>Subtitle</h2>  
</header>  
<aside>  
    <nav>  
        <h2>Nav1</h2>  
        <ul>  
            <li>Link1</li>  
            <li>Link2</li>  
        </ul>  
    </nav>  
    <nav>  
        <h2>Nav2</h2>  
        <ul>  
            <li>Link3</li>  
            <li>Link4</li>  
        </ul>  
    </nav>  
</aside>  
<article>     <header>  
        <hgroup>  
            <h1>HTML5 is beautiful</h1>  
            <h2>Semantic, Natural, Simple and Useful</h2>  
        </hgroup>  
    </header>  
    <section>  
        <h2>Semantic</h2>  
        <p>HTML5 is Semantic.</p>  
    </section>  
    <section>  
        <h2>Natural</h2>  
        <p>HTML5 is Natural.</p>  
    </section>  
</atricle>  
<footer>  
    <a href="http://www.w3.org/TR" mce_href="http://www.w3.org/TR">W3C</a>  
</footer>  
</html>   

新特性

HTML5 中的一些有趣的新特性：

1.用于绘画的 canvas 元素

2.用于媒介回放的 video 和 audio 元素

3.对本地离线存储的更好的支持

4.新的特殊内容元素， article、footer、header、nav、section

5.新的表单控件， calendar、date、time、email、url、search 

posted @ 2015-07-12 19:42  +爱在一起+  阅读(193)  评论(0)  编辑  收藏  举报