一、瀏覽器內(nèi)核分類

Trident——IE/Edge瀏覽器使用
Gecko——火狐瀏覽器使用
Webkit——safari瀏覽器使用
Chromium/Blink——Chrome瀏覽器使用
Presto——Opera瀏覽器使用（新版Opera已經(jīng)使用Blink內(nèi)核）

二娇钱、Web標(biāo)準(zhǔn)構(gòu)成

Web標(biāo)準(zhǔn)是由W3C及其他標(biāo)準(zhǔn)化資質(zhì)制定的標(biāo)準(zhǔn)集合臣嚣。包括：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）、行為（Behavior）

結(jié)構(gòu)標(biāo)準(zhǔn)：用于對(duì)網(wǎng)頁元素進(jìn)行整理和分類骗露，包括 xml、xhtml 兩部分
樣式標(biāo)準(zhǔn)：用于設(shè)置網(wǎng)頁元素的版式血巍、顏色萧锉、大小等外觀，主要指 Css
行為標(biāo)準(zhǔn)：網(wǎng)頁模型的定義及交互的編寫述寡。包括 DOM和ECMAScript兩部分
所以柿隙，理想狀態(tài)下，一個(gè)網(wǎng)頁的源碼中需要包含：.html鲫凶、.css禀崖、.js

三、HTML開發(fā)工具

Dreamweaver螟炫、Sublime波附、WebStorm、HBuilder、Visual Studio Code

四、html基本骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

1幕庐、<!DOCTYPE>

<!DOCTYPE>位于文檔的最前面鹿寨，用于向?yàn)g覽器說明當(dāng)前.html文件使用的是哪種HTML或者XHTML標(biāo)準(zhǔn)規(guī)范。瀏覽器會(huì)按照此處指定的規(guī)范對(duì)html文件進(jìn)行解析。

HTML5可以向下兼容，所以，現(xiàn)在直接指定為<!DOCTYPE html>即可盏求。

2抖锥、charset（字符編碼集）

GB2312：簡體中文字符集，含6763個(gè)常用漢字
BIG5：繁體中文风喇，港澳臺(tái)地區(qū)使用
GBK：含全部中文字符宁改，是對(duì)GB2312的擴(kuò)展，支持繁體字
UTF-8：支持中文和英文等魂莫，是最常用的字符集

五还蹲、HTML標(biāo)簽

HTML大量使用語義化標(biāo)簽，所謂語義化就是見名知意耙考，

1谜喊、排版標(biāo)簽

（1）、標(biāo)題標(biāo)簽 <h1></h1>

h 即 head 的簡寫
有<h1>倦始、<h2>斗遏、<h3>、<h4>鞋邑、<h5>诵次、<h6> 6種，從左到右字號(hào)依次變小枚碗。
基本格式<h1></h1>
像<h7>這種錯(cuò)誤的標(biāo)簽在展示時(shí)不起作用

（3）逾一、水平線標(biāo)簽<hr />

hr 即 horizontal 的縮寫
其作用是在頁面中插入一條水平線
基本格式<hr />
這是一個(gè)自閉合標(biāo)簽(單標(biāo)簽)。（普通標(biāo)簽成對(duì)出現(xiàn)肮雨；自閉合標(biāo)簽不需要包裹內(nèi)容遵堵，自己就執(zhí)行了開始和結(jié)束的操作）

（4）、容器標(biāo)簽 <div></div> 和 <span></span>

div 即 division 的縮寫怨规，分割陌宿、區(qū)分的意思
span 即 span ，跨度波丰、范圍的意思
這倆本質(zhì)上是一個(gè)容器壳坪，類似于 Android 中的ViewGroup
基本格式<div>這是div標(biāo)簽中的內(nèi)容</div> <span>這是span標(biāo)簽中的內(nèi)容</span>

2、文本格式化標(biāo)簽

標(biāo)簽	效果
<b></b>掰烟、<strong></strong>	加粗弥虐，XHTML推薦使用<strong>
<i></i>、<em></em>	斜體媚赖，XHTML推薦使用<em>
<s></s>、<del></del>	刪除線珠插，XHTML推薦使用<del>
<u></u>惧磺、<ins></ins>	下劃線，XHTML推薦使用<ins>

關(guān)于 HTML 和 XHTML的區(qū)別捻撑，可以參考http://www.w3school.com.cn/xhtml/xhtml_html.asp磨隘、https://www.zhihu.com/question/19783105

3缤底、標(biāo)簽的屬性

基本格式：<標(biāo)簽名屬性1=”屬性值1“ 屬性2=”屬性值2“></標(biāo)簽名>
標(biāo)簽可以擁有多個(gè)屬性
屬性必須寫在開始標(biāo)簽中，位于標(biāo)簽名后面
屬性之間不區(qū)分順序
標(biāo)簽名與屬性番捂、屬性與屬性之間使用空格隔開
任何屬性都有默認(rèn)值个唧，省略該屬性表示使用默認(rèn)值

4、圖像標(biāo)簽 <img />

img 即 image 的縮寫
基本格式<img src="圖片URI/URL" />
<img />常用屬性如下：

屬性	屬性值	屬性含義
src	URI/URL	圖像的路徑
alt	文本	圖像無法正常顯示時(shí)的提示文本
title	文本	鼠標(biāo)懸停于圖像時(shí)顯示的文本
width	像素（XHTML 不支持按頁面百分比顯示）	圖像的寬度
height	像素（XHTML 不支持按頁面百分比顯示）	圖像的高度
border	數(shù)字	設(shè)置圖像邊框的寬度

設(shè)置圖像的寬高時(shí)设预，如果想等比縮放徙歼，則只設(shè)置其中一個(gè)即可

5、超鏈接標(biāo)簽

(1)鳖枕、超鏈接標(biāo)簽<a></a>

anchor 的縮寫
基本格式 <a href="跳轉(zhuǎn)目標(biāo)url" target="目標(biāo)窗口的彈出方式">超鏈接文本或圖像</a>

href 即 HyperText Reference , 指定要跳轉(zhuǎn)的URL地址
target , 指定目標(biāo)窗口的打開方式魄梯。取值為 self / blank , self 為默認(rèn)值，blank 表示新窗口打開
注意:

外鏈需要添加 http:// 或 https:// 前綴

內(nèi)部鏈接直接鏈接內(nèi)部頁面名稱即可宾符，如 <a href="index.html">首頁</a>

如果當(dāng)時(shí)沒有確定鏈接目標(biāo)時(shí)酿秸，可以為 href 賦值為 “#” ,即 href="#",表示一個(gè)空連接

各種網(wǎng)頁元素，如文本魏烫、圖像辣苏、表格、音頻哄褒、視頻等都可以作為超鏈接的載體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超鏈接文本示例</title>
</head>
<body>
    <a href="http://www.reibang.com/u/414acf7abc2b" target="_blank">CnPeng簡書</a>
    <br/>
    <a >CnPeng CSDN</a>
    <br/>
    <a href="aTag.html" target="_blank">內(nèi)部鏈接--再打開一個(gè)aTag.html</a>
    <br/>
    <a href="#">空的超鏈接</a>
</body>
</html>

（2）稀蟋、錨點(diǎn)

通過創(chuàng)建錨點(diǎn)，可以快速定位到目標(biāo)內(nèi)容區(qū)域
創(chuàng)建錨點(diǎn)分為兩步
- 為目標(biāo)內(nèi)容（即錨點(diǎn)）創(chuàng)建id 并賦值
- 將超鏈接文本與錨點(diǎn)的id 關(guān)聯(lián)读处，<a href="#id名稱"> 超鏈接文本 </a>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#createAnchor">點(diǎn)擊跳轉(zhuǎn)到錨點(diǎn)位置</a>
    <br/>
    通過創(chuàng)建錨點(diǎn)糊治，
    可以快速定位到目標(biāo)內(nèi)容區(qū)域

    <!--加這一堆br是為了增加頁面高度，不然顯示不出錨點(diǎn)效果-->
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br>

    <h3 id="createAnchor">創(chuàng)建錨點(diǎn)分為兩步</h3>
    <hr/>
        為目標(biāo)內(nèi)容（即錨點(diǎn)）創(chuàng)建id 并賦值
    <br/>
        將超鏈接文本與錨點(diǎn)的id 關(guān)聯(lián)罚舱，&lt;a href="#id名稱"&gt; 超鏈接文本 &lt;/a&gt;
</body>
</html>

6井辜、<base> 標(biāo)簽

<base> 標(biāo)簽可以限定同一頁面內(nèi)所有超鏈接的打開方式。<base target="_blank">
設(shè)置 <base> 之后依舊可以為某個(gè)單獨(dú)的超鏈接設(shè)置打開方式管闷。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>base 標(biāo)簽</title>

    <!--指定頁面中所有超鏈接的默認(rèn)打開方式為 blank -->
    <base target="_blank">
</head>
<body>
    <a href="http://www.reibang.com/u/414acf7abc2b" >CnPeng簡書</a>
    <br/>

    <!--雖然 head 中設(shè)置了base,但此處依舊可以單獨(dú)指定打開方式為 self,實(shí)現(xiàn)重載-->
    <a  target="_self">CnPeng CSDN</a>

    <br/>
    <a href="aTag.html">內(nèi)部鏈接--再打開一個(gè)aTag.html</a>
    <br/>
    <a href="#">空的超鏈接</a>

</body>
</html>

<img /> 粥脚、 < br/>、 <hr />包个、<base/> 都是自閉合標(biāo)簽(單標(biāo)簽)

7刷允、轉(zhuǎn)義字符

image.png

8、注釋標(biāo)簽

格式為 < !-- 注釋內(nèi)容 -- >

9碧囊、路徑

（1）树灶、相對(duì)路徑

圖像文件和HTML文件位于同一文件夾中，只需要輸入圖像文件的名稱即可糯而，<img src="logo.gif"/>
圖像文件位于Html文件的下一級(jí)文件夾天通，輸入文件夾名和文件名，二者之間用“/” 隔開熄驼，<img src="image/logo.gif"/>
圖像文件位于HTML文件的上一級(jí)像寒，在文件名之前加 " ../ ", 上兩級(jí)則使用 " ../../ ",依次類推烘豹。<img src="../image/logo.gif"/>

(2）、絕對(duì)路徑

本地絕對(duì)路徑:D:\web\img\logo.gif
網(wǎng)絡(luò)絕對(duì)路徑:https://upload-images.jianshu.io/upload_images/2551993-7b4cba4929e08d7c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/700

10诺祸、列表標(biāo)簽

（1）携悯、無序列表 <ul>

所謂無序列表就是以小圓點(diǎn)或者小方塊作為行首標(biāo)志的列表
無序列表的各項(xiàng)之間是并列的，沒有順序級(jí)別的區(qū)分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無序列表 ul</title>
</head>
<body>
    <ul>
        <li>無序列表1</li>
        <li>無序列表2</li>
        <li>無序列表3</li>
        <li>無序列表4</li>
    </ul>

</body>
</html>

注意：

<ul></ul> 之間只能嵌套 <li></li>,不允許嵌套其他標(biāo)簽

<li></li> 之間相當(dāng)于一個(gè)容器筷笨，可以嵌套任意標(biāo)簽

（2）憔鬼、有序列表 <ol></ol>

內(nèi)部也是嵌套<li></li>
默認(rèn)以 1、2奥秆、3...作為行首排序標(biāo)志

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有序列表ol</title>
</head>
<body>
    <ol >
        <li>有序列表1</li>
        <li>有序列表2</li>
        <li>有序列表3</li>
        <li>有序列表4</li>
    </ol>
</body>
</html>

（3）逊彭、自定義列表 <dl></dl>

<dl></dl>為外層標(biāo)簽、<dt></dt>為內(nèi)層標(biāo)簽构订、<dt> 下還可以嵌套 <dd></dd>
自定義列表項(xiàng)前不具有任何項(xiàng)目符號(hào)侮叮，既沒有小圓點(diǎn)也沒有1234

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定義列表</title>
</head>
<body>
    <dl>
        <dt>自定義列表項(xiàng)1</dt>
            <dd>自定義列表項(xiàng)1 的內(nèi)容解釋1</dd>
            <dd>自定義列表項(xiàng)1 的內(nèi)容解釋2</dd>
        <dt>自定義列表項(xiàng)2</dt>
            <dd>自定義列表項(xiàng)2 的內(nèi)容解釋1</dd>
            <dd>自定義列表項(xiàng)2 的內(nèi)容解釋2</dd>
    </dl>
</body>
</html>

效果圖如下：

image.png

11、表格標(biāo)簽 table

<table></table> 用來定義表格悼瘾，
<tr></tr> 用來定義行囊榜，嵌套在 <table></table> 中
<td></td> 用來定義行中的單元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相當(dāng)于一個(gè)容器亥宿，可以嵌套任意元素
表格相關(guān)的屬性如下：

屬性名稱	含義	屬性取值
border	表格的邊框卸勺。默認(rèn) border="0",即無邊框	像素值
cellspacing	單元格與單元格邊框之間的間距。默認(rèn) cellspacing="2"	像素值
cellpadding	單元格內(nèi)容與單元格邊框的間距烫扼。默認(rèn) cellpadding="1"	像素值
width	表格的寬度	像素值
height	表格的高度	像素值
align	表格在頁面中的水平對(duì)齊方式	left 曙求、center 、right
caption	標(biāo)題	文本
colspan	從當(dāng)前列向后橫跨幾列, 應(yīng)用于td映企、th	數(shù)字
rowspan	從當(dāng)前行向下豎跨幾行, 應(yīng)用于td悟狱、th	數(shù)字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<table cellspacing="3" cellpadding="2" border="1" align="left">
    <tr>
        <td>第一行第1列</td>
        <td>第一行第2列</td>
        <td>第一行第3列</td>
    </tr>
    <tr>
        <td>第二行第1列</td>
        <td>第二行第2列</td>
        <td>第二行第3列</td>
    </tr>
</table>
</body>
</html>

12、表頭標(biāo)簽

表頭一般位于表格的第一行或者第一列堰氓。
表頭標(biāo)簽為 <th></th>挤渐，在顯示的時(shí)候默認(rèn)會(huì)顯示為加粗的效果
增加表頭時(shí)，使用 <th></th> 替代對(duì)應(yīng)位置的 <td></td>即可

下圖即是設(shè)置了表頭的表格双絮。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表頭</title>
</head>
<body>
<table border="1" cellspacing="1" cellpadding="10" align="center">
    <caption>caption標(biāo)簽是啥浴麻？標(biāo)題？</caption>
    <tr>
        <th>屬性</th>
        <th>含義</th>
        <th colspan="2">取值</th>
    </tr>
    <tr>
        <th>border</th>
        <td>單元格邊框</td>
        <td>像素值囤攀，默認(rèn)0</td>
        <td rowspan="3">rowspan從當(dāng)前單元格向下跨三行</td>
    </tr>
    <tr>
        <th>cellspacing</th>
        <td>單元格與單元格邊框的間距</td>
        <td>像素值软免，默認(rèn)2</td>
    </tr>
    <tr>
        <th>cellpadding</th>
        <td>單元格內(nèi)容與單元格邊框的間距</td>
        <td>像素值焚挠，默認(rèn)1</td>
    </tr>
</table>
</body>
</html>

13向抢、表格結(jié)構(gòu)(了解)

使用表格時(shí)亩冬，可以將表格分為頭部、主體、頁腳（頁腳有兼容問題）

<thead></thead> 用來定義頭部。必須位于 <table></table> 中拧抖，一般包含網(wǎng)頁的logo和導(dǎo)航等頭部信息。
<tbody></tbody> 用來定義表格的主體淌哟，一般包含網(wǎng)頁中除頭部和底部之外的其他內(nèi)容。

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thead+tbody</title>
</head>
<body>
<table cellspacing="2" cellpadding="10" align="center" border="1">
    <thead>
    <tr>
        <th>屬性名稱</th>
        <th>含義</th>
        <th>取值</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>colspan</td>
        <td>向右橫跨幾列</td>
        <td>數(shù)值</td>
    </tr>
    <tr>
        <td>rowspan</td>
        <td>向下豎跨幾行</td>
        <td>數(shù)值</td>
    </tr>

    </tbody>
</table>
</body>
</html>

14狰晚、網(wǎng)頁元素檢查（開發(fā)者模式）

基于 chrome 瀏覽器业栅，在頁面中右擊攒钳，然后選擇 “檢查”

image.png

15不撑、表格標(biāo)題標(biāo)簽 caption

<caption></caption> 標(biāo)簽用來定義標(biāo)題的標(biāo)簽
必須寫在 <table></table> 中晤斩，和 <thead></thead>平級(jí)
相關(guān)代碼可以參考表頭標(biāo)簽的代碼。

16实愚、單元格合并

適用于 <td></td>、<th></th>
colspan 跨列合并（水平合并）
rowspan 跨行合并（垂直合并）

相關(guān)代碼可以參考表頭標(biāo)簽的代碼爆侣。

17兔仰、表單標(biāo)簽

html 中一個(gè)完整的表單通常由表單元素潮尝、提示信息羹蚣、表單域（即多個(gè)表單的父容器）三部分組成。

image.png

（1）乱凿、imput 輸入標(biāo)簽

<input/> 為單標(biāo)簽（自閉合標(biāo)簽）
type 是其基本屬性顽素，用來控制輸入的類型

input 、br徒蟆、hr 胁出、img、 base 都是單標(biāo)簽

屬性	取值	含義
type	text	單行文本輸入框（不換行的）
type	password	密碼輸入框
type	radio	單選框（配合name 可以實(shí)現(xiàn)單選效果）
type	checkbox	復(fù)選框
type	button	普通按鈕
type	submit	提交按鈕
type	reset	重置按鈕
type	image	圖像形式的提交按鈕
type	file	文件域, 點(diǎn)擊之后打開文件選擇器
name	任意文本	控件名稱 , name 相同則表示是同一組數(shù)據(jù)
value	任意文本	默認(rèn)文本值
size	正整數(shù)	顯示大小
checked	checked	默認(rèn)是否被選中
maxlength	正整數(shù)	控制輸入的最大字符數(shù)量

多個(gè) radio 使用相同的 name 段审，則表示這是一組數(shù)據(jù)全蝶，這樣可以實(shí)現(xiàn)單選效果。如果不加 name 多個(gè) radio 可同時(shí)被選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input標(biāo)簽</title>
</head>
<body>
    用戶名：<input type="text" maxlength="15"/>
    <br/>

    <!--次數(shù)密碼中間的空格使用了是全角輸入法，全角輸入法中抑淫，空格占一個(gè)漢字的大小-->
    密　碼：<input type="password"/>
    <br/>

    <!--使用name 限定了一組內(nèi)容绷落，從而實(shí)現(xiàn)單選-->
    性　別：
    <input type="radio" name="sex" checked="checked"/> 男
    <input type="radio" name="sex"/> 女
    <br/>

    愛　好：
    <input type="checkbox" name="hobby"/> 看電影
    <input type="checkbox" name="hobby"/> 讀書
    <br/>

    <input type="button" value="普通按鈕"/>
    <br/>
    <input type="submit" value="提交按鈕"/>
    <br/>
    <input type="reset" value="重置按鈕"/>
    <br/>
    <input type="image" src="../image/imgButton.png"/>
    <br/>

    請(qǐng)選擇文件：<input type="file"/>

</body>
</html>

效果圖如下：

image.png

(2)、label 標(biāo)簽(理解)

label 標(biāo)簽為 input 標(biāo)簽定義標(biāo)注/標(biāo)簽
用來綁定一個(gè)表單元素始苇，當(dāng)點(diǎn)擊 label 標(biāo)簽的時(shí)候嘱函，被綁定的表單元素就會(huì)獲取焦點(diǎn)
通過 for 屬性，可以綁定 label 和 input ; 或者直接用lable 標(biāo)簽將input 包裹起來

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>label的使用</title>
</head>
<body>
    <!--label 中直接包裹 input,可以實(shí)現(xiàn)綁定-->
    <label>點(diǎn)擊此處文本埂蕊，用戶名輸入框會(huì)獲取焦點(diǎn) <br> 用戶名：<input type="text"/></label>
    <br/>

    <hr/>
    <!--使用 label 的 for 屬性綁定input-->
    <label for="#two">點(diǎn)擊此處文本，密碼輸入框會(huì)獲取焦點(diǎn)</label>
    <br/>
    用戶名：<input type="text"/>
    <br/>
    密　碼：<input type="text" id="#two"/>
</body>
</html>

(3)疏唾、textarea 文本域標(biāo)簽

<textarea></textarea>用來做大量文本的輸入蓄氧，支持多行
有 cols 、rows 屬性槐脏。cols 限制每行中所輸入的文本字?jǐn)?shù)喉童，rows 限制最大行數(shù)。（這兩個(gè)屬性通常不被使用顿天，更多使用會(huì)使用CSS樣式做相關(guān)控制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>textarea標(biāo)簽</title>
</head>
<body>
    請(qǐng)輸入評(píng)論內(nèi)容：
    <br/>
    <textarea ></textarea>
</body>
</html>

效果圖如下：

image.png

（4）堂氯、下拉菜單 <select></select>

<select></select> 用來定義下拉菜單
<option></option> 用來定義下拉菜單選項(xiàng)
<select></select> 中至少包含一對(duì) <option></option>
在 option 中定義了屬性 selected="selected" 之后，表示該項(xiàng)被默認(rèn)選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select標(biāo)簽</title>
</head>
<body>
    設(shè)置家鄉(xiāng)
    <select >
        <option>選擇省份</option>
        <option>山東</option>
        <option>內(nèi)蒙古</option>
        <option>黑龍江</option>
        <option>山西</option>
    </select>
    <select>
        <option>濟(jì)南</option>
        <option selected="selected">臨沂</option>
        <option>聊城</option>
        <option>萊蕪</option>
        <option>青島</option>
    </select>
</body>
</html>

效果圖如下：

image.png

(5)牌废、表單域 <form></form>

該標(biāo)簽用來定義表單域咽白，以實(shí)現(xiàn)用戶信息的收集和傳遞，form 中的內(nèi)容通常都會(huì)被提交到服務(wù)器鸟缕。
基本語法格式：

 <form action="url地址" method="提交方式" name="表單名稱">
     ...各種表單控件...
 </form>

常用屬性有action晶框、method、name
- action : 指定接收并處理表單信息的服務(wù)器url地址
- method : 表單數(shù)據(jù)的提交方式懂从。分為 post / get
- name : 指定表單名稱授段，用來區(qū)分頁面中的多個(gè)表單
每個(gè)表單都應(yīng)該有自己的表單域
使用form 包裹之后點(diǎn)擊提交按鈕才有提交的動(dòng)作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表單域</title>
</head>
<body>
    <!--使用 form 包裹之后，提交按鈕和圖片按鈕點(diǎn)擊時(shí)就有效果了-->
    <form action="https://www.baidu.com" method="post" name="userInfo">
        用戶名：<input type="text" maxlength="15"/>
        <br/>

        <!--次數(shù)密碼中間的空格使用了是全角輸入法番甩，全角輸入法中侵贵，空格占一個(gè)漢字的大小-->
        密　碼：<input type="password"/>
        <br/>

        <!--使用name 限定了一組內(nèi)容，從而實(shí)現(xiàn)單選-->
        性　別：
        <input type="radio" name="sex" checked="checked"/> 男
        <input type="radio" name="sex"/> 女
        <br/>

        愛　好：
        <input type="checkbox" name="hobby"/> 看電影
        <input type="checkbox" name="hobby"/> 讀書
        <br/>

        <input type="button" value="普通按鈕"/>
        <br/>
        <input type="submit" value="提交按鈕"/>
        <br/>
        <input type="reset" value="重置按鈕"/>
        <br/>
        <input type="image" src="../image/imgButton.png"/>
        <br/>

        請(qǐng)選擇文件：<input type="file"/>

    </form>
</body>
</html>

六缘薛、HTML5新標(biāo)簽及新特性

HTML演變

1窍育、文檔類型設(shè)定

即 <!Doctype > 對(duì)應(yīng)的屬性值。

HTML , 對(duì)應(yīng)早期的 HTML4.0.1, 其基本結(jié)構(gòu)如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
     <head>
         <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
         <title>Document</title>
     </head>
     <body>
     </body>
 </html>

XHTML 掩宜，其基本結(jié)構(gòu)如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <title>Document</title>
  </head>
  <body>
  
  </body>
  </html>

HTML5 蔫骂，其基本格式如下

<!doctype html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  <body>
  
  </body>
  </html>

在webStorm 中，如果想查看上述三種類型的基本格式牺汤，可以按如下步驟：new > file > 輸入文件名為 xxx.html > 分別輸入 html:4s / html:xt / html:5 然后回車即可

如果想查看某個(gè)頁面使用了兩種 HTML辽旋，可以右擊，然后選擇查看網(wǎng)頁源碼 ，然后查看<!Doctype > 中的信息即可

2补胚、字符設(shè)定

XHTML码耐、HTML中設(shè)置字符集時(shí)使用：
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
HTML5 中設(shè)置字符集時(shí)使用：
<meta charset="UTF-8">

3、常用新標(biāo)簽

w3school 中文網(wǎng)站

標(biāo)簽	作用
header	定義文檔的頁眉
nav	定義導(dǎo)航鏈接部分
footer	定義文檔或者節(jié)的頁腳/底部
article	定義文章
section	定義文檔中的節(jié)（section/段落）
aside	定義其所處內(nèi)容之外的內(nèi)容/側(cè)邊
datalist	定義選項(xiàng)列表溶其，與input 配合使用該標(biāo)簽骚腥，兩者通過id關(guān)聯(lián)
fieldset	可將表單內(nèi)的相關(guān)元素打包/分組, 與legend 搭配使用

(1)、datalist 示例

datalist 中包裹 option
datalist 與 input 關(guān)聯(lián)后瓶逃，input 就具備的 select 的效果束铭，同時(shí)具有了輸入聯(lián)想功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inputlist</title>
</head>
<body>
    <input type="text" value="請(qǐng)輸入姓名" list="names">
    <datalist id="names">
        <option>張三</option>
        <option>李四</option>
        <option>王五</option>
    </datalist>

</body>
</html>

（2）厢绝、fieldset 示例

fieldset 默認(rèn)寬度滿屏
效果圖如下：

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fieldset</title>
</head>
<body>
    <fieldset>
        <legend>用戶登錄</legend>
        用戶名:<input type="text"/>
        <br/>
        密　碼:<input type="password"/>
    </fieldset>
</body>
</html>

4契沫、新增的input type屬性值

這些新增的類型，更加細(xì)化的限定了輸入內(nèi)容昔汉，如果輸入格式不對(duì)懈万，在提交的時(shí)候會(huì)自動(dòng)給出相應(yīng)提示
更多新增type 參考 w3school

類型	示例	含義
email	<input type="email">	輸入郵箱格式
tel	<input type="tel">	輸入手機(jī)號(hào)
url	<input type="url">	輸入url
number	<input type="number">	輸入數(shù)字
search	<input type="search">	搜索框（體現(xiàn)語義化）
range	<input type="range">	自由拖動(dòng)的滑塊
time	<input type="time">	輸入小時(shí) 分鐘
date	<input type="date">	輸入年月日
datetime	<input type="datetime">	輸入日期時(shí)間
month	<input type="month">	輸入月年
week	<input type="week">	輸入星期年
color	<input type="color">	調(diào)出調(diào)色板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>newInputType</title>
</head>
<body>
    <form action="http://www.baidu.com">
        email：<input type="email"/>
        <br/>
        tel：<input type="tel"/>
        <br/>
        url：<input type="url"/>
        <br/>
        number：<input type="number"/>
        <br/>
        search：<input type="search"/>
        <br/>
        range：<input type="range"/>
        <br/>
        time：<input type="time"/>
        <br/>
        date：<input type="date"/>
        <br/>
        datetime：<input type="datetime-local"/>
        <br/>
        month：<input type="month"/>
        <br/>
        week：<input type="week"/>
        <br/>
        color：<input type="color"/>
        <br/>
        <input type="submit"/>
    </form>
</body>
</html>

image.png

5、新增的input 屬性

屬性	示例	含義
placeholder	`<input type="text" placeholder="請(qǐng)輸入用戶名"/>`	提示文本靶病，參考 android TextView 的 hintText
autofocus	`<input type="text" autofocus>`	自動(dòng)獲取焦點(diǎn)
multiple	`<input type="file" multiple>`	多文件上傳
autocomplete	`<input type="text">`	自動(dòng)完成会通，取值 on、 off娄周。on表示記錄已經(jīng)輸入的值供下次自動(dòng)完成涕侈。此外，必須有提交按鈕昆咽，必須設(shè)置name 屬性驾凶，然后該屬性才會(huì)生效
required	`<input type="text" required>`	必填項(xiàng)
accesskey	`<input type="text" accesskey="s">`	定義讓控件獲取焦點(diǎn)的快捷鍵，快捷鍵采用`alt + 字母`的形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>newInputAttr</title>
</head>
<body>
    <form action="form.html">

        <input type="text" placeholder="請(qǐng)輸入用戶名"/>
        <br/>
        <br/>
        <!--可以簡化為 <input type="text" autofocus/>  -->
        <input type="text" autofocus="autofocus" placeholder="自動(dòng)獲取焦點(diǎn)"/>
        <br/>
        <br/>
        <input type="file" multiple/>
        <br/>
        <br/>
        <input type="text" autocomplete name="identify" placeholder="下次自動(dòng)補(bǔ)足輸入內(nèi)容"/>
        <br/>
        <br/>
        <!--在火狐瀏覽器中掷酗，如果沒有輸入內(nèi)容调违，點(diǎn)擊輸入框外部區(qū)域，邊框會(huì)變紅-->
        <input type="text" required placeholder="這是必填項(xiàng)"/>
        <br/>
        <br/>
        <input type="text" accesskey="s" placeholder="獲取焦點(diǎn)的快捷鍵為 alt+s"/>
        <br/>
        <br/>
        <input type="submit"/>
    </form>
</body>
</html>

image.png

MAC 中泻轰，使用 WebStorm 編輯完上述代碼然后部署到瀏覽器之后技肩，不知道為什么 accesskey 一直不生效！浮声！暫時(shí)沒找到原因虚婿。

6、綜合案例

效果圖

image.png
實(shí)現(xiàn)代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>學(xué)生檔案</legend>
            <label>姓　　名：<input type="text" placeholder="請(qǐng)輸入學(xué)生姓名"/></label> <br/>
            <label>手 機(jī) 號(hào)：<input type="tel" placeholder="請(qǐng)輸入學(xué)生手機(jī)號(hào)"/></label><br/>
            <label>郵　　箱：<input type="email"/></label><br/>
            <label>所屬學(xué)院：<input type="text" list="academy"/></label>
            <datalist id="academy">
                <option >JAVA學(xué)院</option>
                <option >前端學(xué)院</option>
                <option >PHP學(xué)院</option>
            </datalist><br/>
            <label>出生日期：<input type="date"/></label><br/>
            <label>語文成績：<input type="number" max="100" min="0" value="0"/></label><br/>
            <label>數(shù)學(xué)成績: <meter max="100" min="0" low="59" value="10"></meter></label><br/>
            <label>英語成績: <meter max="100" min="0" low="59" value="90"></meter></label><br/>
            <input type="submit"><br/>
            <input type="reset">

        </fieldset>
    </form>
</body>
</html>

7泳挥、多媒體標(biāo)簽

embed : 定義嵌入的內(nèi)容
audio : 播放音頻
video : 播放視頻

（1）然痊、embed

用來插入各種多媒體，格式可以是 Midi屉符、Wav剧浸、 AIFF 锹引、AU 、Mp3等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>embed</title>
</head>
<body>
<embed src="http://player.video.iqiyi.com/44cb2ab93ef163fea5a206e52da7c390/0/0/v_19rqyv6lfo.swf-albumId=1268727400-tvId=1268727400-isPurchase=0-cnId=3"
       allowFullScreen="true" quality="high" width="480" height="350" align="middle"
       allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</body>
</html>

上面示例代碼中唆香，embed 節(jié)點(diǎn)中的內(nèi)容是直接從愛奇藝網(wǎng)站下復(fù)制的嫌变。做法是：找到一個(gè)視頻 > 分享 > 點(diǎn)擊向下的箭頭（即更多）> 復(fù) 制 html 代碼 即可

(2)、audio

html5 通過 <audio></audio> 標(biāo)簽實(shí)現(xiàn)音頻播放
audio 開始和結(jié)束標(biāo)簽之間可以嵌入文本躬它，當(dāng)瀏覽器不支持該標(biāo)簽時(shí)腾啥，該文本可以作為提示語。
audio 在不同瀏覽器中的兼容情況如下：

image.png

常用屬性如下：

屬性	含義
src	定義音頻文件的路徑
autoplay	自動(dòng)播放
controls	顯示默認(rèn)播放控件
loop	循環(huán)播放
preload	頁面初始化時(shí)就加載音頻冯吓，autoplay會(huì)覆蓋該屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>audio</title>
</head>
<body>
    <!--使用方式1-->
    <audio src="../assets/audio/皇后大道東.mp3" autoplay="autoplay" controls="controls" loop="loop">
        提示語：您的瀏覽器不支持audio標(biāo)簽
    </audio>

    <br/>

    <!--使用方式2: 通過 source 定義三種音頻格式倘待，從而達(dá)到不同瀏覽器上都能播放的情況-->
    <audio loop controls preload="auto">
        <source src="../assets/audio/皇后大道東.mp3">
        <source src="../assets/audio/皇后大道東.ogg">
        <source src="../assets/audio/皇后大道東.wav">
        提示語：您的瀏覽器不支持audio標(biāo)簽
    </audio>
</body>
</html>

image.png

注意，如果歌曲比較大组贺，那么加載的過程會(huì)比較長Ｑ幽！锣披！但是，只要設(shè)置了 autoplay 贿条，加載完成后必然會(huì)自動(dòng)播放

(3)雹仿、video

html5中使用<video></video> 來實(shí)現(xiàn)視頻的播放
video 目前支持三種視頻格式：ogg、mp4整以、webM
video 在各瀏覽器上的兼容情況如下：

image.png

常用屬性如下：

屬性	含義
autoplay	自動(dòng)播放
controls	顯示默認(rèn)播放控制
loop	循環(huán)播放
width	設(shè)置播放器寬度
height	設(shè)置播放器高度

HTML:HTML 快速入門

一、瀏覽器內(nèi)核分類

二娇钱、Web標(biāo)準(zhǔn)構(gòu)成

三、HTML開發(fā)工具

四、html基本骨架

1幕庐、<!DOCTYPE>

2抖锥、charset（字符編碼集）

五还蹲、HTML標(biāo)簽

1谜喊、排版標(biāo)簽

（1）、標(biāo)題標(biāo)簽 <h1></h1>

（3）逾一、水平線標(biāo)簽<hr />

（4）、容器標(biāo)簽 <div></div> 和 <span></span>

2、文本格式化標(biāo)簽

3缤底、標(biāo)簽的屬性

4、圖像標(biāo)簽 <img />

5、超鏈接標(biāo)簽

(1)鳖枕、超鏈接標(biāo)簽<a></a>

（2）稀蟋、錨點(diǎn)

6井辜、<base> 標(biāo)簽

7刷允、轉(zhuǎn)義字符

8、注釋標(biāo)簽

9碧囊、路徑

（1）树灶、相對(duì)路徑

(2）、絕對(duì)路徑

10诺祸、列表標(biāo)簽

（1）携悯、無序列表 <ul>

（2）憔鬼、有序列表 <ol></ol>

（3）逊彭、自定義列表 <dl></dl>

11、表格標(biāo)簽 table

12、表頭標(biāo)簽

13向抢、表格結(jié)構(gòu)(了解)

14狰晚、網(wǎng)頁元素檢查（開發(fā)者模式）

15不撑、表格標(biāo)題標(biāo)簽 caption

16实愚、單元格合并

17兔仰、表單標(biāo)簽

（1）乱凿、imput 輸入標(biāo)簽

(2)、label 標(biāo)簽(理解)

(3)疏唾、textarea 文本域標(biāo)簽

（4）堂氯、下拉菜單 <select></select>

(5)牌废、表單域 <form></form>

六缘薛、HTML5新標(biāo)簽及新特性

1窍育、文檔類型設(shè)定

2补胚、字符設(shè)定

3、常用新標(biāo)簽

(1)、datalist 示例

（2）厢绝、fieldset 示例

4契沫、新增的input type屬性值

5、新增的input 屬性

6、綜合案例

7泳挥、多媒體標(biāo)簽

（1）然痊、embed

(2)、audio

(3)雹仿、video