文中內(nèi)容基于:黑馬/傳智播客的《Web前端入門教程》中的前兩節(jié)是己。
相關(guān)網(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),<a href="#id名稱"> 超鏈接文本 </a>
</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)簽及新特性
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)簽
標(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
類型 | 示例 | 含義 |
---|---|---|
<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 一直不生效U芷荨奔滑!暫時(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è)置播放器高度 |