DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5所有標簽匯總及標簽意義解釋
HTML5所有標簽匯總及標簽意義解釋
編輯：HTML5詳解     
這篇文章主要介紹了Html5所有標簽匯總及標簽意義解釋,本文總結了結構標簽、多媒體交互標簽、Web應用標簽、注釋標簽、其他標簽等內容,需要的朋友可以參考下

結構標簽：(塊狀元素) 有意義的div

<article>    標記定義一篇文章
<header>     標記定義一個頁面或一個區域的頭部
<nav>        標記定義導航鏈接
<section>    標記定義一個區域
<aside>      標記定義頁面內容部分的側邊欄
<hgroup>     標記定義文件中一個區塊的相關信息
<figure>     標記定義一組媒體內容以及它們的標題   
<figcaption> 標簽定義 figure 元素的標題。
<footer>     標記定義一個頁面或一個區域的底部
<dialog>     標記定義一個對話框(會話框)類似微信

多媒體交互標簽

<video>  標記定義一個視頻
<audio>  標記定義音頻內容
<source> 標記定義媒體資源
<canvas> 標記定義圖片
<embed>  標記定義外部的可交互的內容或插件 比如Flash

Web應用標簽

<menu>命令列表
<menuitem>menu命令列表標簽 FF（嵌入系統）
<command> menu標記定義一個命令按鈕
<meter>狀態標簽(實時狀態顯示:氣壓、氣溫)C、O
<progress>狀態標簽 (任務過程:安裝、加載) C、F、O
<datalist> 為input標記定義一個下拉列表,配合option F、O
<details> 標記定義一個元素的詳細內容 ，配合dt、dd   C

注釋標簽

<ruby> 標記定義 注釋或音標
<rp> 告訴那些不支持 Ruby元素的浏覽器如何去顯示
<rt> 標記定義對ruby的注釋內容文本

其他標簽

<keygen> 標記定義表單裡一個生成的鍵值(加密信息傳送)O、F
<mark> 標記定義有標記的文本 (黃色選中狀態)
<output> 標記定義一些輸出類型,計算表單結果配合oninput事

刪除的Html標簽

純表現的元素：
basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：
frame，frameset，noframes；

產生混淆的元素：
acronym ，applet，isindex，dir

重新定義的Html標簽

<b>  代表內聯文本，通常是粗體，沒有傳遞表示重要的意思
<i>  代表內聯文本，通常是斜體，沒有傳遞表示重要的意思
<dd> 可以同details與figure一同使用，定義包含文本，dialog也可用
<dt> 可以同details與figure一同使用，匯總細節，dialog也可用
<hr> 表示主題結束，而不是水平線，雖然顯示相同
<menu> 重新定義用戶界面的菜單，配合commond或者menuitem使用
<small> 表示小字體，例如打印注釋或者法律條款
<strong> 表示重要性而不是強調符號

示例代碼：

XML/Html Code復制內容到剪貼板
  1. <xmp>  
  2. <!doctype Html>  
  3. <Html>  
  4.     <head>  
  5.         <style>  
  6.               
  7.               
  8.             header{height:150px;background:#ABCDEF}   
  9.             nav{height:30px;background:#ff9900;margin-top:100px}   
  10.             nav ul li{width:100px;height:30px;float:left;line-height:30px}   
  11.               
  12.             div{margin-top:10px;height:1000px;}   
  13.             section{height:1000px;background:#ABCDEF;width:70%;float:left}   
  14.             article{background:#F90;width:500px;margin:0 auto;text-align:center}   
  15.               
  16.             aside{height:1000px;background:#ABCDEF;width:28%;float:right}   
  17.               
  18.             footer{height:100px;background:#ABCDEF;clear:both;margin-top:10px}   
  19.         </style>  
  20.     </head>  
  21.     <body>  
  22.         <header>  
  23.             <p>這是一個header標簽</p>  
  24.             <nav>  
  25.                 <ul>  
  26.                     <li>首頁</li>  
  27.                     <li>起夜</li>  
  28.                     <li>論壇</li>  
  29.                     <li>商城</li>  
  30.                     <li>社區</li>  
  31.                 </ul>  
  32.             </nav>  
  33.         </header>  
  34.         <div>  
  35.             <section>  
  36.                 <p>這是一個section標簽</p>  
  37.                 <article>  
  38.                     <h2>春曉</h2>  
  39.                     <p>  
  40.                     春眠不覺曉，<br />  
  41.                     處處蚊子咬，<br />  
  42.                     打上敵敵畏，<br />  
  43.                     不至死多少。<br />  
  44.                     </p>  
  45.                   
  46.                 </article>  
  47.                 <hr />  
  48.                 <article>  
  49.                     <h2>上學歌</h2>  
  50.                     <p>  
  51.                     太陽當空照，<br />  
  52.                     花兒對我笑，<br />  
  53.                     小鳥說早早早，你為什麼背上小書包?<br />  
  54.                     我要炸學校老師不知道，一拉線，趕快跑，<br />  
  55.                     轟的一聲，學校炸沒了。<br />  
  56.                     </p>  
  57.                   
  58.                 </article>  
  59.                 <hr />  
  60.                 <figure>  
  61.                     <figcaption>UFO</figcaption>  
  62.                     <p>不明飛行物 Unknown Flying Object</p>  
  63.                 </figure>  
  64.                 <figure>  
  65.                      <dt>DDS</dt>  
  66.                      <dd>大絲</dd>  
  67.                 </figure>  
  68.                 <hr />  
  69.                 <dialog>  
  70.                     <dt>唐僧:悟空，你又調皮了，觀音姐姐的月光寶盒怎麼能亂扔呢？</dt>  
  71.                     <dd>悟空:...(看著)</dd>  
  72.                     <dt>唐僧:亂扔是不對的，砸到小朋友怎麼辦？就算砸不到小朋友，砸到花花草草也是不好的嘛</dt>  
  73.                     <dd>悟空:...(糾結)</dd>  
  74.                     <dt>唐僧:悟空你想要麼？想要你就告訴我呀，你不告訴我怎麼知道你想要呢？。。。。</dt>  
  75.                     <dd>悟空:我靠!(一棍子掄上去！)</dd>  
  76.                 </dialog>  
  77.                 <hr />  
  78.                 <menu>  
  79.                     <li>點擊</li>  
  80.                     <li>右鍵單擊</li>  
  81.                 </menu>  
  82.                 <hr />  
  83.                 <span contextmenu="candan">右鍵單擊我試試</span>  
  84.                 <menu type="context" id="candan">  
  85.                     <menuitem label="菜單一" onclick="alert('我是一個寂寞')" icon="/School/UploadFiles_7810/201603/20160309223017697.gif"></menuitem>  
  86.                 </menu>  
  87.                 <hr />  
  88.                 <meter min="0" max="10" value="5" low="3" high="7" ></meter>  
  89.                 <progress max="100" value="0" id="pro"></progress>  
  90.                 <script>  
  91.                     var pro =document.getElementByIdx_x_x_x('pro');   
  92.                     setInterval(function(){   
  93.                         pro.value+=1;   
  94.                     },100);   
  95.                 </script>  
  96.                 <hr />  
  97.                 <details>  
  98.                     <dt>這是一個問題？</dt>  
  99.                     <dd>to be or not to be</dd>  
  100.                     <dt>這是一個問題？</dt>  
  101.                     <dd>to be or not to be</dd>  
  102.                     <dt>這是一個問題？</dt>  
  103.                     <dd>to be or not to be</dd>  
  104.                 </details>  
  105.                 <hr />  
  106.                 <ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>  
  107.                 <hr />  
  108.                 女人<mark>最喜歡做的事情</mark>就是逛街。。。吃零食。。逛街。。吃零食，偶爾還會嗚嗚的哭，   
  109.                 於是總結了下女人:逛吃逛吃逛吃逛吃。。。嗚嗚嗚~·   
  110.             </section>  
  111.             <aside>  
  112.                 <p>這是一個aside標簽</p>  
  113.                 <hgroup>  
  114.                     <h3>女生宿捨為何頻頻被盜</h3>  
  115.                     <h3>兩百頭母豬為何半夜慘死</h3>  
  116.                     <h3>是人性的扭曲？</h3>  
  117.                     <h3>還是道德的淪喪！</h3>  
  118.                 </hgroup>  
  119.             </aside>  
  120.         </div>  
  121.         <footer>  
  122.             <p>這是一個footer標簽</p>  
  123.             <hr />  
  124.             <small>法律條文</small>  
  125.             <small>聯系我們</small>  
  126.             <small>客戶意見</small>  
  127.             <small>商戶合作</small>  
  128.         </footer>  
  129.     </body>  
  130. </Html>  
  131. </xmp>  
HTML5詳解
HTML5 特性的檢測：離線Web應用
 查看一個離線的靜態web頁面是很容易的: 連到internet,載入這個web頁面,隨
html5 viewport使用方法示例詳解
復制代碼代碼如下:<!– Html document –><meta name=
網易微博Web App用HTML5開發的過程介紹
Html5在國內外越來越受到互聯網開發團隊的青睐。國外，谷歌興致勃勃地開發Chrome Web S

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
利用純html5繪制出來的一款非常漂亮的時鐘 添加行為 HTML5的download屬性詳細介紹和使用實例 HTML5 Canvas漸變填充與透明實現圖像的Mask效果 html5-websocket基於遠程方法調用的數據交互實現 HTML5 Canvas+JS控制電腦或手機上的攝像頭實例 基於html5 canvas實現漫天飛雪效果實例 網易微博Web App用HTML5開發的過程介紹 html5+css3氣泡組件的實現_css3 html5 canvas做的圖表插件
熱門推薦
跟KingDZ學HTML5之二：再見Audio和Video html5 Web Workers 使用分層畫布來優化HTML5渲染的教程 一款利用html5和css3動畫排列人物頭像的實例演示 Web Sockets html5播放視頻且動態截圖實現步驟與代碼(支持safari其他未測試) 從XHTML1.0標准過渡到HTML5標准 HTML5+CSS3應用詳解 HTML5之SVG 2D入門6—視窗坐標系與用戶坐標系及變換概述
大家都在看
HTML5+jQuery實現搜索智能匹配功能 JavaScript 事件入門知識 JQuery 自定義CircleAnimation，Animate方法學習筆記 jquery獲取table指定行和列的數據方法(當前選中行、列) IE7下position:relative的問題 JS 進度條效果實現代碼整理 將XSLT查找表打包成EXSLT函數 一時興起用Ajax配合JavaScript寫實現自動補全功能的TextBox
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved