第一章 HTML5概述
- 1.1、什么是HTML
- 1.2、什么是HTML5
- 1.3、本文重要說明
- 1.4、瀏覽器的版本
- 1.5、選擇開發工具
第二章 HTML5語法
- 2.1、基本結構
- 2.2、語法規范
- 2.3、標簽規范
第三章 HTML5標簽
- 3.1、標題標簽
- 3.2、段落標簽
- 3.3、鏈接標簽
- 3.4、影像標簽
- 3.5、表格標簽
- 3.6、串列標簽
- 3.7、分組標簽
- 3.8、語意標簽
- 3.9、表單標簽
- 3.10、框架標簽
- 3.11、音頻標簽
- 3.12、視頻標簽
- 3.13、其它標簽
- 3.14、頭部標簽
第四章 HTML5屬性
- 4.1、屬性概述
- 4.2、通用屬性
第五章 HTML5事件
- 5.1、事件概述
- 5.2、視窗事件
- 5.3、表單事件
- 5.4、鍵盤事件
- 5.5、滑鼠事件
- 5.6、媒體事件
- 5.7、其它事件

配套資料，免費下載
鏈接：https://pan.baidu.com/s/1xrblnEIJmxVbHSP7CIREcw
提取碼：yws0
復制這段內容后打開百度網盤手機App，操作更方便哦

第一章 HTML5概述

1.1、什么是HTML

HTML（HyperText Markup Language，超文本標記語言）是用來描述網頁的一種語言，它不是一種編程語言，而是一種標記語言，

1.2、什么是HTML5

HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一，HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發，

HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的資訊，HTML5在從前HTML4.01的基礎上進行了一定的改進，

1.3、本文重要說明

由于HTML5只是在HTML的基礎上進行了新增或者廢棄一些標簽或者特性，本文默認均為HTML5語法，被廢棄的部分就不再提起，HTML一般用于描述網頁的結構，所以一些樣式和腳本方面的標簽和屬性以及關于JavaScript部分的特性也不再提及，重點在于梳理常用標簽體系，

1.4、瀏覽器的版本

現今瀏覽器的許多新功能都是從HTML5標準中發展而來的，目前常用的瀏覽器有IE、火狐、谷歌、Safari和Opera等等，通過對這些主流web瀏覽器的發展策略調查，發現它們都支持HTML5上采取了措施，

（1）IE瀏覽器

2010年3月16日，微軟MIX10技術大會上宣布其推出的IE9瀏覽器已經支持HTML5，同時還聲稱，隨后將會更多的支持HTML新標準和CSS3新特性，

（2）FireFox瀏覽器

2010年7月，Mozilla基金會發布了即將推出的Firefox4瀏覽器的第一個早期測驗版，該版本中Firefox瀏覽器中進行了大幅改進，包括新的HTML5語法分析器，以及支持更多的HTML5語法分析器，以及支持更多的HTML5形式的控制等，從官方檔案來看，Firefox4對HTML5是完全級別的支持，目前，包括在線視頻，在線音頻在內的多種應用都已經在版本中實作，

（3）Google瀏覽器

2010年2月19日，谷歌Gears專案經理通過微博宣布，谷歌將放棄對Gears瀏覽器插件專案的支持，以重點開發HTML5專案，據費特表示，目前在谷歌看來，Gears應用用于HTML5的諸多創新非常相似，并且谷歌一直積極發展HTML5專案，因此只要谷歌不斷以加強網路標準的應用功能為作業重點，那么為Gears增加新功能就無太大意義了，另外，Gears面臨的需求也在日益下降，這也是谷歌做出吊證的重要原因，

（4）Safari瀏覽器

2010年6月7日，蘋果在開發者發布會公布Safari5，這款瀏覽器支持10個以上的HTML5新技術，包括全螢屏播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕，

（5）Opera瀏覽器

2010年5月5日，Opera軟體公司首席技術官，號稱“CSS之父”的Hakon Wium Lie認為，HTML5和CSS3，將會是全球互聯網發展的未來趨勢，包括目前Opera在內的諸多瀏覽器廠商，紛紛研發HTML5的相關產品，web未來屬于HTML5，

綜上所述，目前這些瀏覽器紛紛朝著HTML5的方向邁進，HTML5的時代即將來臨，

1.5、選擇開發工具

Notepad++
- 官方地址：點擊打開
- 是否免費：免費
Visual Studio Code
- 官方地址：點擊打開
- 是否免費：免費
HBuilderX
- 官方地址：點擊打開
- 是否免費：免費
Dreamweaver
- 官方地址：點擊打開
- 是否免費：收費
Sublime Text
- 官方地址：點擊打開
- 是否免費：收費
Webstorm
- 官方地址：點擊打開
- 是否免費：收費

Webstorm為本文使用的工具，請自行購買激活，也可以使用以上的免費工具，安裝步驟都較為簡單，在此省略！

第二章 HTML5語法

2.1、基本結構

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

2.2、語法規范

HTML中不區分大小寫，但是我們一般都使用小寫
HTML中的注釋不能嵌套
HTML標簽必須結構完整，要么成對出現，要么自結束標簽
HTML標簽可以嵌套，但是不能交叉嵌套
HTML標簽中的屬性必須有值，且值必須加引號(雙引號單引號都可以)

2.3、標簽規范

單標簽：

<標簽名 [屬性名=屬性值,...]>

成對標簽：

<標簽名 [屬性名=屬性值,...]></標簽名>

第三章 HTML5標簽

3.1、標題標簽

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>

3.2、段落標簽

<p>這是一個段落</p>

3.3、鏈接標簽

使用示例：

<a href="https://www.baidu.com">打開百度，你就知道！</a>

常見屬性：

屬性	值	描述
href	URL	規定鏈接的目標 URL，
target	_blank _parent _self _top framename	規定在何處打開目標 URL，僅在 href 屬性存在時使用，

3.4、影像標簽

<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">

3.5、表格標簽

<table border="1px" cellpadding="0px" cellspacing="0px">
    <tr>
        <th>表頭一</th>
        <th>表頭二</th>
        <th>表頭三</th>
        <th>表頭四</th>
    </tr>
    <tr>
        <td>單元格一</td>
        <td>單元格二</td>
        <td>單元格三</td>
        <td>單元格四</td>
    </tr>
</table>

3.6、串列標簽

無序串列：

<ul>
    <li>串列項</li>
    <li>串列項</li>
    <li>串列項</li>
    <li>串列項</li>
</ul>

有序串列：

<ol>
    <li>串列項</li>
    <li>串列項</li>
    <li>串列項</li>
    <li>串列項</li>
</ol>

自定義串列：

<dl>
    <dt>+</dt><dd>串列項</dd>
    <dt>+</dt><dd>串列項</dd>
    <dt>+</dt><dd>串列項</dd>
</dl>

3.7、分組標簽

<div>具體內容</div>

<span>具體內容</span>

3.8、語意標簽

常見標簽：

標簽	描述
<header>	規定檔案或節的頁眉，
<footer>	定義檔案或節的頁腳，
<main>	規定檔案的主內容，
<section>	定義檔案的節，
<article>	定義檔案的文章，
<aside>	定義頁面內容以外的內容，
<nav>	定義導航鏈接，
<mark>	定義重要的或強調的文本，
<figure>	規定自包含內容，比如圖示、圖表、照片、代碼清單等，
<figcaption>	定義 <figure> 元素的標題，
<details>	定義用戶能夠查看或隱藏的額外細節，
<summary>	定義 <details> 元素的可見標題，
<time>	定義日期/時間，

基本布局：

HTML5 語意元素

3.9、表單標簽

常見標簽：

標簽	描述
<form>	定義供用戶輸入的表單，
<input>	定義輸入域，
<label>	定義了 <input> 元素的標簽，一般為輸入標題，
<textarea>	定義文本域 (一個多行的輸入控制元件)，
<fieldset>	定義了一組相關的表單元素，并使用外框包含起來，
<legend>	定義了 <fieldset> 元素的標題，
<select>	定義了下拉選項串列，
<optgroup>	定義選項組，
<option>	定義下拉串列中的選項，
<button>	定義一個點擊按鈕，
<datalist>	指定一個預先定義的輸入控制元件選項串列，
<keygen>	定義了表單的密鑰對生成器欄位，
<output>	定義一個計算結果，

案例演示：

1、form、input、label演示

<form action="" method="get">
    <p>
        <label for="username">賬戶：</label>
        <input type="text" name="username" id="username">
    </p>
    <p>
        <label for="password">密碼：</label>
        <input type="password" name="password" id="password">
    </p>
    <p><input type="submit"></p>
</form>

2、textarea演示

<form action="" method="post">
    <textarea name="mycontext" cols="30" rows="10"></textarea>
    <input type="submit">
</form>

3、fieldset、legend、select、optgroup、option演示

<form action="" method="post">
    <fieldset>
        <legend>請選擇你的愛好：</legend>

        <select name="myhobby" id="myhobby">
            <optgroup label="運動">
                <option value="籃球">籃球</option>
                <option value="足球">足球</option>
            </optgroup>
            <optgroup label="電子">
                <option value="看電影">看電影</option>
                <option value="看電視">看電視</option>
            </optgroup>
        </select>
    </fieldset>
</form>

4、datalist演示

<form action="" method="post">
    <input list="browsers">
    <datalist id="browsers">
        <option value="Internet Explorer">
        <option value="Firefox">
        <option value="Chrome">
        <option value="Opera">
        <option value="Safari">
    </datalist>
</form>

5、單選框演示

<form action="" method="post">
    <input type="radio" name="sex" id="male" value="male" checked>
    <label for="male">Male</label>

    <input type="radio" name="sex" id="female" value="female">
    <label for="female">female</label>
</form>

6、復選框演示

<form action="" method="post">
    <input type="checkbox" name="vehicle" id="bike" value="bike">
    <label for="bike">I have a bike</label>

    <input type="checkbox" name="vehicle" id="car" value="car">
    <label for="car">I have a car</label>
</form>

3.10、框架標簽

<iframe src="https://www.baidu.com" frameborder="0" width="500px" height="500px"></iframe>

3.11、音頻標簽

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的瀏覽器不支持 Audio 標簽，
</audio>

3.12、視頻標簽

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
    您的瀏覽器不支持 Video 標簽，
</video>

3.13、其它標簽

水平線：<hr>
換行：<br>
<b>粗體文本</b>
<code>計算機代碼</code>
<em>強調文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd>
<pre>預格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>縮寫詞或者首字母縮略詞</abbr>
<address>聯系資訊</address>
<bdo>文字方向</bdo>
<blockquote>從另一個源參考的部分</blockquote>
<cite>作業的名稱</cite>
<del>洗掉的文本</del>
<ins>插入的文本</ins>
<sub>下標文本</sub>
<sup>上標文本</sup>

3.14、頭部標簽

標簽	描述
<head>	定義了檔案的資訊，
<title>	定義了檔案的標題，
<base>	定義了頁面鏈接標簽的默認鏈接地址，
<link>	定義了一個檔案和外部資源之間的關系，
<meta>	定義了HTML檔案中的元資料，
<script>	定義了客戶端的腳本檔案，
<style>	定義了HTML檔案的樣式檔案，

第四章 HTML5屬性

4.1、屬性概述

HTML標簽可以設定屬性，屬性總是以名稱/值對的形式出現，比如：name=“value”，它的主要作用是控制或修飾標簽，

4.2、通用屬性

屬性	描述
accesskey	設定訪問元素的鍵盤快捷鍵，
class	規定元素的類名（classname），
contenteditable	規定是否可編輯元素的內容，
contextmenu	指定一個元素的背景關系選單，當用戶右擊該元素，出現背景關系選單，
data-*	用于存盤頁面的自定義資料，
dir	設定元素中內容的文本方向，
draggable	指定某個元素是否可以拖動，
dropzone	指定是否將資料復制，移動，或鏈接，或洗掉，
hidden	hidden 屬性規定對元素進行隱藏，
id	規定元素的唯一 id，
lang	設定元素中內容的語言代碼，
spellcheck	檢測元素是否拼寫錯誤，
style	規定元素的行內樣式（inline style），
tabindex	設定元素的 Tab 鍵控制次序，
title	規定元素的額外資訊（可在工具提示中顯示），
translate	指定是否一個元素的值在頁面載入時是否需要翻譯，

第五章 HTML5事件

5.1、事件概述

HTML事件可以觸發瀏覽器中的行為，比方說當用戶點擊某個 HTML 元素時啟動一段 JavaScript，

5.2、視窗事件

由視窗觸發該事件 (同樣適用于 <body> 標簽)：

屬性	值	描述
onafterprint	script	在列印檔案之后運行腳本，
onbeforeprint	script	在檔案列印之前運行腳本，
onbeforeonload	script	在檔案加載之前運行腳本，
onblur	script	當視窗失去焦點時運行腳本，
onerror	script	當錯誤發生時運行腳本，
onfocus	script	當視窗獲得焦點時運行腳本，
onhashchange	script	當檔案改變時運行腳本，
onload	script	當檔案加載時運行腳本，
onmessage	script	當觸發訊息時運行腳本，
onoffline	script	當檔案離線時運行腳本，
ononline	script	當檔案上線時運行腳本，
onpagehide	script	當視窗隱藏時運行腳本，
onpageshow	script	當視窗可見時運行腳本，
onpopstate	script	當視窗歷史記錄改變時運行腳本，
onredo	script	當檔案執行再執行操作（redo）時運行腳本，
onresize	script	當調整視窗大小時運行腳本，
onstorage	script	當 Web Storage 區域更新時（存盤空間中的資料發生變化時）運行腳本，
onundo	script	當檔案執行撤銷時運行腳本，
onunload	script	當用戶離開檔案時運行腳本，

5.3、表單事件

表單事件在HTML表單中觸發 (適用于所有 HTML 元素，但該HTML元素需在form表單內)：

屬性	值	描述
onblur	script	當元素失去焦點時運行腳本，
onchange	script	當元素改變時運行腳本，
oncontextmenu	script	當觸發背景關系選單時運行腳本，
onfocus	script	當元素獲得焦點時運行腳本，
onformchange	script	當表單改變時運行腳本，
onforminput	script	當表單獲得用戶輸入時運行腳本，
oninput	script	當元素獲得用戶輸入時運行腳本，
oninvalid	script	當元素無效時運行腳本，
onselect	script	當選取元素時運行腳本，
onsubmit	script	當提交表單時運行腳本，

5.4、鍵盤事件

通過鍵盤觸發事件，類似用戶的行為：

屬性	值	描述
onkeydown	script	當按下按鍵時運行腳本，
onkeypress	script	當按下并松開按鍵時運行腳本，
onkeyup	script	當松開按鍵時運行腳本，

5.5、滑鼠事件

通過滑鼠觸發事件，類似用戶的行為：

屬性	值	描述
onclick	script	當單擊滑鼠時運行腳本
ondblclick	script	當雙擊滑鼠時運行腳本
ondrag	script	當拖動元素時運行腳本
ondragend	script	當拖動操作結束時運行腳本
ondragenter	script	當元素被拖動至有效的拖放目標時運行腳本
ondragleave	script	當元素離開有效拖放目標時運行腳本
ondragover	script	當元素被拖動至有效拖放目標上方時運行腳本
ondragstart	script	當拖動操作開始時運行腳本
ondrop	script	當被拖動元素正在被拖放時運行腳本
onmousedown	script	當按下滑鼠按鈕時運行腳本
onmousemove	script	當滑鼠指標移動時運行腳本
onmouseout	script	當滑鼠指標移出元素時運行腳本
onmouseover	script	當滑鼠指標移至元素之上時運行腳本
onmouseup	script	當松開滑鼠按鈕時運行腳本
onmousewheel	script	當轉動滑鼠滾輪時運行腳本
onscroll	script	當滾動元素的滾動條時運行腳本

5.6、媒體事件

通過視頻（videos），影像（images）或音頻（audio）觸發該事件，多應用于HTML媒體元素比如：<embed>，<object>，<img>，<audio>和<video>，

屬性	值	描述
onabort	script	當發生中止事件時運行腳本，
oncanplay	script	當媒介能夠開始播放但可能因緩沖而需要停止時運行腳本，
oncanplaythrough	script	當媒介能夠無需因緩沖而停止即可播放至結尾時運行腳本，
ondurationchange	script	當媒介長度改變時運行腳本，
onemptied	script	當媒介資源元素突然為空時（網路錯誤、加載錯誤等）運行腳本，
onended	script	當媒介已抵達結尾時運行腳本，
onerror	script	當在元素加載期間發生錯誤時運行腳本，
onloadeddata	script	當加載媒介資料時運行腳本，
onloadedmetadata	script	當媒介元素的持續時間以及其他媒介資料已加載時運行腳本，
onloadstart	script	當瀏覽器開始加載媒介資料時運行腳本，
onpause	script	當媒介資料暫停時運行腳本，
onplay	script	當媒介資料將要開始播放時運行腳本，
onplaying	script	當媒介資料已開始播放時運行腳本，
onprogress	script	當瀏覽器正在取媒介資料時運行腳本，
onratechange	script	當媒介資料的播放速率改變時運行腳本，
onreadystatechange	script	當就緒狀態（ready-state）改變時運行腳本，
onseeked	script	當媒介元素的定位屬性不再為真且定位已結束時運行腳本，
onseeking	script	當媒介元素的定位屬性為真且定位已開始時運行腳本，
onstalled	script	當取回媒介資料程序中（延遲）存在錯誤時運行腳本，
onsuspend	script	當瀏覽器已在取媒介資料但在取回整個媒介檔案之前停止時運行腳本，
ontimeupdate	script	當媒介改變其播放位置時運行腳本，
onvolumechange	script	當媒介改變音量亦或當音量被設定為靜音時運行腳本，
onwaiting	script	當媒介已停止播放但打算繼續播放時運行腳本，

5.7、其它事件

屬性	值	描述
onshow	script	當 <menu> 元素在背景關系顯示時觸發，
ontoggle	script	當用戶打開或關閉 <details> 元素時觸發，

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/223047.html

標籤：其他

上一篇：Vue 3 應用API講解

下一篇：jenkins 下載插件失敗有效的處理辦法（親測）

學習HTML5這一篇就夠了

目錄