注釋標簽
ruby:
行級元素 橫排顯示 試圖寫多個漢字和注釋，需要多個ruby。
直接上代碼：
-
css樣式：
頁面效果：
重點標記
mark:
以灰常黃的黃色來重點標記
頁面代碼：
類似於進度條的標簽
meter：
meter標簽有以下的屬性：
min：類進度條的最小值
max：最大值
value：實際的值
頁面代碼：
設置meter的長與寬：
評判標准：
low: 低於 low 是另一種顏色顯示（殘血了，快跑）
optimum：狀態良好（狀態良好，可以開團）
high: 狀態完美（我將帶頭沖鋒）
也就是說，在 low 和 high 之間都是綠色的，在 low 以下或者 high 以上就黃了。
正宗的進度條
progress:
如果我們不設置value屬性，頁面就是這樣的效果：
details:
和 dl 定義列表類似，也和我們的下拉列表類似，但是，顯示的方式不一樣用於描述細節 summary 標題（要描述的對象） 后面接上你要描述的內容
IE瀏覽器的兼容問題
除了上面提到的常用的標簽，在使用 HTML5 標簽的時候，還要注意瀏覽器的兼容問題。像 IE 瀏覽器有部分內容兼容到 IE9，IE8 及以下對 H5 完全不兼容。最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。
瀏覽器的兼容測試
我們可以看到這個頁面，當選擇 IE8 的時候完全沒有效果了。那么怎么解決這個問題
解決辦法:
最簡單的處理方法引入寫好的 js 代碼！這個代碼大家搜一下，就可以搜到哦！這段代碼的意思是：如果瀏覽器的版本小於 IE9 就引入這段 js。
看這下即使是 IE8 頁面也是有效果的~
源碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Keywords" content="關鍵字,關鍵詞"> <meta name="Description" content="描述和簡介"> <title>Title</title> <style type="text/css"> *{margin:0;padding:0;} body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;} a{text-decoration:none;color: inherit;} img{display: block;border:none;} ol,ul{list-style:none;} .clearfix:after { content: ""; display: block; clear: both; } .main{ width: 1200px; margin: 40px auto; box-shadow: 0 0 10px 0 #000; background: skyblue; } .main section{ width: 400px; margin: 20px auto; box-shadow: 0 0 10px 0 #000; text-align: center; background: blueviolet; } section.ruby ruby{ color:mediumblue; font:bold 20px/30px ""; } section.meter meter,section.progress progress{ height: 30px; width: 400px; } section.details{ text-align:left; } </style> <!--[if lt IE 9]> <script src="js/html5shiv.js"></script> <![endif]--></head><body> <section class="main"> <section class="ruby"> <ruby>我<rt>wo</rt></ruby> <ruby>是<rt>shi</rt></ruby> <ruby>娜<rt>na</rt></ruby> <ruby>娜<rt>na</rt></ruby> </section> <section class="mark"> <p>娜娜<mark>好美~</mark>像個<mark>小仙女</mark>一樣~</p> </section> <section class="meter"> <meter min="0" max="100" value="50" low="20" optimum="50" high="80"></meter> </section> <section class="progress"> <progress max="100" value="50"></progress> </section> <section class="details"> <details> <summary>海賊王</summary> <p>路飛</p> <p>娜美</p> <p>索隆</p> <p>香吉士</p> <p>喬巴</p> <img class="img" src="imgs/1.jpg" alt="" width="200px" > </details> </section> </section></body></html>