標籤：iis toolbar upm 標準 ie6 dsd g++ sqs emd
HTML解釋：HTML是英文Hyper Text Mark-up Language(超文字標記語言 (HTML))的縮寫，他是一種製作全球資訊網頁面標準語言（標記）。相當於定義統一的一套規則，大家都來遵守他，這樣就可以讓瀏覽器根據標記語言的規則去解釋它。
瀏覽器負責將標籤翻譯成使用者“看得懂”的格式，呈現給使用者！
超級文本標記語言是標準通用標記語言 (SGML)下的一個應用，也是一種規範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁檔案本身是一種文字檔，通過在文字檔中委任標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。
基本組成：
<!DOCTYPE html> #標準規範<html lang="en"><head> #html頭 <meta charset="UTF-8"> #字元編碼 <title>Title</title> #頁面頭部顯示內容</head><body> <p>主體內容</p> #頁面內容主體</body></html><head>和</head>之間的內容，是元資訊和網站的標題 元資訊一般是不顯示出來的,但是記錄了你這個HTML檔案的很多有用的資訊<body>和</body>之間的內容，是瀏覽器呈現出來的，使用者看到的頁面效果。也就是說這裡是網頁的主體。也就是body的身體之意<html></html>是說明這個是一個網頁。告訴瀏覽器這個網頁的開始和結束。他包含了之後的兩個元素。<head>和</head>|<body>和</body>
HTML文檔
1、DOCTYPE
Doctype告訴瀏覽器使用什麼樣的html或xhtml規範來解析html文檔
HTML語言需要一個標準，當我們在第一行指定了<!DOCTYPE html>的時候，當瀏覽器去訪問我們的代碼的時候就就按照HTML代碼裡指定的標準去讀取和渲染給我們展現的頁面。
為什麼要使用<!DOCTYPE html>這個去告訴瀏覽器呢？？？？？？？？：
DOCTYPE模式：
我們先瞭解一下DOCTYPE的模式
問題產生：
當Netscape4（譯註：網景公司早期的瀏覽器）和IE4（微軟公司早期的瀏覽器）實現CSS機制時，並沒有遵循W3C提出的標準。Netscape4 提供了糟糕的支援，而IE4 雖然接近標準，但依舊未能完全正確的支援標準。儘管IE 5 修複了IE4 許多的問題（bugs），但是依然延續CSS實現中的其它故障（主要是盒模型（box model）問題）。
為了保證自己的網站在不同的瀏覽器中都能正確展現，網頁開發人員不得不依據各個瀏覽器的自身的規範來使用CSS。因此大部分網站的CSS實現並未符合W3C的標準。
然而隨著標準一致性變得越來越重要，瀏覽器開發商不得不面臨一個艱難的抉擇：逐漸遵循W3C的標準是前進的方向。但是改變現有CSS的實現，完整去遵循標準，會使許多網站或多或少受到破壞。如果瀏覽器突然以正確的方式解析現存的CSS，陳舊的網站顯示必然受到影響。
因此立即遵循標準會產生問題，然而忽略標準則又會維持瀏覽器大戰時（譯註：微軟和網景之間的一段競爭）所產生的混亂。
解決方案：
換句話說，所有的瀏覽器需要提供兩種模式：怪異模式（即相容模式）服務於舊式規則，strict 模式服務於標準規則。Mac平台的IE瀏覽器最先實現這兩種模式，Mozilla， Safari、Opera和Windows平台的IE6也相繼實現了這兩種模式。WIndows平台的IE5和Netscape4則只提供了怪異模式。
選擇使用哪種模式需要一個觸發器，而 “DOCTYP切換” 則用於此目的。依照標準：任何一個(X)HTML文檔必須擁有一個DOCTYPE（譯註：DTD（文件類型定義）是一組機器可讀的規則，它們指示 (X)HTML文檔中允許有什麼，不允許有什麼，DOCTYPE正是用來告訴瀏覽器使用哪種DTD,一般放在(X)HTML文檔開頭聲明）用以告訴其他人 這個文檔的類型風格
head部分
1、Meta(metadata information)
提供有關頁面的元資訊，例：頁面編碼、重新整理、跳轉、針對搜尋引擎和更新頻度的描述和關鍵詞
1、頁面編碼
<meta charset="UTF-8"> #指定編碼類別型為UTF-8
2、重新整理和跳轉
<meta http-equiv="refresh" content="5"> #指定每5秒重新整理一次<meta http-equiv="refresh" Content="1;Url=http://www.cnblogs.com/luotianshuai/" /> #指定1秒之後跳轉頁面至另一個網頁
3、關鍵字
關鍵字的作用：一般是讓爬蟲之類的收錄程式，當他們在爬你的網站的時候，如果你有關鍵字，那麼他們會優先把關鍵字收錄到他們的記錄中，比如百度：如果他們收錄之後，他們搜尋你的關鍵字的時候，就能找到咱們的網站。
<meta name="keywords" content="部落格,Mr、心弦,帥哥,羅天帥">
4、描述
例如cnblog裡的就是一個描述：
<meta name="description" content="部落格園是一個面向開發人員的知識分享社區。自建立以來，部落格園一直致力並專註於為開發人員打造一個純淨的技術交流社區，推動並協助開發人員通過互連網分享知識，從而讓更多開發人員從中受益。部落格園的使命是協助開發人員用代碼改變世界。">
5、X-UA-Compatible
X-UA-Compatible 這個是IE8特有的，知道即可，因為做前端的同學都很害怕IE因為他們問題比較多各個版本問題很詭異，當IE8的時候微軟想把各個版本的統一，那麼這個參數就出現了，他為了向下相容，如下的代碼如果使用IE8的時候他會以IE7的模式運行。
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
2、title
網頁頭部資訊，如所示：
3、Link
網頁頭部的表徵圖
<link rel="shortcut icon" href="favicon.ico">
如下：
匯入CSS類似python中匯入模組類似
<link rel="stylesheet" href="css/css_model.css">
4、Style
1、在當前檔案中寫Css樣式
2、在其他檔案中寫Css樣式類似python的模組匯入的方式把Css樣式匯入到當前檔案中使用
< style type="text/css" > .bb{ background-color: red; } </style>
5、Script
1、在當前檔案中寫JS
2、在其他檔案中寫JS類似python的模組匯入的方式把JS匯入到當前檔案中使用
引進檔案< script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >寫js代碼< script type="text/javascript" > ... </script >
body部分
基礎知識
1、body裡面分為兩類標籤：塊級標籤和內聯標籤，塊級標籤佔用的是整行，內聯標籤佔用的他所使用的實際大小如：
塊層級標籤&內聯標籤：
2、特殊符號特殊處理
舉例來說<h1>是標題標籤，如果我想輸出<h1>這個字串，而不是想擷取<h1>的樣式怎麼辦呢？
正常情況下如果直接在html檔案裡輸入<h1>當有瀏覽器在讀取的時候就會講<h1>解釋,頁面將無法顯示，所以特殊的標籤需要特殊處理
所以特殊符號有自己的定義更多請看串連：更多
常用標籤：
1、<p></p>標籤和<br/>標籤
<p></p>標籤：段落標籤，每一對p標籤為一段,代碼如下
<p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
顯示效果如下：
<br/>標籤：換列標籤；有一個<br/>為一個換行，看下面的代碼
<p>帥哥帥帥哥帥帥哥帥<br/>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p> <p>帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥帥哥帥</p>
顯示效果如下，我加了一個<br/>標籤之後段落就被換行了：
2、<a></a>標籤
<a></a>標籤用來跳轉和錨
<a>標籤之：跳轉
預設如果在<a><a/>標籤中不設定那麼他僅僅在瀏覽器中顯示文本，如下面代碼
<a>帥哥部落格</a>
顯示效果：（這裡僅僅顯示的文字沒有任何功能）
指定跳轉後，代碼如下
<a href="https://home.cnblogs.com/u/fengdao/">帥哥部落格</a>
效果如下：
點擊後將跳轉到指定的串連地址~，在自身的頁面開啟的！
如果讓他用一個新的標籤中開啟串連地址代碼如下：
<a target="_blank" href="https://home.cnblogs.com/u/fengdao/">帥哥部落格</a>
target 屬性
使用 Target 屬性，你可以定義被連結的文檔在何處顯示。
下面的這行會在新視窗開啟文檔：
<a href="http://www.baidu.com/" target="_blank">百度</a>
顯示如下：
百度
<a>標籤之：錨
錨的作用是類似於讀書時候的書籤，當你你點擊這個“錨”=“書籤”，的時候就跳轉到指定的位置
<a href="#a2"> 書籤 </a> <!--在標籤裡，ID是這個標籤的唯一的值，我們在做錨的時候指定他的ID即可--> <!--<a href="#a2"> 上面的代碼href="#要跳轉的標籤"--> <div id="a1" style="height:700px;"> mark_1 </div> <div id="a2" style="height:700px;"> mark_2 </div>
上面的代碼中，如果點擊了書籤之後，那麼就會跳轉到id=a2的書籤的位置！
3、H標籤
即標題標籤,代碼如下
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
顯示效果如下：
4、Select標籤
第一種select標籤
<select> <option value="1">上海</option> <option value="2">北京</option> <option value="3" selected="selected">廣州</option> <!--這裡預設是廣州因為selected="selected" 這裡設定了預設的！--></select>
顯示效果如：
第二種select標籤
<select size="2"> <option>上海</option> <option>北京</option> <option>廣州</option> <option>山東</option></select>
顯示效果如：
第三種select標籤,可以進行多選
<select multiple="multiple" size="2"> <option>上海</option> <option>北京</option> <option>廣州</option> <option>山東</option></select>
第4中select標籤，可以進行分組
<select> <optgroup label="河北省"> <option>石家莊</option> <option>邯鄲</option> </optgroup> <optgroup label="山西省"> <option>太原</option> <option>平遙</option> </optgroup></select>
如下：
5、input系欄標籤
input:checkbox標籤-複選框
<input type="checkbox"/><input type="checkbox"/><input type="checkbox" checked="checked"/><!--這裡加一個標識checked="checked，為預設選擇"-->
效果如：
input:radio標籤-單選框
<!--第一中情況不互斥 --><input type="radio"/><input type="radio"/><input type="radio"/><hr/><!--對於input標籤來說只要，radio的name值相同，那麼他們就會互斥--><input type="radio" name="gender"/><input type="radio" name="gender"/><input type="radio" name="gender"/>
如下：
input:text & password 輸入框
<!--標準的輸入框--><input type="text"/><!--密碼的輸入框（輸入的內容是保密的）--><input type="password"/>
如下：
input:button & submit 提交按鈕
<input type="button" value="提交"/><input type="submit" value="提交"/>
如下：
file標籤-用來提交檔案時使用
<input type="file"/>
如下:
6、多行文字框
<textarea style="height: 100px;width: 100px;"></textarea>
如下：
7、form表單
<form> <p>使用者名稱:<input type="text"/></p> <p>密碼:<input type="password"/></p> <input type="submit" value="提交"/> <input type="button" value="按鈕"/> <!--這裡按提交才有反映，submit是用來提交當前的表單的，當然可以有多個表單--> <!--但是，這個submit需要寫入表單內，那麼提交的時候是提交的當前表單--></form>
如下：
<form action="www.baidu.com" method="get"> <!--這裡action是告訴html提交到那裡--> <!--method是通過什麼方法去action指定的地址--> <p> 使用者名稱:<input type="text" name="username"/> <!--這裡的name="username" 這裡當咱們指定的action接收到的資料之後縣會找到是否有這個name標籤--> <!--然後把這裡的使用者的輸入複製給name為一個字典key:value模式--> </p> <p> 密碼:<input type="password" name="password"/> <!--這裡的name="username" 這裡當咱們指定的action接收到的資料之後縣會找到是否有這個name標籤--> <!--然後把這裡的使用者的輸入複製給name為一個字典key:value模式--> </p> <p> 部門:<select name="department"> <option value="1">CTO</option> <option value="2">DBA</option> <!--這裡在選擇之後，會把選擇的value值賦予給name，當使用者點擊提交後就會提交到後台--> </select> </p> <input type="submit" value="提交"/></form>
action表示提交動作，把資料提交到指定的路徑，methon指定提交類型，預設為get
post與get的區別：
method預設為get類型，資料會包含在html的頭部進行提交，表現形式是點擊提交後會在外部url路徑上查看提交到的資料表單內容，效果如下
| 1 | http://localhost:8888/index?user=lianzhilei&email=James%40123.com&pwd=123123 |
method如果指定為post類型的話，資料會包含在html的body內進行提交，從外部看不出來裡面的資訊
兩者 沒有誰安全之說，因為抓包都能抓到
8、label標籤
有一種情況，看，在不使用label標籤的時候，我們只能點進框體裡去，否則就不能輸入或選擇，這樣使用者體驗不是很好：
代碼如下：
<div> <h1>Label標籤</h1> 姓名:<input type="text"/> 婚否:<input type="checkbox"/></div>
使用label標籤，代碼如下：
<div> <label for="name_1"> 姓名: <input id="name_1" type="text"/> </label> <label for="name_2"> 婚否:<input id="name_2" type="checkbox"/> </label></div>
顯示效果，這裡我選擇文字的時候也會進入到相應的框體，他類似一個跳轉：
9、列表 ul/ol/dl
ul列表在前面自動加“點”，代碼如下：
<ul> <li>line1</li> <li>line2</li> <li>line3</li></ul>
效果如下：
ol列表在前面自動加“數字”，代碼如下：
<ol> <li>line1</li> <li>line2</li> <li>line3</li></ol>
效果如下：
dl列表自動分組，代碼如下：
<dl> <dt>河北省</dt> <!--dt是標籤，dd是標籤裡的內容--> <dd>石家莊</dd> <dd>衡水市</dd> <dt>山東省</dt> <!--dt是標籤，dd是標籤裡的內容--> <dd>濟南市</dd> <dd>煙台市</dd></dl>
效果如：
10、表格
<table border="1"> <!--border這裡是加上邊框--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <!--一個tr是1行，一個td是一列，一行裡可能有很多列。--> <!--如果想加多個行就加多個tr即可--> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr></table>
效果如下：
合併儲存格
<table border="1"> <!--border這裡是加上邊框--> <tr> <td colspan="3">1</td> <!--這裡colspan，就告訴html解析的時候佔3個格--> </tr> <!--一個tr是1行，一個td是一列，一行裡可能有很多列。--> <!--如果想加多個行就加多個tr即可--> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>2</td> <td>3</td> </tr></table>
效果如：
以上的表格標籤其實還不是很標準，正常標準的標籤如下：
<table border="1"> <thead> <!--表頭--> <tr> <th>表1</th> <th>表2</th> <th>表3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody></table>
效果如：
11、fieldset標籤
代碼如下：
<fieldset> <legend>協議</legend>請仔細閱讀協議內容：</fieldset>
效果如下：
前端之HTML
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
