1.1 瀏覽器的工作原理 把一些標簽解析成用戶可視化的頁面 1.2 HTML中的標簽與元素 在HTML中以<xx>開始，以</xx>結束，比如<html></html>等。 標簽和其內容統稱為元素，比如：<xx>h5</xx> 元素可以有屬性，比如 <xx src=’xxx’>h5</xx> 1.3 ...
1.1 瀏覽器的工作原理
把一些標簽解析成用戶可視化的頁面
1.2 HTML中的標簽與元素
在HTML中以<xx>開始，以</xx>結束，比如<html></html>等。
標簽和其內容統稱為元素，比如：<xx>h5</xx>
元素可以有屬性，比如 <xx src=’xxx’>h5</xx>
1.3編碼
數據以什麼編碼存入電腦，就必須以什麼編碼取出（解碼）。
ASCLL碼
電腦編碼有UTF8、GB2312
1.4 HTML文檔結構
<!--文檔結構是HTML5.0這個版本--> <!DOCTYPE HTML> <html> <!--head 頁面的頭部，一般用於設置一些參數給瀏覽器使用--> <head></head> <body></body> </html>
1.4.1 Head
head一般用於設置一些信息給瀏覽器解析時使用。一般在head中通過meta標簽來設置這些參數
<head> <!--1.設置頁面的解碼--> <meta charset="utf-8"/> <!--2.讓頁面適應於PC、移動端--> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!--3.seo搜索引擎優化--> <mata name="keywords" content="博客園"></mata> <mata name="description" content="米商城直營小米公司旗下所有產品，囊括小米手機系列小米Note 3、小米8、小米MIX 2S，紅米手機系列紅米5 Plus、紅米6 Pro，智能硬體，配件及小米生活周邊，同時提供小米客戶服務及售後支持。"></mata> <!--description，和上面的keywords一樣，是用戶不查看源代碼看不到的，而且也是對於一個網頁的簡要內容概況。
不同的是，keywords是由幾個詞語的組成的，而description則是完整的一句話。description一般不超過150個字元，描述內容要和頁面內容相關。
用法：<meta name=”Description” Content=”你網頁的簡述”>--> <title>小米商城</title> </head>
註：快速構建HTML結構的快捷鍵：!+Tab
1.5 標簽的分類
1.5.1 快標簽（block tag）
【1】獨占一行
【2】能設置寬高
無語義標簽：沒有特定的用途 => 什麼都可以顯示 => 用於包含別的標簽 => 一般用於容器容納別的標簽。
有語義標簽：有特定的用途
1.5.1.1 DIV
div 是無語義標簽，一般用於頁面架構性佈局（DIV+CSS）
<div id="top"> aaaaa </div>
1.5.1.2 H1-H6
有語義標簽，專門用於顯示標題的。
<!--2 標題--> <h1>我是h1標題</h1> <h2>我是h2標題</h2> <h3>我是h3標題</h3> <h4>我是h4標題</h4> <h5>我是h5標題</h5> <h6>我是h6標題</h6>
1.5.1.3 列表相關
ol/li 表示有序列表（ordered list），有語義標簽。li一定是作為ol的子節點。
ul/li 表示無序列表（unordered list）有語義標簽，li一定是作為ol的子節點。
<!--使用ul-li標簽來完成。ul-li是沒有前後順序的信息列表。li是英文list item的縮寫-->
<body> <ul> <li>完美生活</li> <li>藍蓮花</li> <li>一起搖擺</li> </ul> </body> <!--ul>li(然後按下Tab鍵) 含義: 生成一對ul標簽, 然後在這對ul標簽中再生成一對li標簽--> <ul> <li></li> </ul>
<!--ul>li*3(然後按下Tab鍵) 含義: 生成一對ul標簽, 然後在這對ul標簽中再生成3對li標簽標簽-->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!--<ol>在網頁中顯示的預設樣式一般為：每項<li>前都自帶一個序號，序號預設從1開始--> <body> <ol> <li>完美生活</li> <li>藍蓮花</li> <li>一起搖擺</li> </ol> </body>
dl/dt+dd 表示定義列表，有語義標簽，一般dd可以有多個
<!--定義列表--> <!--<dl><dt></dt><dd></dd></dl>為常用標題+列表型標簽。如沒有對dl dt dd標簽初始CSS樣式，預設dd列表內容會一定縮進。--> <dl> <dt>列表標題</dt> <dd>列表內容</dd> <dd>列表內容</dd> ... </dl> <!--defined list--> <dl> <!--defined title--> <dt>程式員鼓勵師</dt> <!--defined description--> <dd>1、長相清新，聲線甜美，微笑常在，人見人愛；</dd> <dd>2、善於傾聽，善不善溝通不重要，能忍受IT工程師死宅無法交流的性格；</dd> <dd>3、耍不耍脾氣不重要，要善於發現每一個程式暖男的天性，成功馴服；</dd> <dd>4、瞭解互聯網，懂科技，不然聊起來雲里霧裡，工程師會更受打擊。</dd> </dl>
1.5.1.4 Table
table是由行（row）構成、行是由單元格（table-cell）構成。
<tr>…</tr>：表格的一行，所以有幾對tr表格就有幾行。<td>…</td>：表格的一個單元格，一行中包含幾對<td>…</td>，說明一行中就有幾列。<th>…</th>：表格的頭部的一個單元格，表格表頭。- 表格中列的個數，取決於一行中數據單元格的個數。
table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的- 表頭，也就是
th標簽中的文本預設為粗體並且居中顯示<!--快捷方法：table>tr*3>td*3--> <!--4. table--> <table border="1" <!--添加邊框-->> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> </table>
1.5.1.4.1 單元格跨列
colspan一個單元格向右占多個列。
<table border="1"> <tr> <td>11</td> <td colspan="2">22</td> </tr> <tr> <td>aa</td> <td>bb</td> <td>cc</td> <td>cc</td> </tr> </table>
1.5.1.4.1 單元格跨行
rowspan單元格可以向下跨越多個行，被占的單元格向右擠。
<table border="1"> <tr> <td>11</td> <td>22</td> <td>33</td> </tr> <tr> <td rowspan="2">aa</td> <td>bb</td> <td>cc</td> </tr> <tr> <td>bb</td> <td>cc</td> </tr> </table>
1.5.1.5 P
標簽表示段落
<!--p 表示段落--> <p>十年後的今天，世界經濟複蘇的勢頭遠不如人們期許的那樣強勁，信心的極端重要性並未減弱。然而，正如國際貨幣基金組織總裁拉加德所言，“籠罩世界經濟的烏雲正變得越來越重，最大和最重的烏雲是信心的惡化”。惡化人們對世界經濟發展前景信心的源頭來自何方？只要隨手翻一翻各國的報章，讀一讀那些有關美國同貿易伙伴大打貿易戰憂心忡忡的報道，答案再清楚不過地擺在人們面前。</p> <p>國際貿易是世界經濟增長的重要一環，美國公開違反世貿規則，大範圍挑起貿易爭端，勢必破壞全球貿易秩序，危害世界經濟增長。世界銀行上月初發佈報告指出，全球關稅廣泛上升將會給全球貿易帶來重大負面影響，對新興市場和發展中經濟體的影響尤為明顯，特別是那些與美國貿易或金融市場關聯度較高的經濟體。權威人士預測，如果關稅回到GATT/WTO（關貿總協定和世貿組織）之前的水平，世界經濟將立即收縮2.5%，全球貿易量將削減60%以上，負面影響超過2008年國際金融危機。</p> <!--錯誤的用法：不能再p標簽中再放塊標簽--> <p> <div>test</div> </p>
1.5.1.6 br
br表示換行，<br /> 我們把這種中間沒有內容的標簽稱為開閉同體標簽。
1.5.2 行內標簽
【1】 在一行內顯示
【2】 不能設置寬高，內容撐開寬高
1.5.2.1 span
span 是無語義行內標簽，一般作為容器使用。
<span style="background: red;height: 100px;">Lorem ipsum dolor sit amet.</span>TEST
1.5.2.2 a
a 表示鏈接
1.5.2.2.1 路徑相關
<!--鏈接到站外--> <a href="http://www.baidu.com/">百度</a> <!--站內鏈接--> <!--絕對路徑：從盤符開始的路徑叫做絕對路徑--> <a href="C:\Users\Administrator\Desktop\index-gbk.html">index-gbk</a> <!--相對路徑--> <!--當前目錄：. --> <a href="./index.html">index</a> <a href="index.html">index</a>
相對路徑 . 表示當前目錄， .. 返回上一級目錄。鏈接找資源時，一定先從當前目錄開始找，所以當前目錄可以省略。
1.5.2.2.3 錨點
通俗地說，錨點就是指在頁面內做調整
<div id="top"></div> <div> <a href="#early-exp">早年經歷</a><!--點擊跳轉到p標簽的早年經歷--> <a href="#professional-exp">演藝經歷</a> <a href="#personal-life">個人生活</a> <a href="#musics">音樂作品</a> </div> <p id="early-exp">早年經歷Lorem</p> <p id="professional-exp">演藝經歷Lo</p> <p id="personal-life">個人生活Lorem ipsum dolor </p> <p id="musics">音樂作品Lorem </p> <div> <a href="#top">TOP</a><!--點擊回到頂部--> </div>
1.5.2.3 Img
專門用於顯示圖片。
1.5.2.3.1常用屬性
alt：當圖片載入失敗時的提示文本
title：當滑鼠懸停時的提示文本
<img alt="阿黛爾" title="阿黛爾" src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=d6e1fdf69325bc312b5d069e66e4ea8c/6f061d950a7b020880e017d968d9f2d3572cc8d9.jpg" />
1.5.2.4 var/strong/em
var、strong、em 本意表示強調作用，有語義標簽，強調的表現形式不一樣，var/em 斜體強調，strong加粗強調。
<var>我是var</var> <!--強調字體下斜--> <strong>我是strong</strong> <!--強調字體加粗--> <em>我是em</em> <!--強調字體傾斜-->
在實際開發過程中，一般來說都不用他們的本意，而是把他們降級成一般的無語義行內標簽使用
