#### 什么是HTML哩俭？
HTML:HyperText Markup Language 超文本標記語言
##### 什么是超文本疙教？
比如我們需要在瀏覽器中呈現(xiàn)一篇文章窿春，需要有標題和正文得问，但是瀏覽器不能區(qū)分哪些是標題砍聊，哪些是正文页藻，所以html語言應運而生桨嫁。
**html語言就是為了給它所包含的內容添加語義的**
通過一些特殊字符對普通文本進行標記，可以對他們添加各種各樣的語義份帐。
并且這些特殊字符在瀏覽器中不會被呈現(xiàn)璃吧，所以這些特殊字符被稱為超文本。
`<h1>我是標題</h1>` 這代表一個標題
`<p>我是段落</p>` 這代表一個段落
-----
#### 網(wǎng)頁的基本格式
```
<!DOCTYPE HTML>
<html>
<head>
? ? <meta charset='utf-8'/>
? ? <title></title>
</head>
<body>
</body>
</html>
```
----
#### DTD Doctype Definition 文檔類型聲明
? ? 1.作用：
? ? ? ? *告訴瀏覽器當前網(wǎng)頁是根據(jù)W3C發(fā)布的哪個版本規(guī)范編寫的,以便于瀏覽器正確地渲染顯示網(wǎng)頁
? ? 2.注意點：
? ? ? ? *它不是html標簽
? ? ? ? *要寫在一個html文件的首行
? ? ? ? *瀏覽器會先讀取一個網(wǎng)頁的dtd废境，但并不完全依賴dtd畜挨，瀏覽器有一套自己的渲染規(guī)則
? ? 3.拓展：
? ? ? ? *版本規(guī)范可以分為2個大版本筒繁，一個HTML規(guī)范，一個XHTML規(guī)范巴元，每個大版本又分多個小版本定義毡咏。
? ? ? ? -每個小版本直接按照瀏覽器處理模式又可以分為：standard Mode/almost standard Mode/ Quirk Mode
? ? ? ? -每個小版本按照編寫語法嚴謹程度又可以分為：Strict/Transitional/Frameset
? ? ? ? -HTML語法比較松散，容錯性強务冕，XHTML語法嚴謹血当，容錯性差。
----
#### html標簽
? ? 1.作用:
? ? ? ? *告訴瀏覽器這是一個網(wǎng)頁禀忆，即html文檔
? ? 2.注意點：
? ? ? ? *它是網(wǎng)頁的根標簽臊旭，所有網(wǎng)頁內容都要寫在它內部
? ? ? ? *html標簽不區(qū)分大小寫
? ? 3.分類：
? ? ? ? 1.按閉合方式分為：單標簽/雙標簽
? ? ? ? 2.按嵌套關系分為：父標簽/子標簽
? ? ? ? 3.按布局方式分為：容器級標簽/文本級標簽
---
#### head標簽
? ? 1.作用：
? ? ? ? *給網(wǎng)頁設置一些配置信息，瀏覽器解析網(wǎng)頁時要先解析頭部信息后才能正確地渲染網(wǎng)頁給用戶訪問箩退。
? ? ? ? ? ? -指定網(wǎng)站的標題/指定網(wǎng)站的小圖標
? ? ? ? ? ? -添加網(wǎng)站的SEO相關的信息（網(wǎng)站的關鍵字离熏，描述信息）
? ? ? ? ? ? -添加一些外鏈的js/css文件
? ? ? ? ? ? -添加一些瀏覽器適配內容
? ? ? ? ? ? -指定瀏覽器解析字符集
? ? ? ? ? ? -...
? ? 2.注意點
? ? ? ? *head標簽內部的信息都不會給用戶查看，即在瀏覽器中不會顯示Head標簽內部的信息
----
#### title標簽
? ? 1.作用：
? ? ? ? *指定網(wǎng)頁的標題戴涝，并且該標題會作為用戶保存網(wǎng)頁的默認標題
? ? 2.注意點：
? ? ? ? -title標簽必須要寫在head標簽內部
? ? ? ? -title標簽內容為空時滋戳，瀏覽器默認把html文件名作為當前網(wǎng)頁的標題
----
#### meta標簽
? ? 1.作用：
? ? ? ? *告訴瀏覽器該網(wǎng)頁的各種預配置信息，讓瀏覽器以正確的方式渲染網(wǎng)頁啥刻，告知搜索引擎各種SEO信息奸鸯，設置自動跳轉等
? ? 2.分類：
? ? ? ? 1.設置瀏覽器解析字符集
? ? ? ? ? ? `<meta charset='utf-8'/>`
? ? ? ? 2.設置網(wǎng)頁的關鍵字，能提高SEO搜索命中率可帽，使網(wǎng)頁更容易被用戶訪問到
? ? ? ? ? ? `<meta name="keywords" content="IT前言技術娄涩、iOS技術、HTML5技術映跟、Android技術" />`
? ? ? ? 3.設置網(wǎng)頁信息描述蓄拣，SEO所用
? ? ? ? ? ? `<meta name="description" content="IT前言技術、iOS技術努隙、HTML5技術球恤、Android技術研究" />`
? ? ? ? 4.告訴搜索引擎當前網(wǎng)頁的作者是誰
? ? ? ? ? ? `<meta name="author" content="xxx" />`
? ? ? ? 5.告訴瀏覽器多久自動刷新一次頁面并自動跳轉到新頁面，常用于新老域名替換時
? ? ? ? ? ? `<meta http-equiv="Refresh" content="2荸镊；URL=http://www.baidu.com/">`
? ? ? ? 6.告知網(wǎng)絡爬蟲本網(wǎng)頁能被爬取的權限限制
? ? ? ? ? ? `<meta name="robots" content="all|none|index|follow|noindex|nofollow" />`
? ? 3.注意點：
? ? ? ? ##### 字符集&亂碼問題
? ? ? ? ? ? -字符集就是包含各種字符的集合咽斧，常用的有：ASCII，GBK2312,UTF-8
? ? ? ? ? ? -亂碼問題產生的原因：
? ? ? ? ? ? ? ? 開發(fā)人員編碼encoding時使用的字符集與瀏覽器解碼decoding時所使用的字符集不同躬存。
? ? ? ? ? ? ? ? -因此要解決亂碼問題收厨，需要在編碼和解碼時都指定為相同字符集即可。
? ? ? ? ? ? ? ? -一般都使用UTF-8萬國碼
----
#### style標簽
? ? 1.作用：告訴瀏覽器這里編寫了css樣式聲明
? ? 2.注意點：
? ? ? ? -必須寫在head標簽內部
----
#### script標簽
? ? 1.作用：告訴瀏覽器該標簽內部包含js代碼优构，需要優(yōu)先執(zhí)行
? ? 2.注意點：
? ? ? ? -可以寫在head里诵叁，也可以寫到body里。位置不定
? ? ? ? -js代碼執(zhí)行極快钦椭，具有阻塞瀏覽器工作的作用
----
#### link標簽
? ? 1.作用：告知瀏覽器這里需要引入一個外部文件
? ? 2.標簽屬性attr：
? ? ? ? -type:外部文件類型
? ? ? ? -src:外部文件路徑
----
#### body標簽
? ? 1.作用：告知瀏覽器這個標簽內部的內容是網(wǎng)頁上所需要顯示的拧额。
----
#### H1~H6標簽 head
? ? 1.作用：告知瀏覽器這是一個標題
? ? 2.格式：`<h1>This is the title</h1>`
? ? 3.注意點：
? ? ? ? -h1最大碑诉，h6最小，只有6級侥锦，超出無效
? ? ? ? -一個網(wǎng)頁只能有一個h1进栽，它很重要，一般是該網(wǎng)頁的LOGO
? ? ? ? -標題標簽是容器級標簽恭垦，在瀏覽器中獨占一行顯示
----
#### p標簽 paragrah
? ? 1.作用：告知瀏覽器這段文本是一個整體快毛，稱作段落
? ? 2.格式：`<p>This is a paragrah</p>`
? ? 3.注意點：
? ? ? ? -p標簽是html中是*文本級標簽*，在css中是塊級元素
? ? ? ? -p標簽獨占一行番挺，當瀏覽器一行不足以顯示時唠帝，自動換行填充
----
#### hr標簽 horizontal rule
? ? 1.作用：在瀏覽器中顯示一條分割線
? ? 2.格式：<hr/>
? ? 3.注意點：
? ? ? ? -它在瀏覽器中會獨占一行
? ? ? ? -由于Hr標簽是用來添加樣式的，沒有語義玄柏，而html標簽只負責聲明網(wǎng)頁的語義襟衰，因此這種標簽已經被廢棄，所有的樣式都通過css來添加到網(wǎng)頁
? ? ? ? -標簽中閉合的/可寫可不寫粪摘，如果不寫是按照html規(guī)范來寫瀑晒，寫/是按照xhtml規(guī)范寫的
----
#### html注釋 Annotation
? ? 1.作用：在網(wǎng)頁文件上添加一段注釋用來解釋某一段程序或代碼是什么意思，是開發(fā)者之間的交流方式
? ? 2.格式：`<!-- xxx -->`
? ? 3.注意點：
? ? ? ? -html注釋不能嵌套
? ? ? ? -注釋不會在瀏覽器中顯示
? ? ? ? -增強了代碼的可讀性
----
#### img標簽 image
? ? 1.作用：在該標簽處插入一張圖片
? ? 2.格式：`<img src="" alt="" title=""/>`
? ? 3.attr：
? ? ? ? -width:設置圖片的寬度徘意，通常設置width/height其一苔悦，另一個會等比拉伸/縮放
? ? ? ? -height:設置圖片的高度，如果width和height同時設置椎咧，可能會導致圖片失真變形
? ? ? ? -src: source 設置圖片的路徑+圖片名稱玖详，通常使用相對路徑
? ? ? ? -title:設置該圖片在網(wǎng)頁中當鼠標懸停其上時，顯示的提示文本
? ? ? ? -alt: alternate 當瀏覽器根據(jù)src地址不能找到圖片時返回alt屬性中指定的文本
? ? 4.常見img的類型：
? ? ? ? 1.jpg/jpeg:有損壓縮圖片邑退，可保存顏色較為豐富的圖片，不支持透明效果
? ? ? ? 2.gif:有損壓縮圖片劳澄，保存動態(tài)圖和顏色單一的圖片地技，支持簡單透明效果
? ? ? ? 3.png:無損壓縮圖片，可保存顏色很豐富的圖片秒拔，體積較大莫矗，支持復雜透明效果
? ? ? ? *選圖規(guī)則：效果不一致選擇好的，效果一致選擇小的*
? ? 5.注意點：
? ? ? ? -img標簽是文本級標簽砂缩，行內塊元素作谚，不獨占一行
? ? 6.拓展：
? ? ? ? ####相對路徑&絕對路徑：
? ? ? ? ? ? *相對路徑*是從當前目錄開始查找，./當前目錄庵芭，../上一級目錄妹懒，/下一級目錄；
? ? ? ? ? ? 在開發(fā)中通常都使用相對路徑双吆，因為它可移植性強眨唬。
? ? ? ? ? ? ? ? 注意：
? ? ? ? ? ? ? ? 1.相對路徑不能跨盤符
? ? ? ? ? ? ? ? 2.路徑中不能使用中文会前，容易出錯
? ? ? ? ? ? *絕對路徑*是從盤符開始查找并一直找到目標資源的∝腋停可移植性差瓦宜，基本不使用
? ? ? ? ? ? *網(wǎng)絡路徑*
----
#### br標簽 break
? ? 1.作用：讓內容換行，另起一行
? ? 2.格式：`<br/>`
? ? 3.注意點：
? ? ? ? 1.br標簽無語義岭妖，而在現(xiàn)實中需要換行時都是因為另起了段落临庇，因此要用p標簽代替它
? ? ? ? 2.br標簽寫一個是換一行，寫幾個是換幾行
----
#### a標簽 anchor 錨點
? ? 1.作用：用于從一個位置跳轉到另一個位置昵慌，一個網(wǎng)頁跳轉另一個網(wǎng)頁
? ? 2.格式：`<a href="xxx" target="_self",title=""/>`
? ? 3.標簽屬性attr:
? ? ? ? -href: hypertext reference
? ? ? ? ? ? 取值：
? ? ? ? ? ? ? ? 1.假鏈接：# 可跳轉至網(wǎng)頁頂部假夺，javascript:; 占位符，不做任何動作
? ? ? ? ? ? ? ? 2.當前網(wǎng)頁特定位置: #location 當前網(wǎng)頁的某標簽id值
? ? ? ? ? ? ? ? 3.其它網(wǎng)頁特定位置：其它網(wǎng)頁路徑+#location
? ? ? ? ? ? ? ? 4.其它網(wǎng)頁: 跳轉網(wǎng)頁(www.baidu.com)/點擊下載(girl.zip)
? ? ? ? -target:
? ? ? ? ? ? 取值：
? ? ? ? ? ? ? ? 1._self:默認取值废离，在當前頁面跳轉至鏈接網(wǎng)頁
? ? ? ? ? ? ? ? 2._blank:在新的標簽頁打開鏈接網(wǎng)頁
? ? ? ? ? ? ? ? 3._iframe.name.value:跳轉至當前網(wǎng)頁的內聯(lián)框架
? ? ? ? -title: 同img的title標簽屬性一樣侄泽，鼠標懸停其上顯示提示文本信息
? ? 4.注意點：
? ? ? ? 1.a標簽屬于文本級標簽，行內元素蜻韭，在瀏覽器中不會獨占一行
? ? ? ? 3.如果a標簽指定一個url地址悼尾，則href屬性值必須加網(wǎng)絡協(xié)議號http://或https://，否則不會跳轉頁面
? ? ? ? 4.a標簽內不僅可以放文本肖方，還可以放圖片/其它闺魏。如果內部沒有放置任何內容，則該a標簽無法被用戶訪問到
? ? ? ? 5.在head標簽內放入base標簽俯画，可以統(tǒng)一設置本頁面的a標簽跳轉方式析桥。如`<base target="_blank"/>`;當a內部聲明target和base聲明target相沖突時，以a的target屬性值為準
----
#### 列表標簽
? ? 1.作用：給一堆數(shù)據(jù)添加列表語義艰垂，告訴搜索引擎它們是一個整體
? ? 2.分類：
? ? ? ? 1. ul 無序列表
? ? ? ? 2. ol 有序列表
? ? ? ? 3. dl 自定義列表
? ? 3.注意點：
? ? ? ? 1. ul/ol都是組合標簽泡仗，搭配子標簽li(list item列表項)一起使用，因此它們中都不能再嵌套其它標簽猜憎，而需要嵌套的標簽都放在li內娩怎。li內可以存放大多數(shù)html標簽。
? ? ? ? 2.dl和ul類似也是組合標簽胰柑，搭配子標簽dt(definition title 自定義標題)&dd(definition description 自定義描述)來使用.dl中不能放除dt/dd外的其他標簽截亦，而dt/dd內可以嵌套其它html標簽。一個dt可以對應一個dd柬讨，也可以對應多個dd.但不能一個dd對應多個dt.
#### ul標簽 Unordered List
? ? 1.作用：為一堆數(shù)據(jù)添加列表語義崩瓤，聲明它們是一個整體，并且數(shù)據(jù)沒有先后之分
? ? 2.注意點：
? ? ? ? 1.ul/li 都是容器級標簽踩官，在瀏覽器中獨占一行
? ? ? ? 2.ul默認自帶列表項目符號却桶，使用css屬性 `list-style:none;`清除
? ? ? ? 3.ul>li應用廣泛，常見應用場景有：新聞列表蔗牡，商品列表肾扰，導航條等
#### ol標簽 Ordered List
? ? 1.作用：為一堆數(shù)據(jù)添加列表語義畴嘶，聲明它們是一個整體，并且數(shù)據(jù)有先后之分
? ? 2.注意點：
? ? ? ? 1.和ul一樣的注意點集晚，基本上ol可以做的ul都可以做到窗悯，被ol替代，使用率比較低
? ? ? ? 2.應用場景：排行榜
#### dl標簽 Definition List
? ? 1.作用：為一堆數(shù)據(jù)添加列表語義偷拔，聲明它們是一個整體蒋院，并且用dt定義數(shù)據(jù)標題，用dd來定義標題的描述信息莲绰。
? ? 2.注意點：
? ? ? ? 1.dl>dt+dd都是容器級標簽欺旧，在瀏覽器中獨占一行
? ? ? ? 2.雖然一個dt可以沒有dd，或對應多個dd,但是不推薦使用蛤签。推薦一個dt對應一個dd
? ? ? ? 3.應用場景：網(wǎng)站底部信息辞友， 圖文混排
----
#### table標簽
? ? 1.作用：以表格形式將數(shù)據(jù)表現(xiàn)出來，當數(shù)據(jù)量很大的時候震肮，表格形式被認為是最清晰的一種展現(xiàn)形式
? ? 2.格式：
? ? ```
? ? <table>
? ? ? ? <caption></caption> <!--table的標題-->
? ? ? ? <thead> <!-- 表示table的頭部-->
? ? ? ? ? ? <tr> <!-- table row 表格的一行-->
? ? ? ? ? ? ? ? <th></th> <!-- table head 列標題-->
? ? ? ? ? ? ? ? <td></td> <!-- table data 單元格-->
? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody> <!--表示table的主體內容-->
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td></td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody>
? ? ? ? <tfoot> <!--表示table的尾部信息-->
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td></td>
? ? ? ? ? ? </tr>
? ? ? ? </tfoot>
? ? ```
? ? 3.表格屬性(含tr,td)：
? ? ? ? 1.width/height:
? ? ? ? ? ? 可以設置給table和td称龙，如果不設置則默認：td被內容撐開，table被tr+td撐開戳晌。
? ? ? ? ? ? 如果給td手動設置了width/height,則只會影響到它所在的行/列的width/height鲫尊，不會影響到整個表格的寬高。
? ? ? ? 2.align水平居中/valign垂直居中:
? ? ? ? ? ? align:可以設置給 table/tr/td,同屬性覆蓋關系,tr最優(yōu)先
? ? ? ? ? ? ? ? 取值:left/center/right
? ? ? ? ? ? vlign:可以設置給tr/td沦偎，設置給table無效,同屬性覆蓋關系疫向，tr最優(yōu)先
? ? ? ? ? ? ? ? 取值：top/center/bottom
? ? ? ? 3.cellspacing外邊距/cellpadding內邊距:
? ? ? ? ? ? 只能設置給table
? ? ? ? ? ? cellspacing默認為2px，指單元格直接的外邊距
? ? ? ? ? ? cellpadding默認為1px,指單元格內的內容與單元格邊框的距離
? ? ? ? 4.bgcolor
? ? ? ? ? ? 可設置給table/tr/td豪嚎，分別為它們添加背景色
? ? ? ? 5.rowspan列合并/colspan行合并
? ? ? ? ? ? 設置給td搔驼，需注意如果設置了rowspan/colspan,當前單元格就代表占用了多個td的位置，在html結構中就要刪減掉多出來的單元格結構侈询，否則表格結構會被破壞舌涨。? ?
? ? 4.注意點：
? ? ? ? 1.table標簽有一個border屬性，默認情況border值為0妄荔，因此默認不會顯示邊框
? ? ? ? 2.table>tr>td也是一套組合標簽泼菌，不能單獨出現(xiàn)谍肤。
? ? ? ? 3.border-spacing邊框間距/border-collapse邊框整合:
? ? ? ? ? ? 在css中可以通過設置：border-spacing設置為0px,把table和td的外邊距取消啦租，但此時table和td的邊框重疊效果難看，使用border-collapse:collapse;可以設置邊框重疊荒揣，讓表格達到的正常視覺效果篷角。
? ? ? ? 4.caption標簽是table的標題，在瀏覽器中會顯示在表格外部系任，但在html語法中必須編寫在table內部恳蹲，并且緊貼table虐块。
? ? ? ? 5.th標簽是定義了列標題，一個表格首行通常都是列標題嘉蕾，可以用td代替th,但th語義更明確贺奠。
? ? ? ? 6.thead/tbody/tfoot通常都可以省略掉，其中tbody如果省略错忱，瀏覽器會自動添加上儡率。要注意tr不是table的子標簽。
? ? ? ? 7.如果添加了thead&tfoot以清，那么它們有自己默認的高度儿普，在更改整個表格高度時，它們不會發(fā)生變化掷倔，如果要改變它們的高度就要單獨對他們設置眉孩。
? ? ? ? 8.由于部分瀏覽器對table支持不好，開發(fā)中很少使用它
? ? 5.拓展：
? ? ? ? 1.細線表格：
? ? ? ? ? ? 只利用表格屬性勒葱，也可以做出CSS實現(xiàn)的效果,具體步驟如下：
? ? ? ? ? ? 1.給table設置bgcolor="black"
? ? ? ? ? ? 2.給tr設置bgcolor="white"
? ? ? ? ? ? 3.給table設置cellspacing="1px"
----
####form標簽
? ? 1.作用：用于服務器搜集用戶信息浪汪，讓客戶選擇，填寫各種信息并提交到服務器
? ? 2.格式：`<form action="url" method="post/get"><表單元素></form>`
? ? 3.attr:
? ? ? ? -action:該表單要提交到的服務器url
? ? ? ? -method:該表單在網(wǎng)絡傳輸中使用什么方法傳遞(get:明文傳輸错森，post:暗文傳輸)
? ? 3.注意點：
? ? ? ? 1.它是容器級標簽吟宦，在瀏覽器中獨占一行
? ? ? ? 2.所有的表單元素必須寫在form標簽內，否則無法提交給服務器
? ? ? ? 3.form標簽內包含多種表單元素涩维，這些表單元素都具有默認的樣式與功能
####常見的表單元素
? ? ####input標簽
? ? ? ? 格式：`<input type="" name="" value=""/>`
? ? ? ? attr:
? ? ? ? ? ? 1.type:根據(jù)type屬性值取值不同殃姓，瀏覽器會生成多種功能不同，外觀不同的元素
? ? ? ? ? ? ? ? -radio:單選框
? ? ? ? ? ? ? ? ? ? 1.格式: `<input type="radio" />`
? ? ? ? ? ? ? ? ? ? 2.注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.radio是文本級標簽瓦阐，行內塊元素蜗侈，默認不會在瀏覽器中獨占一行。
? ? ? ? ? ? ? ? ? ? ? ? 2.同一組radio天生不會互斥睡蟋，如果想要它們互斥踏幻，需要為同組的radio都添加一個相同的name值
? ? ? ? ? ? ? ? ? ? ? ? 3.如果要讓某個radio被默認選中，需要在標簽內添加checked屬性
? ? ? ? ? ? ? ? ? ? ? ? 4.最好設置checked="checked",而不單寫checked屬性名不賦值戳杀。這是遵從xhtml規(guī)范的寫法
? ? ? ? ? ? ? ? -checkbox：復選框
? ? ? ? ? ? ? ? ? ? 1.格式：`<input type="checkbox" />`
? ? ? ? ? ? ? ? ? ? 2.注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.checkbox是文本級標簽该面，行內塊元素，默認不會獨占一行信卡。
? ? ? ? ? ? ? ? ? ? ? ? 2.checkbox允許同時選中多個隔缀，但同組間也需要有相同的name值
? ? ? ? ? ? ? ? ? ? ? ? 3.如果要默認選中，也需要同radio一樣設置checked="checked"
? ? ? ? ? ? ? ? -text：明文文本框
? ? ? ? ? ? ? ? ? ? 1.格式：`<input type="text" />`
? ? ? ? ? ? ? ? ? ? 2.attr:
? ? ? ? ? ? ? ? ? ? ? ? placeholder="xxx":默認的占位提示字符
? ? ? ? ? ? ? ? ? ? ? ? autofocus=：默認讓那個文本框獲取焦點,注意同一頁面下只能有一個文本框自動獲焦
? ? ? ? ? ? ? ? ? ? ? ? autocomplete="off/on":記錄用戶提交過的數(shù)據(jù)傍菇，即必須是form表單中猾瘸，且必須有name屬性的表單元素的value值.
? ? ? ? ? ? ? ? ? ? ? ? accesskey="x":讓用戶自定義快捷鍵來獲取文本框焦點，此時快捷鍵就是alt + "x"
? ? ? ? ? ? ? ? ? ? ? ? required:強制用戶輸入內容，如果不輸入內容就不能提交給服務器
? ? ? ? ? ? ? ? ? ? ? ? maxlength="number"：文本輸入最大長度
? ? ? ? ? ? ? ? ? ? ? ? value若指定值牵触，則會在瀏覽器中默認顯示
? ? ? ? ? ? ? ? ? ? 3.注意點：
? ? ? ? ? ? ? ? ? ? ? ? 它是文本級標簽淮悼，行內塊元素，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? -passowrd：暗文文本框
? ? ? ? ? ? ? ? ? ? 1.格式：`<input type="password" />`
? ? ? ? ? ? ? ? ? ? 2.注意點：同text
? ? ? ? ? ? ? ? -file: 告訴瀏覽器揽思，當前表單元素是需要選擇文件上傳
? ? ? ? ? ? ? ? ? ? 1.格式：`<input type="file" />`
? ? ? ? ? ? ? ? ? ? 2.注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.默認情況下只能選擇一個文件
? ? ? ? ? ? ? ? ? ? ? ? 2.當表單元素獲得屬性multiple時袜腥，可以同時選中多個文件
? ? ? ? ? ? ? ? -button：普通按鈕
? ? ? ? ? ? ? ? ? ? 1.格式：`<input type="button" onclick=function(){...}`
? ? ? ? ? ? ? ? ? ? 2.注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽，行內塊元素钉汗，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.它只是一個普通的按鈕瞧挤，通常用于配合js腳本來執(zhí)行一些操作
? ? ? ? ? ? ? ? -image：定義圖片形式的提交按鈕
? ? ? ? ? ? ? ? ? ? 1.格式：`<input type="image" src="" />`
? ? ? ? ? ? ? ? ? ? 2.attr:
? ? ? ? ? ? ? ? ? ? ? ? src:引入圖片的路徑
? ? ? ? ? ? ? ? ? ? 3.注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽，行內塊元素儡湾，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.把圖片作為按鈕點擊
? ? ? ? ? ? ? ? -submit：提交按鈕
? ? ? ? ? ? ? ? ? ? 1.作用：把表單內各個具有name值的表單元素提交給服務器
? ? ? ? ? ? ? ? ? ? 2.格式：`<input type="submit" />`
? ? ? ? ? ? ? ? ? ? 3.注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽特恬，行內塊元素，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.這個按鈕不用設置value值就會自帶“提交”字樣徐钠，如果有指定value值癌刽，則顯示指定的value值，如果有指定value屬性尝丐，但賦值為空显拜，則只顯示按鈕，其上無提示文字
? ? ? ? ? ? ? ? ? ? ? ? 3.需要被提交到服務器的表單元素必須有name屬性才能被submit提交
? ? ? ? ? ? ? ? -reset：重置按鈕
? ? ? ? ? ? ? ? ? ? 1.格式：`<input type="reset" />`
? ? ? ? ? ? ? ? ? ? 2.注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽爹袁，行內塊元素远荠，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.這個按鈕不用設置value值就會自帶"重置"文字，同submit
? ? ? ? ? ? ? ? ? ? ? ? 3.它只能清空在form表單標簽內的表單元素已填寫內容
? ? ? ? ? ? ? ? -hidden：隱藏域
? ? ? ? ? ? ? ? ? ? *注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽失息，行內塊元素譬淳，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.它定義隱藏的輸入字段
? ? ? ? ? ? ? ? ? ? ? ? 3.待補充···
? ? ? ? ? ? ? ? -color：取色器
? ? ? ? ? ? ? ? ? ? *注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽，行內塊元素盹兢，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.h5新增邻梆，可以讓用戶在瀏覽器上選取想要的顏色
? ? ? ? ? ? ? ? -date：日期控件
? ? ? ? ? ? ? ? ? ? *注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽，行內塊元素绎秒，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.h5新增浦妄，可以讓用戶在瀏覽器上選取日期
? ? ? ? ? ? ? ? -number：數(shù)字控件
? ? ? ? ? ? ? ? ? ? *注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽，行內塊元素见芹，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.h5新增剂娄，可以讓用戶在瀏覽器上選取數(shù)字
? ? ? ? ? ? ? ? -email：可自動校驗郵箱格式正確與否的郵箱控件
? ? ? ? ? ? ? ? ? ? *注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽，行內塊元素玄呛，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.h5新增阅懦，可以讓用戶在瀏覽器上便捷輸入一個郵箱
? ? ? ? ? ? ? ? -url：可校驗是否輸入了有效格式的URL地址
? ? ? ? ? ? ? ? ? ? *注意點：
? ? ? ? ? ? ? ? ? ? ? ? 1.它是文本級標簽，行內塊元素把鉴，默認在瀏覽器中不會獨占一行
? ? ? ? ? ? ? ? ? ? ? ? 2.h5新增故黑，可以讓用戶在瀏覽器上便捷輸入一個合法url地址
? ? ? ? ? ? 2.name:這個表單元素如果想要提交到服務器，就必須擁有name屬性
? ? ? ? ? ? 3.value:這個表單元素的value值最終會提交給服務器(button的value除外)
? ? ####label標簽
? ? ? ? 1.作用：擴展用戶鼠標操作庭砍，比如點擊輸入框描述文字也能選中輸入框
? ? ? ? 2.格式：
? ? ? ? ? ? ```
? ? ? ? ? ? <!-- 給文本框添加綁定 -->
? ? ? ? ? ? <label for="account">賬戶：</label>
? ? ? ? ? ? <input type="text" id="account" />
? ? ? ? ? ? <!-- 給單選框添加綁定 -->
? ? ? ? ? ? <input type="radio" id="man" value="male" name="sex" />
? ? ? ? ? ? <label for="man">男</label>
? ? ? ? ? ? <!-- 給多選框添加綁定 -->
? ? ? ? ? ? <input type="checkbox" id="basketball" name="sport" value="basketball" />
? ? ? ? ? ? <label for="basketball">籃球</label>
? ? ? ? ? ? ```
? ? ? ? 3.注意點：
? ? ? ? ? ? 1.label標簽是文本級標簽场晶，行內元素，默認在瀏覽器中不獨占一行
? ? ? ? ? ? 2.要綁定給哪個表單元素就為表單元素添加一個id,然后讓label標簽的屬性for的值等于表單元素的id值即可怠缸。
? ? ####datalist標簽
? ? ? ? 1.作用：為輸入框綁定帶選項
? ? ? ? 2.格式：
? ? ? ? ```
? ? ? ? <input type="text" list="cars" />
? ? ? ? <datalist id="cars">
? ? ? ? ? ? <option>奔馳</option>
? ? ? ? ? ? <option>寶馬</option>
? ? ? ? ? ? <option>奧迪</option>
? ? ? ? ? ? <option>法拉利</option>
? ? ? ? </datalist>
? ? ? ? ```
? ? ? ? 3.注意點：
? ? ? ? ? ? 1.該元素屬于容器級標簽诗轻，行內塊級元素，默認在瀏覽器內不獨占一行
? ? ? ? ? ? 2.為datalist綁定一個id屬性揭北，把它的值賦給要添加綁定可選項的文本框的list屬性即可扳炬。
? ? ? ? ? ? 3.datalist需要配合子標簽option一起使用，他們是一套組合標簽
? ? ? ? ? ? 4.datalist和select的區(qū)別在于：前者既支持輸入文本搔体，又可選擇文本恨樟。后者只能選擇，不能輸入疚俱。
? ? ####select標簽
? ? ? ? 1.作用：定義一個下拉列表劝术，供用戶點擊選擇
? ? ? ? 2.格式：
? ? ? ? ```
? ? ? ? <span>你最喜歡的食物是：</span>
? ? ? ? <select name="foods">
? ? ? ? ? ? <optgroup label="水果">
? ? ? ? ? ? ? ? <option selected="selected" value="apple">蘋果</option>
? ? ? ? ? ? ? ? <option>橘子</option>
? ? ? ? ? ? ? ? <option>香蕉</option>
? ? ? ? ? ? ? ? <option>梨子</option>
? ? ? ? ? ? </optgroup>
? ? ? ? ? ? <optgroup label="肉類">
? ? ? ? ? ? ? ? <option>牛肉</option>
? ? ? ? ? ? ? ? <option>羊肉</option>
? ? ? ? ? ? ? ? <option>雞肉</option>
? ? ? ? ? ? ? ? <option>魚肉</option>
? ? ? ? ? ? </optgroup>
? ? ? ? </select>
? ? ? ? ```
? ? ? ? 3.注意點：
? ? ? ? ? ? 1.select標簽是容器級標簽，行內塊級元素呆奕，在瀏覽器中默認不會獨占一行
? ? ? ? ? ? 2.搭配子標簽option一起使用,name屬性要設置給select父標簽养晋，value屬性設置給option子標簽。
? ? ? ? ? ? 3.要設置默認選中梁钾，給option標簽添加屬性selected="selected"
? ? ? ? ? ? 4.再搭配optgroup標簽可以為備選項分類
? ? ? ? ? ? 5.select下拉列表只能選擇不能輸入绳泉，datalist備選項既能選擇也可以輸入
? ? ####textarea標簽
? ? ? ? 1.作用：定義一個多行輸入框
? ? ? ? 2.格式：
? ? ? ? `<textarea rows="x" cols="y"></textarea>`
? ? ? ? 3.注意點：
? ? ? ? ? ? 1.該標簽是一個容器級標簽，行內塊級元素姆泻，默認在瀏覽器中不換行
? ? ? ? ? ? 2.通過標簽屬性rows和cols可以設置高寬零酪，但即使設置了默認顯示高寬，實際操作時拇勃，也可以不受它的限制蛾娶，可以一直輸入，無限換行潜秋。
? ? ? ? ? ? 3.默認在瀏覽器中可以拖動改變寬高蛔琅。
? ? ####filedset標簽
? ? ? ? 1.作用：為表單元素創(chuàng)建分組
? ? ? ? 2.格式：
? ? ? ? ```
? ? ? ? <form>
? ? ? ? ? ? <filedset>
? ? ? ? ? ? ? ? <legend>用戶信息<legend>
? ? ? ? ? ? ? ? 用戶名：<input type="text" name="username" />
? ? ? ? ? ? ? ? 密? 碼：<input type="password" name="pwd" />
? ? ? ? ? ? </filedset>
? ? ? ? ? ? <input type="reset" />
? ? ? ? ? ? <input type="submit" />
? ? ? ? </form>
? ? ? ? ```
? ? ? ? 3.注意點：
? ? ? ? ? ? 1.該標簽是容器級標簽，屬于行內塊級元素峻呛，不獨占一行
? ? ? ? ? ? 2.filedset 和 子標簽 legend搭配使用罗售，legend負責為該分組命名
? ? ? ? ? ? 3.默認產生效果為黑色邊框的框體包圍其內的表單元素
----
####embed標簽
? ? 1.作用：支持flash
? ? 2.格式：
? ? ```
? ? <embed src="" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
? ? ```
####video標簽
? ? 1.作用：用于視頻播放
? ? 2.格式：
? ? ```
? ? <!-- 第一種形式 -->
? ? <video src=""></video>
? ? <!-- 第二種形式 -->
? ? <video>
? ? ? ? <source src="" type="video/mp4" />
? ? ? ? <source src="" type="video/webm" />
? ? ? ? <source src="" type="video/ogg" />
? ? </video>
? ? ```
? ? 3.標簽屬性：
? ? ? ? 1.src:視頻資源的路徑
? ? ? ? 2.autoplay:自動播放
? ? ? ? 3.controls:顯示控制條
? ? ? ? 4.poster:播放開始之前的海報/占位圖片路徑
? ? ? ? 5.loop:循環(huán)播放
? ? ? ? 6.muted:靜音
? ? ? ? 7.width/height:視頻寬/高，和img一樣
? ? ? ? 8.preload:預加載視頻
? ? 4.注意點：
? ? ? ? 1.video標簽是文本級標簽钩述，行內塊元素寨躁，在瀏覽器中默認不能獨占一行
? ? ? ? 2.preload 和 autoplay屬性相沖，兩者只能取其一
? ? ? ? 3.由于視頻非常重要牙勘，所以各大瀏覽器廠商都不支持別人的格式职恳，目前市面上沒有一個瀏覽器可以支持所有的視頻格式所禀，因此開發(fā)第二種寫法就是為了提高兼容性
? ? ? ? 4.但是在老版本的瀏覽器不支持h5標簽，也可以通過js的方式進行兼容處理放钦。
----
####audio標簽
? ? 1.作用：播放音頻文件
? ? 2.格式：`<audio src=""></audio>`
? ? 3.注意點：
? ? ? ? 1.audio標簽是文本級標簽色徘，行內塊元素，在瀏覽器中默認不獨占一行
? ? ? ? 2.標簽屬性和video標簽一樣操禀，只是沒有poster 和 width/height 屬性
----
####details & summery標簽
? ? 1.格式：
? ? ? ? ```
? ? ? ? <details>
? ? ? ? ? ? <summery>西瓜</summery>
? ? ? ? 西瓜是一種好吃的水果褂策。
? ? ? ? </details>
? ? ? ? ```
? ? 2.注意點：
? ? ? ? 1.這套組合標簽是容器級標簽，塊級元素颓屑，默認在瀏覽器中獨占一行
? ? ? ? 2.默認情況下：詳情折疊顯示斤寂，只顯示概要
----
####marquee標簽
? ? 1.作用：跑馬燈效果
? ? 2.格式：`<marquee></marquee>`
? ? 3.標簽屬性：
? ? ? ? 1.direction:left/right/up/down 設置滾動方向
? ? ? ? 2.scrollamount: 設置滾動速度，值越大揪惦，速度越快
? ? ? ? 3.loop:設置滾動次數(shù)遍搞，默認-1，無限滾動
? ? ? ? 4.behavior:slide/alternate 設置滾動方式器腋，slide滾動到邊界停止尾抑，alternate來回滾動
? ? 4.注意點：
? ? ? ? 1.該標簽是容器級標簽，塊級元素蒂培，默認在瀏覽器中獨占一行
? ? ? ? 2.marquee不是W3C定義的標簽再愈，只是各大瀏覽器都支持的很好
----
####被廢棄的標簽
? ? <b></b> blod
? ? <i></i> italic
? ? <u></u> underlined
? ? <s></s> strikethrough
? ? 注意點：
? ? ? ? 1.因為這些標簽沒有語義，純粹是為了表現(xiàn)樣式而設計护戳，所以被廢棄翎冲。
? ? ? ? 2.在開發(fā)中，可以利用這些無語義的標簽作為css鉤子來繪制圖形
? ? ? ? 在前端開發(fā)中顯示某個圖形的方案：
? ? ? ? ? ? 1.通過沒有語義的標簽配合CSS來繪制(特點: 適合簡單圖形)
? ? ? ? ? ? 2.通過字體圖標來實現(xiàn)(適合復雜的圖形, 并且傳輸?shù)乃俣瓤?
? ? ? ? ? ? 3.通過圖片來實現(xiàn)(適合復雜的圖形, 但是傳遞的速度相對較慢)
----
####替代被廢棄的標簽 discarded
? ? <strong></strong>:內容強調媳荒，表現(xiàn)為加粗
? ? <em></em>：語氣強調抗悍，表現(xiàn)為斜體
? ? <ins></ins>：新增的內容，表現(xiàn)為加下劃線修飾
? ? <del></del>：刪除的內容钳枕，表現(xiàn)為加刪除線裝飾
----
####字符實體
? ? HTML對于空格/tab/回車不敏感缴渊，即多個空格也會當做一個空格處理
? ? 以及部分html語法關鍵字即保留字占用，因此引入字符實體
? ? 常用的字符實體：
? ? ? ? 一個空格
? ? ? ? > >
? ? ? ? < <
? ? ? ? © 版權符號
----
