標簽 · 程序員開發筆記

[TOC] #### 新增標簽article標簽 article ? article 字面意思為“文章”。在web頁面中表現為獨立的內容，如一篇新聞，一篇評論，一段名言，一段聯系方式 ? 代碼獨立的、完整的相關內容塊，一般來說， article 會有標題部分(通常包含在 header 內)，有時也會包含 footer 示例： <!doctype html> <title>html5站案例</title> <body> <article> <h1></h1> <p>主內容</p> </article> <aside> 側邊內容 </aside> </body> #### 新增標簽section標簽(章節) ? section 字面上理解為“塊”，“部分”。在html5網頁中表現的意思跟字面理解差不多，即部分，塊，模塊，主要作用為對頁面的內容進行分塊或者對文章的內容進行分段。示例： <!doctype html> <article> <h1>常見水果對比</h1> <p>市面上常見的水果有蘋果、桃子、梨...</p> <section> <h2>蘋果</h2> <p>蘋果樹屬于薔薇科,落葉喬木,葉橢圓形,有鋸齒。</p> </section> <section> <h2>桃</h2> <p>薔薇科、桃屬植物,樹冠寬廣而平展;樹皮暗紅褐色,老時粗糙呈鱗片狀</p> </section> </article> #### 新增標簽nav ? 頁面導航的鏈接組注： ? 并不是所有鏈接都要放在nav中，只需要將主要的鏈接放到nav中適用場合： 1. 傳統頂部導航條（首頁，關于我們等) 2. 商城左側導航條 3. 頁面分頁部分示例： <nav> <a href="">首頁</a> <a href="">關于后盾網</a> </nav> #### 新增標簽aside ? aside字面理解為“旁邊”，在html5中范圍更廣一點，是跟主內容相關，但是又可以獨立的內容，可以是廣告、引用、側邊欄等等。適用場合： 1.廣告、引用、側邊欄示例： <article> <h2>新聞列表</h2> <ul> 主內容 </ul> </article> <aside> <section> <h3>Html5最新動態</h3> </section> <section> <h3>Html5新增元素</h3> </section> <section> <h3>Html5新增Api</h3> </section> <section> <h2>Html5文章推薦</h2> </section> </aside> <footer></footer> #### Time標簽 time ? time 字面理解為“時間”，在html5中用于定義元素的時間、日期或者日期時間。注： ? pubdate表示發布日期示例： <article> <h2>快學網上線了</h2> <p>今天是今天是<time datetime="2014-03-06">2014-3-6</time> <time datetime=“2014-02-25” pubdate=“pubdate”>2014年2月25日 </time> </article> #### header標簽 header ? header字面意思為頭部，在html5可以理解為頁頭，文檔頭，頁眉。示例： <header> <h1>Web編程語言比較</h1> <nav> <ul> <li><a href="#asp">asp</a></li> <li><a href="aspnet">asp.net</a></li> <li><a href="php">php</a></li> </ul> </nav> <header> #### footer標簽 footer ? footer字面意思為“頁腳”，“結尾”，在html5中跟字面意思類似，是頁腳和結尾的意思。它與header是相對的一對。footer可以包含該區塊相關的作者信息、相關文檔的鏈接、版權信息、導航、附錄，索引，長的版本記錄，冗長的許可協議和其他的諸于此類的內容等。示例： <footer> <section> <h1>友情鏈接</h1> </section> 后盾網版權所有 copyright houdunwang.com </footer> #### address標簽 address ? address字面理解為“地址”，在html5中，它用于文檔或者文章作者或擁有者的聯系信息。注意，這里放的不是字面上理解的“地址”，而是指“聯系信息”，可以包括文檔創建者的名字、站點鏈接、電子郵箱、真實地址、電話號碼等各類聯系信息。示例： <footer> 后盾網 <address> <ul> <li>網址：http://www.houdunwang.com</li> <li>電話：010-64825057</li> <li>網址：houdunwang.com</li> </ul> </address> </footer> #### code標簽 ? 用于顯示程序代碼。示例： <code> <?php echo "hello word";?> </code> #### mark標簽 ? 突出顯示文本示例：后盾網 <mark>houdunwang.com</mark> #### ins與del標簽 ins與del ? Ins與del用于顯示突出或刪除的文本示例：后盾網址：<ins>houdunwang.com</ins> 百度網址：<del>baidu.com</del> #### optgroup標簽 ? 對select標簽中的option進行分組示例： <select name="select" id="select"> <optgroup label="城市"> <option value="beijing">北京</option> <option value="nanjing">南京</option> </optgroup> <optgroup label="sex"> <option value="boy">男</option> <option value="girl">女</option> </optgroup> </select> #### progress標簽 progress ? 顯示完成的進度示例： <progress value="10" max="100"></progress> <progress value="50" max="100"></progress>