本博客所講解 HTML 的版本爲 HTML 5 ，並嚴格遵循該版本規則
1、文檔聲明
<!DOCTYPE html>
文檔聲明必須位於 HTML 5 文檔中的第一行，該標籤不屬於 HTML 標籤，用於告知瀏覽器文檔所使用的 HTML 規範
2、格式
<!DOCTYPE html>
<html>
<head>
<title>...</title>
...
</head>
<body>
...
</body>
</html>
HTML 5 必需按照如上的格式進行編寫，任何一個標籤都不能缺少！
其中：
title 在標籤頁顯示，作爲標籤名
head 僅是改變網頁樣式的工具，不顯示在網頁內容
body 用於顯示網頁內容
3、註釋（允許跨行註釋）
<!--註釋內容-->
or
<!--註釋內容
註釋內容
註釋內容-->
4、塊級元素 與 行內元素
塊級元素 總是在新的行上開始
塊級元素 可包含 塊級元素 和 行內元素
行內元素 不會另起一行
行內元素 只能包含 行內元素
舉例：p是塊級元素，span是行內元素，在網頁上寫入如下源代碼
<p>測試案例1</p>
<p>測試案例1</p>
<br/> <!--作用是換行的標籤，也屬於行內元素-->
<span>測試案例2</span>
<span>測試案例2</span>
<br/>
<p>測試案例3<span>測試案例3</span></p>
網頁結果如下：
測試案例1
測試案例1
測試案例2 測試案例2 <!--注意中間有空格哦-->
測試案例3測試案例3
5、meta 元素（必須位於 <head> 標籤內部）（空標籤）
指定網頁編碼，防止亂碼出現（一般都加上）
<meta charset="UTF-8">
爲搜索引擎提供關鍵詞，便於搜索
<meta name="keywords" content="courserli,blog,HTML5">
類似還有 描述網頁內容、定義網頁的作者...
設置網頁尺寸自適應
<meta name="viewport" content="width=device-width, initial-scale=1.0">
每 5 秒刷新一下瀏覽器並跳轉到指定頁面
<meta http-equiv="refresh" content="5;https://blog.csdn.net/CourserLi">
6、img 元素（插入圖片）（空標籤）
<img alt="小貓" src="D:\cat.jpg" width="256px" height="256px">
<img> 標籤有兩個必需的屬性：alt 屬性 和 src 屬性
alt 屬性用於當圖片無法顯示時，顯示的替代文本
src 屬性用於插入圖片
而 width 屬性 和 height 屬性 用於指定圖片的寬度和高度（單位：像素）
7、style 元素（定義樣式信息）
<style type="text/css">
h1 {color:#FF0000;} <!--所有 h1 標題改爲紅色-->
p {color:#0000FF;} <!--所有段落改成藍色-->
body {background-color:#FFEFD6;} <!--網頁背景改成米色-->
</style>
type 屬性只有 "text/css" 的值，所以此標籤的寫法一般是固定的
作用是改變標籤內指定樣式的類型
<style media="screen and (min-width:512px) and (max-width:1024px)">
body{background-image: url("D:/background.jpg");}
</style>
media 屬性其中的一個值 "screen", 作用是指定樣式適用的媒體
在上述示例中，作用是當網頁寬度在 512px 與 1024px 中背景會替換成 style 標籤內的圖片
8、link 元素 （指定外部資源）(空標籤)
<link rel="stylesheet" type="text/css" href="D:/style.css" >
<!--使用外部鏈接（相當於補丁）-->
<!--鏈接.css文檔中只包括 h1 {color:#FF0000;} 類似的信息-->
<link rel="icon" type="image/x-icon" href="D:/pic.ico" >
<!--替換標籤頁圖標-->
rel 屬性是必加的，用於指定文檔與被鏈接資源之間的關係
type 屬性，規定被鏈接文檔的 MIME 類型（一般都加上）
href 屬性，指定被鏈接資源的 URL（一般也都加上）
其他常用屬性還有 media...
9、a 元素（超鏈接）
<p>Courser Li <a href="https://blog.csdn.net/CourserLi" target="_blank">傳送門</a></p>
注意 <a> 不是空標籤，且兩個標籤的位置順序不能變
target 屬性的 "_blank" 值，作用是在新的網頁打開鏈接
href 屬性已講
10、顯示源代碼
若想顯示在網頁上顯示 < 號或 > 號，不能直接寫入，因爲瀏覽器會誤以爲是標籤
應該用字符實體代替符號，如用 " 代替 < 號，用 > 代替 > 號
下面演示一下：
<pre> <!--作用是預處理的標籤，能夠使網頁顯示內容與源代碼一樣，保留空格和換行符-->
<code> <!--作用是增強代碼可讀性的標籤，在網頁顯示源代碼時使用-->
<p>一個代碼段落</p>
</code>
</pre>
網頁結果如下：
<p>一個代碼段落</p>
11、序列
ol 元素用於定義有序列表
ul 元素用於定義無序列表
li 元素用於定義列表中的項目
下面演示一下：
<ol>
<li>一號</li>
<li>二號</li>
</ol>
<br/>
<ul>
<li>三號</li>
<li>四號</li>
</ul>
<br/>
<ul>
<li>五號</li>
<ul>
<li>六號</li> <!--嵌套序列-->
</ul>
</ul>
網頁結果如下：
1.一號
2.二號
· 三號
· 四號
· 五號
· 六號
12、表格
table 元素用於表格的生成
tr 元素用於表格的列數
th 元素用於表格的行數
下面演示一下：
<table>
<tr>
<th>Name</th> <!--表格第一行字體自動加粗-->
<th>Job</th>
</tr>
<tr>
<td>Courser Li</td>
<td>Student</td>
</tr>
</table>
網頁結果如下：
Name Job
Courser Li Student
網頁顯示錶格無邊框，若想要加則要添加 style 元素
13、表單
form 元素用於爲用戶輸入創建 HTML 表單
action 屬性用於當用戶提交表單時向何處發送表單數據（值爲 URL）
method 屬性用於規定發送 HTTP 方法，隱藏用 "post"，顯示用 "get"
input 元素用於蒐集用戶信息
type 屬性用於規定 input 元素的類型，值爲 "text" 顯示輸入文本，值爲 "password" 不顯示
name 屬性用於指定元素的名稱（以便在 PHP 中引用元素）
button 元素用於定義一個按鈕
type 屬性用於指定按鈕的類型
name 屬性用於指定按鈕的名稱
下面演示一下：
<form action="D:/welcome.php" method="post">
賬號：<input type="text" name="name"> <br/>
密碼：<input type="password" name="password"> <br/>
<button type="submit">提交</button>
</form>
（HTTP 引擎、網頁內容）結果如下：
14、架構
div 元素用於 HTML 文檔中分隔一個區塊
class 屬性用於指向樣式表中的類
下面演示一下：
<style type="text/css">
h1.intro{color:blue;}
p.important{color:green;}
</style>
<div>
<h1 class="intro">藍色</h1>
<p class="important">綠色</p>
</div>
網頁結果如下：
藍色 <!--藍色的標題-->
綠色 <!--綠色的段落-->
15、video 元素（插入視頻）
src 屬性用於指定播放視頻的 URL 地址
width height 屬性用於調節視頻長寬
poster 屬性用於提供視頻封面
controls 屬性用於向用戶提供控件，如播放、暫停按鈕
下面演示一下：
<video src="D:\www.mp4" width="960" height="540" poster="D:\cat.jpg" controls >
抱歉，本視頻因瀏覽器原因播放不了</video>
<!--文字是當視頻無法顯示時出現的-->
16、iframe 元素（內嵌網頁）
src 屬性用於指定內嵌網頁的 URL 地址
width height 屬性用於調節內嵌網頁長寬（值爲 px）
下面演示一下：
<iframe src="https://blog.csdn.net/CourserLi" width="1024px" height="800px">
抱歉，內嵌網頁因瀏覽器原因顯示不了</iframe>
<!--文字是當內嵌網頁無法顯示時出現的-->