2_H5新標簽

header footer

header元素（標簽）

用于設置一個頁面的標題部分，通常會包含標題，LOGO，導航等

通常會放在文章的頭部

footer元素（標簽）

通常用于設置一個網(wǎng)頁的底部區(qū)域，會包含友情鏈接，版權聲明，文件建立日期，聯(lián)系方式等

通常會放在頁面的頁腳

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{height:708px;}
        header{width: 100%;height: 10%;background: green;}
        footer{width: 100%;height: 10%;background: blue;}
        #div0{width: 100%;height: 80%;background: yellow;}
        #div1{width: 20%;height: 100%;background: red;float: left;}
        #div2{width: 80%;height: 100%;background: DarkGray;float: left;}
    </style>
</head>
<body>
    <header>我是頭</header>
    <div id="div0">
        <div id="div1">我是左側欄</div>
        <div id="div2">我是右側邊欄</div>
    </div>
    <footer>我是尾</footer>
</body>
</html>
header_footer.png

article元素（標簽）

用于定義一個獨立的內容區(qū)塊，比如一篇文章，一篇博客，一個帖子，論壇的一段用戶評論，一篇新聞消息等.

article元素內可以嵌套其他元素，它可以有自己的頭、尾、主體等內容。使用時要特別注意內容的獨立性，一般對于獨立完整的內容才使用article元素，如果只是一段內容的話應該使用section元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <article>
        <header>
            <h3>文章標題</h3>
            <h5>作者：MM</h5>
        </header>
        <p>我是正文*******************<br>*******************<br>*******************<br></p>
        <article>
            <header><h4>網(wǎng)友1</h4></header>
            <p>評論1</p>
            <footer>今天</footer>
        </article>
        <article>
            <header><h4>網(wǎng)友2</h4></header>
            <p>評論2</p>
            <footer>明天</footer>
        </article>
        <footer>
            <p>網(wǎng)頁尾部</p>
        </footer>
    </article>
</body>
</html>
Article.png

section元素（標簽）

  1. 用來定義文章中的章節(jié)(通常應該有標題和段落內容)
  2. 用來定義文檔中特定內容的區(qū)塊，可視為一個區(qū)域分組元素，用來給頁面上的內容分塊。
  3. section元素可以定義文檔的主體內容。
  4. 用一句話來概括它的作用就是給內容分段，給頁面分區(qū)
  5. 注意他與div的區(qū)別，div強調在形式上的獨立性，section強調的是內容上的獨立性，注意它的語義。

article元素和section元素的區(qū)別

語義不同

  1. article元素更強調內容的獨立性
  2. section元素更強調內容的關聯(lián)性
  3. article元素是獨立完整的內容，section元素頁面內容分塊

相同點

  1. 本質上都是帶有語義的div塊元素
  2. 分別可以看作<div id="section">和<div id="article">

aside元素

  1. aside元素通常用來設置側邊欄。
  2. 用于定義article元素之外的內容，前提是這些內容與article元素內的內容相關。
  3. 同時也可嵌套在article元素內部使用，作為主要內容的附屬信息，比如與主內容有關的參考資料，名詞解釋等。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x</title>
    <style type="text/css">
        header{width: 100%;height: 10%;background: green;}
        footer{width: 100%;height: 10%;background: yellow;float: left;}
        aside{width: 20%;height: 80%;background: DarkGray;float: left;}
        section{width: 80%;height: 80%;background: Pink;float: left;}
    </style>
</head>
<body style="margin:0;height:708px">
    <header>header</header>
    <aside>aside</aside>
    <section>section</section>
    <footer>footer</footer>
</body>
</html>
aside.png

nav元素

  1. 用來定義目錄、導航欄、超鏈接
  2. 并非所有的超鏈接都放在nav元素中，通常只把一個文檔中的主導航欄放在nav中
  3. 在文章頁面中，nav還可以用來給一個文字做一個目錄的超鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x</title>
    <style type="text/css">
        header{width: 100%;height: 10%;background: green;}
        footer{width: 100%;height: 10%;background: yellow;float: left;}
        aside{width: 20%;height: 80%;background: DarkGray;float: left;}
        section{width: 80%;height: 80%;background: Pink;float: left;}
        nav{width: 100%;height: 50%;background: #e0ffff;text-align: center;padding: 1px}
        li{display: inline;}
        a{text-decoration: none;}
    </style>
</head>
<body style="margin:0;height:708px">
    <header>
        header
        <nav>
        <ul>
            <li><a href="">首頁</a></li>
            <li><a href="">木木</a></li>
            <li><a href="">屎蛋</a></li>
            <li><a href="">逗逗</a></li>
        </ul>
    </header>
    <aside>aside</aside>
    <section>section</section>
    <footer>footer</footer>
</body>
</html>
nav.png

time元素

微格式的概念

HTML5中的微格式，是一種利用HTML5中的新標簽對網(wǎng)頁添加附加信息的方法，附加信息例如新聞事件發(fā)生的日期和時間，文章發(fā)表的日期等。

HTML5中的微格式是為了簡化瀏覽器對數(shù)據(jù)的提取，方便搜索引擎的搜索.

time元素

  1. time是HTML5新增的元素
  2. time元素代表24小時中的某個時刻或某個日期，表示時刻時允許帶時差。它可以定義很多格式的日期和時間
  3. datetime屬性中日期與時間之間要用"T"文字分隔，"T"表示時間。請注意倒數(shù)第二行，時間加上Z文字表示給機器編碼時使用UTC標準時間，表示向機器編碼另一地區(qū)時間，如果是編碼本地時間，則不需要添加時差。
  4. pubdate屬性是個可選標簽，加上它搜索引擎/瀏覽器就可以很方便的識別出那個日期是文章、新聞的發(fā)表日期。

time元素示例

<time datetime="2016-11-30"> 2016年11月30日</time>
<time datetime="2016-11-30T20:00"> 2016年11月30日晚上8點</time>
<time datetime="2016-11-30T20:00Z"> 2016年11月30日晚上8點</time>
<time datetime="2016-11-30T20:00+09:00">美國時間2016年11月30日8點</time>
<time datetime="2016-11-30" pubdata="pubdata">文章發(fā)表于2016年11月30日</time>

hgroup元素

通常用來給標題分組，通常放在header中；但是并非強制要求，也不是絕對的。

address元素

通常用用來說明作者的聯(lián)系信息，例如名字，E-mail，電話，地址等
address元素中的內容會以斜體顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        hgroup{background: yellow}
    </style>
</head>
<body>
    <header>
        <hgroup>
            <h1>主</h1>
            <h1>副</h1>
        </hgroup>
    </header>
    <address>
        我家住在黃土高坡
    </address>
</body>
</html>
hgroup_address.png

新布局的優(yōu)點

  1. 更注重于內容而不是形式
  2. 對人的友好：更加的語義化，高度的描述性，更加的直觀，增加了代碼的可讀性。
  3. 對計算機的友好：瀏覽器更容易解析，搜索引擎更容易抓取文檔的內容
  4. 代碼更加的簡潔潔

figure元素

figure/figcaption都是HTML5中新增的元素
figure元素是一個媒體組合元素，也就是對其他的媒體元素進行組合，比如：圖像、圖表等等

figcaption元素

用來給figure元素定義標題。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        head{}
    </style>
</head>
<body style="background: #FFB6C1" >
    <h2>我是標題</h2>
    <p>===========================</p>
    <figure>
        <img src="p1.jpg" alt="" width="300"><img src="p1.jpg" alt="" width="300">
    </figure>
    <figcaption>我的作品1</figcaption>
    <figure>
        <img src="p3.jpg" width="300"><img src="p4.jpg" width="300">
    </figure>
    <figcaption>我的作品2</figcaption>
</body>
</html>
figure_figcaption.png
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • HTML5 標簽comment 注釋標簽用于在源文檔中插入注釋。注釋內容不會被瀏覽器顯示。為代碼編寫注釋的好處是...
    才気莮孒閱讀 4,082評論 1贊 25
  • 練習 name="viewport"：屏幕設定 maximum-scale=1.0,minimum-scale=1...
    Zd_silent閱讀 195評論 0贊 0
  • 新增的主體結構元素 主體結構元素：article、section、nav、aside非主體結構元素：header、...
    oWSQo閱讀 3,544評論 0贊 0
  • 你要是不走進陽光 就會被黑暗吞噬
    尾戒不摘閱讀 152評論 0贊 0
  • 去銀行辦卡，被問及職業(yè)。答曰，學生。 1998年9月1日，我成為了一名小學生，那天我爸爸背著我去上的學，學校好遠好...
    竇家香閱讀 149評論 0贊 0