1??HTML基本概念
HTML即超文本標記語言，由一些標簽來將網頁的內容表示出來。不需要編譯，直接由瀏覽器執行，其實質是一個后綴名為.html或者是.htm的文本文件。對大小寫不敏感。
2??基礎語法
HTML基本結構
<!DOCTYPE html><!-- 聲明文檔類型版本，不屬于HTML標簽 -->
<html lang="en">
<head><!-- 網頁頭部信息，瀏覽器不顯示 -->
<meta charset="UTF-8"><!-- 編碼形式是UTF-8 支持中英日韓文等，還有gb2312支持簡體中文-->
<title>網頁標題</title>
</head>
<body><!-- 網頁主體，所有能看到的部分都寫在body里 -->
網頁主體內容
</body>
</html>
HTML標簽：一般成對出現，分為開始標簽（如<p>）和結束標簽（如</p>）。也有單標簽，即只有結束標簽（如</hr>）。
HTML元素：從開始標簽到結束標簽的所有代碼，稱為HTML元素。
標簽屬性：可以在開始標簽里定義元素的屬性。
語法：<標簽名 屬性名1="值" 屬性名2="值"... ... >... ...</標簽名>
3??常用標簽
3.1??文字和段落
標題： h1~h6
段落： p
align對齊屬性值：可以選擇p標簽里的段落內容的對齊方式。
換行： br/ 是單標簽
空格：
預格式： pre 保持編輯器里的格式，在編輯器里是什么格式，在瀏覽器中顯示的就是什么格式，不必再輸入空格 和換行標簽。
水平線： hr/ 是單標簽
3.2??格式
斜體： i 或 em
粗體： b 或 strong
上標： sup
下標： sub
特殊符號：
3.3??列表
無序列表基本語法
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
...
</ul>
ul的type屬性值：可以設置列表項前面的樣式，默認樣式是實心圓點。
有序列表基本語法
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
...
</ol>
ol的type屬性值：可以設置列表項前面的樣式，默認樣式是數字。
定義列表基本語法
注意：dl、dt、dd標簽組合使用。dt和dd是同級標簽。dd前面自動縮進。
<dl>
<dt>列表項</dt>
<dd>列表項描述</dd>
<dd>列表項描述</dd>
<dt>列表項</dt>
<dd>列表項描述</dd>
...
</dl>
列表標簽使用場景：網站導航條、新聞列表、電商網站商品分類、商品排行榜等。
注意，在實際開發中，往往需要把ul和ol前面的默認編號去掉，不使用type屬性而使用圖片代替。
3.4??圖片
img是單標簽，基本語法：
<img src="圖片鏈接地址" alt="當圖像無法顯示時顯示的文本">
img屬性值：
絕對路徑：從盤符開始寫起，寫到需要的圖片為止。
相對路徑：從當前正在編輯的HTML文件開始寫起，寫到需要的圖片為止。
當圖片與當前HTML文檔在同一目錄中，直接寫即可。<img src="1.jpg"/>
當圖片在當前HTML文檔的上一級一目錄中，用../定位到上級目錄。<img src="../1.jpg"/>
當圖片在當前HTML文檔的下一級一目錄中，用下一級的文件夾名定位到下一級文件夾。<img src="images/1.jpg"/>
開發中要用相對路徑，不用絕對路徑。因為一旦整個網站的文件夾移動了位置，用絕對路徑方式就會導致圖片加載失敗。
寬和高如果設置成定值，圖片大小固定為該定值；如果設置成百分比，該百分比是以圖片的父容器大小為基準的。
3.5??超鏈接
基本語法：
<a href="鏈接地址">內容</a>
其中，當鏈接到同一個網站內時，使用相對路徑；當鏈接到外部網站時，使用絕對路徑。
target屬性：_self是默認值，效果是在當前窗口打開新的頁面； _blank的效果是創建新的窗口打開新的頁面。
title屬性：當鼠標移動到超鏈接上時的提示文字。
同一頁面內的錨鏈接：當一個網頁內容太多，需要先定義一個目錄，然后點擊目錄跳轉到頁面的相應位置。錨鏈接實現在同一個頁面內跳轉到不同的位置。
首先在頁面內需要跳轉到的地方定義錨點，用到的是a標簽的name屬性。接著在頁面最上方添加目錄，把相對應的錨點綁定到目錄上，用到的是a標簽的href屬性，屬性值是#號加上name的值。點擊目錄，目錄就可以根據name屬性跳轉到相應位置了。
基本語法：
<a name="top"></a>這里是頂部<br/><!--定義錨點位置-->
<!--目錄部分-->
<a href="#fruit">水果</a><br/>
<a href="#vegetable">蔬菜</a><br/>
<a href="#sport">運動</a><br/>
<!--內容部分-->
<a name="fruit"></a><!--定義錨點位置-->
<h4>水果</h4>
<ul>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ul>
<a href="#top">返回頂部</a>
<a name="vegetable"></a><!--定義錨點位置-->
<h4>蔬菜</h4>
<ul>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
</ul>
<a href="#top">返回頂部</a>
<a name="sport"></a><!--定義錨點位置-->
<h4>運動</h4>
<ul>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
</ul>
<a href="#top">返回頂部</a>
不同頁面的錨鏈接：如果需要點擊第一個網頁的某個目錄，跳轉到另一個網頁的某個位置，則需要在href屬性的值的#號前面加上跳轉的網頁的名稱（當兩個網頁在同一級目錄下時）。
基本語法：例子中的目錄在index.html文件里，而跳轉到index2.html頁面的不同位置
<!--以下內容寫在index.html文件中-->
<a name="top"></a><!--定義錨點位置-->
這里是頂部<br/>
<!--目錄部分-->
<a href="index2.html#fruit">水果</a><br/>
<a href="index2.html#vegetable">蔬菜</a><br/>
<a href="index2.html#sport">運動</a><br/>
<!--以下內容寫在index2.html文件中-->
<a name="fruit"></a><!--定義錨點位置-->
<h4>水果</h4>
<ul>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ul>
<a href="index.html#top">返回頂部</a>
<a name="vegetable"></a><!--定義錨點位置-->
<h4>蔬菜</h4>
<ul>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
<li>西紅柿</li>
</ul>
<a href="index.html#top">返回頂部</a>
<a name="sport"></a><!--定義錨點位置-->
<h4>運動</h4>
<ul>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
<li>游泳</li>
</ul>
<a href="index.html#top">返回頂部</a>
郵件應用：給文字添加郵件鏈接，點擊鏈接文字時即可打開電腦上的郵件發送軟件進行發送。
基本語法：
<a href="mailto:1234567@qq.com">意見反饋</a>
文件下載：給文字添加下載鏈接，點擊鏈接文字即可下載對應的文件。href屬性直接寫該文件所在位置的路徑。注意文件一定是要壓縮的，如果不壓縮，點擊鏈接文字會直接打開該文件而不是下載。
基本語法：
<a href="image.zip">點我下載</a>
