1.HTML5文本聲明
<!DOCTYPE html> //聲明文檔為HTML5文檔
- 聲明文檔類型為HTML5文件,文檔聲明必須放在HTML文檔的第一行且必不可少。
2.meta標(biāo)簽
1.charset屬性：單獨使用调限，設(shè)置文檔字符集及編碼方式。
<meta charset="UTF-8"> //文檔設(shè)置為UTF-8編碼方式
常見的屬性值：
GBK：擴展的國標(biāo)編碼;
UTF-8: Unicode碼采用UTF-8編碼方式;
2.http-equiv屬性：用于聲明瀏覽器如何解釋編譯文件，需配合content屬性使用哨免。
<meta http-equiv="屬性值" content="屬性值詳細(xì)內(nèi)容"> //在content中描述實際的屬性值內(nèi)容
常用屬性值：
Content-Type:HTML4.01之前的文檔內(nèi)容編碼聲明;
refresh:網(wǎng)頁刷新;
set-Cookie:設(shè)置瀏覽器cookie緩存;
3.name屬性：主要用于給搜索引擎提供必要信息,需配合content屬性使用。
<meta name="屬性值" content="屬性值詳細(xì)內(nèi)容"> //在content中描述實際的屬性值內(nèi)容
常用屬性值：
author:作者，聲明網(wǎng)站作者普办；
keywords:網(wǎng)站關(guān)鍵字呈础，多個關(guān)鍵字贞远，用英文逗號分隔俱病；
description:網(wǎng)頁描述溢吻，搜索引擎顯示在title下的描述內(nèi)容；
3.link標(biāo)簽:用于為網(wǎng)頁鏈接各種文件蝇狼。
<link rel="icon" href="img/icon.png" >
常用屬性：
rel：用于表明被鏈接文件與當(dāng)前文件關(guān)系;
type：表明被鏈接文件是什么類型监署，可省略;
href：表明鏈接文件的地址;
4.title標(biāo)簽:網(wǎng)頁的標(biāo)題,即網(wǎng)頁選項卡上的文字。
<title> 網(wǎng)頁名稱 </title>
5.常見的塊級標(biāo)簽
1. 塊級標(biāo)簽：占據(jù)一整行簇捍，高度吕世、行高分蓖、內(nèi)邊距和外邊距都可以改變么鹤，寬度和游覽器的寬度一樣味廊，和內(nèi)容無關(guān)，可以容納塊級標(biāo)簽和其他行內(nèi)標(biāo)簽柠新。
標(biāo)題標(biāo)簽:
<h1></h1>...<h6></h6>
水平線:<hr/>
段落:<p></p>
換行:<br/>
引用:<blockquote</blockquote>
預(yù)格式:<pre></pre>
引用標(biāo)簽:<blockquote></blockquote>//表明標(biāo)簽中的文字，為引用的內(nèi)容恨憎，瀏覽器顯示為等寬字體郊楣，并縮進
預(yù)格式標(biāo)簽<pre></pre>//瀏覽器解析時憔恳，會按照等寬字體顯示，并保留標(biāo)簽內(nèi)的空格和回車,常用于保留代碼格式净蚤。
2. 有序列表ol (order list)
<ol>
<li>1.內(nèi)容</li>
<li>2.內(nèi)容</li>
<li>3.內(nèi)容</li>
<li>4.內(nèi)容</li>
</ol>
3.無序列表ul(unorder list)
<ul>
<li>無序內(nèi)容</li>
<li>無序內(nèi)容</li>
<li>無序內(nèi)容</li>
<li>無序內(nèi)容</li>
</ul>
4.定義描述列表dl
<dl>
<dt>標(biāo)題1</dt>
<dd>描述項1-1</dd>
<dd>描述項1-2</dd>
<dt>標(biāo)題2</dt>
<dd>描述項2-1</dd>
<dd>描述項2-2</dd>
</dl>
一般情況下,標(biāo)題dt只有一項。描述項dd可以有多項;瀏覽器顯示時,標(biāo)題頂格顯示,dd縮進顯示
5.圖片組合標(biāo)簽figure
<figure>
<img src="img/icon.png"> //src表示圖片的路徑
<figcaption>小圖標(biāo)icon</figcaption> //圖片的標(biāo)題
</figure>
figure標(biāo)簽有兩個子標(biāo)簽img和figcaption：
瀏覽器顯示為：圖片與標(biāo)題上下排列，且整體向后縮進一個單位。
6.分區(qū)標(biāo)簽div
常配合CSS使用，為網(wǎng)頁中最常用的分區(qū)標(biāo)簽，網(wǎng)頁布局時常用撬呢，一般帶class屬性分類。
<div style="width：100%; height：100px; ">
<h1>標(biāo)題</h1>
</div>
6.常見的行內(nèi)標(biāo)簽
1. 行內(nèi)標(biāo)簽：只占內(nèi)容寬度大小茄靠、高度脂信、行高，內(nèi)邊距和外邊距是可以部分可以改變的透硝。
span：文本狰闪，用于包裹一部分文字，進行特定樣式的修改文本
img：圖片
em：強調(diào)濒生，瀏覽器顯示為傾斜
strong：強調(diào)埋泵，瀏覽器顯示為加粗
q：短引用
a：超鏈接
i：傾斜
b：加粗
small：縮小字體 //small標(biāo)簽可多層嵌套，表示比默認(rèn)字體小一號罪治，可直到小到最小號為止
big：放大字體 //也可多層嵌套丽声，直到最大
u：下劃線
2. strong/em/i/b 標(biāo)簽的區(qū)別
- em和strong都表示強調(diào)，strong>em,strong和em標(biāo)簽均可多層嵌套觉义，表示強調(diào)程度的遞增雁社。
- em和i都能傾斜，Strong和b都能加粗晒骇。但是Strong和em多了一層強調(diào)的語義霉撵∽趟牵可以幫助搜索引擎快速抓取網(wǎng)站重點,且html5要求開發(fā)者盡可能實現(xiàn)代碼的語義化。
3.img 標(biāo)簽
- src屬性：表示圖片引用路徑喊巍。
常見路徑的寫法：
①相對路徑：
1)當(dāng)圖片在下層目錄時：目錄名/圖片名 (img/abc.jpg)
2)當(dāng)圖片與當(dāng)前目錄時：圖片名(src="abc.jpg")
3)當(dāng)圖片在上層時：../圖片名 (src="../abc.jpg")
②絕對路徑：寫法file：///E:/aaa.png 一般嚴(yán)禁使用
③網(wǎng)絡(luò)連接：直接使用圖片的網(wǎng)絡(luò)地址,但由于圖片在別的服務(wù)器,不可控,故不建議使用
- title屬性：圖片的標(biāo)題。當(dāng)鼠標(biāo)指到時,可顯示的提示文字箍鼓。
- alt屬性：當(dāng)圖片無法加載時顯示的文字崭参。
- width/height屬性：圖片的尺寸。
- align：圖片周圍的文字款咖，相對于圖片的排列方式何暮。屬性值：top/center/bottom
4.table標(biāo)簽
<table></table>表格框
<thead></thead>表頭
<tbody></tbody>表身
<tfoot></tfoot>表尾
<tr></tr>表行
<th></th>表頭 //默認(rèn)加粗且在單元格居中顯示
<td></td>表數(shù)據(jù)
1)常用屬性
border：表格邊框?qū)傩裕划?dāng)使用border="1"設(shè)置邊框時铐殃，會在所有td以及table上嵌套邊框海洼，當(dāng)border加大時，只有table框會加粗富腊。
cellspacing：單元格與單元格之間的間隙坏逢。當(dāng)cellspacing="0"時，單元格之間的間隙為0赘被，但邊框線并不會合并是整。
合并邊框的寫法style="border-collapse:collapse;" 使用邊框合并時，無需設(shè)置cellspacing民假。
cellpadding：單元格內(nèi)邊距浮入，單元格中文字與單元格邊框之間的距離。
width/height：表格的寬高
align：設(shè)置表格在父容器中的對齊方式 羊异，left/居左 center/居中 right/居右
當(dāng)表格使用align屬性時事秀，相當(dāng)于使表格浮動，可能會導(dǎo)致表格后面的元素受表格浮動影響野舶，導(dǎo)致布局錯亂易迹。
bgcolor：背景色
background：背景圖，后接相對路徑平道。背景圖和背景色同時生效時赴蝇，圖會覆蓋背景色
bordercolor：設(shè)置邊框顏色
5.form標(biāo)簽
常用屬性：
saction：表單需要提交的服務(wù)器地址
method：表單提交數(shù)據(jù)使用的方法,get/post
POST上傳數(shù)據(jù)的形式：鏈接URL地址?name1=value1&name2=value2
form內(nèi)必須要有input標(biāo)簽才能提交數(shù)據(jù)
6.input標(biāo)簽
1)常用屬性:
type：設(shè)置input的輸入類型
name：給input輸入框命名。一般情況下,name屬性必不可少
value：input輸入框的默認(rèn)值
placeholder：輸入框的提示內(nèi)容巢掺。當(dāng)input有默認(rèn)的value或輸入值時,placeholder消失
2)type的常用屬性值】
text：文本輸入框
password：密碼輸入框,輸入內(nèi)容默認(rèn)顯示小黑點
radio：單選框
checkbox：復(fù)選框
使用radio/checkbox時,value屬性必填句伶。提交時,提交的為value中的默認(rèn)值；
radio/checkbox憑借name屬性,確定是否屬于同一組,name相同為同組,只能選一個
使用checked="checked"屬性,設(shè)置默認(rèn)選中項
file：文件上傳
使用accept="類型",設(shè)置只能上傳的文件類型,如 accept=image/* 表示任意格式圖片
submit：提交按鈕,將所有表單數(shù)據(jù)提交至后臺服務(wù)器
reset： 重置表單數(shù)據(jù)
image：圖形提交按鈕,跟submit一樣,具有表單提交功能,使用src屬性確定圖片路徑
button：普通按鈕,無法提交的按鈕
3)屬性名=屬性值的情況
① checked="checked" 設(shè)置radio
② multiple="multiple" 設(shè)置select控件為多選陆淀，可在界面使用Ctrl+鼠標(biāo)考余，進行多選。一般不用轧苫。
③ selected="selected" 設(shè)置select控件楚堤，默認(rèn)選中的option選項
④ readonly="readonly"
⑤ disabled="disabled"
當(dāng)input被disabled時疫蔓，該input的name和value數(shù)據(jù)將無法向后臺傳送
⑥ hidden="hidden" 隱藏控件。等效于<input type="hiden" />
⑦ nowrap=nowrap
7. 下拉列表select標(biāo)簽
<select>
<option> 選項</option> //option可以有N多個
</select>
1)常用屬性
name屬性,應(yīng)該寫在<select>上,所有選項只有一個name
multiple="multiple" 設(shè)置select控件為多選,可在界面使用Ctrl+鼠標(biāo),進行多選,一般不用身冬。
2)option常用屬性：
value="":當(dāng)option沒有value屬性時,往后臺傳遞的是<option></option>標(biāo)簽中的文字衅胀；
當(dāng)option有value屬性時,往后臺傳遞的是value屬性的值。
title="":鼠標(biāo)指到后顯示的文字酥筝。
selected="selected":默認(rèn)選中滚躯。
<optgroup label="山東省"></optgroup> :用于將option標(biāo)簽進行分組,label屬性表示分組名,或者用label標(biāo)簽包裹。
8. 文本域 textarea標(biāo)簽
<textarea> </textarea>
1)常用屬性
cols=嘿歌、 rows,設(shè)置寬高掸掏，但不常用
readonly="readonly" 設(shè)置為只讀模式，不允許編輯宙帝。
style="resize: none;" 設(shè)置為寬高不允許修改丧凤。
style="overflow: ;" 設(shè)置當(dāng)文字超出區(qū)域時，如何處理步脓。
也可以通過overflow-x/overflow-y分別設(shè)置水平垂直方向的顯示方式愿待。
常用屬性值:hidden 超出區(qū)域的文字，隱藏?zé)o法顯示
scroll 無論文字多少靴患，均會顯示滾動條
auto 自動呼盆，根據(jù)文字多少自動決定是否顯示滾動條（默認(rèn)樣式）
9. iframe標(biāo)簽：嵌套頁面,在一個頁面中插入新頁面,和a標(biāo)簽搭配使用。寬高可指定,支持相對路徑
1.iframe 嵌套頁面,在一個頁面中插入新頁面,常和a標(biāo)簽搭配使用蚁廓。寬高可指定,支持相對路徑
<iframe src="xx" name="xxx">
frameborder屬性 頁面邊框?qū)挾?/p>
10.a標(biāo)簽
<a href=""></a>
target屬性：
1. _blank 新窗口打開頁面
2. _self 當(dāng)前自身窗口打開頁面
3. _parent 父窗口打開頁面
4. _top 在頂級窗口打開頁面
a標(biāo)簽和iframe標(biāo)簽搭配使用案例：
<iframe name="xxx" src="#" frameborder="0">
<a target=xxx >QQ</a>
<a target=xxx >百度一下</a>
iframe會加載一個完整頁面访圃，會很卡
download
下載
href
1. #不會對服務(wù)器發(fā)起請求，此時a元素作為錨點相嵌，不跳轉(zhuǎn)頁面
2. 除了#以外的值都會發(fā)起請求 ,但會返回到頁面頂部
3. 偽協(xié)議 javascript:; 點擊后什么都不做,滿足特殊需求
聲明：本博客版權(quán)歸蘭文聰和饑人谷所有腿时，轉(zhuǎn)載需說明來源！
