HTML總結篇
一.HTML基本結構標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> </html>
1. <!DOCTYPE> 標籤
<!DOCTYPE> 文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁
<!DOCTYPE html>
這句代碼的意思是: 當前頁面採取的是 HTML5 版本來顯示網頁.
2. lang 語言
簡單來說,定義為en 就是英文網頁, 定義為 zh-CN 就是中文網頁
其實對於文檔顯示來說，定義成en的文檔也可以顯示中文，定義成zh-CN的文檔也可以顯示英文
這個屬性對瀏覽器和搜索引擎(百度.谷歌等)還是有作用的
3. charset 字符集
字符集 (Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。
在<head>標籤內，可以通過<meta> 標籤的 charset 屬性來規定 HTML 文檔應該使用哪種字符編碼。
<meta charset=" UTF-8" />
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符.
注意：上面語法是必須要寫的代碼，否則可能引起亂碼的情況。一般情況下，統一使用「UTF-8」編碼，盡量統一寫成標準的 “UTF-8″，不要寫成 “utf8” 或 “UTF8″。
二.常用的標籤
1.標題標籤 <h1> – <h6>（重要）
為了使網頁更具有語義化，我們經常會在頁面中用到標題標籤。HTML 提供了 6 個等級的網頁標題，即<h1> – <h6> 。
<h1> 我是一級標題 </h1>
單詞 head 的縮寫，意為頭部、標題。
標籤語義：作為標題使用，並且依據重要性遞減。
特點：加了標題的文字會變的加粗，字號也會依次變大。一個標題獨佔一行。
2.段落和換行標籤（重要）
<p> 我是一個段落標籤 </p> 換行標籤 <br />
3.文本格式化標籤
4.<div> 和<span>標籤
<div> 和 <span> 是沒有語義的，它們就是一個盒子，用來裝內容的。
<div> 標籤用來布局，但是現在一行只能放一個<div>。 大盒子
<span> 標籤用來布局，一行上可以多個 <span>。小盒子
5.圖像標籤和路徑 (重點）
圖像標籤：
在 HTML 標籤中，<img> 標籤用於定義 HTML 頁面中的圖像。
<img src="圖像URL" />
src 是<img>標籤的必須屬性，它用於指定圖像文件的路徑和文件名。
圖像標籤的其他屬性：
6.超鏈接標籤 (重點）
<a href="跳轉目標" target="目標窗口的彈出方式"> 文本或圖像 </a>
鏈接分類：
外部鏈接: 例如 < a href=”// www.baidu.com “> 百度</a >。
內部鏈接:網站內部頁面之間的相互鏈接. 直接鏈接內部頁面名稱即可，例如 < a href=”index.html”> 首頁 </a >。
空鏈接: 如果當時沒有確定鏈接目標時，< a href=”#”> 首頁 </a > 。
下載鏈接: 如果 href 裏面地址是一個文件或者壓縮包，會下載這個文件。
網頁元素鏈接: 在網頁中的各種網頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接.
錨點鏈接: 點我們點擊鏈接,可以快速定位到頁面中的某個位置.
在鏈接文本的 href 屬性中，設置屬性值為 #名字 的形式，如<a href=”#two”> 第2集 </a>
找到目標位置標籤，裏面添加一個 id 屬性 = 剛才的名字 ，如：<h3 id=”two”>第2集介紹</h3>
7.特殊字符
8.表格標籤
<table> <tr> <th>表頭</th> ... </tr>
<tr>
<td>單元格內的文字</td>
...
</tr>
... </table>
<table> </table> 是用於定義表格的標籤。
<tr> </tr> 標籤用於定義表格中的行，必須嵌套在 <table> </table>標籤中。
<td> </td> 用於定義表格中的單元格，必須嵌套在<tr></tr>標籤中。
字母 td 指表格數據（table data），即數據單元格的內容。
<th> 標籤表示 HTML 表格的表頭部分
表格的結構標籤：
<thead></thead>：用於定義表格的頭部。<thead> 內部必須擁有 <tr> 標籤。 一般是位於第一行。
<tbody></tbody>：用於定義表格的主體，主要用於放數據本體 。
以上標籤都是放在 <table></table> 標籤中。
合併單元格：
跨行合併：rowspan=”合併單元格的個數”
跨列合併：colspan=”合併單元格的個數”
合併單元格三步曲：
先確定是跨行還是跨列合併。
找到目標單元格. 寫上合併方式 = 合併的單元格數量。比如：<td colspan=「2」></td>。
刪除多餘的單元格。
9.列表標籤
表格是用來顯示數據的，那麼列表就是用來布局的。
列表最大的特點就是整齊、整潔、有序，它作為布局會更加自由和方便。
根據使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。
無序列表（重點）：
<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ... </ul>
無序列表的各個列表項之間沒有順序級別之分，是並列的。
<ul></ul> 中只能嵌套 <li></li>，直接在 <ul></ul> 標籤中輸入其他標籤或者文字的做法是不被允許的。
<li> 與 </li> 之間相當於一個容器，可以容納所有元素。
無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設置。
有序列表（理解）：
<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> ... </ol>
<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>標籤中輸入其他標籤或者文字的做法是不被允許的。
<li> 與 </li>之間相當於一個容器，可以容納所有元素。
有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設置。
自定義列表（重點）：
自定義列表的使用場景:
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。
<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> </dl>
<dl></dl> 裏面只能包含 <dt> 和 <dd>。
<dt> 和 <dd>個數沒有限制，經常是一個<dt> 對應多個<dd>。
10.表單標籤
<form action=「url地址」 method=「提交方式」 name=「表單域名稱"> 各種表單元素控件 </form>
<input> 表單元素：
type 屬性的屬性值及其描述如下
input type="屬性值" />
除 type 屬性外，<input>標籤還有其他很多屬性，其常用屬性如下
name 和value 是每個表單元素都有的屬性值,主要給後台人員使用.
name 表單元素的名字, 要求 單選按鈕和複選框要有相同的name值.
checked屬性主要針對於單選按鈕和複選框, 主要作用一打開頁面,就要可以默認選中某個表單元素.
maxlength 是用戶可以在表單元素輸入的最大字符數, 一般較少使用.
<label> 標籤：
<label> 標籤為 input 元素定義標註（標籤）。
<label> 標籤用於綁定一個表單元素, 當點擊<label> 標籤內的文本時，瀏覽器就會自動將焦點(光標)轉到或者選擇對應的表單元素上,用來增加用戶體驗.
<label for="sex">男</label> <input type="radio" name="sex" id="sex" />
<select> 表單元素：
在頁面中，如果有多個選項讓用戶選擇，並且想要節約頁面空間時，我們可以使用<select>標籤控件定義下拉列表.
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>
<select> 中至少包含一對<option> 。
在<option> 中定義 selected =「 selected ” 時，當前項即為默認選中項。
<textarea> 表單元素：
使用場景: 當用戶輸入內容較多的情況下，我們就不能使用文本框表單了，此時我們可以使用 <textarea> 標籤。
在表單元素中，<textarea> 標籤是用於定義多行文本輸入的控件。
使用多行文本輸入控件，可以輸入更多的文字，該控件常見於留言板，評論。
<textarea rows="3" cols="20"> 文本內容 </textarea>
通過 <textarea> 標籤可以輕鬆地創建多行文本輸入框。
cols=「每行中的字符數」 ，rows=「顯示的行數」，我們在實際開發中不會使用，都是用 CSS 來改變大小。
