一庞萍、HTML中的標(biāo)簽爬橡、屬性、和取值
1.基礎(chǔ)類標(biāo)簽：
<h1>：雙標(biāo)簽箍邮，是header的簡(jiǎn)寫茉帅，此html文件內(nèi)的標(biāo)題（block標(biāo)簽），<title>才是整個(gè)html文檔的標(biāo)題（顯示在瀏覽器的選項(xiàng)卡上）锭弊，h系列標(biāo)簽一共有6個(gè)堪澎，從<h1>到<h6>，最多就只能到6味滞，h系列標(biāo)簽獨(dú)占一行樱蛤，<h1>最大钮呀，<h6>最小，一定要慎用h系列的標(biāo)簽昨凡，特別是<h1>爽醋，一般情況下一個(gè)界面中只能出現(xiàn)一個(gè)<h1>，和SEO有關(guān)便脊，align屬性：此標(biāo)簽內(nèi)容的水平對(duì)齊方式蚂四，內(nèi)容須為具體文字/inline標(biāo)簽/inline-block標(biāo)簽，不推薦使用哪痰，用CSS設(shè)置证杭，取值：left，左對(duì)齊妒御，right，右對(duì)齊镇饺，center乎莉，居中對(duì)齊
<P>：雙標(biāo)簽，是paragraph的簡(jiǎn)寫奸笤，段落（block標(biāo)簽）惋啃，單獨(dú)占一行
<hr>：單標(biāo)簽，是horizontal rule的簡(jiǎn)寫监右，水平分隔線边灭，單獨(dú)占一行
<br>：單標(biāo)簽，是break的簡(jiǎn)寫健盒，換行绒瘦，可疊加，使用多少個(gè)就會(huì)換多少行扣癣，<br>的語義是換行但不分段惰帽，而一般情況下都是換行并分段，所以很少使用<br>父虑，一般都是嵌套在<p>內(nèi)部來實(shí)現(xiàn)單獨(dú)占一行
2.圖像類標(biāo)簽：
<img>：單標(biāo)簽该酗，是image的簡(jiǎn)寫，圖片（inline-block標(biāo)簽）士嚎，不會(huì)獨(dú)占一行呜魄，src屬性：此<img>的路徑/網(wǎng)址（必需屬性），取值是本地<img>的路徑/網(wǎng)絡(luò)<img>的網(wǎng)址（要加“http://”）莱衩，相對(duì)路徑就是每次都從當(dāng)前這個(gè)“.html”文件所在的文件夾開始查找爵嗅，“./”代表當(dāng)前目錄，可省略膳殷，“../”代表父級(jí)目錄操骡，要是上兩級(jí)目錄就是“../../”九火，但不能跨盤符，當(dāng)從上級(jí)查找時(shí)册招，不能從webstorm打開web瀏覽器岔激，要直接進(jìn)web瀏覽器刷新，企業(yè)開發(fā)中是掰，統(tǒng)一使用正斜杠“/”虑鼎，因?yàn)閷砦覀冮_發(fā)的程序可能會(huì)部署到其它操作系統(tǒng)的web服務(wù)器上，而在其它操作系統(tǒng)中路徑都是“/”键痛，所以當(dāng)你寫的不是“/”時(shí)炫彩，可能會(huì)引發(fā)問題，絕對(duì)路徑就是每次都從指定的盤符開始查找絮短，無論哪種路徑都不要出現(xiàn)中文江兢，否則可能出現(xiàn)未知問題，企業(yè)開發(fā)中一般不使用絕對(duì)路徑丁频，因?yàn)榭梢浦残圆缓茫?b>alt屬性：當(dāng)此<img>無法顯示時(shí)的替代文本（必需屬性杉允，是alternate的簡(jiǎn)寫），取值是自定義內(nèi)容席里，title屬性：當(dāng)鼠標(biāo)hover此<img>時(shí)所顯示的內(nèi)容叔磷，取值是自定義內(nèi)容，title屬性為全局屬性奖磁，可用于任何HTML標(biāo)簽改基，width屬性：此<img>的寬度，height屬性：此<img>的高度咖为，為了防止<img>變形秕狰，不設(shè)定/只設(shè)定其中一項(xiàng)即可
<figure>：雙標(biāo)簽，媒介內(nèi)容的分組以及它們的標(biāo)題（HTML5）
<figcaption>：雙標(biāo)簽案疲，<figure>的標(biāo)題（HTML5）
3.鏈接類標(biāo)簽：
<a>：雙標(biāo)簽封恰，是anchor的簡(jiǎn)寫，超鏈接（inline標(biāo)簽）褐啡，內(nèi)部可嵌套<img>诺舔，href屬性：此超鏈接目標(biāo)的URL，取值：#备畦，javascript:（假鏈接）低飒，就是點(diǎn)擊之后不會(huì)跳轉(zhuǎn)的<a>，#點(diǎn)擊之后會(huì)自動(dòng)跳轉(zhuǎn)到頂部懂盐，但javascript:不會(huì)褥赊，當(dāng)想要通過<a>跳轉(zhuǎn)到此網(wǎng)頁(yè)的指定位置時(shí)，先給目標(biāo)位置的標(biāo)簽設(shè)置一個(gè)id屬性莉恼，然后在href值的#后面直接跟上此id值即可（點(diǎn)擊之后相當(dāng)于種了一個(gè)哈希）拌喉，但沒有過渡動(dòng)畫速那，URL，鏈接所指向的路徑/網(wǎng)址尿背，就是需要跳轉(zhuǎn)到的目標(biāo)界面端仰，當(dāng)此目標(biāo)界面是網(wǎng)址時(shí)，前面必須添加http://或https://田藐，當(dāng)此目標(biāo)界面是本地文件時(shí)荔烧，使用相對(duì)路徑即可，當(dāng)想要通過<a>跳轉(zhuǎn)到指定界面的指定位置時(shí)汽久，只需給指定界面的指定位置的標(biāo)簽添加一個(gè)id屬性鹤竭，然后在<a>中這個(gè)界面網(wǎng)址/路徑的后面直接跟上#id值即可，target屬性：此鏈接跳轉(zhuǎn)的位置景醇，取值：_self臀稚，默認(rèn)值，在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn)三痰，_blank烁涌，在新的選項(xiàng)卡中跳轉(zhuǎn)，title屬性：當(dāng)hover此<a>時(shí)所顯示的內(nèi)容酒觅，取值是自定義內(nèi)容
4.元信息類標(biāo)簽：
<base>：單標(biāo)簽，頁(yè)面上所有鏈接的默認(rèn)路徑/網(wǎng)址微峰，必須寫在<head>的開始標(biāo)簽和結(jié)束標(biāo)簽之間舷丹，href屬性：同<a>的href屬性，target屬性：頁(yè)面上所有<a>跳轉(zhuǎn)的位置蜓肆，但是<a>的target屬性的優(yōu)先級(jí)更高颜凯，取值：_self，默認(rèn)值仗扬，在當(dāng)前選項(xiàng)卡中跳轉(zhuǎn)症概，_blank，在新的選項(xiàng)卡中跳轉(zhuǎn)
5.列表類標(biāo)簽：
<ul>：雙標(biāo)簽早芭，是unordered list的簡(jiǎn)寫彼城，無序列表（block標(biāo)簽），用得最多退个，所有數(shù)據(jù)沒有先后之分募壕，與<li>組合在一起使用，<ul>的下一級(jí)標(biāo)簽中只建議有<li>语盈，但是<li>中可以再嵌套其他標(biāo)簽舱馅，<ul>的應(yīng)用場(chǎng)景為新聞列表、商品列表刀荒、和導(dǎo)航條
<ol>：雙標(biāo)簽代嗤，是ordered list的簡(jiǎn)寫棘钞，有序列表（block標(biāo)簽），用得最少干毅，所有的數(shù)據(jù)都有先后之分宜猜，其它用法跟<ul>都差不多，大同小異溶锭，type屬性：此<ol>內(nèi)部的<li>所使用的序號(hào)類型宝恶，取值：1，A趴捅，a垫毙，I，i拱绑，但是沒有人用type屬性综芥，都是用CSS來做
<li>：雙標(biāo)簽，是list item的簡(jiǎn)寫猎拨，此<ul>/<ol>的條目（block標(biāo)簽）
<dl>：雙標(biāo)簽膀藐，是definition list的簡(jiǎn)寫，定義列表（block標(biāo)簽）红省，用得第二多额各，先通過<dt>添加<dl>中的所有標(biāo)題，然后再通過<dd>給每個(gè)<dt>添加描述信息吧恃，<dl>虾啦、<dt>、和<dd>是一個(gè)整體痕寓，一起出現(xiàn)傲醉，并且<dl>的下一級(jí)標(biāo)簽中只建議有<dt>和<dd>，推薦一個(gè)<dt>對(duì)應(yīng)一個(gè)<dd>呻率，<dl>的應(yīng)用場(chǎng)景為網(wǎng)站尾部的相關(guān)信息和圖文混排（將<dt>內(nèi)部嵌套一個(gè)<img>硬毕，然后將<dt>“float: left;”，將<dd>內(nèi)部嵌套一個(gè)<h1>和一個(gè)<p>礼仗，分別添加一些文字吐咳，然后將<dd>“float: right;”）
<dt>：雙標(biāo)簽，是definition title的簡(jiǎn)寫元践，此<dl>內(nèi)的標(biāo)題（block標(biāo)簽）
<dd>：雙標(biāo)簽挪丢，是definition description的簡(jiǎn)寫，此<dl>內(nèi)<dt>的描述（block標(biāo)簽）
6.表格類標(biāo)簽：
<table>：雙標(biāo)簽卢厂，表格（block標(biāo)簽）乾蓬，<table>有一個(gè)border屬性，此屬性決定了此<table>的border寬度慎恒，但此屬性的默認(rèn)值是0任内，所以看不到此<table>的border撵渡，<table>跟<ul>、<ol>死嗦、和<dl>一樣趋距，它是一個(gè)組合標(biāo)簽，所以<table>越除、<tr>节腐、和<td>一起出現(xiàn)，并且<table>的下一級(jí)標(biāo)簽中只能出現(xiàn)<caption>摘盆、<thead>翼雀、<tbody>、<tfoot>孩擂、<th>狼渊、和<tr>中的一/幾種，border屬性：此<table>的border寬度类垦，取值：阿拉伯?dāng)?shù)字狈邑，默認(rèn)值是0，此屬性會(huì)為此<table>及此<td>添加border蚤认，但是當(dāng)此屬性的取值發(fā)生改變時(shí)米苹，只有此<table>的border寬度會(huì)發(fā)生變化，而此<td>的border寬度始終都是1px砰琢，width屬性：此<table>的寬度驱入，取值：數(shù)字px，height屬性：此<table>的高度氯析，取值：數(shù)字px，align屬性：此<table>在水平方向的對(duì)齊方式莺褒，取值：left掩缓，center，right遵岩，cellpadding屬性：此<td>的內(nèi)邊距你辣，也就是<td>的邊沿與其內(nèi)容之間的間距，取值：阿拉伯?dāng)?shù)字尘执，默認(rèn)值是1舍哄，cellspacing屬性：此<td>的外邊距，也就是<td>和<td>之間的距離誊锭，取值：阿拉伯?dāng)?shù)字表悬，默認(rèn)值是2，要想制作細(xì)線表格丧靡，需設(shè)置“cellspacing=“1””蟆沫，bgcolor屬性：此<table>的background-color
<caption>：雙標(biāo)簽籽暇，此<table>的標(biāo)題（block標(biāo)簽），一定要嵌套在<table>內(nèi)饭庞，并緊跟<table>的開始標(biāo)簽后戒悠，由于<caption>里的內(nèi)容默認(rèn)是相對(duì)于<table>居中的，所以<caption>內(nèi)部可以嵌套一個(gè)<h1>舟山，這樣一來绸狐，<h1>就相對(duì)于整個(gè)<table>居中了
<tr>：雙標(biāo)簽，是table row的簡(jiǎn)寫累盗，此<table>內(nèi)的一行<td>（block標(biāo)簽）寒矿，align屬性：此行<td>的內(nèi)容（文本）的水平對(duì)齊方式，取值：left幅骄，center劫窒，right，valign屬性：此行<td>的內(nèi)容（文本）的垂直對(duì)齊方式拆座，取值：top主巍，middle，bottom挪凑，bgcolor屬性：此行<td>的background-color
<td>：雙標(biāo)簽孕索，是table data cell的簡(jiǎn)寫，此<table>內(nèi)的單元格（inline-block標(biāo)簽）躏碳，width屬性：此<td>的寬度搞旭，取值：數(shù)字px，height屬性：此<td>的高度菇绵，取值：數(shù)字px肄渗，align屬性：此<td>的內(nèi)容（文本）的水平對(duì)齊方式，<td>align屬性的優(yōu)先級(jí)高于<tr>align屬性咬最，取值：left翎嫡，center，right永乌，valign屬性：此<td>內(nèi)容（文本）的垂直對(duì)齊方式惑申，<td>valign屬性的優(yōu)先級(jí)高于<tr>valign屬性，取值：top翅雏，center圈驼，bottom，bgcolor屬性：此<td>的background-color望几，colspan屬性：此<td>可橫跨的列數(shù)绩脆，就是此<td>在水平方向上變?yōu)槎啾兜拿娣e大小，這樣一來就會(huì)多出一些<td>，所以需要?jiǎng)h掉一些<td>才能正常顯示衙伶，<td>的橫跨永遠(yuǎn)都是向后橫跨祈坠，取值：阿拉伯?dāng)?shù)字，rowspan屬性：此<td>可縱跨的行數(shù)矢劲，就是此<td>在豎直方向上變?yōu)槎啾兜拿娣e大小赦拘，<td>的縱跨永遠(yuǎn)都是向下縱跨，取值：阿拉伯?dāng)?shù)字
<th>：雙標(biāo)簽芬沉，是table header cell的簡(jiǎn)寫躺同，此<table>內(nèi)的表頭<td>（inline-block標(biāo)簽），也就是每一列的標(biāo)題丸逸，當(dāng)將第一行的每一個(gè)<td>（即單元格）都換成<th>時(shí)蹋艺，就自動(dòng)將標(biāo)簽內(nèi)部的內(nèi)容居中并加粗了
<thead>：雙標(biāo)簽，是table head的簡(jiǎn)寫黄刚，此<table>內(nèi)的表頭信息捎谨，<thead>、<tbody>憔维、和<tfoot>都是內(nèi)部嵌套<tr>使用的涛救，<thead>和<tfoot>有其默認(rèn)高度，在添加了<thead>和<tfoot>之后业扒，當(dāng)修改<table>的高度時(shí)检吆，<thead>和<tfoot>的高度不會(huì)改變
<tbody>：雙標(biāo)簽，是table body的簡(jiǎn)寫程储，此<table>內(nèi)的主體信息蹭沛，當(dāng)沒有編寫<tbody>時(shí)，系統(tǒng)會(huì)自動(dòng)添加
<tfoot>：雙標(biāo)簽章鲤，是table foot的簡(jiǎn)寫摊灭，此<table>內(nèi)的頁(yè)尾/附加信息
7.表單類標(biāo)簽：
<form>：雙標(biāo)簽，供用戶輸入的HTML表單（block標(biāo)簽）败徊，action屬性：此<form>需要提交到的本地/遠(yuǎn)程web服務(wù)器的URL帚呼，當(dāng)取值是網(wǎng)址時(shí)，必須加“http://”集嵌，method屬性：提交<form>數(shù)據(jù)的方法，取值：get御毅，將<form>數(shù)據(jù)以get請(qǐng)求的方式提交到web服務(wù)器根欧，由于會(huì)將需要提交的數(shù)據(jù)附加到URL后面的“?”后面，例如“?userName=lnj&userPwd=123456”（不能出現(xiàn)中文）端蛆，也會(huì)顯示在瀏覽器的歷史記錄中凤粗，所以用于提交非敏感的數(shù)據(jù)，由于對(duì)提交的數(shù)據(jù)大小有限制（不超過2000個(gè)字符），所以用于提交小數(shù)據(jù)嫌拣，post柔袁，將<form>數(shù)據(jù)以post請(qǐng)求的方式提交到web服務(wù)器，會(huì)將提交的數(shù)據(jù)放到請(qǐng)求頭中异逐，即F12->Network->相應(yīng)請(qǐng)求報(bào)文->Headers->Form Data捶索，所以用于提交敏感的數(shù)據(jù)，由于對(duì)提交的數(shù)據(jù)大小無限制灰瞻，所以用于提交大數(shù)據(jù)腥例，enctype屬性：在發(fā)送<form>數(shù)據(jù)之前對(duì)其進(jìn)行編碼的方式，取值：application/x-www-form-urlencoded酝润，默認(rèn)值燎竖，在發(fā)送前編碼所有字符，multipart/form-data要销，不對(duì)字符編碼构回，在使用包含文件上傳控件（即<input type=“file”>）的<form>時(shí)，必須使用該值
<input>：單標(biāo)簽疏咐，<form>內(nèi)的各種元素（inline-block標(biāo)簽）纤掸，如輸入框、單/多選框凳鬓、和按鈕等茁肠，用于收集用戶信息，必須整體嵌套在一對(duì)<form>內(nèi)缩举，type屬性：此<input>的類型垦梆，取值：text，明文/單行文本輸入框仅孩，用戶可在其中輸入文本托猩，默認(rèn)寬度為20個(gè)字符，password辽慕，暗文/密碼輸入框京腥，該字段中的字符被掩碼，radio溅蛉，單選框公浪，只有給所有radio都設(shè)置一個(gè)相同的name值，radio才會(huì)互斥船侧，給某一個(gè)radio添加一個(gè)checked屬性欠气，才會(huì)默認(rèn)選中某一個(gè)radio，所添加的checked屬性可以不設(shè)置取值镜撩，也可以取跟屬性名稱一樣的值预柒，在HTML中，當(dāng)屬性的取值和屬性的名稱一樣時(shí)，可以只寫一個(gè)宜鸯，但是在XHTML中憔古，則必須寫上取值，所以建議最好不要省略取值淋袖，checkbox鸿市，多選框，除了按鈕類型的<input>以外适贸，其它類型的<input>都可以通過一個(gè)value屬性來設(shè)置將來提交到web服務(wù)器的值灸芳，button，普通按鈕拜姿，可以通過value屬性來設(shè)置button的顯示名稱烙样，button可以配合JS完成一些操作，reset蕊肥，重置按鈕（此按鈕上默認(rèn)就顯示“重置”二字愕掏，但可以通過value屬性來自定義reset的顯示名稱）邢笙，用于清空<form>中已經(jīng)填寫好的數(shù)據(jù)，但必須整體嵌套在一對(duì)<form>內(nèi)，否則無效乾颁，submit盐数，提交按鈕（此按鈕默認(rèn)就顯示“提交”二字）蜒滩，可以將<form>中已經(jīng)填寫好的數(shù)據(jù)岩调，提交到本地/遠(yuǎn)程web服務(wù)器，但必須給<form>添加一個(gè)action屬性盐肃，來設(shè)置需要提交到的web服務(wù)器的URL爪膊，還得給需要提交到web服務(wù)器的<input>添加一個(gè)name屬性，取值任意擬定（所有checkbox也需要設(shè)置相同的name值）砸王，image推盛，圖片形式的submit（需配合src屬性來使用，即設(shè)置圖片的URL）谦铃，hidden耘成，隱藏域，界面上看不到驹闰，是配合submit將一些數(shù)據(jù)默默的悄悄咪咪的提交到web服務(wù)器瘪菌，學(xué)Ajax時(shí)才能涉及到，email嘹朗，郵箱輸入框师妙，提交的時(shí)候可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否符合郵箱的格式，當(dāng)不符合時(shí)骡显，會(huì)提示疆栏，URL，URL鏈接輸入框惫谤，提交的時(shí)候可以自動(dòng)校驗(yàn)輸入的內(nèi)容是否是路徑/網(wǎng)址壁顶，網(wǎng)址前必須添加http://，number溜歪，數(shù)字輸入框若专，number中只能輸入數(shù)字，字母什么的輸入不進(jìn)去蝴猪，date调衰，日期選擇按鈕，可以通過日歷來選擇年月日自阱，color嚎莉，顏色選擇按鈕，可以通過取色板選取顏色沛豌，file趋箩，“選擇文件”按鈕，供文件上傳加派，src屬性：此image的圖片路徑叫确，取值是本地圖片的路徑，只能與“type=“image””配合使用芍锦，value屬性：此按鈕/text上默認(rèn)顯示的文字竹勉，當(dāng)設(shè)置給text時(shí)，是可以手動(dòng)刪掉的娄琉，<input>輸入框元素訪問它的value屬性可以返回/設(shè)置此<input>輸入框中所輸入的內(nèi)容次乓，placeholder屬性：此輸入框的占位文字（輸入內(nèi)容的提示信息），取值是自定義文字车胡，此文字無法手動(dòng)刪除檬输，但此輸入框的padding/line-height可影響到此placeholder，name屬性：此<input>的名稱匈棘，當(dāng)想要把所輸入的賬號(hào)密碼提交到本地/遠(yuǎn)程web服務(wù)器時(shí)丧慈，必須任意命個(gè)名，checked屬性：頁(yè)面加載時(shí)被默認(rèn)選中的radio/checkbox主卫，取值：checked逃默，默認(rèn)選中，list屬性：此text的<datalist>（當(dāng)hover此text時(shí)簇搅，會(huì)在此text的最右端看到一個(gè)向下的三角形小箭頭完域，當(dāng)光標(biāo)在此text中閃爍時(shí)，也會(huì)顯示此<datalist>）瘩将，此text后面必須緊跟一對(duì)<datalist>吟税，而且此text的list值還必須跟<datalist>的id值相同凹耙，可以給此text生成一些智能化的待選項(xiàng)，提示項(xiàng)肠仪，disabled屬性：禁用此<input>（使之不能編輯/點(diǎn)擊了）肖抱，取值：disabled
<button>：雙標(biāo)簽，按鈕（inline-block標(biāo)簽）
<datalist>：雙標(biāo)簽异旧，此text的預(yù)定義下拉列表（HTML5）意述，與text配合使用，并緊跟text之后吮蛹，用作給此text綁定一些智能化的待選項(xiàng)荤崇，<datalist>的id值必須跟text的list值相同，取值可以自己隨意擬定潮针，<datalist>內(nèi)部須嵌套<option>术荤，并把文字放到<option>內(nèi)/<option>的value值里，進(jìn)而形成預(yù)定義下拉列表
<label>：雙標(biāo)簽每篷，此text/radio/checkbox的標(biāo)注（inline標(biāo)簽）喜每，默認(rèn)情況下，此text/radio/checkbox的名稱跟此text/radio/checkbox是沒有關(guān)聯(lián)關(guān)系的雳攘，可以將此text/radio/checkbox的名稱寫在一對(duì)<label>內(nèi)带兜，作用是將此text/radio/checkbox的名稱與此text/radio/checkbox綁定，點(diǎn)擊名稱吨灭，text就有光標(biāo)刚照，radio/checkbox就自動(dòng)選中，for屬性：綁定到哪個(gè)<input>喧兄，取值需跟此<input>的id值相同无畔，取值可以自己隨意擬定
<select>：雙標(biāo)簽，下拉菜單（inline-block標(biāo)簽）吠冤，最右端帶有一個(gè)向下的小箭頭浑彰，此<select>中不能輸入內(nèi)容，但是可以直接在此<select>中選擇內(nèi)容拯辙，其內(nèi)部需嵌套<optgroup>/<option>郭变，將內(nèi)容寫在一對(duì)<option>內(nèi)，不能寫在value值里涯保，否則無效
<optgroup>：雙標(biāo)簽诉濒，此<select>內(nèi)的選項(xiàng)組，用作給此<select>中的內(nèi)容進(jìn)行分組夕春，其內(nèi)部需嵌套<option>使用未荒，label屬性：此<optgroup>的名稱，取值可取任意的名字
<option>：雙標(biāo)簽及志，此<select>/<optgroup>/<datalist>內(nèi)的選項(xiàng)片排，可以嵌套在<select>/<optgroup>/<datalist>內(nèi)寨腔，selected屬性：此<select>內(nèi)默認(rèn)選中的<option>，首次顯示在<select>內(nèi)率寡，表現(xiàn)為選中狀態(tài)脆侮，取值：selected，選中
<textarea>：雙標(biāo)簽勇劣，多行文本輸入框（inline-block標(biāo)簽），可無限換行潭枣，有自己默認(rèn)的寬高比默，cols屬性：此<textarea>的寬度，取值是數(shù)字盆犁，表示列數(shù)命咐，rows屬性：此<textarea>的高度，取值是數(shù)字谐岁，表示行數(shù)醋奠，雖然設(shè)置了cols和rows屬性，但是還是可以無限往下輸入伊佃，超出的內(nèi)容用滾動(dòng)條查看窜司，<textarea>支持使用鼠標(biāo)拖拽的方式放大和縮小
<fieldset>：雙標(biāo)簽，圍繞<input>的邊框（block標(biāo)簽）航揉，其內(nèi)部嵌套<input>使用塞祈，可以嵌套一/多個(gè)<input>，可以將不同的<input>進(jìn)行分割包圍帅涂，形成不同的區(qū)域
<legend>：雙標(biāo)簽议薪，<fieldset>的標(biāo)題（block標(biāo)簽），就是<fieldset>的名稱媳友，嵌套在<fieldset>內(nèi)斯议，并緊跟<fieldset>，align屬性：此<legend>的水平對(duì)齊方式醇锚，取值：left哼御，center，right
8.音視頻類標(biāo)簽：
<video>：雙標(biāo)簽焊唬，視頻（inline-block標(biāo)簽艇搀，HTML5），src屬性：此<video>的路徑求晶，取值是本地<video>的路徑焰雕，poster屬性：此<video>播放前所顯示的圖片，取值：URL芳杏，本地圖片的路徑矩屁，autoplay屬性：此<video>的自動(dòng)播放辟宗，取值：autoplay，自動(dòng)播放吝秕，preload屬性：此<video>的預(yù)加載泊脐，preload屬性和autoplay屬性相沖突，當(dāng)添加了autoplay屬性時(shí)烁峭，preload屬性就會(huì)失效容客，取值：preload，預(yù)加載约郁，controls屬性：此<video>的播放控制條缩挑，取值：controls，播放控制條鬓梅，loop屬性：此<video>的循環(huán)播放供置，取值：loop，循環(huán)播放绽快，muted屬性：此<video>的靜音芥丧，取值：muted，靜音坊罢，width屬性：此<video>的寬度续担，取值：數(shù)字px，height屬性：此<video>的高度活孩，取值：數(shù)字px赤拒，跟<img>一樣，當(dāng)所設(shè)置的寬度和高度不是按照等比計(jì)算時(shí)诱鞠，此<video>就會(huì)變形挎挖，所以建議只設(shè)置其中的一項(xiàng)即可
<audio>：雙標(biāo)簽，音頻（inline標(biāo)簽航夺，HTML5）蕉朵，src屬性：此<audio>的路徑，取值是本地<audio>的路徑阳掐，<video>中能夠添加的屬性大部分都可以在<audio>中添加始衅，并且功能都一樣，只不過有3個(gè)屬性不能用缭保，height汛闸、width、和poster屬性
<source>：單標(biāo)簽艺骂，此<audio>/<video>的文件來源（HTML5）诸老，嵌套在<audio>/<video>內(nèi)，為其定義<audio>/<video>來源钳恕，由于沒有一種<audio>/<video>格式是五大瀏覽器同時(shí)支持的别伏，所以為了做兼容性處理蹄衷，可以把三種不同格式的<audio>/<video>文件都通過<source>鏈接給<audio>/<video>，<audio>/<video>內(nèi)部需要嵌套三個(gè)<source>厘肮，以后當(dāng)瀏覽器播放<audio>/<video>時(shí)愧口，它就會(huì)從這三種格式中選擇一種自己支持的格式來播放，src屬性：此<audio>/<video>文件的路徑类茂，取值是本地<audio>/<video>的路徑耍属，type屬性：此<audio>/<video>文件的格式，取值：audio/Ogg Vorbis巩检，audio/MP3厚骗，audio/Wav，或video/webm碴巾，video/mp4，video/ogg
9.樣式/節(jié)類標(biāo)簽：
<details>：雙標(biāo)簽丑搔，文檔/文檔某個(gè)部分細(xì)節(jié)的描述厦瓢，即詳情（block標(biāo)簽，HTML5）啤月，帶一個(gè)箭頭煮仇，點(diǎn)擊之后可以展開
<summary>：雙標(biāo)簽，<details>的標(biāo)題谎仲，即概要（block標(biāo)簽浙垫，HTML5），嵌套在<details>內(nèi)郑诺，并緊跟其后
<div>：雙標(biāo)簽夹姥，文檔中的分區(qū)/節(jié)（block標(biāo)簽），一般情況下辙诞，用于配合CSS完成網(wǎng)頁(yè)的基本布局的標(biāo)簽叫做容器級(jí)標(biāo)簽辙售，其內(nèi)部可以嵌套其它所有標(biāo)簽，<div>飞涂、<h1>旦部、<ul>、<ol>较店、<dl>士八、<li>、<dt>梁呈、和<dd>等都屬于容器級(jí)標(biāo)簽婚度，所有的容器級(jí)標(biāo)簽都是block標(biāo)簽，單獨(dú)占一行官卡，height屬性的默認(rèn)值是auto陕见，當(dāng)不給width屬性設(shè)置取值時(shí)秘血，整個(gè)標(biāo)簽所占空間的寬度值（margin值+border-width值+padding值+width值）默認(rèn)跟其父標(biāo)簽的width值（即內(nèi)容區(qū)的寬度值）相同，但是其一定不能脫標(biāo)评甜，否則其將不再是block標(biāo)簽灰粮，width值默認(rèn)就是auto了，但其父標(biāo)簽可隨意忍坷，其也可手動(dòng)設(shè)置width/height值粘舟，手動(dòng)添加的即使其脫標(biāo)也生效，在一個(gè)父標(biāo)簽是<body>的block標(biāo)簽中佩研，當(dāng)不給此block標(biāo)簽設(shè)置width值柑肴，并且再給此block標(biāo)簽添加一個(gè)左右padding時(shí)，瀏覽器不會(huì)出現(xiàn)橫向滾動(dòng)條旬薯，因?yàn)檫@時(shí)整個(gè)此block標(biāo)簽所占空間的寬度值才默認(rèn)等于<body>的width值（即內(nèi)容區(qū)的寬度值）晰骑，當(dāng)給此block標(biāo)簽的width值設(shè)為100%，并且再給此block標(biāo)簽添加一個(gè)padding-left和padding-right時(shí)绊序，瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條硕舆，因?yàn)檫@時(shí)100%的意思就是跟<body>的width值相等，再額外多了一個(gè)padding-left和padding-right之后骤公，此block標(biāo)簽整體的寬度值勢(shì)必就比<body>寬了抚官，所以，超出的部分只有使用橫向滾動(dòng)條才能完整顯示阶捆，除非再給它添加一句“box-sizing: border-box;”凌节，文本級(jí)標(biāo)簽里的<p>也屬于block標(biāo)簽，<img>洒试、<input>倍奢、<td>、和<select>屬于inline-block標(biāo)簽垒棋，既能夠不獨(dú)占一行娱挨，又能夠手動(dòng)設(shè)置寬高，當(dāng)兩個(gè)inline/inline-block標(biāo)簽的源代碼之間留下了回車/空格時(shí)捕犬，渲染出來后彼此之間也會(huì)有縫隙跷坝，只要把其中一個(gè)“float: left;”，縫隙就會(huì)消失碉碉，而且float的會(huì)顯示在前面
<span>：雙標(biāo)簽柴钻，文檔中的inline標(biāo)簽的組合（inline標(biāo)簽），一般情況下垢粮，用于配合CSS修改網(wǎng)頁(yè)中的一些局部信息的標(biāo)簽叫做文本級(jí)標(biāo)簽贴届，其內(nèi)部只建議嵌套文字/<img>/<a>，<span>、<p>毫蚓、<b>占键、<u>、<i>元潘、<s>畔乙、<strong>、<em>翩概、<ins>牲距、<del>、和<a>等都屬于文本級(jí)標(biāo)簽钥庇，文本級(jí)標(biāo)簽里除了<p>都屬于inline標(biāo)簽牍鞠，不會(huì)單獨(dú)占一行，不可手動(dòng)設(shè)置寬高评姨，width和height屬性的默認(rèn)值是auto难述，inline標(biāo)簽只可以設(shè)置padding-left、padding-right吐句、margin-left胁后、和margin-right，哪些標(biāo)簽是文本級(jí)的哪些標(biāo)簽是容器級(jí)的不用刻意去記憶蕴侧，一般情況下择同，要嵌套都是嵌套在<div>內(nèi)/按照組標(biāo)簽來嵌套
10.其它類標(biāo)簽：
<marquee>：雙標(biāo)簽两入，屏幕上滾動(dòng)的文字（類似于彈幕）净宵，w3c上沒有，但是各大瀏覽器都支持裹纳，behavior屬性：此<marquee>的滾動(dòng)類型择葡，取值：slide，滾動(dòng)到邊界就停止剃氧，alternate敏储，滾動(dòng)到邊界就彈回，direction屬性：此<marquee>的滾動(dòng)方向朋鞍，取值：up已添，從下向上滾動(dòng)，down滥酥，從上向下滾動(dòng)更舞，left，從右向左滾動(dòng)坎吻，right缆蝉，從左向右滾動(dòng)，scrollamount屬性：此<marquee>的滾動(dòng)速度，取值：阿拉伯?dāng)?shù)字刊头，值越大黍瞧，滾動(dòng)得越快，loop屬性：此<marquee>的滾動(dòng)次數(shù)原杂，取值：阿拉伯?dāng)?shù)字印颤，默認(rèn)值是-1，也就是無限滾動(dòng)
11.HTML中被廢棄的標(biāo)簽：
因?yàn)楫?dāng)前的HTML中的標(biāo)簽只有一個(gè)作用污尉，就是用來添加語義膀哲，而早期的HTML標(biāo)簽中有一部分標(biāo)簽是沒有語義的，單純是用來修改樣式的被碗，所以這部分標(biāo)簽就被淘汰了某宪，<br>、<hr>锐朴、<font>兴喂、<b>（雙標(biāo)簽）、<u>（雙標(biāo)簽）焚志、<i>（雙標(biāo)簽）衣迷、<s>（雙標(biāo)簽）以上標(biāo)簽都是沒有結(jié)構(gòu)方面的語義的，都是單純用來修改樣式的酱酬，<b>(即bold的簡(jiǎn)寫)用來加粗文本壶谒，<u>(即underline的簡(jiǎn)寫)用來給文本添加下劃線，<i>(即italic的簡(jiǎn)寫)用來將文本傾斜膳沽，<s>(即strikethourgh的簡(jiǎn)寫)用來給文本添加刪除線汗菜，以后不到萬不得已一定不要使用這些被廢棄掉的標(biāo)簽，當(dāng)一定要使用時(shí)挑社，一般情況下都是用來作為CSS的鉤子來使用陨界，鉤子就是綁定的意思，意思就是為了單純的綁定一些小圖標(biāo)而使用痛阻，沒有實(shí)際語義菌瘪，比如可以將<i>/<b>轉(zhuǎn)成inline-block標(biāo)簽，再添加background-image阱当，或者其內(nèi)部直接嵌套<img>都可以俏扩，一般<b>換成<strong>（雙標(biāo)簽），語義為重要性強(qiáng)調(diào)的文字弊添，<u>換成<ins>（雙標(biāo)簽）(即inseted的簡(jiǎn)寫)录淡，語義為插入的文字，<i>換成<em>（雙標(biāo)簽）(即emphasized的簡(jiǎn)寫)表箭，語義為強(qiáng)調(diào)的文字赁咙，<s>換成<del>（雙標(biāo)簽）(即deleted的簡(jiǎn)寫)钮莲，語義為被刪除的文字
12.字符實(shí)體：
在HTML中對(duì)空格/回車/tab不敏感，會(huì)把多個(gè)空格/回車/tab當(dāng)做一個(gè)空格來處理彼水，有的字符在HTML中是有特殊含義的崔拥，是不能在瀏覽器中直接顯示出來的，要想顯示出來就必須通過字符實(shí)體凤覆，一個(gè)“?(//non-breaking space)”就是一個(gè)空格链瓦，有多少個(gè)“?”就有多少個(gè)空格，“<(//less than)”為小于符號(hào)“<”盯桦，“>(//greater than)”為大于符號(hào)“>”慈俯，“?”為版權(quán)符號(hào)，其余的詳見w3c官方網(wǎng)站
二拥峦、WebStorm中常見的快捷鍵
創(chuàng)建一個(gè)新的.html的文件：“Ctrl”+“Alt”+“Insert”
讓光標(biāo)移動(dòng)到當(dāng)前行的末尾：“End”
讓光標(biāo)移動(dòng)到當(dāng)前行的最前面：“Home”
添加多光標(biāo)/列選擇（讓光標(biāo)在多行中閃爍）：按住鍵盤上的“Alt”鍵不放贴膘，然后再按住鼠標(biāo)的左鍵不放，然后再拖動(dòng)鼠標(biāo)即可（新版本拖動(dòng)鼠標(biāo)無效略号，只能單擊鼠標(biāo)）
將光標(biāo)所在的那一行內(nèi)容復(fù)制到下一行：“Ctrl”+“D”
刪除光標(biāo)所在的那一行內(nèi)容：“Ctrl”+“X”
包圍（給一段選中內(nèi)容的前后加上標(biāo)簽）：先選中這一段刑峡，然后按“Ctrl”+“Alt”+“T”，然后按回車玄柠，然后輸入對(duì)應(yīng)的標(biāo)簽即可
添加注釋/注釋掉光標(biāo)所在的那一行內(nèi)容：“Ctrl”+“/”突梦，取消注釋也一樣
選中多行內(nèi)容并注釋掉：“Ctrl”+“Shift”+“/”，取消注釋也一樣
上下移動(dòng)光標(biāo)所在那一行的代碼：向上移動(dòng)為“Ctrl”+“Shift”+“↑”(方向鍵上)羽利，向下移動(dòng)為“Ctrl”+“Shift”+“↓”(方向鍵下)
合并和展開某一個(gè)標(biāo)簽的代碼：合并為“Ctrl”+“-”宫患，展開為“Ctrl”+“+”
合并和展開頁(yè)面所有標(biāo)簽的代碼：合并為“Ctrl”+“Shift”+“-”，展開為“Ctrl”+“Shift”+“+”
新啟一行（光標(biāo)可在上一行的任意位置）：“Shift”+“Enter”
縮進(jìn)：向后縮進(jìn)為“Tab”这弧，向前縮進(jìn)為“Shift”+“Tab”
類名的跳轉(zhuǎn)：在HTML代碼中娃闲，按住“Ctrl”鍵，然后單擊類名当宴，可以直接跳轉(zhuǎn)到相對(duì)應(yīng)的CSS代碼那里
在webstorm中畜吊，可以快速編寫一個(gè)ul的格式泽疆，ul>li就是生成一對(duì)<ul>户矢，然后在這對(duì)<ul>中再生成一對(duì)<li>，ul>li*3就是生成一對(duì)<ul>殉疼，然后在這對(duì)<ul>中再生成3對(duì)<li>梯浪，還可以u(píng)l>li*2>h2+ul>li*3，然后按Tab鍵即可瓢娜，可以輸入“div.類名$*數(shù)字”然后按Tab鍵挂洛，來快速生成多個(gè)相似類名的<div>，“p{$}*100”的意思是生成100個(gè)內(nèi)容為1~100的<p>眠砾，可以輸入“span.box${我是span}*數(shù)字”然后按Tab鍵虏劲，來快速生成多個(gè)內(nèi)容為“我是span”，類名為“box數(shù)字”的<span>，當(dāng)想要自定義代碼片段的快捷方式時(shí)柒巫，點(diǎn)擊進(jìn)入File->Settings励堡，然后在左上角的搜索框搜索“l(fā)ive”，找到“Live Templates”并點(diǎn)擊堡掏，然后在右半部分找到“html/xml”并展開应结，然后在最右端找到綠色加號(hào)，并點(diǎn)擊泉唁，然后再點(diǎn)擊“Live Template”鹅龄，然后在下邊的“Template text”區(qū)域?qū)⒆约旱拇a片段輸入進(jìn)去，然后在“Abbreviation”位置將自定義的快捷鍵輸入亭畜，比如“jq”扮休，然后點(diǎn)擊下邊的藍(lán)色“Define”，然后點(diǎn)擊“Everywhere”全選拴鸵，全選完了之后點(diǎn)擊“Apply”應(yīng)用肛炮，再點(diǎn)“OK”，然后以后無論在任何文件下宝踪，只要輸入“jq”再按“Tab”鍵侨糟，就會(huì)出現(xiàn)自己的代碼片段，還可以給“使用默認(rèn)瀏覽器打開”設(shè)置快捷鍵瘩燥，點(diǎn)擊進(jìn)入File->Settings->Keymap秕重，然后在右半部分的搜索框輸入“default”，然后向下滾找到藍(lán)色的“Open in default browser”并右擊厉膀，然后點(diǎn)擊“Add Keyboard Shortcut”溶耘，然后設(shè)置比如“Alt+R”，然后點(diǎn)擊“OK”即可
三服鹅、vscode中常見的快捷鍵
格式化代碼塊（重排代碼格式）：“Shift”+“Alt”+“F”（只能格式化對(duì)應(yīng)格式文件的對(duì)應(yīng)代碼塊凳兵，比如在“.html”文件中只能格式化HTML代碼，無法格式化“.html”文件中的JS代碼）
添加多光標(biāo)/列選擇（讓光標(biāo)在多行中閃爍）：“Alt”+“鼠標(biāo)左鍵單擊”
包圍（給一段選中內(nèi)容的前后加上標(biāo)簽）：“Alt”+“W”（需配合“htmltagwrap”插件使用企软，另外此快捷方式還可以自動(dòng)出來一對(duì)<p>庐扫，可以將其改成任何標(biāo)簽）
將光標(biāo)所在的那一行內(nèi)容復(fù)制到下一行：“Shift”+“Alt”+“↓”(方向鍵下)
將光標(biāo)所在的那一行內(nèi)容移動(dòng)到上/下一行：（“Alt”+“↑”）/（“Alt”+“↓”）
vscode常用插件：Atom JavaScript Snippet，Auto Close Tag仗哨，Auto Rename Tag形庭，Babel JavaScript，Beautify厌漂，Bracket Pair Colorizer萨醒，Chinese (Simplified) Language Pack for Visual Studio Code，Class autocomplete for HTML苇倡，Color Info富纸，CSS Peek囤踩，Debugger for Chrome，Document This晓褪，DotENV高职，ES7 React/Redux/GraphQL/React-Native snippets，ESLint辞州，filesize怔锌，HTML CSS Support，HTML Snippets变过，HTMLHint埃元，htmltagwrap，Image preview媚狰，IntelliSense for CSS class names in HTML岛杀，JavaScript (ES6) code snippets，JavaScript Atom Grammar崭孤，JavaScript Snippet Pack类嗤，JavaScript Snippets，jQuery Code Snippets辨宠，Live Sass Compiler遗锣，Live Server，markdownlint嗤形，open in browser精偿，Path Intellisense，PHP Intelephense赋兵，Project Manager笔咽，Settings Sync，StandardJS - JavaScript Standard Style霹期，TSLint叶组，Vetur，View In Browser历造，vscode-icons甩十，Xml Complete，XML Format帕膜，XML Formatter枣氧，XML Tools
在一個(gè)空白的.html文件中自動(dòng)生成模板：輸入“!”然后按Tab鍵
在一個(gè)空白的.vue文件中自動(dòng)生成模板：輸入“vue”溢十，然后按“↓”鍵找到“<vue> with default.vue”垮刹，然后按Tab鍵
四、HbuilderX中常見的快捷鍵
格式化代碼塊（重排代碼格式）：“Ctrl”+“K”
包圍（給一段選中內(nèi)容的前后加上標(biāo)簽）：“Ctrl”+“]”
反包圍（去掉一段選中內(nèi)容前后的標(biāo)簽）：“Ctrl”+“Shift”+“]”
添加多光標(biāo)/列選擇（讓光標(biāo)在多行中閃爍）：“Ctrl”+“鼠標(biāo)左鍵單擊”张弛，或者Alt”+“鼠標(biāo)左鍵拖動(dòng)”
