HTML5-語義化標籤

來源:互聯網
上載者:User

標籤:進度   icp   ogr   nbsp   結果   使用者   樣式   org   編碼   

article

-- 解釋 
article標籤裝載顯示一個獨立的文章內容。例如一篇完整的論壇文章,一則網站新聞,一篇部落格文章等等,一個使用者評論等等 artilce可以嵌套,則內層的artilce對外層的article標籤有隸屬的關係。例如,一個部落格文章,可以用article顯示,然後一 些評論可以以article的形式嵌入其中。

-- 示列 
<article>
<h1>文章標題</h1>
這是一篇文章
   <article>評論1...</article>
    <article>評論2...</article>
</article>

section

-- 解釋 
section 標籤定義文檔中的節(section、區段)。比如章節、頁首、頁尾或文檔中的其他部分。

-- 示列 
<body>
<section>
   <h1>章節一</h1>
    <p>詳細內容...</p>
</section>
<section>
   <h1>章節二</h1>
    <p>詳細內容...</p>
</section>
</body>

aside

-- 解釋 
aside 用來裝載非本文類的內容。例如廣告,成組的連結,側邊欄等等。

-- 示列 
<body>
<aside>
熱門文章
</aside>
<aside>
廣告
</aside>
<article>
<h1>文章標題</h1>
這是一篇文章
   <article>評論1...</article>
    <article>評論2...</article>
</article>
</body>

hgroup

-- 解釋 
hgroup 標籤用於對網頁或區段的標題元素(h1-h6)進行組合。例如,在一個區段中你有連續的h系列的標籤元素,則可以用hgroup將他們括起來。

-- 示列 
<hgroup>
<h1>The reality dysfunction</h1>
<h2>Space is not the only void</h2>
</hgroup> <hgroup>
<h1>Dr. Strangelove</h1>
<h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2>
</hgroup>

header

-- 解釋 
header 標籤定義文檔的頁面組合,通常是一些引導和導航資訊。

-- 示列 
<header>
<p>this is the page Logo</p>
<nav>this is page navigation</nav>
</header>

footer

-- 解釋 
footer 標籤定義 section 或 document 的頁尾。在典型情況下,該元素會包含創作者的姓名、文檔的創作日期以及/或者聯絡資訊。

-- 示列 
<footer> ? 2012 Baidu 使用百度前必讀 京ICP證030173號 </footer>

nav

-- 解釋 
nav 標籤定義顯示導航連結不是所有的成組的超級連結都需要放在nav標籤裡。nav標籤裡應該放入一些當前頁面的主要導航連結。 例如在頁尾顯示一個網站的導航連結(如首頁,服務資訊頁面,著作權資訊頁面等等),就可以使用nav標籤,當然,這不是必須的。

-- 示列 
<nav>
<ul>
<li><a href=”articles.html”>Index of all articles</a></li>
<li><a href=”today.html”>Things sheeple need to wake up for today</a></li>
<li><a href=”successes.html”>Sheeple we have managed to wake</a></li>
</ul>
</nav>

time

-- 解釋 
time 標籤定義西曆的時間(24 小時制)或日期,時間和時區位移是可選的。該元素能夠以機器可讀的方式對日期和時間進行編碼,這樣, 舉例說,使用者代理程式能夠把生日提醒通知或排定的事件添加到使用者議程表中,搜尋引擎也能夠產生更智能的搜尋結果。

-- 示列 
<p>我們在每天早上 <time>9:00</time> 開始營業。</p> 
<p>我在 <time datetime="2008-02-14">情人節</time> 有個約會。</p>

mark

-- 解釋 
mark 標籤定義帶有記號的文本。請在需要反白文本時使用 <mark> 標籤。

-- 示列 
<p>Do not forget to buy <mark>milk</mark> today.</p>

figure

-- 解釋 
figure標籤規定獨立的流內容(映像、圖表、照片、代碼等等)。figure 元素的內容應該與主內容相關,但如果被刪除,則不應對文檔流產生影響。

-- 示列 
<p>黃浦江上的的盧浦大橋</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

figcaption

-- 解釋 
figcaption 標籤定義 figure 元素的標題(caption)。"figcaption" 元素應該被置於 "figure" 元素的第一個或最後一個子項目的位置。

-- 示列 
<figure> <figcaption>黃浦江上的的盧浦大橋</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>

contextmenu+menu

-- 解釋 
contextmenu 添加到系統右鍵菜單 [貌似這個功能只有firefox支援,很悲催的]

-- 示列 
<div>添加到系統右鍵菜單< contextmenu=mymenu /div> <menu type="context" id="mymenu" />

右擊我試試 

<!--進度條progress 直接的 每個瀏覽器樣式不一樣-->
<progress></progress>
<!--0.1指的是進度到百分之10 這樣其餘是空白的 算是進度指示條-->
<!--100指的是進度數值為100 那麼0.1指100分之0.1 預設為1-->
<!--進度條想動用JS啊-->
<progress class="myStyle" value="0.1" max="100"></progress>

<!--我想體現一個資料(固定的)比如華東地區的房子購買比例那麼用進度條顯示-->
<!--這個時候我們用mate標籤-->
<!--這個沒有什麼瀏覽器支援-->
<!-- Value:表示當前標量的實際值;如果不做指定,那麼meter標籤中的第一個數字就會被認為是其當前實際值,如果標籤內沒有數字,那麼標量的實際值就是0。
Min:當前標量的最小值;如不做指定則為0。
Max:當前標量的最大值;如不做指定則為1;如果指定的最大值小於最小值,那麼最小值會被認為是最大值。
Low:當前標量的低值區;必須小於或等於標量的高值區數字;如果低值區數字小於標量最小值,那麼它會被認為是最小值。
High:當前標量的高值區。
Optimum:最佳值;其範圍在最小值與最大值區間當中,並且可以處於高值區 -->
<meter min="0" max="100" low="40" high="90" optimun="100" value="91">A+</meter>
</body>
</html>

HTML5-語義化標籤

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.