當前位置 : IT培訓網 > Web前端 > Web教程 > HTML5有幾個語義元素

HTML5有幾個語義元素

時間:2016-12-09 14:30:50??來源:web前端培訓網??作者:IT培訓網??已有:名學員訪問該課程
HTML5語言元素有哪些呢,我們該如何認識這些元素呢,在網頁中如何使用HTML語義元素呢,下面就讓我們一起來看看吧!

HTML5語義元素有很多,至于如何學習和了解它,還需要各位小盆友一起來看了,一般情況下,html5提供了很多語義元素,分別應用在網頁中不同的地方,使得網頁中各個代碼層次都一目了然。

HTML5 語義元素

語義= 意義.

語義元素 = 元素的意義.

什么是語義元素?

一個語義元素能夠清楚的描述其意義給瀏覽器和開發者。

無語義 元素實例: <div> 和 <span> - 無需考慮內容.

語義元素實例: <form>, <table>, and <img> - 清楚的定義了它的內容.

瀏覽器支持

HTML5有幾個語義元素_www.oalvodamoda.com

Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 支持語義元素。

注意: Internet Explorer 8及更早版本不支持該元素. 但是文章底部提供了兼容的解決方法.

HTML5中新的語義元素

許多現有網站都包含以下HTML代碼: <div id="nav">, <div class="header">, 或者 <div id="footer">, 來指明導航鏈接, 頭部, 以及尾部.

HTML5提供了新的語義元素來明確一個Web頁面的不同部分:

<header>

<nav>

<section>

<article>

<aside>

<figcaption>

<figure>

<footer>

HTML5 語義元素

HTML5有幾個語義元素_www.oalvodamoda.com

HTML5 <section> 元素

<section> 標簽定義文檔中的節(section、區段)。比如章節、頁眉、頁腳或文檔中的其他部分。

根據W3C HTML5文檔: section 包含了一組內容及其標題。

實例

<section>

  <h1>WWF</h1>

  <p>The World Wide Fund for Nature (WWF) is....</p>

</section>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<section>

  <h1>WWF</h1>

  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>

</section>

<section>

  <h1>WWF's Panda symbol</h1>

  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>

</section>

</body>

</html>

運行結果:

WWF

The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

WWF's Panda symbol

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

HTML5 <article> 元素

<article> 標簽定義獨立的內容。.

<article> 元素使用實例:

Forum post

Blog post

News story

Comment

實例

<article>

  <h1>Internet Explorer 9</h1>

  <p>Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發布。</p>

</article>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<article>

  <h1>Internet Explorer 9</h1>

  <p> Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發布。</p>

</article>

</body>

</html>

運行結果:

Internet Explorer 9

Windows Internet Explorer 9(縮寫為 IE9 )在2011年3月14日21:00 發布。

HTML5 <nav> 元素

<nav> 標簽定義導航鏈接的部分。

<nav> 元素用于定義頁面的導航鏈接部分區域,但是,不是所有的鏈接都需要包含在 <nav> 元素中!

實例

<nav>

    <a href="/html/">HTML</a> |

    <a href="/css/">CSS</a> |

    <a href="/js/">JavaScript</a> |

    <a href="/jquery/">jQuery</a>

</nav>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<nav>

<a href="/html/">HTML</a> |

<a href="/css/">CSS</a> |

<a href="/js/">JavaScript</a> |

<a href="/jquery/">jQuery</a>

</nav>

</body>

</html>

運行結果:

HTML | CSS | JavaScript | jQuery

HTML5 <aside> 元素

<aside> 標簽定義頁面主區域內容之外的內容(比如側邊欄)。

aside 標簽的內容應與主區域的內容相關.

實例

<p>My family and I visited The Epcot center this summer.</p>

<aside>

  <h4>Epcot Center</h4>

  <p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<p>My family and I visited The Epcot center this summer.</p>

<aside>

<h4>Epcot Center</h4>

<p>The Epcot Center is a theme park in Disney World, Florida.</p>

</aside>

</body>

</html>

運行結果:

My family and I visited The Epcot center this summer.

Epcot Center

The Epcot Center is a theme park in Disney World, Florida.

HTML5 <header> 元素

<header>元素描述了文檔的頭部區域

<header>元素注意用于定義內容的介紹展示區域.

在頁面中你可以使用多個<header> 元素.

以下實例定義了文章的頭部:

實例

<article>

  <header>

    <h1>Internet Explorer 9</h1>

    <p><time pubdate datetime="2011-03-15"></time></p>

  </header>

  <p>Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發布的</p>

</article>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<article>

  <header>

    <h1>Internet Explorer 9</h1>

    <p><time pubdate datetime="2011-03-15"></time></p>

  </header>

  <p> Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發布的</p>

</article>

</body>

</html>

運行結果:

Internet Explorer 9

Windows Internet Explorer 9(縮寫為 IE9 )是在2011年3月14日21:00發布的

HTML5 <footer> 元素

<footer> 元素描述了文檔的底部區域.

<footer> 元素應該包含它的包含元素

一個頁腳通常包含文檔的作者,著作權信息,鏈接的使用條款,聯系信息等

文檔中你可以使用多個 <footer>元素.

實例

<footer>

  <p>Posted by: Hege Refsnes</p>

  <p><time pubdate datetime="2012-03-01"></time></p>

</footer>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<footer>

  <p>Posted by: Hege Refsnes</p>

  <p><time pubdate datetime="2012-03-01"></time></p>

</footer>

</body>

</html>

運行結果:

Posted by: Hege Refsnes

HTML5 <figure> <figcaption> 元素

<figure>標簽規定獨立的流內容(圖像、圖表、照片、代碼等等)。

<figure> 元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。

<figcaption> 標簽定義 <figure> 元素的標題.

<figcaption>元素應該被置于 "figure" 元素的第一個或最后一個子元素的位置。

實例

<figure>

  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

  <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>

</figure>

源代碼:

<!DOCTYPE html>

<html>

<head> 

<meta charset="utf-8"> 

<title>IT培訓網(www.oalvodamoda.com)</title> 

</head>

<body>

<p>The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.</p>

<figure>

  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">

  <figcaption>Fig.1 - A view of the pulpit rock in Norway.</figcaption>

</figure>

</body>

</html>

運行結果:

The Pulpit Rock is a massive cliff 604 metres (1982 feet) above Lysefjorden, opposite the Kjerag plateau, in Forsand, Ryfylke, Norway. The top of the cliff is approximately 25 by 25 metres (82 by 82 feet) square and almost flat, and is a famous tourist attraction in Norway.

圖略

The Pulpit Rock

Fig.1 - A view of the pulpit rock in Norway.

我們可以開始使用這些語義元素嗎?

以上的元素都是塊元素(除了<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 elements。

Js代碼:

(function(k,m){var g="3.7.0";var d=k.html5||{};var h=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;var c=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;var q;var i="_html5shiv";var a=0;var o={};var e;(function(){try{var t=m.createElement("a");t.innerHTML="<xyz></xyz>";q=("hidden" in t);e=t.childNodes.length==1||(function(){(m.createElement)("a");var v=m.createDocumentFragment();return(typeof v.cloneNode=="undefined"||typeof v.createDocumentFragment=="undefined"||typeof v.createElement=="undefined")}())}catch(u){q=true;e=true}}());function f(t,v){var w=t.createElement("p"),u=t.getElementsByTagName("head")[0]||t.documentElement;w.innerHTML="x<style>"+v+"</style>";return u.insertBefore(w.lastChild,u.firstChild)}function l(){var t=j.elements;return typeof t=="string"?t.split(" "):t}function p(t){var u=o[t[i]];if(!u){u={};a++;t[i]=a;o[a]=u}return u}function n(w,t,v){if(!t){t=m}if(e){return t.createElement(w)}if(!v){v=p(t)}var u;if(v.cache[w]){u=v.cache[w].cloneNode()}else{if(c.test(w)){u=(v.cache[w]=v.createElem(w)).cloneNode()}else{u=v.createElem(w)}}return u.canHaveChildren&&!h.test(w)?v.frag.appendChild(u):u}function r(v,x){if(!v){v=m}if(e){return v.createDocumentFragment()}x=x||p(v);var y=x.frag.cloneNode(),w=0,u=l(),t=u.length;for(;w<t;w++){y.createElement(u[w])}return y}function s(t,u){if(!u.cache){u.cache={};u.createElem=t.createElement;u.createFrag=t.createDocumentFragment;u.frag=u.createFrag()}t.createElement=function(v){if(!j.shivMethods){return u.createElem(v)}return n(v,t,u)};t.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+l().join().replace(/[\w\-]+/g,function(v){u.createElem(v);u.frag.createElement(v);return'c("'+v+'")'})+");return n}")(j,u.frag)}function b(t){if(!t){t=m}var u=p(t);if(j.shivCSS&&!q&&!u.hasCSS){u.hasCSS=!!f(t,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")}if(!e){s(t,u)}return t}var j={elements:d.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video",version:g,shivCSS:(d.shivCSS!==false),supportsUnknownElements:e,shivMethods:(d.shivMethods!==false),type:"default",shivDocument:b,createElement:n,createDocumentFragment:r};k.html5=j;b(m)}(this,document));

解決辦法: 你可以使用HTML5 Shiv Javascript腳本來解決IE的兼容問題。

下載后,將以下代碼放入的網頁中:

<!--[if lt IE 9]>

<script src="html5shiv.js"></script>

<![endif]-->

以上代碼在瀏覽器小于IE9版本時會加載html5shiv.js文件. 你必須將其放置于<head> 元素中,因為 IE瀏覽器需要在頭部加載后渲染這些HTML5的新元素

頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
------分隔線----------------------------
Web 教程
1、HTML 教程
1.1 HTML 簡介
1.2 HTML 編輯器
1.3 HTML 基礎
1.4 HTML 元素
1.5 HTML 屬性
1.6 HTML 標題
1.7 HTML 段落
1.8 HTML 文本格式化
1.9 HTML 鏈接
1.10 HTML 頭部
1.11 HTML CSS
1.12 HTML 圖像
1.13 HTML 表格
1.14 HTML 列表
1.15 HTML 區塊
1.16 HTML 布局
1.17 HTML 表單
1.18 HTML 框架
1.19 HTML 顏色
1.20 HTML 顏色名
1.21 HTML 顏色值
1.22 HTML 腳本
1.23 HTML 字符實體
1.24 HTML URL
1.25 HTML 速查列表
1.26 HTML 總結
1.27 HTML 簡介
2、HTML5
2.1 HTML5 教程
2.2 HTML5 瀏覽器支持
2.3 HTML5 新元素
2.4 HTML5 Canvas
2.5 HTML5 內聯 SVG
2.6 HTML5 MathML
2.7 HTML5 拖放
2.8 HTML5 地理定位
2.9 HTML5 Video(視頻)
2.10 HTML5 Audio(音頻)
2.11 HTML5 Input 類型
2.12 HTML5 表單元素
2.13 HTML5 表單屬性
2.14 HTML5 語義元素
2.15 HTML5 Web 存儲
2.16 HTML5 Web SQL
2.17 HTML5 應用程序緩存
2.18 HTML5 Web Workers
2.19 HTML5 SSE
2.20 HTML5 WebSocket
2.21 HTML5 代碼規范
3、HTML 媒體
3.1 HTML 媒體(Media)
3.2 HTML 插件
3.3 HTML 音頻(Audio)
3.4 HTML視頻(Videos)播放
五月情天