HTML標(biāo)簽及屬性

1.HTML5頭部結(jié)構(gòu)

【!DOCTYPE html】

1. 聲明文檔類型為HTML5文件吕漂。
2. 文檔聲明在HTML5文檔必不可少亲配，且必須放在文檔的第一行。

【meta標(biāo)簽】

1.charset屬性：單獨使用痰娱，設(shè)置文檔字符及編碼格式弃榨。

1. 寫法：<meta charset=“UTF-8”>
2. 常見的中文編碼格式：
3. B-2312:國標(biāo)碼，簡體中文
4. GBK：擴展的國標(biāo)編碼梨睁，簡體中文
5. UTF-8:萬國碼 Unicode碼鲸睛，基本兼容各國語言
   2.http-equiv屬性：需配合content屬性使用。主要聲明瀏覽器如何解釋編譯文件坡贺。
6. 寫法：<meta http-equiv=“屬性值” content=“屬性值詳細(xì)內(nèi)容”
7. 常用屬性值：Content-Type HTML4.01之前的文檔內(nèi)容編碼聲明官辈。
8. refresh 網(wǎng)頁刷新
9. set-Cookie 設(shè)置瀏覽器cookie緩存
   3.name屬性：需配合content屬性使用箱舞，主要用于給搜索引擎提供必要信息。
10. 寫法：<meta name="屬性值" content="屬性值詳細(xì)內(nèi)容"
11. 重要屬性值：author 作者拳亿，聲明網(wǎng)站作者晴股，常用公司網(wǎng)址表示
12. keywords 網(wǎng)站關(guān)鍵字，多個關(guān)鍵字肺魁，用英文逗號分隔
13. description 網(wǎng)頁描述电湘，搜索引擎顯示在title下的描述內(nèi)容
14. http-equiv和name屬性，必須與content屬性配合使用鹅经，前兩者只是用于
15. 聲明即將修改哪些屬性值寂呛，而實際的屬性值內(nèi)容，在content中描述瘾晃。

<!--charset屬性-->
<meta charset="UTF-8">
<!--作者-->
<meta name="anthor" contet="http://www.yt4561761.com" />
<!--網(wǎng)頁關(guān)鍵字-->`
<meta name="keywords" content="HTML5,網(wǎng)頁贷痪，第一個"
<!--網(wǎng)頁描述-->
<meta name="description" content=我的第一個網(wǎng)頁 />
<!--聲明文檔的編碼格式-->
<meta charset="UTF-8" />

【link標(biāo)簽】

1. 作用：用于為網(wǎng)頁鏈接各種文件。
2. 常用屬性：
   rel：用于表明被鏈接文件與當(dāng)前文件關(guān)系蹦误。icon表明被鏈接圖片是當(dāng)前網(wǎng)頁的icon圖標(biāo)劫拢。
   type：表明被鏈接文件是什么類型，可省略强胰。
   href：表明鏈接文件的地址舱沧。
   <link rel="icon" href="img/icon.png" />

【title標(biāo)簽】

網(wǎng)頁的標(biāo)題，即網(wǎng)頁選項卡上的文字哪廓。
<title>虞濤</title>

2.常見的塊級標(biāo)簽

【常見的塊級標(biāo)簽】

1. 標(biāo)題標(biāo)簽<h1></h1>...<h6></h6>
2. 水平線

   ---

3. 段落<p></p>
4. 換行
   
5. 引用<blockquote</blockquote>
6. 預(yù)格式<pre></pre>
7. 引用標(biāo)簽<blockquote></blockquote>
8. 表明標(biāo)簽中的文字狗唉，為引用的內(nèi)容，瀏覽器顯示為等寬字體涡真，并縮進(jìn)。
9. cite屬性肾筐，表明引用的來源哆料，一般為引用的網(wǎng)址URL

<blockquote cite="http：//www.yt4561761.com">
hahahahahahah
</blockquote>

13. 預(yù)格式標(biāo)簽<pre></pre>
14. 瀏覽器解析時，會按照等寬字體顯示吗铐，并保留標(biāo)簽內(nèi)的空格和回車东亦。
15. 常用于保留代碼格式。

 <pre>yt4561761
 yt4561761
yt4561761
 </pre>

【有序列表ol order list】

<ol>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
</ol>

【無序列表ul unorder list】

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

【定義描述列表】

1. <dl>
2. <dt>標(biāo)題</dt>
3. <dd>描述項</dd>
4. </dl>
5. 一般情況下唬渗，標(biāo)題dt只有一項典阵。描述項dd可以有多項。
6. 瀏覽器顯示時镊逝，標(biāo)題頂格顯示壮啊，dd縮進(jìn)顯示。

<dl>
<dt>這是dl列表的標(biāo)題</dt>
<dd>描述項1</dd>
<dd>描述項2</dd>
<dd>描述項3</dd>
</dl>

【圖片組合標(biāo)簽figure】

1. <figure></figure>標(biāo)簽有兩個子標(biāo)簽：
2. <img src="">:一幅圖片撑蒜，src表示圖片的路徑歹啼。
3. <figcaption></figcaption>：圖片的標(biāo)題
4. 瀏覽器顯示為：圖片與標(biāo)題上下排列玄渗，且整體向后縮進(jìn)一個單位。

<figure>
<img src="img/icon.png" />
<figcaption>洪浩光伏
</figcaption>
</figure>

【分區(qū)標(biāo)簽div】

常配合CSS使用狸眼，為網(wǎng)頁中最常用的分區(qū)標(biāo)簽藤树，常用于網(wǎng)頁布局使用

<div style=“width：100%; height：100px; “>
  這是div里面的文字
  <h1>div里面的標(biāo)題</h1>
</div>

3.常見的行級標(biāo)簽

【常見的行級標(biāo)簽】

1. span 文本
2. img 圖片
3. em 強調(diào)
4. strong 強調(diào)
5. q 短引用
6. a 超鏈接
7. i 傾斜
8. b 加粗
9. small 縮小字體
10. u 下劃線
11. span（文本）：用于包裹一部分文字，進(jìn)行特定樣式的修改拓萌。
12. Sur<span style="color:red; font-size:36px;">酷</span>Ｋ甑觥！
13. em（強調(diào)）：瀏覽器顯示為傾斜微王。
14. strong（強調(diào)）：瀏覽器顯示為加粗屡限。

【strong/em/i/b 標(biāo)簽的區(qū)別】

1. em和strong都表示強調(diào)，strong>em,strong和em標(biāo)簽均可多層嵌套骂远，表示強調(diào)程度的遞增囚霸。
2. em和i都能傾斜，Strong和b都能加粗激才。但是Strong和em多了一層強調(diào)的語義拓型。可以幫助搜索 引擎快速抓取網(wǎng)站重點瘸恼。且html5要求開發(fā)者盡可能實現(xiàn)代碼的語義化劣挫。

<em>我真踏馬帥！东帅！</em><br />
<strong>我真籍八帥Ｑ构獭！</strong><br />
<i>我被i標(biāo)簽弄斜了</i><br />
<b>我被b標(biāo)簽弄粗了</b><br />

【q(短引用)】

常用于一句話的引用靠闭，cite屬性表示引用來源帐我，瀏覽器解析時，會在內(nèi)容的前后插入雙引號愧膀。

<q cite="www.yt4561761.com">那你很棒哦</q>

1. small（縮小字體）：small標(biāo)簽可多層嵌套拦键，表示比默認(rèn)字體小一號，直到小到最小號為止檩淋。
2. big（放大字體）：亦可多層嵌套芬为，直到最大。
3. 但在最新規(guī)范中蟀悦，small和big標(biāo)簽不提倡使用媚朦。提倡使用style="font-size:11px;"CSS樣式替代。

<p>那你很<big><big><big><big><big>棒</big></big></big></big></big>哦日戈！</p>

【img 圖片標(biāo)簽】

src屬性：表示圖片引用路徑询张。

1. 常見路徑的寫法：
2. ①相對路徑：
3. Ⅰ -當(dāng)圖片在當(dāng)前文件下一層時：文件夾名/圖片名 例如：img/abc.jpg
4. Ⅱ-當(dāng)圖片與當(dāng)前文件在同一層時：圖片名 例如：src="abc.jpg"
5. Ⅲ-當(dāng)圖片在當(dāng)前文件上一層時：../圖片名 例如：src="../abc.jpg"
6. 使用相對路徑時遏乔，圖片最外層只能放到網(wǎng)站根目錄（圖片必須要在項目文件夾中）
7. ②絕對路徑：寫法file：///E:/aaa.png 但是刹孔，嚴(yán)禁使用
8. ③網(wǎng)絡(luò)連接：直接使用圖片的網(wǎng)絡(luò)地址涎才，但由于圖片在別的服務(wù)器溪食，不可控，故不建議使用
9. 2-title:圖片的標(biāo)題半火。當(dāng)鼠標(biāo)指上時越妈，顯示的提示文字。
10. 3-alt：當(dāng)圖片無法加載時顯示的文字钮糖。
11. 4-width/height:圖片的尺寸梅掠，相當(dāng)于CSS中的style="width:"
12. 5-align:圖片周圍的文字，相對于圖片的排列方式店归⊙质悖可選值：top/center/bottm

<img src="../img/285-1606240Z040347.jpg" title="漩渦鳴人"/>
<img src="[Liuyun&VCB-S]HanaSaku Iroha[01][Hi10p_1080p][BDRip][x264_flac_2ac3]_2015125173925.bmp"
title="松前緒花" alt="圖片無法顯示，請刷新"/>
<img src="pic/a947a8ec8a1363272535dd01938fa0ec09fac744.png" title="DEVIL MAY CRY"/>

4.表格標(biāo)簽

【table】

1. <table></table>表格框
2. <tr></tr>表格行
3. <td></td>表格列
4. <th></th> 表格標(biāo)題列（將tr中的td替換為th)消痛，th默認(rèn)加粗且在單元格居中顯示且叁。

【table的常用屬性】

1. border：表格邊框?qū)傩裕划?dāng)使用border="1"設(shè)置邊框時秩伞，會在所有td以及table上嵌套邊框逞带，當(dāng)border加大時，只有table框會加粗纱新。
2. cellspacing：單元格與單元格之間的間隙展氓。當(dāng)cellspacing="0"時，單元格之間的間隙為0脸爱，但邊框線并不會合并遇汞。
   1. ☆☆合并邊框的寫法style="border-collapse:collapse;" 使用邊框合并時，無需設(shè)置cellspacing簿废。
3. cellpadding:單元格內(nèi)邊距空入，單元格中文字與單元格邊框之間的距離。
4. width/height:表格的寬高
5. align：設(shè)置表格在父容器中的對齊方式 族檬，left/居左 center/居中 right/居右
6. ☆☆當(dāng)表格使用align屬性時执庐，相當(dāng)于使表格浮動，可能會導(dǎo)致表格后面的元素受表格浮動影響导梆，導(dǎo)致布局錯亂。
7. bgcolor：背景色
8. background：背景圖迂烁，后接相對路徑看尼。背景圖和背景色同時生效時，圖會覆蓋背景色
9. bordercolor：設(shè)置邊框顏色
10. 當(dāng)表格屬性與行列屬性沖突時盟步，以行列屬性為優(yōu)先藏斩，屬性設(shè)置優(yōu)先級td>tr>table。
11. width,height:給單個的行列設(shè)置寬高
12. bgcolor:背景色
13. align：設(shè)置單元格中的文字却盘，在單元格中的水平對齊方式 left/center/right
14. valign:設(shè)置單元格中文字在格中的垂直對齊方式 top/center/bottom
15. nowrap:nowrap="nowrap"設(shè)置單元格文字行末不斷行

5.表單標(biāo)簽

【form兩個重要屬性】

1. action：表單需要提交的服務(wù)器地址
2. method：表單提交數(shù)據(jù)使用的方法狰域，get/post

3. get和post的區(qū)別
   1. get傳參使用URL傳遞媳拴，所有參數(shù)在地址欄可見，不安全兆览；get傳參數(shù)據(jù)量有限屈溉。
   2. post傳參使用http請求傳遞，比較安全抬探；post可以傳遞大量數(shù)據(jù)子巾。

4. 但是，get請求的傳輸速率比post快小压。
5. URL傳參的形式：鏈接URL地址?name1=value1&name2=value2

【input的常用屬性】

1. type：設(shè)置input的輸入類型
2. name：給input輸入框命名线梗。一般情況下，name屬性必不可少怠益。因為仪搔，傳遞數(shù)據(jù)時，使用name=value（輸入內(nèi)容）的形式傳遞蜻牢。
3. value：input輸入框的默認(rèn)值
4. placeholder：輸入框的提示內(nèi)容烤咧。當(dāng)input有默認(rèn)的value或輸入值時，placeholder消失

【input-type屬性的常用屬性值】

1. text：文本輸入框
2. password：密碼輸入框孩饼，輸入內(nèi)容默認(rèn)顯示小黑點
3. radio：單選框 checkbox：復(fù)選框

4. 使用radio/checkbox時髓削，value屬性必填。提交時镀娶，提交的為value中的默認(rèn)值立膛；

5. radio/checkbox憑借name屬性，確定是否屬于同一組梯码，name相同為同組宝泵，只能選一個

6. 使用checked="checked"屬性，設(shè)置默認(rèn)選中項

7. file：文件上傳

8. 使用accept="類型"轩娶，設(shè)置只能上傳的文件類型儿奶，如 accept=image/* 表示任意格式圖片

9. submit：提交按鈕，將所有表單數(shù)據(jù)提交至后臺服務(wù)器
10. reset： 重置表單數(shù)據(jù)
11. image：圖形提交按鈕鳄抒，跟submit一樣闯捎，具有表單提交功能

12. 使用src屬性確定圖片路徑

13. button：普通按鈕，沒有屁用

【下拉選擇控件 select】

1. 寫法：<select>

<option></option> option可以有N多個
 </select>

6. name屬性许溅，應(yīng)該寫在<select>上瓤鼻，所有選項只有一個name
7. multiple="multiple" 設(shè)置select控件為多選，可在界面使用Ctrl+鼠標(biāo)贤重，進(jìn)行多選茬祷。一般 不用。
8. option常用屬性：
9. value="":當(dāng)option沒有value屬性時并蝗，往后臺傳遞的是<option></option>標(biāo)簽中的文字祭犯；
10. 當(dāng)option有value屬性時秸妥，往后臺傳遞的是value屬性的值。
11. title="":鼠標(biāo)指上后顯示的文字沃粗。
12. selected="selected":默認(rèn)選中粥惧。
13. <optgroup label="山東省"></optgroup> :用于將option標(biāo)簽進(jìn)行分組，label屬性表示分組名陪每。

【文本域 textarea】

1. ① 寫法：<textarea></textarea>
2. ② 設(shè)置寬高style="width: 200px; height: 150px;" 自身有cols="" rows=""兩個屬性影晓，但不常用
3. ③ readonly="readonly" 設(shè)置為只讀模式，不允許編輯檩禾。
4. ④ style="resize: none;" 設(shè)置為寬高不允許修改挂签。
5. ⑤ style="overflow: ;" 設(shè)置當(dāng)文字超出區(qū)域時，如何處理盼产。

6. 也可以通過overflow-x/overflow-y分別設(shè)置水平垂直方向的顯示方式饵婆。

7. 常用屬性值:hidden 超出區(qū)域的文字，隱藏?zé)o法顯示

8. scroll 無論文字多少戏售，均會顯示滾動
9. auto 自動侨核，根據(jù)文字多少自動決定是否顯示滾動條（默認(rèn)樣式）
10. <fieldset> 表格的邊框
11. <legend>邊框標(biāo)題</legend>
12. ...若干個表單元素
13. </fieldset>

【HTML5智能表單】

1. H5新增input的form屬性，用于指定特定form表單的id灌灾，實現(xiàn)input無需放在form標(biāo)簽之中搓译，即可通過表單提交。

 <form id=foo>
 </form>
 <input ... form="foo"/>

5. 新增input的屬性：
6. autocomplete：自動完成功能
7. 1.記憶之前輸入過的內(nèi)容锋喜，在下次輸入時些己，根據(jù)以前的內(nèi)容提示，自動完成嘿般。
8. 2.絕大部分瀏覽器自動開啟
9. 3.有兩個屬性值：on/off
10. 4.可以在<form>標(biāo)簽上設(shè)置autocomplete段标，控制整在表單的自動完成開關(guān)， 但可在個別input上單獨設(shè)置炉奴，覆蓋form的整體設(shè)置
11. autofocus： 自動獲得焦點
12. form：所屬表單逼庞，通過form表單的id，指向特定表單
13. required：必填瞻赶。required="required"

注意Ｈ恪！砸逊！

iframe 嵌套頁面,在一個頁面中插入新頁面虑灰，長和a標(biāo)簽搭配使用。寬高可指定痹兜，支持相對路徑
<iframe src="xx" name="xxx">
屬性：
1.frameborder 頁面邊框?qū)挾?br> a標(biāo)簽 跳轉(zhuǎn)頁面 （HTTP GET請求）
屬性：
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:; 點擊后什么都不做
form 標(biāo)簽 跳轉(zhuǎn)頁面 (HTTP POST請求)
記得name要加
form表單中必須要有提交按鈕对湃，負(fù)責(zé)無法提交
<form action="服務(wù)器的位置" method="post" target="_blank">
<input type="submit" value="submit" name="xxx">
<input type="checkbox" id="XX"><label>愛吃</label>或<label>男<input type="radio"></label>
</form>
name是請求的第四部分，上傳的數(shù)據(jù)內(nèi)容
html只提供了form表單可以上傳內(nèi)容遗淳，漢字上傳過程中會被轉(zhuǎn)成編碼
button在form中不指定類型會被默認(rèn)為submit
2.tetxarea

tabel
   <tabel border="1">
     <colgroup>
       <col width="100">  //控制第一列的寬度 
       <col width="100">  //控制第二列的寬度 
     </colgroup>
     <thead>
       <tr>
         <th><th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td><td>
       </tr>
     </tbody>   
     <tfoot>
       <tr>
         <td><td>
       </tr>
     </tfoot>      
    </tabel>

tr 一行 td 數(shù)據(jù) th表頭