2.2.1標記與元素
1.,,等都是標記
起始標記記為<…>,結束標記記為</…>
2.標記分為普通標記和空標記
（1）普通標記：成對出現，包含起始標記和結束標記
基本語法：控制的文字內容
起始標記告訴瀏覽器開始開始執行此標記的功能，結束標記告訴瀏覽器結束執行此標記。
注意：
標記可以成對巢狀但是不能交叉巢狀。
比如對於,,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<hr/>
</body>
</html>
2.2.2HTML屬性
屬性：與標記相關的特性描述稱為屬性。此外還要為屬性賦值。
1.超連結標記：…，href是它的屬性，要為href賦值，賦的值是連結。
<a href = "https://mail.qq.com/">QQ郵箱</a>
2.空標記也可以加一些屬性。就是一個空標記，src,width,height是它的屬性。
<img src = "img\Stefanie Sun.jpg" width = 200 height = 100 />
<img src = "img\Stefanie Sun.jpg" width = 200 height = 100 />
所以總結以下它的基本語法：
對於普通標記：<標記名 屬性1 = 「」 屬性2 = 「」 …>控制的文字內容</標記名>
對於空標記：<標記名 屬性1 = 「」 屬性2 = 「」 … />
注意：屬性放在起始標記的尖括號中(中)，控制的文字內容放在起始標記和結束標記之間。
屬性之間沒有先後順序。
2.3HTML5檔案的結構
2.3.1HTML5檔案的基本結構
1.HTML5檔案的基本結構如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
...
</body>
</html>
2.（1）HTML檔案分為檔案頭和檔案體。
（2）和之間存放頭部資訊，用來說明網頁的基本情況。
（3）和之間存主體資訊，用來描述網頁的正文部分。
2.3.2網頁標題
<title>中國傳統文化</title>
2.3.3定義後設資料meta
1.meta後設資料是什麼：後設資料定義在檔案的head部分,用來描述HTML檔案的資訊。這些資訊通常包括對網頁的描述，網頁中的關鍵詞等。
meta定義的資料不會顯示在網頁上，只在源程式中顯示。
2.一些經常使用的後設資料
（1）定義網頁的字元集
<meta charset="UTF-8">
（2）定義搜尋引擎關鍵字
<meta name = "keywords" content = "孫燕姿"/>
（3）對網頁的描述
<meta name = "description" content = "我遇見誰，會有怎樣的對白。"/>
(4)頁面的最新版本，將屬性值設定為revised，屬性值寫版本資訊
<meta name = "revised" content = "九歲阿,2020/10/01"/>
(5)將屬性http-equiv屬性的值修改為refresh，content設定秒數，就可以是頁面在幾秒內重新整理一次
<meta http-equiv = "refresh" content = "5"/>
3.後設資料的綜合應用
設定字元集是UTF-8，頁面描述是「張旭簡介」，頁面關鍵詞是「張旭，草聖，古詩」，10秒重新整理一次。程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "description" content = "張旭簡介">
<meta name = "keywords" content="張旭，草聖，古詩"/>
<meta http-equiv="refresh" content = "10"/>
<title>後設資料</title>
</head>
<body>
</body>
</html>
2.3.4HTML5新增的結構標記
1.header標記定義檔案的頁首
2.footer定義檔案的或章節的頁尾
3.nva標記定義導航連結的部分
4.section用於分組與主題相關的內容，例如一本書中的各章，通常可以作為資料庫的一部分。
4.綜合應用，程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新增結構標記</title>
</head>
<body>
<header>
這裡是頁首部分
</header>
<nav>
<a href = "https://weixin.qq.com/">微信</a>
<a href = "https://mail.qq.com/">QQ郵箱</a>
<a href = "https://www.foxmail.com/">Foxmail</a>
</nav>
<p>網頁的其它部分內容</p>
<footer>
這裡是頁尾部分
</footer>
</body>
</html>
2.4綜合案例——基本的HTML5網頁
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name = "description" content = "關於HTML5"/>
<meta name = "keywords" content = "HTML5,CSS,網頁設計"/>
<title>基本的html網頁</title>
</head>
<body>
<header>
HTML5特性
</header>
<nav>
<a href = "https://weixin.qq.com/">微信</a>
<a href = "https://mail.qq.com/">QQ郵箱</a>
<a href = "https://www.foxmail.com/">Foxmail</a>
<a href = "https://www.tencent.com/zh-cn">騰訊</a>
</nav>
<section>
<p>正文部分的內容1</p>
<p>正文部分的內容2</p>
<p>正文部分的內容3</p>
<p>正文部分的內容4</p>
<p>正文部分的內容5</p>
</section>
<footer>
聯絡方式：175xxxxx42@qq.com
</footer>
</body>
</html>