HTML5 補坑 - HackMD

# HTML5 補坑沒在鳥版權的na ## header 標籤 > header 元素是一種具有引導和導航作用的元素，通常表示整個頁面或頁面上的一個內容塊的頭部，它可以包含標題元素h1 ~ h6，也可以包含其他的內容，如導航、logo、搜索表單等等。 **【注意】** header 標籤中必須包含一個標題元素，並且子元素不唯一。 **【注意】** 不能在 header 里嵌套 footer 或另一個 header 元素，也不能在 footer 或 address 元素里嵌套 header元素。 [參考文章1 ( 使用場合、注意事項 )](https://blog.csdn.net/ixygj197875/article/details/79753384?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162695070016780366568155%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162695070016780366568155&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-3-79753384.first_rank_v2_pc_rank_v29&utm_term=html5+header&spm=1018.2226.3001.4187) [參考文章2 ( 使用場合、注意事項 )](https://blog.csdn.net/panda_2022/article/details/106590029?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-4.control&spm=1001.2101.3001.4242) [參考文章3 ( h1~h6 heading元素介紹 )](https://ithelp.ithome.com.tw/articles/10212049) ## nav 標籤 > nav 元素代表頁面的導航區域，通常包含一組比較重要的導航連結，這些連結可以指向當前頁面的其他部分，也可以指向其他頁面或資源。例如，使用 nav 元素定義頁面的主導航。 **【注意】** 只有具有導航作用的連結才適用。 **【注意】** 頁腳常見資訊如服務條款、版權訊息等連結應該放於 footer 元素中。 [參考文章1 ( 使用場合、注意事項 )](https://waibo.blog.csdn.net/article/details/79753400?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-5.control) [參考文章2 ( 使用場合、注意事項 )](https://blog.csdn.net/u010142437/article/details/100042363?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162726648116780261975220%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162726648116780261975220&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~top_click~default-2-100042363.pc_v2_rank_blog_default&utm_term=nav&spm=1018.2226.3001.4450) ## main 標籤 > main元素代表文檔的主內容區，它應當與文檔直接相關，或者是文檔的中心主題的擴展，並且，應當是文檔中獨一無二的，不會在文檔中其他任何地方（如，側邊欄、導航欄、版權訊息、搜索框）重複出現的內容。 **【注意】** 一個頁面內只能有一個 main 標籤。 **【注意】** 不能將 main 元素放在 article、aside、header、footer、nav 元素的里面。 [參考文章1 ( 使用場合、注意事項 )](https://blog.csdn.net/ixygj197875/article/details/79753416?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162729380416780265417781%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162729380416780265417781&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~baidu_landing_v2~default-6-79753416.pc_v2_rank_blog_default&utm_term=html+main&spm=1018.2226.3001.4450) ## article 標籤 > article 元素代表文檔、介面、應用程式、或網站中一個獨立的、完整的、可以獨自被外部引用的內容，它可以是一篇論壇貼文、一篇文章、一篇新聞報導、一則留言回覆等任何獨立的內容塊，它通常有自己的標題、頁腳等。因此，article 元素裡面可包含獨立的 header、footer 等元素。 **【注意】** 可以將一個 article 元素嵌套在另一個 article 元素中，主要內層的 article 元素與外層 article 元素是部分與整體的關係。 [參考文章1 ( 使用場合、注意事項 )](https://blog.csdn.net/ixygj197875/article/details/79770686?ops_request_misc=&request_id=&biz_id=102&utm_term=html5%20article&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-5-.pc_v2_rank_blog_default&spm=1018.2226.3001.4450) [參考文章2 ( 嵌套範例1 )](https://blog.csdn.net/zyf13716764752/article/details/90263453?ops_request_misc=&request_id=&biz_id=102&utm_term=html5%20article&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-3-.pc_v2_rank_blog_default&spm=1018.2226.3001.4450) [參考文章3 ( 嵌套範例2 )](https://blog.csdn.net/ziy10231207/article/details/51878116?locationNum=3&fps=1&utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_utm_term~default-0.control&spm=1001.2101.3001.4242) ## section 標籤 > section 元素標籤用來表現普通的文檔內容或應用區塊。一個 section 通常由內容及其標題組成，但 section 元素標籤並非一個普通的容器元素；當一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用 div 元素而非 section。 **【注意】** section 標籤中必須包含一個標題元素。 **【注意】** 如果 article、aside 或 nav 標籤更符合狀況，就不要使用 section。 [參考文章1 ( 使用場合、注意事項 )](https://blog.csdn.net/edg2333/article/details/52687655?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162728114416780264031927%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162728114416780264031927&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-6-52687655.first_rank_v2_pc_rank_v29&utm_term=html+section+&spm=1018.2226.3001.4187) [參考文章2 ( section & article & div 標籤使用場合 )](https://blog.csdn.net/Ash_Zheng/article/details/47023825?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162728114416780264031927%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162728114416780264031927&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~baidu_landing_v2~default-7-47023825.first_rank_v2_pc_rank_v29&utm_term=html+section+&spm=1018.2226.3001.4187) ## article 標籤 & section 標籤的差異 > [參考文章1](https://blog.csdn.net/u013205165/article/details/90518020?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162728114416780265470334%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=1627281144167802o65470334&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-12-90518020.first_rank_v2_pc_rank_v29&utm_term=html+section+&spm=1018.2226.3001.4187) > [參考文章2](https://blog.csdn.net/weixin_43386439/article/details/90208824) ## aside 標籤 > aside 元素代表跟文檔的主內容區相關，但它又獨立於主內容區，並且可以被單獨拆分出來，而不會對整體內容產生影響。aside 通常用來放置非主要內容、側邊欄、說明、提示、廣告等。 **【注意】** 考慮到內容優先、可訪問性和 SEO，應該將 aside 元素放在 main 元素之後。 [參考文章1 ( 使用場合、注意事項 )](https://blog.csdn.net/ixygj197875/article/details/79770711?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162728991716780262566500%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162728991716780262566500&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-1-79770711.first_rank_v2_pc_rank_v29&utm_term=thml+aside&spm=1018.2226.3001.4187) [參考文章2 ( 使用場合 )](https://blog.csdn.net/judyge/article/details/51830573?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162729060116780271544216%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162729060116780271544216&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-3-51830573.first_rank_v2_pc_rank_v29&utm_term=html+aside&spm=1018.2226.3001.4187) ## nav 標籤 & aside 標籤使用時機 > [參考文章1 ( 推薦文章列表這種側邊導航欄應用 aside + ul )](https://blog.csdn.net/qq_45130472/article/details/107885538?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162729122716780357282515%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162729122716780357282515&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-7-107885538.first_rank_v2_pc_rank_v29&utm_term=nav+aside&spm=1018.2226.3001.4187) ## footer 標籤 > footer 元素代表整個頁面、文章或區域的頁腳，常位於頁面或內容塊的結尾，通常包含頁面或內容塊的腳註訊息，如作者、版權、相關文檔的連結、聯繫訊息等。如果 footer 元素是 article 或 section 元素的子元素，它就成為文章或內容塊的腳註，其中可以包含相關文章的連結、文章的發布日期、分類等。例如，可以用來顯示“上一篇”、“下一篇”的連結。 **【注意】** 頁腳常見資訊如服務條款、版權訊息等連結應該放於 footer 元素中。 [參考文章1 ( 使用場合 )](https://blog.csdn.net/ixygj197875/article/details/79770754?ops_request_misc=&request_id=&biz_id=102&utm_term=html%20footer&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~sobaiduweb~default-7-.nonecase&spm=1018.2226.3001.4450) ## figure 標籤 > figure 元素用來定義一塊獨立的內容，如圖案、圖表、插圖、程式碼片段等。並且，figure 元素的內容應該與主內容相關，而且獨立於上下文，如果刪除，也不應對文檔流產生影響。在 figure 元素中，通過 figcaption 元素來定義內容的標題（caption）。figcaption 元素並不是必需的。 **【注意】** figcaption 必須是 figure 元素的第一個子元素或最後一個子元素。 **【注意】** 一個 figure 標籤中最多只會有一個 figcaption。 > [參考文章1 ( 使用場合、注意事項 )](https://blog.csdn.net/ixygj197875/article/details/79782861?ops_request_misc=&request_id=&biz_id=102&utm_term=html%20%20figure&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-.first_rank_v2_pc_rank_v29&spm=1018.2226.3001.4187) > [參考文章2 ( figure ＋ picture 標籤 )](https://stackoverflow.com/questions/12899691/use-of-picture-inside-figure-element-in-html5) ## picture 標籤 > [參考文章1 ( 使用場合 )](https://blog.csdn.net/github_36534129/article/details/53537454?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162737258016780366583712%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162737258016780366583712&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-53537454.first_rank_v2_pc_rank_v29&utm_term=html+picture&spm=1018.2226.3001.4187) > [參考文章2 ( media 屬性介紹 )](http://www.w3big.com/zh-TW/tags/att-style-media.html) > [參考文章3 ( figure ＋ picture 標籤 )](https://stackoverflow.com/questions/12899691/use-of-picture-inside-figure-element-in-html5) ## input 標籤新特性 > [參考文章1 ( 必須搭配 form 標籤，否則 ( type = email、url ) 等屬性的提示不會跳出 )](https://medium.com/ui-ux%E7%B7%B4%E5%8A%9F%E5%9D%8A/html5-%E6%96%B0%E5%A2%9E%E7%9A%84%E8%A1%A8%E5%96%AE%E5%85%83%E4%BB%B6-%E5%B1%AC%E6%80%A7-3d7c4f5688a2) ## 相對路徑 & 絕對路徑 > [參考文章1 ( 盡量用相對路徑 )](https://www.w3school.com.cn/html/html_filepaths.asp) ## template 標籤 ( 待補 ) > [參考文章1 ( 例子不夠好＝＝ )](https://www.jc2182.com/html/html-template-tag.html)