前端開發(HTML,CSS,VUE,JS)從入門到精通！第一天(HTML5)

一、HTML5 簡介

1．HTML

全稱是 Hyber Text Markup Language，超文本標記語言，它是互聯網上應用最廣泛的標記語言，簡單說，HTML 頁面就等于“普通文本+HTML標記（HTML標簽）“。

2．HTML 總共經歷了如下的發展史：

HTML（第一版）--> HTML2.0 --> HTML3.2 --> HTML4.0 --> HTML4.01 --> XHTML1.0 --> HTML5

3．HTML4.01 與 XHTML

XHTML 全稱是 eXtensible Hyber Text Markup Language，擴展的超文本標記語言，XHTML 和 HTML4.01 具有很好的兼容性，而且 XHTML 是更嚴格，更純凈的 HTML 代碼。

4．HTML 和 XHTML 文檔的類型定義（DTD文件）

W3C 組織使用 DTD（Document Type Definition，文檔類型定義）來定義 HTML 和 XHTML 的語義約束，包含HTML 文檔可以出現哪些元素和元素支持哪些屬性等等，比如：HTML4.01 的 DTD 文檔：

這里就有一個 DTD 約束文件，其中包含HTML 文檔可以出現哪些元素和元素支持哪些屬性等等，按住“Ctrl”點擊dtd文件查看源碼：

5．從 XHTML 到 HTML5

雖然 W3C 組織努力為 HTML 指定規范，但是大部分編寫 HTML 頁面的人員沒有受過專業訓練，他們制作的 HTML 網頁大部分沒有遵守 HTML 規范，于是出現了一個尷尬的局面：一方面 W3C 組織極力呼吁大家遵守 HTML規范，另一方面，HTML 的制作者根本不理會這個呼吁，于是 WHATWG 組織開始制定了一種“妥協式”的規范：HTML5。

6．HTML5 的優勢：

（1）解決跨瀏覽器問題：目前大多數瀏覽器都支持 HTML5。

（2）部分代替了原來的 JavaScript。

（3）更明確的語義支持

（4）增強了 Web 應用的功能

7. HTML5 頁面的基本結構(樹形結構)

<!--<!DOCTYPE html>：HTML5 的 DTD 約束文件定義并不符合 XML 文件的 DTD 規范，這正好是 HTML5 的設計哲學，HTML5 并不是規范設計，而是一種"妥協式"規范。
-->
<!DOCTYPE html>
<!--HTML 頁面中的標簽(元素)的形式：<標簽名 屬性名=屬性值>內容</標簽名>，標簽中又可能包含其他標簽<html>標簽是 HTML 頁面的根標簽，任何一個 HTML 頁面都是以根標簽開頭，其中 lang="en" 是 <html>標簽的屬性，說明文檔使用的是en(英語)，而cn表示中文
-->
<html lang="en"> <!--跟標簽的開始-->
<head> <!--頭標簽的開始，該頭標簽又包含了一些子標簽--><!--meta 標簽，是一個自結束標簽，即沒有結束標簽，它的屬性 charset="UTF-8"指明頁面的字符編碼為 UTF-8--><meta charset="UTF-8"><!--title標簽，表示頁面的標題--><title>首頁</title>
</head> <!--頭標簽的結束-->
<body> <!--body標簽，表示頁面的主體，它跟 <head> 是同級的，是兄弟關系，HTML5 頁面的主體就是寫在 body 中的，即其他的標簽就是寫在body里面的-->
<!--body 標簽里面包含了一個子標簽 h1，是一個標題標簽-->
<h1>第一個 HTML5 頁面</h1>
</body> <!--body 標簽的結束-->
</html> <!--跟標簽的結束-->

8．HTML5 語法的變化

（1）標簽不再區分大小寫

<p>段落</p>和<P>段落</P> 一致

（2）元素可以省略結束標簽：自結束

<img src="user.png"></img>和<img src="user.png"/>或<img src="user.png"> 一致

（3）允許省略屬性值的屬性

（4）允許屬性值不使用引號

二、HTML5 的常用元素（標簽）和屬性

1．HTML5 中保留的常用元素：基本元素

（1）<!-- -->：定義 HTML5 的注釋（2）<html>：H5 的根標簽，可省略（3）<head>：H5文檔的頁面頭部分，可省略（4）<title>：H5 文檔的標題（5）<body>：H5 文檔的主體，其他的 H5 標簽就是寫在這個標簽內的，它除了可以包含 id，class，style 屬性之外，還可以指定 onclick,onmousedown,...事件屬性，這些屬性可以在 JavaScript 代碼中處理。
注意：我們后續講的標簽，如果沒有特別說明，表示該標簽都有 id，class，style 屬性，并且可以指定 onclick，onmousedown...等事件屬性。（6）<style>：用于定義 CSS 樣式表，不具有 id，class，style 以及事件屬性（7）<h1>~<h6>：用于指定標題一到標題六，會獨占一行，稱為塊級標簽。（8）<p>：用于定義一個段落文本，也會獨占一行，塊級標簽。（9）<br>：換行（10）<hr>：水平分割線（11）<div>：用于定義文檔中的節，其中可以包含任意的其他標簽，會獨占一行，是塊級標簽。（12）<span>：與 <div> 類似，區別是 <span> 默認情況下不會換行，稱為行級標簽。

示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo3</title></head><body><!--h${我的標題$}*6--><!--h1~h6為標題標簽，是塊級標簽，會獨占一行--><h1>我的標題1</h1><h2>我的標題2</h2><h3>我的標題3</h3><h4>我的標題4</h4><h5>我的標題5</h5><h6>我的標題6</h6><hr> <!--水平分割線--><!--p{我是段落文本$，我是塊級標簽，我會獨占一行}*3--><p>我是段落文本1，我是塊級標簽，我會獨占一行</p><p>我是段落文本2，我是塊級標簽，我會獨占一行</p><p>我是段落文本3，我是塊級標簽，我會獨占一行</p><!--lorem10：隨機生成 10 個單詞組成的段落，lorem：隨機生成一段文本--><p>Lorem ipsum dolor sit amet, consectetur.</p><!--HTML 代碼中的換行符沒有用，要讓HTML內容換行，必須加上<br>--><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Aspernatur consectetur consequuntur cumque, dolorem dolorum explicabo facere hic incidunt,maiores officiis placeat quisquam quos repudiandae rerum sed sit voluptatem, voluptates voluptatum?</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Aspernatur consectetur consequuntur cumque, dolorem dolorum explicabo facere hic incidunt, <br>maiores officiis placeat quisquam quos repudiandae rerum sed sit voluptatem, voluptates voluptatum?</p><!--HTML代碼中寫多個空格自會表示一個空格，要在HTML中表示多個空格，要使用 &nbsp;--><p>您好 中國</p><p>您好&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中國</p><!--div的作用是跟我們后面講的 CSS 結合起來對頁面進行區域的劃分，它里面可以包含各種子標簽--><!--div{我是div標簽$，我是塊級標簽，我會獨占一行}*2--><div>我是div標簽1，我是塊級標簽，我會獨占一行</div><div>我是div標簽2，我是塊級標簽，我會獨占一行</div><div><h3>我是div中的子標簽h3</h3><p>我是div中的子標簽p</p></div><!--span{我是span標簽$，我是行級標簽，我不會獨占一行}*3--><span>我是span標簽1，我是行級標簽，我不會獨占一行</span><span>我是span標簽2，我是行級標簽，我不會獨占一行</span><span>我是span標簽3，我是行級標簽，我不會獨占一行</span></body></html>

2．H5 保留的基本元素：文本格式化元素

（1）<b>：粗體（2）<i>：斜體（3）<em>：強調文本，和斜體差不多（4）<strong>：粗體文本，和 <b> 差不多（5）<small>：小號文本（6）<sup>：定義上標（7）<sub>：定義下標（8）<bdo>：定義文本顯示的方向，有一個屬性 dir，取值 ltr：左到右，rtl：右到左

示例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>demo4</title></head><body><b>加粗文本</b><i>斜體文本</i><em>強調文本</em><strong>粗體文本</strong><small>小號文本</small><h3>以上標簽都是行級元素，不會獨占一行</h3><p>4<sup>2</sup> + 5<sup>3</sup> = ?</p><p>H<sub>2</sub> + O<sub>2</sub> = ?</p><bdo dir="ltr">從左到右的文本</bdo> <!--行級標簽--><bdo dir="rtl">從右到左的文本</bdo></body></html>

3．H5保留的常用標簽：超鏈接和錨點

（1）超鏈接：<a> 標簽

① href：指向超鏈接要鏈接的資源地址，可以是絕對路徑也可以是相對路徑

② target：使用哪個框架集合來裝載資源，取值可以是 _self（在當前窗口打開），_blank（在新窗口打開），_top（在頂層窗口打開，需要結合框架標簽），_parent（在父窗口打開，需要結合框架標簽）

示例：

（2）超鏈接的第二種用法：定義錨點，作用是在文檔中生成一個定位點，然后通過超鏈接直接去到這個定位點。

4．H5保留元素：列表相關元素

（1）<ul>：unordered list，無序列表，其中只能包含li（list item）子標簽

（2）<ol>：ordered list，有序列表，其中只能包含子標簽li，ol的屬性：

① type：指定使用哪種類型編號，1 表示數字，A 和a 表示字母，I 和i 表示羅馬數字等等

② start：指定列表的起始數字，默認是第一個，比如1,2,3等

（3）li：包含在 <ul> 或 <ol> 中的每一個列表項，可以有多個

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo7</title>
</head>
<body>
<!--ul/ol以及li都是塊級標簽-->
<!--ul>li{列表項$}*3-->
<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>
</ul>
<!--ol>li{列表項$}*3-->
<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>
</ol>
<!--ol[type=A]>li{列表項$}*3-->
<ol type="A"><li>列表項1</li><li>列表項2</li><li>列表項3</li>
</ol>
<!--ol[type=i]>li{列表項$}*3-->
<ol type="i"><li>列表項1</li><li>列表項2</li><li>列表項3</li>
</ol>
<!--ol[type=i][start=2]>li{列表項$}*3-->
<ol type="i" start="2"><li>列表項1</li><li>列表項2</li><li>列表項3</li>
</ol>
<ul><li>主菜單1<ul><li>子菜單1</li><li>子菜單2</li><li>子菜單3</li></ul></li><li>主菜單2<ul><li>子菜單1</li><li>子菜單2</li><li>子菜單3</li></ul></li><li>主菜單3<ul><li>子菜單1</li><li>子菜單2</li><li>子菜單3</li></ul></li>
</ul>
</body>
</html>

（4）<dl>：用于定義列表

（5）<dt>：用于定義列表的標題

（6）<dd>：用于定義普通列表項，其中 dt 和 dd 是成對出現的，每一對都只有一個 dt 但是可以有多個 dd，該元素和 <div> 一致可以包含其他子標簽，注意，dt 和dd 都是包含在 dl 元素中作為子元素，并且它們是兄弟關系（同級的）。

示例：

5．H5保留的元素：圖像相關元素

（1）<img>：定義一幅圖片

① src：指定圖片位置，可以是相對路徑也可以是絕對路徑

② alt：指定一段文本，當圖片無法顯示時給出提示

示例：

（2）除此之外，與圖片相關的還有如下兩個標簽：

<map>：用于定義圖片映射，可以包含一個或多個 <area> 子標簽，每個 <area> 用于定義區域，區域上可以指定鏈接到某個 url 地址。

<area>：用于定義圖片映射的內部區域，包括以下屬性：

shape：指定區域的類型，默認是 “rect” 矩形，還可以是 circle（圓形）和 ploy（多邊形）

coords：指定多個坐標值，用于確認區域的位置

href：用于指定該區域鏈接的地址

示例：

當鼠標移動到指定區域時（熱點區域），鼠標從箭頭形狀變為手指形狀，證明這個區域時超鏈接，點擊之后跳轉到163網站。

6．H5保留元素：表格元素

（1）<table>：定義表格

????????① cellpadding：單元格內容和單元格邊框之間的間距

????????② cellspacing：單元格之間的間距

????????③ border：表格邊框的大小

（2）<caption>：表格的標題

（3）<tr>：table row，行

（4）<td>：定義單元格，列

????????① colspan：指定單元格跨多少列

????????② rowspan：指定單元格跨多少行

????????③ height：單元格高度

????????④ width：單元格寬度

示例：

（5）<th>：定義表格頁眉單元格

（6）<tbody>：定義表格主體，一個 <table> 可以有一個或多個 <tbody>

（7）<thead>：表格頭

（8）<tfoot>：表格腳

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo12</title>
</head>
<body>
<!--創建表格，邊框大小為1，單元格內邊距為0，單元格外邊距為0-->
<table border="1" cellpadding="0" cellspacing="0"><caption>圖書館存書</caption><thead> <!--表格頭--><tr><th>圖書</th> <!--表格頁眉單元格，即單元格的標題--><th>作者</th></tr></thead><tbody> <!--表格的主體，一個表格可以有一個或多個tbody--><tr><td>Java</td><td>張三</td></tr><tr><td>JavaEE</td><td>李四</td></tr></tbody><tbody> <!--表格的主體，一個表格可以有一個或多個tbody--><tr><td>Java</td><td>張三</td></tr><tr><td>JavaEE</td><td>李四</td></tr></tbody><tfoot> <!--表格腳--><tr><td colspan="2">現總計：4本圖書</td></tr></tfoot>
</table>
</body>
</html>

7．框架

（1）H5 已經不推薦使用框架集，因此 H5 刪除了<frameset>、<frame>、<noframes> 標簽，而使用了一個<iframe> 來表示內聯框架，該框架的屬性有：

????????① src：指定一個 url 地址，表名該 iframe 將裝載哪個頁面

????????② width：iframe 的寬度

????????③ height：iframe 的高度

示例：

8．H5新增的屬性

（1）contenteditable：如果該屬性設置為 true，那么元素就可以編輯，就類似于文本框，可以把 div，table 等等變成可編輯的

（2）hidden：如果為 true，那么會隱藏元素

示例：

9．H5 新增的常用元素：語義相關的元素

（1）<mark>：用于標注某個文本，就類似于用熒光筆標注重點內容一樣。

（2）<time>：用來顯示被標注的內容是日期，時間或日期時間，有一個屬性：

????????① datetime：用于提供時間，屬性值應該符合 yyyy-MM-ddTHH:mm 格式的日期時間，當然，也可以只指定日期或指定時間

示例：

9. H5的頭部和元信息

（1）H5 文檔中的 <head> 標簽可以包含如下子元素：

????????① <script>：用于包含 JavaScript 腳本

????????② <style>：用于包含 CSS 樣式

????????③ <link>：用于鏈接外部 CSS 樣式文件

????????④ <title>：用于指定文檔標題

????????⑤ <base>：用于定義一個基準鏈接，那么該文檔后面的元素的 URL 地址都會以該基準鏈接作為基礎，常用的屬性有：

1）href：指向所有鏈接的基準鏈接

示例：

⑥ <meta>：用于定義頁面的元數據信息，屬性有：

????????1）http-equiv：指定元信息的名稱，該屬性指定的名稱具有特殊的意義，它可以向瀏覽器傳回一些有用的信息，幫助瀏覽器正確的處理網頁內容

????????2）name：指定元信息的名稱，名稱隨意

????????3）content：指定元信息的值

????????????????a．其中 http-equiv 屬性支持的值有：

????????????????????????a）Expires：網頁過期時間

????????????????????????b）Pragma：禁止瀏覽器從本地緩存中調閱網頁內容

????????????????????????c）Refresh：指定多長時間后刷新指定頁面

????????????????????????d）Set-Cookie：設置 Cookie（Cookie是服務器發送給客戶端的一小段文本內容）

????????????????????????e）content-type：指定頁面內容的類型和所用的字符集

示例：

10．H5 表單相關元素

（1）<form>：用于定義一個表單，包含的屬性：

① action：當用戶提交表單時，會跳轉到 action 指定的后臺頁面來處理

② method：請求的類型，有 GET（默認請求類型）和 POST 類型，其中使用 GET 請求提交表單時，請求參數（表單參數）會附加在請求的 URL 地址后面傳給后臺，而且只能附加文本內容，可以傳輸的請求參數大小不大于 2K，而POST 請求在傳輸數據到后臺時不采用附加請求參數到 URL 地址后面，傳輸的數據量要大很多，一般沒有限制。

示例1：get 請求方式

示例2：post 請求方式

③ enctype：指定表單內容進行編碼所用的字符集，取值有以下幾種：

????????1）application/x-www-form-urlencoded：這是默認的編碼方式，使用這種編碼方式會將表單控件（例如input）中的值處理成 url 編碼的方式

????????2）multipart/form-data：這種編碼方式會以二進制流的方式來處理表單數據，例如上傳文件的表單就應該將enctype 設置為該值。

示例：上傳文件的表單

④ name：指定表單的名稱

⑤ target：與超鏈接的 target 相同，可以是 _blank，_parent，_self 和 _top

（2）H5 中的表單元素：input 元素

① 單行文本：type=”text”

② 密碼輸入框：type=”password”

③ 隱藏域：type=”hidden”，不會顯示，主要用于傳輸數據到后臺

④ 單選框：type=”radio”

⑤ 復選框：type=”checkbox”

⑥ 圖像域：type=”image”

⑦ 文件上傳：type=”file”

⑧ 提交按鈕：type=”submit”

⑨ 重置按鈕：type=”reset”

注意：以上的 input 元素都有一個 name 屬性，表示該表單元素的名稱，提交表單時，這個 name 屬性的名稱和具體對應輸入的值(就是表單元素的 value 屬性)會以請求參數（鍵值對）的形式發送給后臺處理。

示例：表單元素的使用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo19</title>
</head>
<body>
<!--
對于包含文件上傳(type="file")的表單，那么請求方式method 必須是 post，而且 enctype 必須是 multipart/form-data，
表示以二進制流的方式來處理表單數據
-->
<form action="handle.jsp" method="post" enctype="multipart/form-data">姓名：<input type="text" name="username"> <br>密碼：<input type="password" name="password"> <br><!--每個表單元素都有一個 value 屬性，表示該表單元素提交的值，當然在表單元素中輸入的值就是指這個 value-->性別：<input type="radio" name="sex" value="boy" checked="checked">男<input type="radio" name="sex" value="girl">女<br>愛好：<br><input type="checkbox" name="hobby" value="basketball">籃球<input type="checkbox" name="hobby" value="swimming">游泳<input type="checkbox" name="hobby" value="music">音樂<input type="checkbox" name="hobby" value="dancing">跳舞<br><!--type="file"表示文件上傳-->頭像：<input type="file" name="img"> <br><input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

input元素常用的屬性：

1）checked：設置單選按鈕或復選按鈕是否被選中，該屬性只有一個 checked 屬性值

2）disabled：禁用 input 元素

3）maxlength：設置文本框允許輸入的最大字符數

4）readonly：設置為只讀

5）size：指定文檔的寬度，type=”hidden” 元素不能設置

6）src：指定圖像域所顯示的圖片的 URL 地址

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo20</title>
</head>
<body>
<!--
對于包含文件上傳(type="file")的表單，那么請求方式method 必須是 post，而且 enctype 必須是 multipart/form-data，
表示以二進制流的方式來處理表單數據
-->
<form action="handle.jsp" method="post" enctype="multipart/form-data">單行文本：<input type="text" name="username"> <br>只讀的文本：<input type="text" name="name" value="張三" readonly> <br><!--每個表單元素都有一個 value 屬性，表示該表單元素提交的值，當然在表單元素中輸入的值就是指這個 value-->性別：<input type="radio" name="sex" value="boy" checked>男<input type="radio" name="sex" value="girl">女<br>愛好：<br><input type="checkbox" name="hobby" value="basketball">籃球<input type="checkbox" name="hobby" value="swimming">游泳<input type="checkbox" name="hobby" value="music">音樂<input type="checkbox" name="hobby" value="dancing">跳舞<br>圖像域：<input type="image" src="images/1.jpg" width="200" height="200"><br><!--type="file"表示文件上傳-->頭像：<input type="file" name="img"> <br><input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

（3）<label>標簽：用于在表單元素中定義標簽，有兩種使用方式：

????????① 隱式使用 for 屬性

????????② 顯示關聯，將普通文本，表單控件放在一個 <label> 中

示例：

（4）<button> 標簽：用于定義按鈕，常見的屬性：

????????① disabled：禁用按鈕，取值只能是 disabled

????????② name：按鈕的唯一名稱

????????③ type：按鈕的類型，比如 submit，reset，button 中的一種

????????④ value：指定按鈕的初始值，可以通過腳本來修改

示例：

（5）列表和下拉菜單，<select> 標簽，主要包含的屬性：

????????① disabled：禁用下拉菜單

????????② multiple：是否允許多選，取值只能是 multiple

????????③ size：指定列表框中同時顯示多少個列表項

<select> 標簽只能包含如下兩個子元素：

1）<option>：列表框選項，常用的屬性：

????????a.disabled：禁用選項

????????b.selected：選項是否被選中，取值只能是 selected

????????c.value：該選項對應的請求參數值

2）<optgroup>：用于定義列表組，屬性：

????????a.label：選項組的標簽

????????b.disabled：禁用選項組中的所有選項

注意：input，button，select 標簽都是行級標簽

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo23</title>
</head>
<body>
<form action="handle.jsp"><!--其中 <select> 的name屬性值就是提交表單后請求參數的name屬性，而選中的 option 選項的 value 值就是提交表單后請求參數的 value--><select name="skill" id="skill"><option value="java">java語言</option><option value="c++" selected>c++語言</option><option value="c">c語言</option></select><!--multiple 允許多選，size：同時顯示3個選項--><select name="books" id="books" multiple size="3"><option value="java">java基礎</option><option value="android">Android 開發</option><option value="javaee">JavaEE 企業級應用</option><option value="html">HTML 基礎</option></select><!--選項組：--><select name="group" id="group"><optgroup label="Java體系叢書"><option value="java">Java基礎</option><option value="android">Android 開發</option><option value="javaee">JavaEE 企業級應用</option></optgroup><optgroup label="HTML 體系叢書"><option value="html">HTML 基礎</option><option value="js">JavaScript 語言</option><option value="jquery">jQuery 開發</option></optgroup></select><input type="submit" value="提交">
</form>
</body>
</html>