什么是語義元素?一個語義元素能夠清楚的描述其意義給瀏覽器和開發者 無語義 元素: <div> 和 <span> - 無需考慮內容 語義 元素: <form>,<table> 和 <img> - 清楚的定義了它的內容 瀏覽器支持Internet Explorer 9+,Firefox,Chrome,Safari 和 Opera 支持語義元素 注意: Internet Explorer 8 及更早版本不支持該元素，不過我們在文章的的末尾提供了兼容的解決方法 html5 中新的語義元素在 html5 之前，許多的網站都包含了以下 HTML 代碼 <div id="nav"> <div> <div id="footer"> 用來指明導航鏈接,頭部,以及尾部 HTML5 則提供了新的語義元素來明確一個 Web 頁面的不同部分
<header> <nav> <section> <article> <aside> <figcaption> <figure> <footer> HTML5 <section> 元素元素 <section> 用于定義文檔中的節 ( section、區段)，比如章節、頁眉、頁腳或文檔中的其它部分 <section> 可以包含一組內容及其標題 <section> <h1>日志</h1> <p>是我在乎，才會喜怒無常</p> </section> HTML5 <article> 元素元素 <article> 用于定義獨立的內容 <article> 用法
<article> <h1>全部評論</h1> <p>愛你，就是一萬年</p> </article> HTML5 <nav> 元素元素 <nav> 標簽定義導航鏈接的部分 <nav> 元素用于定義頁面的導航鏈接部分區域，但是，不是所有的鏈接都需要包含在 <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> 定義了頁面主區域內容之外的內容 ( 比如側邊欄 ) <aside> 元素的內容應與主區域的內容相關 <h3>我的日志</h3> <p>今天天氣好冷，心情特沮喪</p> <aside> <h4>每日正能量</h4> <p>明天就會天晴，還你以一個艷陽高照天</p> </aside> HTML5 <header> 元素元素 <header> 描述了文檔的頭部區域 <header> 元素注意用于定義內容的介紹展示區域 我們可以在一個頁面中使用多個 <header> 元素 <article> <header> <h1>2017-10-1 日志</h1> <p><time pubdate datetime="2017-10-1"></time></p> </header> <p>放假第一天，心情特好，游玩了下黃山</p> </article> HTML5 <footer> 元素元素 <footer> 元素描述了文檔的底部區域 <footer> 元素應該包含它的包含元素 一個頁腳通常包含文檔的作者，著作權信息，鏈接的使用條款，聯系信息等 我們可以在一個頁面中使用多個 <footer> 元素 <footer> <p>作者: F2er.com</p> <p><time pubdate datetime="2020-10-01"></time></p> </footer> HTML5 <figure> 和 <figcaption> 元素<figure> 元素定義了獨立的流內容（圖像、圖表、照片、代碼等等） <figure> 元素的內容應該與主內容相關，但如果被刪除，則不應對文檔流產生影響 <figcaption> 標簽定義 <figure> 元素的標題 <figcaption> 元素應該被置于 "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> ) 為了讓這些塊及元素在所有版本的瀏覽器中生效，我們需要在樣式表文件中設置一下屬性 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]--> 國內 <!--[if lt IE 9]> <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script> <![endif]--> 需要將這些代碼放在 HTML 文檔的頭部，因為 IE 瀏覽器需要在頭部加載后渲染這些 HTML5 的新元素。 |
