HTML:HTML 快速入門

文中內(nèi)容基于：黑馬/傳智播客的《Web前端入門教程》中的前兩節(jié)是己。

相關(guān)網(wǎng)站：

w3schools英文網(wǎng)站
w3school 中文網(wǎng)站

一铡原、瀏覽器內(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)：用于對網(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ī)范對html文件進(jìn)行解析。

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

2包斑、charset（字符編碼集）

GB2312：簡體中文字符集流礁，含6763個(gè)常用漢字
BIG5：繁體中文，港澳臺(tái)地區(qū)使用
GBK：含全部中文字符罗丰，是對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í)不起作用

（2）比原、段落標(biāo)簽<p></p>

p 即 paragraph 的簡寫
基本格式<p>段落內(nèi)容</p>
段落中的文本內(nèi)容超出瀏覽器寬度之后會(huì)執(zhí)行自動(dòng)換行

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

hr 即 horizontal 的縮寫
其作用是在頁面中插入一條水平線
基本格式<hr />
這是一個(gè)自閉合標(biāo)簽杠巡。（普通標(biāo)簽成對出現(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)簽

7缭贡、轉(zhuǎn)義字符

8炉擅、注釋標(biāo)簽

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

9、路徑

（1）阳惹、相對路徑

圖像文件和HTML文件位于同一文件夾中谍失，只需要輸入圖像文件的名稱即可，<img src="logo.gif"/>
圖像文件位于Html文件的下一級文件夾莹汤，輸入文件夾名和文件名快鱼，二者之間用“/” 隔開，<img src="image/logo.gif"/>
圖像文件位于HTML文件的上一級纲岭，在文件名之前加 " ../ ", 上兩級則使用 " ../../ ",依次類推抹竹。<img src="../image/logo.gif"/>

(2）、絕對路徑

本地絕對路徑： D:\web\img\logo.gif
網(wǎng)絡(luò)絕對路徑：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)之間是并列的，沒有順序級別的區(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>

效果圖如下：

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	表格在頁面中的水平對齊方式	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> 替代對應(yīng)位置的 <td></td>即可

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

<!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)容。

<!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 瀏覽器吗坚，在頁面中右擊，然后選擇 “檢查”

15胯舷、表格標(biāo)題標(biāo)簽 caption

<caption></caption> 標(biāo)簽用來定義標(biāo)題的標(biāo)簽
必須寫在 <table></table> 中刻蚯，和 <thead></thead>平級

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

16桑嘶、單元格合并

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

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

17逃顶、表單標(biāo)簽

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

（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/>

    請選擇文件：<input type="file"/>

</body>
</html>

效果圖如下：

(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>
    請輸入評論內(nèi)容：
    <br/>
    <textarea ></textarea>
</body>
</html>

效果圖如下：

（4）巷屿、下拉菜單 <select></select>

<select></select> 用來定義下拉菜單
<option></option> 用來定義下拉菜單選項(xiàng)
<select></select> 中至少包含一對 <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>

效果圖如下：

(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/>

        請選擇文件：<input type="file"/>

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

六下愈、HTML5新標(biāo)簽及新特性

HTML演變

1纽绍、文檔類型設(shè)定

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

HTML , 對應(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="請輸入姓名" list="names">
    <datalist id="names">
        <option>張三</option>
        <option>李四</option>
        <option>王五</option>
    </datalist>

</body>
</html>

（2）寸爆、fieldset 示例

fieldset 默認(rèn)寬度滿屏

效果圖如下：

<!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)容赁豆，如果輸入格式不對，在提交的時(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>

5冗美、新增的input 屬性

屬性	示例	含義
placeholder	`<input type="text" placeholder="請輸入用戶名"/>`	提示文本魔种，參考 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="請輸入用戶名"/>
        <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>

MAC 中愉棱，使用 WebStorm 編輯完上述代碼然后部署到瀏覽器之后，不知道為什么 accesskey 一直不生效Ｕ芷荨奔滑！暫時(shí)沒找到原因。

6顺少、綜合案例

效果圖

實(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="請輸入學(xué)生姓名"/></label> <br/>
            <label>手 機(jī) 號(hào)：<input type="tel" placeholder="請輸入學(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 在不同瀏覽器中的兼容情況如下：

常用屬性如下：

屬性	含義
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>

注意忱屑，如果歌曲比較大蹬敲，那么加載的過程會(huì)比較長！］航洹伴嗡！但是，只要設(shè)置了 autoplay 从铲，加載完成后必然會(huì)自動(dòng)播放

(3)闹究、video

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

常用屬性如下：

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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末渣淤，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子吉嫩，更是在濱河造成了極大的恐慌价认，老刑警劉巖，帶你破解...
沈念sama閱讀 222,681評論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件自娩，死亡現(xiàn)場離奇詭異用踩，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)忙迁，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,205評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門脐彩，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人姊扔，你說我怎么就攤上這事惠奸。” “怎么了恰梢？”我有些...
開封第一講書人閱讀 169,421評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵佛南，是天一觀的道長梗掰。經(jīng)常有香客問我，道長嗅回，這世上最難降的妖魔是什么及穗？我笑而不...
開封第一講書人閱讀 60,114評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮绵载，結(jié)果婚禮上埂陆，老公的妹妹穿的比我還像新娘。我一直安慰自己娃豹，他們只是感情好焚虱，可當(dāng)我...
茶點(diǎn)故事閱讀 69,116評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著培愁，像睡著了一般。火紅的嫁衣襯著肌膚如雪缓窜。梳的紋絲不亂的頭發(fā)上定续，一...
開封第一講書人閱讀 52,713評論 1贊 312
城市分裂傳說
那天，我揣著相機(jī)與錄音禾锤，去河邊找鬼私股。笑死，一個(gè)胖子當(dāng)著我的面吹牛恩掷，可吹牛的內(nèi)容都是我干的倡鲸。我是一名探鬼主播，決...
沈念sama閱讀 41,170評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼黄娘，長吁一口氣：“原來是場噩夢啊……” “哼峭状！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起逼争，我...
開封第一講書人閱讀 40,116評論 0贊 277
萬榮殺人案實(shí)錄
序言：老撾萬榮一對情侶失蹤优床，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后誓焦，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胆敞，經(jīng)...
沈念sama閱讀 46,651評論 1贊 320
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 38,714評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年杂伟，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了移层。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 40,865評論 1贊 353
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡赫粥，死狀恐怖观话，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情越平，我是刑警寧澤匪燕，帶...
沈念sama閱讀 36,527評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布蕾羊，位于F島的核電站，受9級特大地震影響帽驯，放射性物質(zhì)發(fā)生泄漏龟再。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 42,211評論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一尼变、第九天我趴在偏房一處隱蔽的房頂上張望利凑。院中可真熱鬧，春花似錦嫌术、人聲如沸哀澈。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,699評論 0贊 25
一樁弒父案度气，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽割按。三九已至，卻和暖如春磷籍，著一層夾襖步出監(jiān)牢的瞬間适荣，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,814評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工院领，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留弛矛，地道東北人。一個(gè)月前我還...
沈念sama閱讀 49,299評論 3贊 379
代替公主和親
正文我出身青樓比然，卻偏偏與公主長得像丈氓，于是被迫代替她去往敵國和親。傳聞我的和親對象是個(gè)殘疾皇子强法，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 45,870評論 2贊 361

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>

（2）比原、段落標(biāo)簽<p></p>

（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）阳惹、相對路徑

(2）、絕對路徑

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

推薦閱讀更多精彩內(nèi)容