HTML
一、定義
HTML：Hyper Text Mark-up Language超文本標記語言，通過元素標籤的形式建立Web站點，通過瀏覽器進行解析。
二、<body>中的標籤
1、換行符 <br/>
2、水平<hr/>
3、段落 <p></p> 特點：上下自動生成空白行。
4、標題<h1></h1>。標題有六種，h1最大，一個頁面只能出現一次。
5、文本標籤<font></font>
文本格式化，一些常用於設置文本字體的元素：
<big>大號文字</big>
<small>小號文字</small>
<strong>加粗</strong> （儘量用strong）<b>加粗</b>
<em>傾斜</em>（儘量用em） <i>傾斜</i>
<del>刪除線</del>（儘量用del）<s>刪除線</s>
<sub>下標文字</sub>
<sup>上標文字</sup>
<ins>插入文字</ins>
6、圖像<img />
|
屬性 |
屬性值 |
說明 |
|
Src（必寫） |
url |
圖像資源的地址 |
|
width |
像素（px） |
圖像寬度 |
|
height |
像素（px） |
圖像高度 |
|
alt |
替代文字 |
不能顯示圖像信息時候的替換文字 |
|
title |
替代文字 |
鼠標放在圖片上顯示的文字 |
圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，如果只更改圖片的寬度或者高度，圖片等比例縮放。
路徑：
./ 當前目錄
../ 回到上一層目錄
7、定義超鏈接 <a href=“URL”></a>
屬性：href屬性必須有，href的作用是指明超鏈接要鏈接到的網址。
title屬性表示鏈接的提示信息，鼠標放到鏈接上顯示的文字。
target屬性表示鏈接的打開方式，屬性值包括_blank(新的空白頁)、_self(當前頁)，_top（當前頁）、_parent針對於框架頁面中的跳轉
<a href="#"> </a> #但表當前頁 空鏈
href也可以鏈接到別的地址，如郵箱、電話、sms。
<a href=“1233456.qqcom”>郵件鏈接</a>
<a href=“tel:電話號碼”>撥打電話</a>
<a href="sms:139xxxxxxx">發送短信</a>
8、錨點；點擊使用戶跳到文檔的某個部分。
例：<a href="#位置名">跳轉</a>
<p id="位置名">代碼代碼</p>
從a跳轉到p
9、 HTML 實體字符。
* 實體名是大小寫敏感的。後面的分號必須有。
空格
小於號< <
大於號> >
和號& &
人民幣￥ ¥
版權©️ ©
註冊商標®️ ®
攝氏度 °
正負號 ±
乘號 ×
除號 ÷
平方2 ²
立方3 ³
10、列表
（1）、無序列表
無序列表用<ul><li></li></ul>表示。
屬性：Type（用css中的list-style也可以）
屬性值： 列表前的符號
disc 實心原點
circle 符號爲空心圓
square 符號爲方形
2）、有序列表
有序列表用<ol><li></li></ol>。
有序列表可以使用數字(默認)、大寫字母、小寫字母、大寫羅馬數字和小寫羅馬數字排列項目。
屬性 屬性值 說明
type 1、 a 、 A、i、I 用來設置項目前面的標記
start 數值 排序的起點數值
（3）、定義列表
定義列表用<dl><dt>標題</dt><dd></dd></dl>
11、表格（用div）
表格由 <table> 標籤以及一個或多個 tr、th或td 元素組成。
注意：*colspan =”2”合併同一行上的單元格 ， rowspan =”2”合併同一列上的單元格； *cellpadding 單元格邊距（字與內邊框的距離） cellspacing 單元格間距（內外邊框的間距）;
12、form 表單<form></form>
表單主要負責獲取用戶填寫的數據，並通過瀏覽器向服務器傳送數據。
屬性 說明
name 表單的名稱
action 表單提交地址
method 表單數據提交的方式 （get:在url地址上面傳送參數到服務器,post：在後臺傳送參數到服務器）
enctype MIME類型
target 打開方式（_blank:在一個新的窗口打開 _self:在相同的框架中調入文檔 _top:把文檔調入原來的最頂部的瀏覽器窗口中）
1）文本域：文本域通過<input type="text"> 標籤來設定
maxlength="" 限制輸入字符長度
readonly=”readonly” 將輸入框設置爲只讀狀態（不能編輯）
disabled="disabled" 輸入框未激活狀態
name="username" 輸入框的名稱
value=" " 將輸入框的內容傳給處理文件
2）密碼字段：密碼字段通過標籤<input type="password"> 來定義；
文本輸入框的所有屬性對密碼輸入框都有效。
3）單選按鈕：單選按鈕通過標籤<input type="radio"> 來定義:
*name屬性：只有將name的值設置相同的時候，才能實現單選效果。
checked=”checked” 設置默認選擇項。
例：<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
4）複選框：複選框通過標籤<input type="checkbox"> 來定義:
默認選中：checked=”checked”
<input checked="checked" type="checkbox" id="r1">
<label for="r1">複選框</label>
5)下拉列表：<select ></select>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
屬性 說明
size 下拉列表框的顯示行數
multiple 是否多選
disabled 是否禁用
selected 設置默認選中的選項
value 選項值
<optgroup></optgroup> 對下拉列表進行分組。
Label=”” 分組名稱。
<select name="city" multiple>
<optgroup label="廣東">
<option value="1">廣州</option>
<option value="2">深圳</option> </optgroup>
<optgroup label="其他">
<option value="3">長沙</option>
<option value="4">香港</option> </optgroup>
</select>
6)textarea(表單元素：多行文本域)
屬性 說明
rows 指定文本框的高度
cols 指定文本框的寬度
例：<textarea name="content" rows="5" cols="50"> </textarea>
注：此處的文本框寬高是由字符個數組成的。
7)上傳文件
<input type=“file” name=“photo” />
利用這項功能時，在 form 標籤中要指定method屬性。要把enctype屬性指定爲 multipart/form-data。
說明：multiple 控制是否上傳多文件
<input type="file" name="photo" multiple />
8) 提交按鈕: 提交按鈕通過標籤<input type=submit"> 來定義:
9)普通按鈕：<input type=button">
不能提交信息，配合JS使用。
10)圖片按鈕：<input type=image">
圖片按鈕可實現信息提交功能
11)重置按鈕：<input type=”reset”>
12)隱藏域:隱藏域用於在程序發送沒有必要讓用戶看到特定值的時候使用。
<input type="hidden" name="uid" value="10"/>
13)<label>: label標籤的作用是將輸入項或選項及其標籤文字關聯起來。
<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>
14）HTML5補充表單控件
網址：<input type=“url”>
日期：<input type=“time”>
時間：<input type=“time”>
郵件：<input type=“email”>
數字：<input type=“number” step=“5”>
滑塊：<input type=“range”>
13、<span></span>用於塊級元素中的行內元素
三、<head>中的標籤
1、<meta>標籤
name屬性，後面接content
1）、name='viewport'視口
說明：在移動設備瀏覽器上，user-scalable=no可以禁用其縮放功能。這樣禁用縮放功能後，用戶只能滾動屏幕。
<meta name="viewport" content="width=device-width",initial-scale=1,maximmum-scale=1,user-scakable=no''>
2）、name='description' 網頁描述
3）、name='author' 作者
4）、name="keywords"' 關鍵字
5）、name="copyright"版權信息
6）、name="robots"
robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引，content的參數有：all,none,index,noindex,follow,nofllow.默認是all.
http-equiv屬性，後面接content
1）Refresh自動刷新並轉到新頁面。
<meta http-equiv="Refresh" content="5;URL">(URL可爲空)
2）content-Type（顯示字符集的設定）
<meta charset="utf-8">
常用的是utf-8和gb2312。utf-8爲多國語言編碼，gb2312爲中文簡體編碼。
3）Window-target(顯示窗口的設定)
強制頁面在當前窗口以獨立頁面顯示。
<meta http-equiv="window-target" content="_top">
4）Set-Cookie
說明：如果網頁過期，那麼存盤的cookie將被刪除。
<meta http-equiv="Set-Cookie"> content="cookievalue=xxx;expires=Friday,12-Jan-2001 18:18:18 GMT;path=/"（必須用GMT時間）
5）Pragma
說明：禁止瀏覽器從本地計算機的緩存中訪問頁面內容。
<meta http-equiv="Pragma" content="no-cache">
這樣設定，訪問者將無法脫機瀏覽。
6）Expires(期限)
說明：可以用於設定網頁的到期時間。一旦網頁過期，必須到服務器上重新傳輸。
<meta http-equiv=Expires Content=0>
<meta http-equiv="expires" content="Fri,12 Jan 2001 18:18:18GMT">
1、X-UA-Compatible
X-UA-Compatible是自從IE8新加的一個設置，對於IE8以下的瀏覽器是不識別的。 通過在meta中設置X-UA-Compatible的值，可以指定網頁的兼容性模式設置。
<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代碼告訴IE瀏覽器，無論是否用DTD聲明文檔標準，IE8/9都會以IE7引擎來渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#以上代碼告訴IE瀏覽器，IE8/9及以後的版本都會以最高版本IE來渲染頁面。
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以激活Chrome Frame.
2、 content = "IE=Edge,chrome=1"
這裏的chrome=1不是說IE的技術增強了可以模擬Chrome瀏覽器，而是與谷歌開發的Google Chrome Frame(谷歌內嵌瀏覽器框架GCF)有關。這個插件可以讓用戶的IE瀏覽器外觀不變，但用戶在瀏覽網頁時實際上使用的是Chrome的內核，並且支持Windows XP及以上系統的IE6/7/8。
而上文提到的那個meta標記，則是在是安裝了GCF後，用來指定頁面使用chrome內核來渲染。
GCF下載地址: http://code.google.com/intl/zh-CN/chrome/chromeframe/ （ie打開）
安裝完成後,如果你想對某個頁面使用GCF進行渲染，只需要在該頁面的地址前加上 gcf： 即可，例如： gcf:http://cooleep.com
但是如果想要在開發時指定頁面默認首先使用GCF進行渲染，如果未安裝GCF再使用IE內核進行渲染，該如何進行呢?
就是使用這個標記。
2、<link>標籤
1）鏈接外部樣式表
<link rel="stylesheet" href="">
2）設置icon圖標
<link rel="icon" href="">
四、文檔聲明（Doctype）的作用
聲明位於文檔的最前面，處於標籤之前，告知瀏覽器的解析器用什麼文檔類型來規範解析這個文檔。Doctype不存在或者格式不正確會導致文檔以混雜模式呈現。
例如：<!DOCTYPE html>等於開啓了標準模式，那麼瀏覽器就按照w3c的標準解析渲染頁面
五、語義化
概念：根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）
好的語義化的網站標準就是去掉樣式表文件之後，結構依然很清晰。
意義：1、網頁結構合理
2、有利於seo:和搜索引擎建立良好溝通，有了良好的結構和語 義你的網頁內容自然容易被搜索引擎抓取。
3、方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）
4、便於團隊的開發和維護
如何語義化：
1：儘可能少的使用無語義的標籤div和span；
2：在語義不明顯時，既可以使用div或者p時，儘量用p, 因爲p在默認情況下有上下間距，對兼容特殊終端有利；
3：不要使用純樣式標籤，如：b、font、u等，改用css設置。
4：需要強調的文本，可以包含在strong或者em標籤中strong默認樣式是加粗（不要用b），em是斜體（不用i）。
六、常見的瀏覽器及其內核
Trident(IE內核)
360安全瀏覽器（1.0-5.0爲Trident,6.0爲Trident+Webkit,7.0爲Trident+Blank）;
360極速瀏覽器（7.5之前爲Trident+Webkit,7.5爲Trident+Bkink）;
遨遊瀏覽器（遨遊1.x/2.x爲ie內核，3.x爲ie與Webkit雙核）；
獵豹安全瀏覽器（1.0-4.2爲Trident+Webkit,4.3及以後的版本Trident+Blink）;
搜狗高速瀏覽器(1.x爲Trident,2.0及以後版本爲Trident+Webkit);
uc瀏覽器（Blink內核+Trident內核）；
Gecko(Firefox內核)
Webkit(Safari內核，Chrome內核）
Presto內核（Opera內核）
七、嚴格模式和混雜模式
嚴格模式：瀏覽器根據規範呈現頁面
混雜模式：頁面以一種比較寬鬆的向後兼容的方式顯示。通常模擬老式瀏覽器的行爲以防止老站點無法工作。
差異：最顯著的例子是：ie6出現的時候，在嚴格模式使用正確的盒模式，在混雜模式中則使用老式專有的盒模型。