發展歷史：
1991年八月六日，歐洲核子研究中心的科學家啓動了世界上第一個可以訪問的網站，從此人類宣佈了互聯網時代的到來，到2014年確定了HTML5標準.
1994年提出了CSS層疊樣式表，知道1996年，CSS才演變成我們熟悉的樣子。
HTML標籤：
1. strong和b標籤，em和i標籤
<strong>和<em>都是表示強調的標籤，表現形態爲文本加粗和斜體。<i>和<b>標籤也表示文本加粗和斜體
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<strong>文本1</strong>
<b>文本2</b>
<em>文本3</em>
<i>文本4</i>
</body>
</html>
區別：<strong>和<em>是具備語義化的(推薦使用)，而<b><i>是不具備語義化的，但是可以簡化選擇器的操作。
2.引用標籤
blockquote： 用於引用大段的段落解釋
q: 引用小段的短語解釋
abbr: 縮寫或首字母縮略詞
address：引用文檔地址信息
cite: 引用著作的標題
應用這些形式的引用標籤，能夠方便搜索引擎更好的搜索到網頁的內容，同時規範編碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<p>
<abbr title="world health organisation">WHO</abbr>成立於1948年，總部位於
<address>北京市海淀區</address>,路遙的代表作是<cite>《平凡的世界》</cite>
</p>
</body>
</html>
效果：
3. iframe嵌套頁面
iframe會創建包含另一個文檔的內聯框架（即行內框架），也就是說，可以在已有的頁面當中嵌入另一個頁面，即實現引入其他頁面的功能。
常見屬性：
frameborder: 是否顯示框架周圍的邊框
width: 定義iframe的寬度
height：定義iframe的高度
scrolling：規定是否在iframe中顯示滾動條
src: 規定在iframe中引入的url ，鏈接地址或本地頁面的路徑
srcdoc:規定在iframe中顯示的頁面內容 （內容可以是HTML代碼），當src和srcdoc同時存在時，只能識別srcdoc, src會失效
引入其他的HTML到當前的html中顯示，主要利用iframe屬性進行樣式的調節
應用場景：數據傳輸，共享代碼，局部刷新，第三方介入（嵌入廣告）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style>
#iframe-block{
width: 100%;
max-height: 600px;
margin: 0 auto;
margin-bottom: 20px;
}
#bowen-block{
width: 800px;
max-height: 600px;
margin: 0 auto;
margin-bottom: 20px;
}
.text-title{
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="text-title">iframe嵌套頁面演示</div>
<div id="iframe-block" class="iframe-content"> <!--寬度100%-->
<iframe src="https://taobao.com" frameborder="0" width="100%" height="100%"></iframe>
</div>
<div id="bowen-block" class="bowen-content"> <!--特定大小-->
<iframe src="bowen.html" frameborder="1" width="100%" height="100%"></iframe>
</div>
</body>
</html>
嵌入效果：（嵌入兩個頁面，淘寶頁面和本地的頁面）
4. br標籤與wbr標籤
<br>單標籤，表示換行操作
<wbr>標籤表示，軟換行操作（如果單詞太長，或者擔心瀏覽器在錯誤的位置換行，可以使用wbr 即word break opportunity ）
5. pre標籤與code標籤
<pre>標籤可定義欲格式化的文本，被包含在<pre>標籤中的文本通常會保留空格和換行符。
<code>標籤應該包含的是計算機源程序代碼，表示這段文本是計算機源程序代碼（<code>通常是把文本編程等寬字體）
通常這兩個標籤是組合使用的，用<pre>標籤包含着<code>標籤
6.map標籤與area標籤
定義一個客戶端圖像映射。圖像映射(image-map)指帶有可點擊區域的一幅圖像，area元素永遠嵌套在map元素之內，area元素可定義圖像映射中的區域。
area元素的href屬性定義區域的url,shape屬性來定義區域的形狀，coords定義熱區的座標。
給一張圖片中的特定區域加上鍊接：
能添加的熱區的形狀：矩形，圓形，多邊形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<img src="../picture/others/map.jpg" alt="" usemap="#star"> <!--需要設置usemap屬性 -->
<map name="star"> <!--name屬性-->
<area shape="circle" coords="40 40 30" href="https://www.taobao.com" alt="">
<area shape="rect" coords="50 50 150 150" href="https://www.baidu.com" alt="">
</map>
</body>
</html>
在圖片coords定義的區域內添加熱區即可
7. embed與object
embed與object都表示能夠嵌入一些多媒體，如flash動畫，插件等。基本使用沒有太多區別，主要是爲了兼容不同的瀏覽器。
現在基本瀏覽器都能兼容兩種標籤
object標籤需要配合param標籤進行使用
video標籤與audio標籤：
audio表示嵌入音頻文件，video表示嵌入視頻文件，默認控件是不顯示，可以通過controls屬性來顯示控件，爲了能夠支持多個備選文件的兼容支持，可以配合source標籤。
常用屬性：
controls： 顯示控件
loop： 循環播放
autoplay: 自動播放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<audio src="#" controls></audio>
<video src="../picture/video/123.mp4" controls loop autoplay></video>
</body>
</html>
如果需要定製視頻以及音頻的播放樣式，需要藉助JS
解決瀏覽器對音頻以及視頻的兼容性問題：
有的瀏覽器可能會對mp4以及mp3格式的多媒體文件不支持，所以需要在編寫前端代碼的時候，考慮到兼容性的問題，利用source標籤可以解決這一問題：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
</head>
<body>
<video controls loop autoplay>
<source src="../picture/video/123.ogv"> <!--瀏覽器支持某一個格式，就會播放此格式-->
<source src="../picture/video/123.mp4"> <!--備選格式-->
<source src="../picture/video/123.avi">
</video>
</body>
</html>
8.文字註釋與文字方向
<ruby>標籤定義ruby註釋（中文注音或字符），rt標籤定義字符（中文主因或字符）的解釋或者發音。
<bdo>標籤可覆蓋文本默認的方向
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style>
span{
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<ruby> <!--注音-->
寒<rt>han</rt>冬
</ruby>
<!--文字方向-->
<p>
這是一個<bdo dir="rtl">段落</bdo>而已
</p>
<!--通過CSS控制文字方向-->
<p>這是一個<span>段落</span>而已</p>
</body>
</html>
效果：
9. link標籤擴展學習：
link標籤可以引入：引入外部的資源文件
1. stylesheet 樣式文件
2. icon 在標籤頁上引入小圖標
3. dns-prefetch DNS解析
4. script 引入JS腳本
10.meta標籤擴展學習：
<meta>標籤，功能性的標籤，添加輔助信息，包括：編碼，添加描述信息，有利於搜索引擎優化
<meta charset="UTF-8"> <!--編碼信息-->
<meta name="description" content="爲您提供正品低價的購物選擇"> <!--網站的描述性信息-->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--功能性的 針對IE瀏覽器，讓不同版本的IE按照最高的模式進行渲染-->
<meta http-equiv="refresh" content="3" url=""> <!--表示刷新網頁 三秒後跳轉到url對應的網址
HTML5新語義化標籤
1. header : 頁眉
2. footer ： 頁腳
3. main ： 主體
4. hgroup ： 標題組合 (有多個標題的時候)
5. nav ： 導航
6. article: 獨立的內容
7. aside : 輔助信息內容
8. section: 描述圖像或者視頻
9. figcaption: 描述圖像或視頻的標題部分
10. datalist : 選項列表
11. details / summary : 文檔細節 / 文檔標題
12. progress / meter : 定義進度條 / 定義度量範圍
13. time : 定義日期或時間
14. mark : 帶有標記的文本
header, main, footer這些標籤在html文件中只能出現一次，代表着把網頁區域唯一的劃分爲不同的區域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <!--編碼信息-->
<meta name="description" content="爲您提供正品低價的購物選擇"> <!--網站的描述性信息-->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--功能性的 針對IE瀏覽器，讓不同版本的IE按照最高的模式進行渲染-->
<meta http-equiv="refresh" content="" url=""> <!--表示刷新網頁 三秒後跳轉到url對應的網址-->
<title>標題</title>
<link rel="stylesheet" href="####.CSS">
<link rel="icon" type="/image/x-icon" href="####.ico">
<link rel="dns-prefetch" href="#">
</head>
<body>
<header> <!--頭部-->
<hgroup> <!--標題-->
<h1>主標題</h1>
<h2>副標題</h2>
</hgroup>
<nav> <!--導航-->
<ul>
<li>首頁</li>
<li>論壇</li>
<li>討論</li>
</ul>
</nav>
</header>
<main> <!--主體-->
<article> <!--獨立的內容-->
<section>
<figure>
<figcaption></figcaption>
<img src="#" alt="">
</figure>
</section> <!--劃分區域-->
<section>
<input type="text" list="elem">
<datalist id="elem">
<option value="China"></option>
<option value="Korean"></option>
<option value="America"></option>
<option value="Japan"></option>
</datalist>
</section>
<section>
<details>
<summary>CSS</summary>
<p>層疊樣式表</p>
</details>
</section>
<section>
<h2>進度條</h2>
<progress max="10" value="8"></progress>
<h2>度量</h2>
<meter value="9" max="10" low="2" high="8"></meter> <!--在low和high的範圍內，度量條是綠色，超出範圍，度量條變色-->
</section>
<section>
中國的<time title="10-1">國慶節</time> <!--不表現出具體的樣式，只是會更加語義化一些-->
</section>
<section>
中國的<mark>國慶節</mark>
</section>
</article>
<aside></aside>
</main>
<footer></footer>
</body>
</html>
1. 表格擴展學習：
添加單線： border-collapse: collapse
隱藏空單元 : empty-cells : hide
斜線分類 ：border / rotate
列分組 : colgroup / col
例如需要對下屬的表格進行擴展：
當單元格爲空時，需要隱藏單元格：
從上述的表格可以看出，表格實際是雙線，給表格添加單線，效果如下：
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style>
table{
empty-cells: hide;
border-collapse: collapse;
}
</style>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="10" cellspacing="3">
<caption>天氣預報圖</caption>
<thead>
<tr align="center" valign="center"> <!--表格的一行-->
<th colspan="2">日期</th>
<!--<th>日期</th>-->
<th>天氣情況</th>
<th>出行情況</th>
</tr>
</thead>
<tBody>
<tr align="center" valign="center">
<td rowspan="2">2019-1-12</td>
<td>白天</td>
<td><img src="../picture/sun.gif"></td>
<td>天氣晴朗，適合出行</td>
</tr>
<tr align="center" valign="center">
<!-- <td>2019-1-12</td>-->
<td>夜間</td>
<td><img src="../picture/sun.gif"></td>
<td>天氣晴朗，適合出行</td>
</tr>
<tr align="center" valign="center">
<td rowspan="2">2019-2-19</td>
<td>白天</td>
<td><img src="../picture/rain.gif"></td>
<td>不適合出行</td>
</tr>
<tr align="center" valign="center">
<!--<td>2019-2-19</td>-->
<td>夜間</td>
<td><img src="../picture/rain.gif"></td>
<td></td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>
斜線分類，給表格添加斜線，上下具有不同的詞 border/rotate，例如將表格的日期一欄斜分爲兩欄，需要對代碼進行如下的修改：
代碼修改如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style>
table{
empty-cells: hide;
border-collapse: collapse;
}
table .line{ /*斜線分類*/
border-top: 50px solid red; /*通過border的寬度做出斜線的方法*/
border-left: 150px solid blue;
position: relative; /*因爲要對內部的<em><span>使用絕對定位，所以這裏對其父容器採用relative定位*/
color: white;
}
table .line em{
position: absolute;
left: -140px;
top: -30px;
}
table .line span{
position: absolute;
left: -70px;
top: -50px;
}
</style>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="2" cellspacing="3">
<caption>天氣預報圖</caption>
<thead>
<tr align="center" valign="center"> <!--表格的一行-->
<th colspan="2">
<div class="line"> <!--斜線分類-->
<em>日期</em>
<span>詳情</span>
</div>
</th>
<!--<th>日期</th>-->
<th>天氣情況</th>
<th>出行情況</th>
</tr>
</thead>
<tBody>
<tr align="center" valign="center">
<td rowspan="2">2019-1-12</td>
<td>白天</td>
<td><img src="../picture/sun.gif"></td>
<td>天氣晴朗，適合出行</td>
</tr>
<tr align="center" valign="center">
<!-- <td>2019-1-12</td>-->
<td>夜間</td>
<td><img src="../picture/sun.gif"></td>
<td>天氣晴朗，適合出行</td>
</tr>
<tr align="center" valign="center">
<td rowspan="2">2019-2-19</td>
<td>白天</td>
<td><img src="../picture/rain.gif"></td>
<td>不適合出行</td>
</tr>
<tr align="center" valign="center">
<!--<td>2019-2-19</td>-->
<td>夜間</td>
<td><img src="../picture/rain.gif"></td>
<td></td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>
實際表格效果：
列分組，針對列進行操作，例如將表格中的某幾列可以分爲一組，採取相同的樣式。
修改代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標題</title>
<style>
table{
empty-cells: hide;
border-collapse: collapse;
}
table .line{ /*斜線分類*/
border-top: 50px solid red; /*通過border的寬度做出斜線的方法*/
border-left: 150px solid blue;
position: relative; /*因爲要對內部的<em><span>使用絕對定位，所以這裏對其父容器採用relative定位*/
color: white;
}
table .line em{
position: absolute;
left: -140px;
top: -30px;
}
table .line span{
position: absolute;
left: -70px;
top: -50px;
}
</style>
</head>
<body>
<!--表格-->
<table border="1" cellpadding="2" cellspacing="3">
<caption>天氣預報圖</caption>
<colgroup>
<col span="2" style="background: yellow"> <!--頭兩列分爲一組，設置背景顏色-->
<col span="2" style="background: red"> <!--第三第四列一組-->
</colgroup> <!--採取列分組-->
<thead>
<tr align="center" valign="center"> <!--表格的一行-->
<th colspan="2">
<div class="line"> <!--斜線分類-->
<em>日期</em>
<span>詳情</span>
</div>
</th>
<!--<th>日期</th>-->
<th>天氣情況</th>
<th>出行情況</th>
</tr>
</thead>
<tBody>
<tr align="center" valign="center">
<td rowspan="2">2019-1-12</td>
<td>白天</td>
<td><img src="../picture/sun.gif"></td>
<td>天氣晴朗，適合出行</td>
</tr>
<tr align="center" valign="center">
<!-- <td>2019-1-12</td>-->
<td>夜間</td>
<td><img src="../picture/sun.gif"></td>
<td>天氣晴朗，適合出行</td>
</tr>
<tr align="center" valign="center">
<td rowspan="2">2019-2-19</td>
<td>白天</td>
<td><img src="../picture/rain.gif"></td>
<td>不適合出行</td>
</tr>
<tr align="center" valign="center">
<!--<td>2019-2-19</td>-->
<td>夜間</td>
<td><img src="../picture/rain.gif"></td>
<td></td>
</tr>
</tBody>
<tfoot>
</tfoot>
</table>
</body>
</html>
表單擴展美化控件：
1. 美化的複選框：
a. 使用僞類：checked
b. 使用定位 + 透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
label input{
display: none; /*將複選框原始的樣式進行隱藏*/
}
/*設置複選框默認狀態下的圖片*/
label div{
width: 28px;
height: 28px;
background: url("#") 0 -28px;
}
/*設置複選框選中時候的圖片樣式*/
label input:checked + div{ /* 改變的是input的兄弟div,用+ */
width: 28px;
height: 28px;
background: url("#") 0 0; /*更換默認的圖片*/
}
</style>
</head>
<body>
<label> <!--將input和div中的內容綁定到一起-->
<input type="checkbox" class="checobox">
<div></div>
</label>
</body>
</html>
2. 美化上傳按鈕：
與美化checkbox的思路一樣，對於上傳按鈕也可以進行美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
label input{
display: none; /*將複選框原始的樣式進行隱藏*/
}
label div{
width: 45px;
height: 45px;
}
</style>
</head>
<body>
<label> <!--將input和div中的內容綁定到一起-->
<input type="file">
<div><img src="../picture/others/upload.jpg" style="width: 45px; height: 45px"></div>
</label>
</body>
</html>
上傳按鈕變成如下所示的樣式：（電價圖標即可上傳）
position + opacity方法實現相同效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
.upload{
width: 54px;
height: 54px;
position: relative; /*因爲要對裏面的容器使用絕對定位*/
}
.upload div{ /*圖片的區域*/
width: 100%;
height: 100%;
}
.upload input{ /*將默認圖標進行大小設置以及定位*/
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0; /*默認圖標設置透明度爲0， 實現隱藏*/
}
</style>
</head>
<body>
<div class="upload"> <!--定義一個父容器-->
<input type="file">
<div><img src="../picture/others/upload.jpg" style="width: 45px; height: 45px"></div>
</div>
</body>
</html>
新的input控件
1. email：電子郵件, 具有郵箱格式檢查功能
2. url: 網址輸入框
3. number：數值輸入框
4. range：滑動條
5. date / month / week: 日期控件
6. search : 搜索框
7. color: 顏色控件
8. tel：電話號碼輸入框
9. time：時間控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
</style>
</head>
<body>
<form action="https://www.baidu.com">
<input type="email">
<input type="url">
<input type="number" min="0" max="100" value="35">
<input type="range" min="0" max="100" value="20">
<input type="date">
<input type="submit">
</form>
</body>
</html>
表單擴展新屬性：
autocomplete：自動完成，表示再次輸入信息的時候是否進行提示之前的輸入值 默認值on，設置爲off
autofocus：獲取焦點, 控制光標的在輸入框的位置
required：不能爲空
pattern：正則驗證
name：和數據提交相關的
表單擴展-數據傳輸（前後端數據交互）
method：數據傳輸方式
enctype：數據傳輸類型
name / value：數據的鍵值對
擴展標籤：
fieldset: 表單內元素分組
legend：爲fieldset元素定義標題
optgroup：定義選項組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
</style>
</head>
<body>
<fieldset>
<legend>登錄</legend>
<p>
用戶名：<input type="text">
</p>
<p>
密碼：<input type="password">
</p>
</fieldset>
<!--下拉菜單選項分組操作-->
<select>
<optgroup label="國產"></optgroup>
<option value="">HuaWei</option>
<option value="">Xiaomi</option>
<optgroup label="非國產"></optgroup>
<option value="">Apple</option>
<option value="">Samsun</option>
</select>
</body>
</html>
效果：