1. HTML5 簡介
HTML5 是最新的 HTML 標準，于 2014 年 10 月由 W3C 完成標準制定。它增加了許多新特性，包括語義化標簽、多媒體支持、圖形效果、離線存儲等。
1.1 HTML5 文檔基本結構
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML5 文檔標題</title>
</head>
<body><!-- 頁面內容 -->
</body>
</html>
-
<!DOCTYPE html>: 聲明文檔類型為 HTML5
-
<html>: 根元素，lang?屬性指定文檔語言
-
<head>: 包含文檔的元信息
-
<meta charset="UTF-8">: 指定字符編碼為 UTF-8
-
<title>: 定義文檔標題，顯示在瀏覽器標簽頁上
-
<body>: 包含文檔的可見內容
1.2HTML5 全局屬性
| 屬性 | 描述 | 示例 |
|---|
id | 定義元素的唯一標識符，用于在文檔中唯一標識一個元素 | <div id="uniqueDiv">內容</div> |
class | 定義元素的類名，用于 CSS 樣式或 JavaScript 操作 | <div class="myClass">內容</div> |
style | 定義元素的內聯樣式 | <div style="color:red;">紅色文本</div> |
title | 定義元素的額外信息，鼠標懸停時顯示 | <div title="提示信息">內容</div> |
lang | 定義元素內容的語言代碼（如?en、zh） | <div lang="en">English Content</div> |
dir | 定義元素內容的文本方向（ltr、rtl、auto） | <div dir="rtl">從右到左的文本</div> |
hidden | 定義元素是否隱藏（等同于?display: none） | <div hidden>隱藏內容</div> |
contenteditable | 定義元素是否可編輯（true?或?false） | <div contenteditable="true">可編輯內容</div> |
tabindex | 定義元素的 Tab 鍵順序，控制元素的焦點順序 | <button tabindex="1">按鈕1</button> |
accesskey | 定義訪問元素的快捷鍵 | <button accesskey="s">保存</button> |
draggable | 定義元素是否可拖動（true?或?false） | <div draggable="true">可拖動內容</div> |
spellcheck | 定義是否對元素內容進行拼寫檢查（true?或?false） | <input type="text" spellcheck="true"> |
translate | 定義元素內容是否翻譯（yes?或?no） | <div translate="no">不翻譯的內容</div> |
data-* | 自定義數據屬性，用于存儲私有數據 | <div data-id="123" data-name="example">內容</div> |
?2.?HTML5 中的標簽
2.1文本格式化標簽
| 標簽 | 描述 | 屬性 | 示例 |
|---|
<h1>~<h6> | 標題標簽，影響搜索引擎排名 | 無特有屬性 | <h1>一級標題</h1> |
<p> | 段落標簽 | 無特有屬性 | <p>這是一個段落。</p> |
<em> | 強調文本，通常顯示為斜體 | 無特有屬性 | <em>強調文本</em> |
<strong> | 定義語氣更強的強調文本，通常顯示為粗體 | 無特有屬性 | <strong>重要文本</strong> |
<del> | 定義刪除的文本 | 無特有屬性 | <del>刪除文本</del> |
<ins> | 定義插入文檔的文本 | 無特有屬性 | <ins>插入文本</ins> |
<b> | 純文本加粗，不強調語義 | 無特有屬性 | <b>加粗文本</b> |
<i> | 純文本斜體，不強調語義 | 無特有屬性 | <i>斜體文本</i> |
<u> | 下劃線文本，用于表示鏈接或特殊含義 | 無特有屬性 | <u>下劃線文本</u> |
<s> | 表示文本不再有效 | 無特有屬性 | <s>不再有效的文本</s> |
<mark> | 高亮文本，用于突出顯示文本 | 無特有屬性 | <mark>高亮文本</mark> |
<small> | 小號文本，用于展示次要或輔助信息 | 無特有屬性 | <small>小號文本</small> |
<sub> | 下標，如化學公式中的指數 | 無特有屬性 | <sub>下標文本</sub> |
<sup> | 上標，如平方根符號 | 無特有屬性 | <sup>上標文本</sup> |
<br> | 換行標簽，用于強制換行 | 無特有屬性 | 這是第一行<br>這是第二行 |
<hr> | 水平線標簽，用于分隔內容 | 無特有屬性 | <hr> |
?2.2圖像視頻音頻與鏈接標簽
| 標簽 | 描述 | 屬性 | 示例 |
|---|
<img> | 定義HTML頁面中的圖像 | src：指定圖像的URL；alt：圖像的替換文本 | <img src="image.jpg" alt="描述性文字"> |
<a> | 定義超鏈接 | href：指定鏈接目標；target：規定打開新頁面的位置 | <a href="https://example.com" target="_blank">鏈接文本</a> |
<audio> | 定義音頻內容 | src：音頻文件的路徑；controls：顯示音頻播放控件；autoplay：自動播放音頻；loop：循環播放音頻 | <audio src="audio.mp3" controls autoplay loop></audio> |
<video> | 定義視頻內容 | src：視頻文件的路徑；controls：顯示視頻播放控件；autoplay：自動播放視頻；loop：循環播放視頻；width/height：設置視頻的寬度和高度 | <video src="video.mp4" controls autoplay loop width="640" height="480"></video> |
<source> | 為<audio>或<video>指定多種媒體資源 | src：媒體文件的路徑；type：媒體文件的MIME類型 | <audio controls><source src="audio.mp3" type="audio/mpeg"><source src="audio.ogg" type="audio/ogg"></audio> |
2.3列表標簽?
| 標簽 | 描述 | 屬性 | 示例 |
|---|
<ul> | 定義無序列表 | 無特有屬性 | <ul><li>項目1</li><li>項目2</li></ul> |
<ol> | 定義有序列表 | start：定義第一個數字 | <ol start="3"><li>項目1</li><li>項目2</li></ol> |
<li> | 定義列表項 | 無特有屬性 | <li>列表項</li> |
?2.4HTML5 描述列表標簽
<dl> | 定義描述列表，用于將術語和描述組合在一起 | 無特有屬性，支持全局屬性 | <dl><dt>術語1</dt><dd>描述1</dd><dt>術語2</dt><dd>描述2</dd></dl> |
<dt> | 定義描述列表中的術語或名稱 | 無特有屬性，支持全局屬性 | <dt>術語1</dt> |
<dd> | 定義描述列表中術語的描述或解釋 | 無特有屬性，支持全局屬性 | <dd>描述1</dd> |
2.5表格標簽?
| 標簽 | 描述 | 屬性 | 示例 |
|---|
<table> | 定義表格 | border：規定表格的單元格是否具有邊框；cellspacing：設置單元格之間的空白；cellpadding：規定單元邊沿與其內容之間的空白；width/height：設置表格的寬度和高度 | <table border="1" cellpadding="5" cellspacing="0" width="500" height="300"> |
<tr> | 定義表格中的行 | 無特有屬性 | <tr><td>行內容</td></tr> |
<td> | 定義表格中的單元格 | rowspan：行跨度；colspan：列跨度 | <td rowspan="2" colspan="2">跨行跨列單元格</td> |
<th> | 定義表頭單元格 | 無特有屬性 | <th>表頭單元格</th> |
<thead> | 定義表格的頭部區域 | 無特有屬性 | <thead><tr><th>表頭</th></tr></thead> |
<tbody> | 定義表格的主體區域 | 無特有屬性 | <tbody><tr><td>主體內容</td></tr></tbody> |
<tfoot> | 定義表格的腳注區域 | 無特有屬性 | <tfoot><tr><td>腳注內容</td></tr></tfoot> |
<caption> | 定義表格的標題，位于表格的頂部或底部 | 無特有屬性 | <caption>表格標題</caption> |
2.6表單與輸入標簽
| 標簽 | 描述 | 屬性 | 示例 |
|---|
<form> | 定義表單 | action：表單數據提交地址；method：表單提交方式（get或post）；autocomplete：是否啟用自動完成功能（on/off）；enctype：表單數據編碼類型（如application/x-www-form-urlencoded）；name：表單名稱；novalidate：取消表單驗證；target：提交后響應的顯示目標（如_blank） | <form action="submit.php" method="post" autocomplete="on" enctype="application/x-www-form-urlencoded" name="myForm" novalidate target="_self"></form> |
<input> | 定義輸入框 | type：輸入框類型（如text、password、submit、reset、button、checkbox、radio等）；name：輸入框名稱；value：輸入框默認值；placeholder：輸入框提示文本；required：是否必填；readonly：是否只讀；disabled：是否禁用；autofocus：是否自動獲取焦點；form：關聯表單的id；list：關聯<datalist>的id | <input type="text" name="username" value="默認值" placeholder="請輸入用戶名" required readonly disabled autofocus form="myForm" list="datalistId"> |
<textarea> | 定義多行文本框 | rows：設置多行文本框的行數；cols：設置多行文本框的列數；name：名稱；placeholder：提示文本；required：是否必填；readonly：是否只讀；disabled：是否禁用；maxlength/minlength：最大/最小長度 | <textarea rows="4" cols="50" name="description" placeholder="請輸入描述" required readonly disabled maxlength="100" minlength="10"></textarea> |
<button> | 定義按鈕 | type：按鈕類型（如submit、reset、button）；name：按鈕名稱；value：按鈕值；disabled：是否禁用；form：關聯表單的id；formaction：覆蓋表單的action屬性；formenctype：覆蓋表單的enctype屬性；formmethod：覆蓋表單的method屬性；formnovalidate：覆蓋表單的novalidate屬性 | <button type="submit" name="submitBtn" value="submitValue" disabled form="myForm" formaction="submit.php" formenctype="application/x-www-form-urlencoded" formmethod="post" formnovalidate>提交</button> |
2.6.1HTML5表單輸入框類型
| 類型 | 描述 | 示例 |
|---|
text | 單行文本輸入框 | <input type="text" name="username"> |
password | 密碼輸入框，輸入內容以點或星號顯示 | <input type="password" name="password"> |
checkbox | 復選框，可多選 | <input type="checkbox" name="hobby" value="reading">閱讀 |
radio | 單選框，同一組中只能選一個 | <input type="radio" name="gender" value="male">男 |
submit | 提交按鈕，用于提交表單數據 | <input type="submit" value="提交"> |
reset | 重置按鈕，用于將表單恢復到初始值 | <input type="reset" value="重置"> |
button | 普通按鈕，需配合JavaScript使用 | <input type="button" value="點擊我"> |
file | 文件上傳輸入框，用于選擇文件上傳 | <input type="file" name="avatar"> |
date | 日期選擇輸入框 | <input type="date" name="birthday"> |
time | 時間選擇輸入框 | <input type="time" name="appointment"> |
datetime-local | 本地日期和時間選擇輸入框 | <input type="datetime-local" name="event-time"> |
email | 電子郵件輸入框，自動驗證輸入內容是否為有效電子郵件格式 | <input type="email" name="email"> |
number | 數字輸入框，可設置最小值、最大值和步長 | <input type="number" name="age" min="18" max="99" step="1"> |
range | 范圍選擇輸入框，以滑塊形式選擇數值范圍 | <input type="range" name="volume" min="0" max="100"> |
url | 網址輸入框，自動驗證輸入內容是否為有效網址格式 | <input type="url" name="website"> |
search | 搜索輸入框，通常帶有清除按鈕 | <input type="search" name="query"> |
tel | 電話號碼輸入框 | <input type="tel" name="phone"> |
?2.7HTML5表單輔助標簽
| 標簽 | 描述 | 示例 |
|---|
<label> | 定義表單控件的標簽，增強用戶體驗和可訪問性 | <label for="username">用戶名：</label><input type="text" id="username" name="username"> |
<fieldset> | 對表單中的相關元素進行分組 | <fieldset><legend>個人信息</legend><label for="name">姓名：</label><input type="text" id="name" name="name"></fieldset> |
<legend> | 定義<fieldset>元素的標題 | <fieldset><legend>個人信息</legend>...</fieldset> |
<datalist> | 定義輸入字段的選項列表，提供自動完成功能 | <input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"></datalist> |
<output> | 定義不同類型的輸出，如計算結果 | <form oninput="a.value=parseInt(b.value)+parseInt(c.value)">0<input type="range" id="b" value="50">100+<input type="number" id="c" value="50">=<output name="a" for="b c"></output></form> |
<progress> | 定義任何類型的進度條 | <progress value="22" max="100"></progress> |
<meter> | 定義預定義范圍內的標量測量（或分數） | <meter value="2" min="0" max="10">2 out of 10</meter> |
2.8HTML5新增語義化標簽 （基本是在手機端使用的）
| 標簽 | 描述 | 屬性 | 示例 |
|---|
<article> | 定義頁面獨立的內容區域 | 無特有屬性 | <article>這是獨立的內容區域</article> |
<aside> | 定義頁面的側邊欄內容 | 無特有屬性 | <aside>這是側邊欄內容</aside> |
<header> | 定義文檔的頭部區域 | 無特有屬性 | <header>這是文檔頭部區域</header> |
<footer> | 定義section或document的頁腳 | 無特有屬性 | <footer>這是頁腳內容</footer> |
<nav> | 定義導航鏈接的部分 | 無特有屬性 | <nav>這是導航鏈接部分</nav> |
<section> | 定義文檔中的節（section） | 無特有屬性 | <section>這是文檔中的一個節</section> |
