什么是語義元素?一個語義元素能夠清楚的描述其意義給瀏覽器和開發(fā)者 無語義 元素: <div> 和 <span> - 無需考慮內(nèi)容 語義 元素: <form>,<table> 和 <img> - 清楚的定義了它的內(nèi)容 瀏覽器支持Internet Explorer 9+,Firefox,Chrome,Safari 和 Opera 支持語義元素 注意: Internet Explorer 8 及更早版本不支持該元素，不過我們在文章的的末尾提供了兼容的解決方法 html5 中新的語義元素在 html5 之前，許多的網(wǎng)站都包含了以下 HTML 代碼 <div id="nav"> <div> <div id="footer"> 用來指明導(dǎo)航鏈接,頭部,以及尾部 HTML5 則提供了新的語義元素來明確一個 Web 頁面的不同部分
<header> <nav> <section> <article> <aside> <figcaption> <figure> <footer> HTML5 <section> 元素元素 <section> 用于定義文檔中的節(jié) ( section、區(qū)段)，比如章節(jié)、頁眉、頁腳或文檔中的其它部分 <section> 可以包含一組內(nèi)容及其標(biāo)題 <section> <h1>日志</h1> <p>是我在乎，才會喜怒無常</p> </section> HTML5 <article> 元素元素 <article> 用于定義獨(dú)立的內(nèi)容 <article> 用法
<article> <h1>全部評論</h1> <p>愛你，就是一萬年</p> </article> HTML5 <nav> 元素元素 <nav> 標(biāo)簽定義導(dǎo)航鏈接的部分 <nav> 元素用于定義頁面的導(dǎo)航鏈接部分區(qū)域，但是，不是所有的鏈接都需要包含在 <nav> 中 <nav> <a href="/html">HTML 5</a> | <a href="/css">css 3</a> | <a href="/JavaScript">JavaScript</a> | <a href="/jquery">jQuery</a> </nav> HTML5 <aside> 元素元素 <aside> 定義了頁面主區(qū)域內(nèi)容之外的內(nèi)容 ( 比如側(cè)邊欄 ) <aside> 元素的內(nèi)容應(yīng)與主區(qū)域的內(nèi)容相關(guān) <h3>我的日志</h3> <p>今天天氣好冷，心情特沮喪</p> <aside> <h4>每日正能量</h4> <p>明天就會天晴，還你以一個艷陽高照天</p> </aside> HTML5 <header> 元素元素 <header> 描述了文檔的頭部區(qū)域 <header> 元素注意用于定義內(nèi)容的介紹展示區(qū)域 我們可以在一個頁面中使用多個 <header> 元素 <article> <header> <h1>2017-10-1 日志</h1> <p><time pubdate datetime="2017-10-1"></time></p> </header> <p>放假第一天，心情特好，游玩了下黃山</p> </article> HTML5 <footer> 元素元素 <footer> 元素描述了文檔的底部區(qū)域 <footer> 元素應(yīng)該包含它的包含元素 一個頁腳通常包含文檔的作者，著作權(quán)信息，鏈接的使用條款，聯(lián)系信息等 我們可以在一個頁面中使用多個 <footer> 元素 <footer> <p>作者: F2er.com</p> <p><time pubdate datetime="2020-10-01"></time></p> </footer> HTML5 <figure> 和 <figcaption> 元素<figure> 元素定義了獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等） <figure> 元素的內(nèi)容應(yīng)該與主內(nèi)容相關(guān)，但如果被刪除，則不應(yīng)對文檔流產(chǎn)生影響 <figcaption> 標(biāo)簽定義 <figure> 元素的標(biāo)題 <figcaption> 元素應(yīng)該被置于 "figure" 元素的第一個或最后一個子元素的位置 <figure> <img src="/static/i/img1.jpg" alt="The Pulpit Rock" width="304" height="228"> <figcaption>fig1. - The Pulpit Pock,norway</figcaption> </figure> 我們可以開始使用這些語義元素嗎?我們上面介紹的元素都是塊元素( 除了 <figcaption> ) 為了讓這些塊及元素在所有版本的瀏覽器中生效，我們需要在樣式表文件中設(shè)置一下屬性 header,section,footer,aside,nav,article,figure{display: block;}Internet Explorer 8 及更早 IE 版本中的問題IE8 及更早 IE 版本無法在這些元素中渲染 CSS 效果，以至于我們不能直接使用 <header>,<section>,<footer>,<aside>,<nav>,<article>,<figure>,或者其它的 HTML5 元素 解決辦法: 可以使用 HTML5 Shiv Javascrip t腳本來解決 IE 的兼容問題 國外 <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> 國內(nèi) <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <![endif]--> 需要將這些代碼放在 HTML 文檔的頭部，因?yàn)?IE 瀏覽器需要在頭部加載后渲染這些 HTML5 的新元素。 |
