日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

HTML5学习笔记（二）

發布時間：2025/3/15 HTML 16 豆豆
生活随笔 收集整理的這篇文章主要介紹了 HTML5学习笔记（二） 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

定義文章塊

article 用于定義表示文檔中獨立的、完整的、可以獨自被外部引用的內容塊。它可以有自己的 <header> 元素，還可以嵌套使用。

<!DOCTYPE html> <html> <head><meta charset="UTF-8"> </head> <body> <article><h1>使用插件</h1><object><param name="allowFullScreen" value="true"><embed src="#" width="600" height="395"></embed></object> </article> </body> </html>

article 是一段獨立的內容，因此一般都包含了 header 和 footer 元素。

定義內容塊

section 用于對頁面中的內容進行分區，一個 section 一般由內容和標題組成。
section 需要一個包含<hn> 的標題元素，但不是 header 哦~~

<!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><article><header><p>潛行者是一個中國人，是一個帥哥！</p></header><p>潛行者的自我介紹</p><section><h2>評論</h2><article><h3>評論者：潛行者</h3><p>確實</p></article><article><h3>評論者：潛行者</h3><p>今天吃藥了沒</p></article></section></article> </body> </html>

注意：

  • 不要將 article 和 section 當作是 div 來使用。當布局頁面中的大塊時，div 是更好的選擇。
  • 當article、nav 等元素更符合要求是，不要使用section。
  • 沒有標題的部分不要使用section。

    • 定義導航塊

    nav 元素適用于以下幾種場合：

  • 傳統導航條
  • 側邊欄導航
  • 頁內導航
  • 翻頁操作

    • 定義側邊欄

    aside 元素可以用于定義頁面中的側邊欄。

    <!DOCTYPE html> <html><meta charset="utf-8"> </html> <body><header><h1>HTML5</h1></header><article><h1>HTML5 歷史</h1><p>balabala</p><aside><h1>名詞解釋</h1><dl><dt>WHATWG</dt><dd>balabala</dd></dl><dl><dt>W3C</dt><dd>balabala</dd></dl></aside></article> </body>

    其中 dl，dt，dd 分別表示定義 列表、列表中的項目、解釋列表中的項目。

    定義主要區域

    main 元素主要用于定義頁面中的主要區域。主要區域為每一個網頁所特有的內容，不能包含整個網站的導航條、搜索欄等。

    特別注意：

  • 每個網頁只能防止一個 main 元素；
  • 不能將 main 元素放置在任何一個 article、aside 等元素內部；
  • main 不會對網頁進行分塊；
    • <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>main 元素測試</title> </head> <body><header><nav><ul><li><a href="#">首頁</a></li><li><a href="#">新聞</a></li></ul></nav></header><main><h1>科技新聞</h1><nav><ul><li><a href="#web">互聯網</a></li><li><a href="#zmt">自媒體</a></li><li><a href="#cxcy">創新創業</a></li></ul></nav><h2 id="web">互聯網</h2><h3>互聯網 2016...</h3><p>balabala</p><h2 id="zmt">自媒體</h2><ul><li>balabala</li><li>balabala</li></ul><h2 id="cxcy">創新創業</h2><ul><li>balabala</li><li>balabala</li></ul></main><footer>Copyright @...</footer> </body> </html>

    定義標題欄

    header 用于防止整個頁面或頁面內的一個內容區塊的標題，同時也可以包含其他內容。類似于 hgroup、table、form、nav等元素只要應該放在頭部區域，就可以放在 header 中。

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><header><hgroup><h1>我的博客</h1><a href="#">[URL]</a><a href="#">[訂閱]</a><a href="#">[手機訂閱]</a></hgroup><nav><ul><li>首頁</li><li><a href="#">目錄</a></li><li><a href="#">社區</a></li><li><a href="#">微博我</a></li></ul></nav></header> </body> </html>

    定義標題組

    hgroup 將標題或者子標題堿性分組，通常與 h1 ~ h6 結合使用。如果文章只有一個標題，就不需要使用 hgroup 來進行分組。

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><article><header><hgroup><h1>主標題</h1><h2>副標題</h2><h3>標題說明</h3></hgroup><p><time datetime="2017-6-20">發布時間：2017 年 6 月 20 日</time></p></header><p>新聞正文</p></article> </body> </html>

    定義腳注欄

    footer 元素用于為內容塊添加腳注，它可以作為父級內容的腳注，也可以作為整個網頁的腳注。

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><article><header><hgroup><h1>主標題</h1><h2>副標題</h2><h3>標題說明</h3></hgroup></header><p>Hello</p><footer>Aricle 的腳注哦~~</footer></article><p>新聞正文</p><footer><ul>關于</ul><ul>導航</ul><ul>聯系</ul></footer> </body> </html>

    定義聯系信息

    address 元素用于定義聯系信息、文檔作者、聯系方式、email、電話號碼等等。

    <!DOCTYPE html> <html> <header><meta charset="utf-8"> </header> <body><footer><section><address><a title="作者：MDN" href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5">HTML5 - Web開發指南</a></address><p>發布于：<time datetime="2017-6-1">2017 年 6 月 1 日</time></p></section></footer> </body> </html>

    定義時間段

    time 元素配合上其中的 datetime 屬性，用于對機器的日期和時間進行編碼。

    注意：

  • datetime 屬性中的日期與時間之間要用 “T” 分隔
  • 若要表示另一個地區的時間，可以加上時差
    • <!DOCTYPE html> <header><meta charset="utf-8"> </header> <body><time datetime="2017-11-13">2017 年 11 月 13 日</time><time datetime="2017-11-13">11 月 13 日</time><time datetime="2017-11-13">我的生日</time><time datetime="2017-11-13T20:00">我的生日晚上 8 點</time><!--表示給機器編碼時使用 UTC 標準時間--><time datetime="2017-11-13T20:00Z">我的生日晚上 8 點</time><!--添加時差，表示向機器編碼另一地區時間；若是本地時間，則不需要加上時差--><time datetime="2017-11-13T20:00+9:00">我的生日晚上 8 點的美國時間</time> </body>

    定義發布日期？

    若文章中存在兩個日期，因此可以使用 pubdate 來表示哪個才是發布日期，多用在網站的公告等里面。

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> </head> <body><article><header><h1>科技公司都變成了數據公司</h1><p>發布日期：<time datetime="2021-9-18" pubdate>2021-9-18</time></p><p>關于<time datetime="2021-9-19">9 月 19 日</time>更正通知</p></header><p>balabala</p><footer><p>https://www.huxiu.com/article/176524.html</p></footer></article> </body> </html>

    總結

    以上是生活随笔為你收集整理的HTML5学习笔记（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。