HTML標籤知識總結
阿新 • • 發佈：2019-01-12
HTML
前提簡述
以下內容純屬個人總結，如有錯誤，敬請諒解
做網站的流程
簡單的可以分為以下步驟
買域名 -> 租用空間->網站建設->網站推廣->網站維護
網站建設分為：確定網站素材、搜尋資料、規劃網站、製作頁面
什麼是w3c標準
簡單的來說分為以下幾個部分 w3c制定了結構和表現的規則，ECMA指定了行為的規則 * 結構 結構就是HTML、XHTML、XML語法 * 表現 表現即為css層疊樣式表 * 行為 行為即是DOM ECMAScript JavaScript標準
WHATWG 是一個推動HTML5發展的組織，由（opera，Mozilla基金會，蘋果等瀏覽器廠商組建）
HTML標籤
html概念
HTML指的是超文字標記語言(hyper text markup language)
XHTML指的是可拓展超文字標記語言，語法規則比HTML更為嚴格
HTML標籤
文件型別宣告
1.XHTML1.1 語法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2.XHTML 1.0 Frameset 語法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 3.XHTML 1.0 Transitional 語法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4.XHTML 1.0 Strict 語法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 5.HTML 4.01 Frameset 語法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 6.HTML 4.01 Strict 語法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 7.HTML 5 語法：<!DOCTYPE html>
<html></html>根標籤
html標籤有一個lang屬性，值為"en"會提示瀏覽器此網頁為英文網站，當瀏覽器裝有翻譯
外掛時，會提示翻譯此網站，所以當編寫的網站為中文網站時，可以選擇不寫lang屬性
值，或者將屬性值修改為"zh-cn",代表此網站是中文
<meta/>標籤用法 它是一個單標籤
1.標籤可以用來設定禁止使用者或者瀏覽器自動縮放視窗 語法：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> 2.設定頁面的字元編碼 語法：<meta charset="utf-8"/> 國際通用編碼為utf-8，都可以識別，如果不是utf-8編碼可是，中文網站可能會亂碼
<title></title>標籤
用來設定網頁選項卡標籤名，類似於開啟百度是，網站上方顯示的“百度一下！你就知道”
此標籤對瀏覽器友好，利於網站後期的SEO優化
<link/>標籤
1.link標籤是一個單標籤，可以用來匯入css外部樣式表
語法：<link rel="stylesheet" type="text/css" href="css檔案路徑"/>
2.用來匯入title標題前面的小圖示
語法：<link rel="shortcut icon" type="image/x-icon" href="小圖示的路徑"/>
一般網站的title前面的小圖片，在網址後面加/favicon.ico可以跳轉到小圖示
<style></style>樣式標籤
1.用來編寫網頁內部樣式表
語法：<style type="text/css"></style>
在HTML5中支援直接寫<style></style>
<body></body>內容主題標籤
所有的需要在網頁中顯示的內容都必須寫在body標籤中
*注意
使用之前body有一個預設的外邊距，在每個瀏覽器中產生的預設的外邊距大小都不一樣
<div></div>標籤
div是一個塊級元素，通常作為盒子使用，所有有之前的div+css佈局說法，基本上所有的
網站可以只用div+css搭建出來
1.div是一個塊級元素，所以它會獨佔一整行
2.div是一個乾淨的塊級元素，他沒有預設的margin和padding值
<h1>~</h6>標籤
1.<h1>~<h6>是標題標籤,是一個雙標籤，是一個塊級元素，有預設的字型粗細以及字型大小
2.有預設的margin值，每個遊覽器預設的大小不一定
3.<h1>~<h3>標籤對瀏覽器友好，利於後期SEO優化
4.<h1>標籤一般在一個網頁中只出現一次，用來包裹網站logo,表示非常重要
5.<h2>標籤在一個網頁中使用次數最多三次，次於logo重要性的使用
6.<h3>標籤在網頁中可以重複使用
<p></p> 標籤
1.<p>標籤是段落標籤，且是一個雙標籤，是一個塊級元素
2.有預設的margin值，且每個瀏覽器預設的大小不一致
<br> 標籤
1.<br>標籤是強制換行標籤，是一個單標籤
2.html5的寫法直接<br>，但是之前的版本會寫<br/>代表這個標籤結束
<hr> 標籤
1.<hr>標籤是水平分割線，是一個單標籤
2.html5的寫法直接<hr>，但是之前的版本會寫<hr/>代表這個標籤結束
<img/> 標籤
1.<img/>標籤是一個圖片標籤，用來引入圖片，是一個行內塊元素，是一個單標籤
2.屬性
* src 用來設定需要引入的圖片的路徑(可以寫相對路徑，也可以寫絕對路徑，實際開發
中一般使用相對路徑來引入圖片)
* alt 設定alt屬性以後，當圖片的路徑有誤，或者圖片載入不出來的時候，就會顯示alt
裡面的文字內容，提示使用者這個地方是一個什麼東西
*title 設定title屬性以後，當用戶瀏覽到這張圖片的時候，滑鼠懸停在圖片上的時候，會
顯示title屬性值裡面的內容
3.當編寫的網頁需要相容ie的時候，需加上圖片樣式border：0；在ie9以下的瀏覽器中，
圖片會有一個自帶的border藍色邊框
4.由於<img/>標籤是一個行內塊元素，所有當在盒子中插入<img/>標籤引入圖片的時候，
會把父級元素撐大幾畫素，需給img設定vertical-align:top;來解決
<a></a> 標籤
1.<a>標籤是一個連結標籤，一個行內元素，是一個雙標籤
2.屬性
* href 設定連結跳轉的域名地址
* title 滑鼠懸停在此連結標籤上顯示title內容
* target 此屬性有兩個常用值，用來設定跳轉頁面開啟方式
>>"_blank"在新視窗中開啟
>>"_self"在當前視窗中開啟（預設值）
3.一般用來做連結跳轉
例：跳轉到百度 <a href="http://www.baidu.com"></a>
4.可以用來做錨點定位，給盒子設定一個ID屬性名，將<a>標籤的href設定為"#ID名"，即
可點選此<a>標籤調到此ID屬性盒子
例：<div id="a"></div>
<a href="#a"></a>
5.<a>標籤是所有標籤中的一個特例，此標籤裡面可以包含塊級標籤，且自帶下劃線
6.<a>標籤不可以繼承父元素的顏色，需要繼承需要給<a>標籤新增css樣式"color: inherit;"
其他行內標籤
1.加粗標籤
<b></b>
<strong></strong> 比b標籤更具有語義化，起強調作用
2.傾斜標籤
<i></i> 一般i標籤用來做字型圖示
<em></em> 比i標籤更具有語義化，起強調作用
3.下劃線標籤
<u></u>
<ins></ins> 比u標籤更具有語義化，起強調作用
4.刪除線標籤
<s></s>
<del></del> 比<s>標籤 更具有語義化，起強調作用
5.上角標標籤
<sup></sup>
6.下角標標籤
<sub></sub>
7.span標籤
<table></table> 標籤
1.table是表格標籤，且是一個怪異盒子模型，一般配合<tr><td>標籤使用
語法：<table>
<tr>
<td></td>
</tr>
</table>
2.td有預設的padding值
3.屬性
* border 定義表格的邊框
* width 定義表格的寬度
* height 定義表格的高度
* bgcolor 定義表格的背景顏色
* bordercolor 定義表格的邊框顏色
* cellspacing 單元格和單元格之間的距離
* cellpadding 單元格和內容之間的距離
* colspan 合併列單元格
* rowspan 合併行單元格
* align="center" 表格在網頁中居中，(tr,td)是內容居中
* border-collapse:collapse; 表格邊框合併
* table-layout:fiexd； 固定表格寬度
注意： 三個標籤必須一起使用
列表標籤
*有序列表 ol>li
- ol有預設的margin和padding
- 會產生一個有序號的列表
*無序列表 ul>li
- ul有預設的margin和padding
- 會產生一個帶有黑點字首的列表
*自定義列表 dl>dt+dd
- dl和dd有一個預設的margin值
- 一般dd是用來解釋dt裡面的內容的
去除列表自帶的序號已經樣式黑點，給列表新增list-style:none;屬性
form表單
1.form屬性有個action 用來設定表單提交地址
2.<input/>標籤，是一個單標籤
* 屬性 type="value";
value
- text 代表文字框,placeholder可以設定預設的提示資訊
- password 代表密碼框
- file 檔案上傳按鈕
- radio 單選按鈕，必須加name屬性值，且同一組name屬性值相同
- checkbox 複選按鈕
- submit 提交按鈕
- reset 重置按鈕
3.<textarea></textarea>文字域標籤
4.<button></botton> 按鈕
5.<select></select>下拉選單，需配合<option></option>使用
6.<label for="id名"></label>繫結單選按鈕或者複選按鈕，可以修改按鈕樣式
程式碼標籤巢狀原則規則
1.塊級標籤巢狀行內塊標籤已經行內標籤
2.單標籤不能巢狀元素，例如：<a>標籤
3.<div>可以巢狀所有的標籤，包括<div>自己
4.<h1>~<h6>、<p>標籤只能巢狀行內塊標籤和行內標籤
5.行內塊標籤(行內標籤)可以巢狀行內塊標籤(行內標籤)
6.<a></a>標籤可以巢狀塊級標籤(巢狀例外)