HTML的基本結構
每個HTML文檔都應包含以下基本成分：
<!DOCTYPE html>
<html lang = "zh-CN">
<head>
<meta charset = "utf-8" />
<title></title>
</head>
<body>
</body>
</html>
這是每個HTML頁面的基礎。縮進並不重要，但結構很重要。具體如下：
DOCTYPE;html元素
head元素（包含lang屬性，說明語言，非必需，但推薦加上）
說明字符編碼的meta元素
title元素
body元素
這些元素具體怎麼用，將在後面講，這裏先介紹元素的定義。
元素
元素由開始標籤，內容和結束標籤。如<h1>算法</h1>是一個內容爲算法的標題。
還有一些空元素，由開始標籤和結束標籤結合。如圖像標籤：
<img src=”圖片url” width=”寬度” height=”長度” alt=”圖片說明” />( /可選)
元素有屬性和值，如上面的src，width等都是用來描述img元素的屬性，等號後面爲值。
父元素和子元素：元素之間有嵌套時，外層爲父元素，裏層爲子元素。只有第一代之間才爲父元素和子元素，超過一代爲祖先和後代關係。如：
<main role="main">
<article>
<h1>有一種尊嚴可以一文不值</h1>
<p>小時候有關“尊嚴”的印象最深的例子，就是韓信的“胯下之辱”了。。。
<p>....
</article>
</main>
在這個示例的html代碼塊中，main元素是article元素的父元素（也是祖先），是h1元素的祖先（但不是父元素）。
一些常用的HTML元素
標題元素：HTML提供了六級標題用於創建頁面信息的層級關係。六級標題分別爲：h1,h2,h3,h4,h5,h6，其中h1級別最高，h6級別最低，h2是h1的子標題。
創建分級標題要避免從h1直接跳到h3，但可以從h3直接跳到h1。
用法：
<h1>標題</h1>
<h2>子標題1</h2>
<h2>子標題3</h2>
<h3>3的子標題1</h3>
<h3>3的子標題2</h3>
<h1>標題2</h1>
<h2>子標題2</h2>
分級標題能夠對頁面信息進行分類和細分，傳達頁面的主題，另外分級標題在搜索引擎中佔的權重比較高，因此一定要用好分級標題。
需要注意的是，雖然分級標題的字體在顯示的時候，會被加粗變大，但這是瀏覽器附帶的效果，不能爲了改變字體效果而用分級標題，HTML是一種重語義的標記語言，必須弄清楚每個元素的語義。要想改變顯示效果，應該用CSS。關於CSS如何用，將在後面的學習筆記中介紹。
header元素：用於創建頁眉。通常，頁眉包括網站標誌、主導航和其他全站鏈接，甚至搜索框。如：
<body>
<header role = "banner">
<nav role = "navigation">
<ul title="示例網站 ">
<li><a href="https://www.bilibili.com" rel="external" title="bilibili">嗶哩嗶哩 </a></li>
<li><a href="https://www.baidu.com" rel="external" title="baidu">百度</a></li>
</ul>
</nav>
</header>
<article>…</article>
<body>
其中用到了nav元素，僅對文檔中的重要鏈接羣應該用nav元素包起來
ul元素表示無序列表，如果要表示有序的列表，應用ol元素
main元素：標記頁面的主要內容，一個頁面只能有一個main元素。
article元素：用於創建文章，可以是電影或音樂評論，產品描述，作文等等。一個頁面可以有多個artile元素，article元素還可以嵌套調用。
p元素：表示段落
section元素表示頁面中的特定區域。如對新聞進行分類時，每個類別可以標記爲一個section
aside元素：標記附註欄，內容包括重要引訴，側欄，廣告等。如果aside嵌套在主要內容裏，其中內容應與main的內容密切相關，而不是僅與頁面整體內容相關
footer元素：用於創建頁腳。頁腳是其父元素的頁腳。
div元素：一個通用容器，沒有任何語義。可用於爲其包圍的內容添加CSS效果
一些可用的地標角色
地標角色進一步豐富了html的語義，可以幫助用戶識別頁面區域，從而讓屏幕閱讀器用戶可以直接跳到這些區域。通常，對這些區域指定role屬性就可以了。
下面介紹一些可用的地標角色：
role=“banner” 面向全站的內容，將其添加到header元素，每個頁面只用一次
role=“navigation”導航性元素（通常爲鏈接）的集合，與nav是對應關係，應將其添加到每一個nav元素，或其他包含導航性鏈接的容器。這個角色可在每個頁面上使用多次，但不可過度使用
role=“main”文檔的主要內容，與main元素對應，只可用一次
role=“complementary”文檔中做爲主體內容補充的支撐部分。與aside元素是對應關係，應將其添加到aside或僅包含補充性內容的div元素。可以用多個
role=“contentinfo”將其添加到整個頁面的頁腳（通常爲footer元素），每個頁面僅使用一次。
最後，放一個用到了上面介紹的結構，元素和地標角色的簡單代碼供參考學習。
<!DOCTYPE html>
<html lang = "zh-CN">
<head>
<meta charset = "utf-8" />
<title>測試網站</title>
</head>
<body>
<header role = "banner">
<nav role = "navigation">
<ul title="一個用於展示用法的示例">
<li><a href="https://www.bilibili.com" rel="external" title="bilibili">嗶哩嗶哩</a></li>
<li><a href="https://www.baidu.com" rel="external" title="baidu">百度</a></li>
</ul>
</nav>
</header>
<main role="main">
<article>
<h1>文章標題</h1>
<p>一個文章的一個段落</p>
<p>一個文章的一個段落</p>
<p>一個文章的一個段落</p>
</article>
</main>
<div>
<aside role = "complementary">
<h1>附註欄標題</h1>
<img src="圖片鏈接" width ="250" height="175" alt="圖名" />
<p>一個小段落</p>
</aside>
</div>
<footer role="contentinfo">
<p>相關問題請聯繫***</p>
<address><a href="mailto:***@qq.com">***@qq.com</a><address>
</footer>
</body>
</html>