HTML筆記（適合新手入門）
HTML
Web 標準構成
Web標準不是某一個標準，而是由W3C和其他標準化組織制定的一系列標準的集合。
主要包括結構（Structure）、表現（Presentation）和行為（Behavior）三個方面。
結構標準：結構用於對網頁元素進行整理和分類，咱們主要學的是HTML。 最重要
表現標準：表現用於設定網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：行為是指網頁模型的定義及互動的編寫，咱們主要學的是 Javascript
HTML標籤分類
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標籤。所謂標籤就是放在
1.雙標籤
<標籤名> 內容 </標籤名>
該語法中“<標籤名>”表示該標籤的作用開始，一般稱為“開始標籤（start tag）”，“</標籤名>” 表示該標籤的作用結束，一般稱為“結束標籤（end tag）”。和開始標籤相比，結束標籤只是在前面加了一個關閉符“/”。
比如 <body>我是文字 </body>
2.單標籤
<標籤名 />
單標籤也稱空標籤，是指用一個標籤符號即可完整地描述某個功能的標籤。
比如 <br />
HTML標籤關係
標籤的相互關係就分為兩種：
1.巢狀關係
<head> <title> </title> </head>
2.並列關係
<head></head>
<body></body>
文件型別<!DOCTYPE>
<!DOCTYPE html>
這句話就是告訴我們使用哪個html版本？ 我們使用的是 html 5 的版本。 html有很多版本。
<!DOCTYPE> 標籤位於文件的最前面，用於向瀏覽器說明當前文件使用哪種 HTML 或 XHTML 標準規範，必需在開頭處使用<!DOCTYPE>標籤為所有的XHTML文件指定XHTML版本和型別，只有這樣瀏覽器才能按指定的文件型別進行解析。
注意： 一些老網站可能用的還是老版本的文件型別比如 XHTML之類的，HTML5的文件型別相容很好(向下相容的原則)，所以大家放心的使用HTML5的文件型別就好了。
字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有gbk和gb2312。
gb2312 簡單中文 包括6763個漢字
BIG5 繁體中文 港澳臺等用
GBK包含全部中文字元 是GB2312的擴充套件，加入對繁體字的支援，相容GB2312
UTF-8則包含全世界所有國家需要用到的字元
記住一點，以後我們統統使用UTF-8 字符集, 這樣就避免出現字符集不統一而引起亂碼的情況了。
HTML標籤的語義化
所謂標籤語義化，就是指標籤的含義。
為什麼要有語義化標籤
1、方便程式碼的閱讀和維護
2、同時讓瀏覽器或是網路爬蟲可以很好地解析，從而更好分析其中的內容
3、使用語義化標籤會具有更好地搜尋引擎優化
核心：合適的地方給一個最為合理的標籤。
語義是否良好： 當我們去掉CSS之後，網頁結構依然組織有序，並且有良好的可讀性。
一眼看去，就知道那個是重點，結構是什麼，知道每塊的內容是幹啥的。
遵循的原則：先確定語義的HTML ，再選合適的CSS。
HTML常用標籤
HTML標籤有很多，這裡我們學習最為常用的，後面有些較少用的，我們可以查下手冊就可以了。
排版標籤
排版標籤主要和css搭配使用，顯示網頁結構的標籤，是網頁佈局最常用的標籤。
標題標籤 (熟記)
單詞縮寫： head 頭部. 標題 title 文件標題
為了使網頁更具有語義化，我們經常會在頁面中用到標題標籤，HTML提供了6個等級的標題，即
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
標題標籤語義： 作為標題使用，並且依據重要性遞減
其基本語法格式如下：
<hn> 標題文字 </hn>
注意： h1 標籤因為重要，儘量少用，不要動不動就向你扔了一個h1。 一般h1 都是給logo使用，或者頁面中最重要標題資訊。
段落標籤( 熟記)
單詞縮寫： paragraph 段落 [ˈpærəgræf] 無須記這個單詞
在網頁中要把文字有條理地顯示出來，離不開段落標籤，就如同我們平常寫文章一樣，整個網頁也可以分為若干個段落，而段落的標籤就是
<p> 文字內容 </p>
是HTML文件中最常見的標籤，預設情況下，文字在一個段落中會根據瀏覽器視窗的大小自動換行。
水平線標籤(認識)
單詞縮寫： horizontal 橫線 [ˌhɔrəˈzɑntl] 同上
在網頁中常常看到一些水平線將段落與段落之間隔開，使得文件結構清晰，層次分明。這些水平線可以通過插入圖片實現，也可以簡單地通過標籤來完成，<hr />就是建立橫跨網頁水平線的標籤。其基本語法格式如下：
<hr />是單標籤
在網頁中顯示預設樣式的水平線。
換行標籤(熟記)
單詞縮寫： break 打斷 ,換行
在HTML中，一個段落中的文字會從左到右依次排列，直到瀏覽器視窗的右端，然後自動換行。如果希望某段文字強制換行顯示，就需要使用換行標籤
<br />
這時如果還像在word中直接敲回車鍵換行就不起作用了。
div span標籤(重點)
div span 是沒有語義的 是我們網頁佈局主要的2個盒子 css+div
div 就是 division 的縮寫 分割， 分割槽的意思 其實有很多div 來組合網頁。
跨度，跨距；範圍
語法格式：
<div> 這是頭部 </div> <span>今日價格</span>
文字格式化標籤(熟記)
在網頁中，有時需要為文字設定粗體、斜體或下劃線效果，這時就需要用到HTML中的文字格式化標籤，使文字以特殊的方式顯示。
b i s u 只有使用 沒有 強調的意思 strong em del ins 語義更強烈
標籤屬性
使用HTML製作網頁時，如果想讓HTML標籤提供更多的資訊，可以使用HTML標籤的屬性加以設定。其基本語法格式如下：
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" …> 內容 </標籤名>
在上面的語法中，
1.標籤可以擁有多個屬性，必須寫在開始標籤中，位於標籤名後面。
2.屬性之間不分先後順序，標籤名與屬性、屬性與屬性之間均以空格分開。
3.任何標籤的屬性都有預設值，省略該屬性則取預設值。
採取 鍵值對 的格式 key="value" 的格式
比如:
<hr width="400" />
屬性 是 寬度
值 是 400
建議： 儘量不使用 樣式屬性。
影象標籤img (重點)
單詞縮寫： image 影象
HTML網頁中任何元素的實現都要依靠HTML標籤，要想在網頁中顯示影象就需要使用影象標籤，接下來將詳細介紹影象標籤<img />以及和他相關的屬性。其基本語法格式如下：
該語法中src屬性用於指定影象檔案的路徑和檔名，他是img標籤的必需屬性。
<img src="影象URL" />
連結標籤(重點)
單詞縮寫： anchor 的縮寫 [ˈæŋkə(r)] 。基本解釋 錨, 鐵錨 的
在HTML中建立超連結非常簡單，只需用標籤環繞需要被連結的物件即可，其基本語法格式如下：
<a href="跳轉目標" target="目標視窗的彈出方式">文字或影象</a>
href：用於指定連結目標的url地址，當為標籤應用href屬性時，它就具有了超連結的功能。 Hypertext Reference的縮寫。意思是超文字引用
target：用於指定連結頁面的開啟方式，其取值有self和blank兩種，其中self為預設值，blank為在新視窗中開啟方式。
注意：
1.外部連結 需要新增 http:// www.baidu.com
2.內部連結 直接連結內部頁面名稱即可 比如 < a href="index.html"> 首頁 </a >
3.如果當時沒有確定連結目標時，通常將連結標籤的href屬性值定義為“#”(即href="#")，表示該連結暫時為一個空連結。
4.不僅可以建立文字超連結，在網頁中各種網頁元素，如影象、表格、音訊、視訊等都可以新增超連結。
錨點定位 （難點）
通過建立錨點連結，使用者能夠快速定位到目標內容。建立錨點連結分為兩步：
1.使用“a href=”#id名>“連結文字"</a>建立連結文字（被點選的）
<a href="#two">
2.使用相應的id名標註跳轉目標的位置。
<h3 id="two">第2集</h3>
base 標籤 基本的
base 可以設定整體連結的開啟狀態
base 寫到 <head> </head> 之間
把所有的連線 都預設新增 target="_blank"
特殊字元標籤 （理解）
註釋標籤
在HTML中還有一種特殊的標籤——註釋標籤。如果需要在HTML文件中新增一些便於閱讀和理解但又不需要顯示在頁面中的註釋文字，就需要使用註釋標籤。其基本語法格式如下：
<!-- 註釋語句 --> ctrl + / 或者 ctrl +shift + /
註釋內容不會顯示在瀏覽器視窗中，但是作為HTML文件內容的一部分，也會被下載到使用者的計算機上，檢視原始碼時就可以看到。
路徑(重點、難點)
路徑可以分為： 相對路徑和絕對路徑
相對路徑
以引用檔案之網頁所在位置為參考基礎，而建立出的目錄路徑。因此，當保存於不同目錄的網頁引用同一個檔案時，所使用的路徑將不相同，故稱之為相對路徑。
影象檔案和HTML檔案位於同一資料夾：只需輸入影象檔案的名稱即可，如img src="logo.gif" /。
影象檔案位於HTML檔案的下一級資料夾：輸入資料夾名和檔名，之間用“/”隔開，如img src="img/img01/logo.gif" /。
影象檔案位於HTML檔案的上一級資料夾：在檔名之前加入“../” ，如果是上兩級，則需要使用 “../ ../”，以此類推，如img src="../logo.gif" /。
絕對路徑
絕對路徑以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對，意指當所有網頁引用同一個檔案時，所使用的路徑都是一樣的
“D:\web\img\logo.gif”，或完整的網路地址，例如“http://www.itcast.cn/images/logo.gif”。
列表標籤
無序列表 ul （重點）
無序列表的各個列表項之間沒有順序級別之分，是並列的。其基本語法格式如下：
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ul>
比如下面這些，新聞是沒有順序的，不用排隊，先到先得，後釋出先顯示。
注意：
1. <ul></ul>中只能巢狀<li></li>，直接在<ul></ul>標籤中輸入其他標籤或者文字的做法是不被允許的。
2. <li>與</li>之間相當於一個容器，可以容納所有元素。
3. 無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！
有序列表 ol （瞭解）
有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
......
</ol>
所有特性基本與ul 一致。 但是實際工作中， 較少用 ol
自定義列表（理解）
定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何專案符號。其基本語法如下：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
...
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
...
</dl>
表格 table(會使用)
表格的現在還是較為常用的一種標籤，但不是用來佈局，常見處理、顯示錶格式資料。
建立表格
在HTML網頁中，要想建立表格，就需要使用表格相關的標籤。建立表格的基本語法格式如下：
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
在上面的語法中包含三對HTML標籤，分別為 table</table、tr</tr、td</td，他們是建立表格的基本標籤，缺一不可，下面對他們進行具體地解釋
1.table用於定義一個表格。
2.tr 用於定義表格中的一行，必須巢狀在 table標籤中，在 table中包含幾對 tr，就有幾行表格。
3.td /td：用於定義表格中的單元格，必須巢狀在<tr></tr>標籤中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列（或多少個單元格）。
注意：
1. <tr></tr>中只能巢狀<td></td>
2. <td></td>標籤，他就像一個容器，可以容納所有的元素
表格屬性
表頭標籤
表頭一般位於表格的第一行或第一列，其d</td即可。
表格結構（瞭解）
在使用表格進行佈局時，可以將表格劃分為頭部、主體和頁尾（頁尾因為有相容性問題，我們不在贅述），具體 如下所示：
<thead></thead>：用於定義表格的頭部。
必須位於<table></table> 標籤中，一般包含網頁的logo和導航等頭部資訊。
<tbody></tbody>：用於定義表格的主體。
位於<table></table>標籤中，一般包含網頁中除頭部和底部之外的其他內容。
表格標題
表格的標題： caption
定義和用法
caption 元素定義表格標題。
<table>
<caption>我是表格標題</caption>
</table>
caption 標籤必須緊隨 table 標籤之後。您只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。
合併單元格(難點)
跨行合併：rowspan 跨列合併：colspan
合併單元格的思想：
將多個內容合併的時候，就會有多餘的東西，把它刪除。 例如 把 3個 td 合併成一個， 那就多餘了2個，需要刪除。
公式： 刪除的個數 = 合併的個數 - 1
合併的順序 先上 先左
總結表格
表格提供了HTML 中定義表格式資料的方法。
表格中由行中的單元格組成。
表格中沒有列元素，列的個數取決於行的單元格個數。
表格不要糾結於外觀，那是CSS 的作用。
表單標籤(掌握)
目的是為了收集使用者資訊。
在我們網頁中， 我們也需要跟使用者進行互動，收集使用者資料，此時也需要表單。
在HTML中，一個完整的表單通常由表單控制元件（也稱為表單元素）、提示資訊和表單域3個部分構成。
表單控制元件：
包含了具體的表單功能項，如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示資訊：
一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作。
表單域：
他相當於一個容器，用來容納所有的表單控制元件和提示資訊，可以通過他定義處理表單資料所用程式的url地址，以及資料提交到伺服器的方法。如果不定義表單域，表單中的資料就無法傳送到後臺伺服器。
input 控制元件(重點)
在上面的語法中，input /標籤為單標籤，type屬性為其最基本的屬性，其取值有多種，用於指定不同的控制元件型別。除了type屬性之外，input /標籤還可以定義很多其他的屬性，其常用屬性如下表所示。
label標籤(理解)
label 標籤為 input 元素定義標註（標籤）。
作用： 用於繫結一個表單元素, 當點選label標籤的時候, 被繫結的表單元素就會獲得輸入焦點
如何繫結元素呢？
for 屬性規定 label 與哪個表單元素繫結。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea控制元件(文字域)
如果需要輸入大量的資訊，就需要用到textarea/textarea標籤。通過textarea控制元件可以輕鬆地建立多行文字輸入框，其基本語法格式如下：
<textarea cols="每行中的字元數" rows="顯示的行數">
文字內容
</textarea>
下拉選單
使用select控制元件定義下拉選單的基本語法格式如下
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
注意：
1、select</select中至少應包含一對option></option。
2、在option 中定義selected =" selected "時，當前項即為預設選中項。
表單域
在HTML中，form標籤被用於定義表單域，即建立一個表單，以實現使用者資訊的收集和傳遞，form中的所有內容都會被提交給伺服器。建立表單的基本語法格式如下：
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控制元件
</form>
常用屬性：
Action在表單收集到資訊後，需要將資訊傳遞給伺服器進行處理，action屬性用於指定接收並處理表單資料的伺服器程式的url地址。
method用於設定表單資料的提交方式，其取值為get或post。
name用於指定表單的名稱，以區分同一個頁面中的多個表單。
注意： 每個表單都應該有自己表單域。
查文件
經常查閱文件是一個非常好的學習習慣。
W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/