基本HTML結構
配置：在vs code中聲明頁面為html，然後添加open in browser，view in browser插件通過快捷鍵alt+b實現在瀏覽器中查看編寫好的html界面
基本成分：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equivView Code="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
1.編寫HTML5頁面開頭的步驟
- 輸入<!DOCTYPE html>，聲明頁面為HTML5文檔
- 輸入<html lang=" ">聲明頁面默認使用的語言
- 輸入<head>開始網頁文檔的頭部
- 輸入meta元素聲明字符編碼
- <title></title> 包含頁面的標題
- 輸入</head>，結束頁面文檔的頭部
- 輸入<body>,開始頁面的主體
- 為頁面預留一些空行
- 輸入</body>,結束主體
- 輸入</html>,結束頁面
2.創建分級標題
HTML提供了六級標題用於創建頁面信息的層次關系：
h1,h2,h3,h4,h5,h6 級別由高到低
註意：
- 創建分級標題時，要避免跳過某些級別，如從3到5，不過允許從低級別跳到高級別
- 不要使用h1~6標記副標題，標語以及無法成為獨立標題的子標題
使用header創建頁眉——包括網站標誌，主導航和其他全站鏈接，甚至搜索框
<body> <header role="banner"> <nav> <ul> <li><a href="#gaudi">Barcelona‘s Architect</a></li> <li lang="es"><a href="#sagrada familia">La Sagrada Familia</a></li> <li><a href="#park-guell">Park Guell</a></li> </ul> </nav> </header> </body>View Code
註意：
- 只在必要時使用header
- header與h1~h6元素中的標題是不能互換的，它們都有各自的語義目的
- 不能在header裏嵌套footer元素或另一個header，也不能在footer或address元素裏嵌套header
3.標記導航
對頁面中的重要鏈接群使用nav：
- 輸入<nav>
- 輸入一組鏈接並將其標記為ul（無序列表），ol（有序列表）結構
- 輸入</nav>
4.標記頁面的主要區域
一個頁面只有一個部分代表其主要內容，可以將這樣的內容包在main元素中，該元素在一個頁面僅使用一次，最後在main開始標簽加上role=“main”
註意：
- 如果創建的是Web應用，則使用main包圍其主要的功能
- 不能將main放置在article，aside，footer，header，nav元素中
5.創建文章
article元素表示文檔，頁面，應用或網站中一個獨立的容器，原則上是可獨立分配或可再用的
步驟：
- 輸入<article>
- 輸入內容，可以包含任意數量的元素，類型包括段落，列表，音頻，視頻，圖像，圖形等
- 輸入</article>
註意：
- article可以嵌套使用
- 一個頁面可以有0或多個article
- 一個article可以包含一個或多個section元素
6.定義區塊
section元素：“通用的”區塊，標記頁面中的特定區域
定義區塊的步驟：
- 輸入<section>
- 輸入區塊的內容
- 輸入</section>
註意：
如果只是出於添加樣式的原因要對內容添加一個容器，應使用div而不是section
7.指定附註欄
aside元素
註意：
- 在HTML中，應該將附註欄內容放在main的內容之後，通過CSS改變它們在瀏覽器中的顯示順序
- 對於與內容有關的圖像（如圖表，圖形或帶有說明文字的插圖），使用figure而非aside
- HTML5不允許將aside嵌套在address元素內
8.創建頁腳
footer元素
註意：不能在footer裏嵌套header或另一個footer。同時，也不能將footer嵌套在header或address元素裏。
只能對頁面級的footer使用role="contentinfo",且一個頁面只能使用一次
9.創建通用容器div
10.使用ARIA改善可訪問性
一些可用的地標角色：
- role="banner"(橫幅):添加到頁面級的header元素，每個頁面只用一次
- role="navigation"(導航):與nav元素是對應關系，將其添加到每個nav元素，或其他包含導航性鏈接的容器
- role="main"(主體）:最好添加到main，也可以添加到其他表示主體的元素
- role="complementary"(補充性內容):添加到aside或div元素（前提是僅包含補充性內容）
- role="conteninfo"(內容信息):添加至整個頁面的頁腳（footer），每個頁面僅使用一次
11.為元素指定類別或ID名稱
可以給HTML元素分配唯一的標識符（ID），或指定其屬於某個（或某幾個）類別，也可以同時指定標識符和類別
（1）為元素添加唯一的ID
id=“name”
（2）為元素指定類別的方法
class=“name”或class=“name anothername”（可以指定兩個以上的類別名稱）
12.為元素添加title屬性
使用title屬性為網站上任何部分加上提示標簽，用的最多的是鏈接
13.添加註釋
步驟：
- 輸入<!--
- 輸入註釋
- 輸入-->結束註釋文本
基本HTML結構