免费观看日韩黄,亚洲无码免费伦理视频

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

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

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

一、瀏覽器內(nèi)核分類(lè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)頁(yè)元素進(jìn)行整理和分類(lèi)，包括 xml、xhtml 兩部分
樣式標(biāo)準(zhǔn)：用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀(guān)，主要指 Css
行為標(biāo)準(zhǔn)：網(wǎng)頁(yè)模型的定義及交互的編寫(xiě)。包括 DOM和ECMAScript兩部分

所以，理想狀態(tài)下，一個(gè)網(wǎng)頁(yè)的源碼中需要包含：.html、.css、.js

三、HTML開(kāi)發(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覽器說(shuō)明當(dāng)前.html文件使用的是哪種HTML或者XHTML標(biāo)準(zhǔn)規(guī)范。瀏覽器會(huì)按照此處指定的規(guī)范對(duì)html文件進(jìn)行解析。

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

2、charset（字符編碼集）

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

五、HTML標(biāo)簽

HTML大量使用語(yǔ)義化標(biāo)簽，所謂語(yǔ)義化就是見(jiàn)名知意，

1、排版標(biāo)簽

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

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

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

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

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

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

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

div 即 division 的縮寫(xiě)，分割、區(qū)分的意思
span 即 span ，跨度、范圍的意思
這倆本質(zhì)上是一個(gè)容器，類(lèi)似于 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>	刪除線(xiàn)，XHTML推薦使用<del>
<u></u>、<ins></ins>	下劃線(xiàn)，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è)屬性
屬性必須寫(xiě)在開(kāi)始標(biāo)簽中，位于標(biāo)簽名后面
屬性之間不區(qū)分順序
標(biāo)簽名與屬性、屬性與屬性之間使用空格隔開(kāi)
任何屬性都有默認(rèn)值，省略該屬性表示使用默認(rèn)值

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

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

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

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

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

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

anchor 的縮寫(xiě)
基本格式 <a href="跳轉(zhuǎn)目標(biāo)url" target="目標(biāo)窗口的彈出方式">超鏈接文本或圖像</a>
- href 即 HyperText Reference , 指定要跳轉(zhuǎn)的URL地址
- target , 指定目標(biāo)窗口的打開(kāi)方式。取值為 self / blank , self 為默認(rèn)值，blank 表示新窗口打開(kāi)

注意：

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

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

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

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

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

（2）、錨點(diǎn)

通過(guò)創(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名稱(chēng)"> 超鏈接文本 </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/>
    通過(guò)創(chuàng)建錨點(diǎn)，
    可以快速定位到目標(biāo)內(nèi)容區(qū)域

    <!--加這一堆br是為了增加頁(yè)面高度，不然顯示不出錨點(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名稱(chēng)"&gt; 超鏈接文本 &lt;/a&gt;
</body>
</html>

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

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

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

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

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

    <br/>
    <a href="aTag.html">內(nèi)部鏈接--再打開(kā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）、相對(duì)路徑

圖像文件和HTML文件位于同一文件夾中，只需要輸入圖像文件的名稱(chēng)即可，<img src="logo.gif"/>
圖像文件位于Html文件的下一級(jí)文件夾，輸入文件夾名和文件名，二者之間用“/” 隔開(kāi)，<img src="image/logo.gif"/>
圖像文件位于HTML文件的上一級(jí)，在文件名之前加 " ../ ", 上兩級(jí)則使用 " ../../ ",依次類(lèi)推。<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）、無(wú)序列表 <ul>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>無(wú)序列表 ul</title>
</head>
<body>
    <ul>
        <li>無(wú)序列表1</li>
        <li>無(wú)序列表2</li>
        <li>無(wú)序列表3</li>
        <li>無(wú)序列表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)，既沒(méi)有小圓點(diǎn)也沒(méi)有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> 用來(lái)定義表格，
<tr></tr> 用來(lái)定義行，嵌套在 <table></table> 中
<td></td> 用來(lái)定義行中的單元格，嵌套在 <tr></tr> 中
<tr></tr> 中只能嵌套<td></td> , 但 <td></td> 相當(dāng)于一個(gè)容器，可以嵌套任意元素

表格相關(guān)的屬性如下：

屬性名稱(chēng)	含義	屬性取值
border	表格的邊框。默認(rèn) border="0",即無(wú)邊框	像素值
cellspacing	單元格與單元格邊框之間的間距。默認(rèn) cellspacing="2"	像素值
cellpadding	單元格內(nèi)容與單元格邊框的間距。默認(rèn) cellpadding="1"	像素值
width	表格的寬度	像素值
height	表格的高度	像素值
align	表格在頁(yè)面中的水平對(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è)置了表頭的表格。

<!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í)，可以將表格分為頭部、主體、頁(yè)腳（頁(yè)腳有兼容問(wèn)題）

<thead></thead> 用來(lái)定義頭部。必須位于 <table></table> 中，一般包含網(wǎng)頁(yè)的logo和導(dǎo)航等頭部信息。
<tbody></tbody> 用來(lái)定義表格的主體，一般包含網(wǎng)頁(yè)中除頭部和底部之外的其他內(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>屬性名稱(chēng)</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)頁(yè)元素檢查（開(kāi)發(fā)者模式）

基于 chrome 瀏覽器，在頁(yè)面中右擊，然后選擇 “檢查”

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

<caption></caption> 標(biāo)簽用來(lái)定義標(biāo)題的標(biāo)簽
必須寫(xiě)在 <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è)表單的父容器）三部分組成。

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

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

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)擊之后打開(kāi)文件選擇器
name	任意文本	控件名稱(chēng) , 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>
    用戶(hù)名：<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/>

    愛(ài)　好：
    <input type="checkbox" name="hobby"/> 看電影
    <input type="checkbox" name="hobby"/> 讀書(shū)
    <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>

效果圖如下：

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

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

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

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

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

<textarea></textarea>用來(lái)做大量文本的輸入，支持多行
有 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>

效果圖如下：

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

<select></select> 用來(lái)定義下拉菜單
<option></option> 用來(lái)定義下拉菜單選項(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>

效果圖如下：

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

該標(biāo)簽用來(lái)定義表單域，以實(shí)現(xiàn)用戶(hù)信息的收集和傳遞，form 中的內(nèi)容通常都會(huì)被提交到服務(wù)器。

基本語(yǔ)法格式：

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

常用屬性有action、method、name
- action : 指定接收并處理表單信息的服務(wù)器url地址
- method : 表單數(shù)據(jù)的提交方式。分為 post / get
- name : 指定表單名稱(chēng)，用來(lái)區(qū)分頁(yè)面中的多個(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">
        用戶(hù)名：<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/>

        愛(ài)　好：
        <input type="checkbox" name="hobby"/> 看電影
        <input type="checkbox" name="hobby"/> 讀書(shū)
        <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、文檔類(lèi)型設(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 中，如果想查看上述三種類(lèi)型的基本格式，可以按如下步驟：new > file > 輸入文件名為 xxx.html > 分別輸入 html:4s / html:xt / html:5 然后回車(chē)即可

如果想查看某個(gè)頁(yè)面使用了兩種 HTML，可以右擊，然后選擇查看網(wǎng)頁(yè)源碼 ，然后查看<!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	定義文檔的頁(yè)眉
nav	定義導(dǎo)航鏈接部分
footer	定義文檔或者節(jié)的頁(yè)腳/底部
article	定義文章
section	定義文檔中的節(jié)（section/段落）
aside	定義其所處內(nèi)容之外的內(nèi)容/側(cè)邊
datalist	定義選項(xiàng)列表，與input 配合使用該標(biāo)簽，兩者通過(guò)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)寬度滿(mǎn)屏

效果圖如下：

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

4、新增的input type屬性值

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

類(lèi)型	示例	含義
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)語(yǔ)義化）
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="請(qǐng)輸入用戶(hù)名"/>`	提示文本，參考 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)輸入用戶(hù)名"/>
        <br/>
        <br/>
        <!--可以簡(jiǎn)化為 <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/>
        <!--在火狐瀏覽器中，如果沒(méi)有輸入內(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í)沒(méi)找到原因。

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="請(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>語(yǔ)文成績(jī)：<input type="number" max="100" min="0" value="0"/></label><br/>
            <label>數(shù)學(xué)成績(jī): <meter max="100" min="0" low="59" value="10"></meter></label><br/>
            <label>英語(yǔ)成績(jī): <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

用來(lái)插入各種多媒體，格式可以是 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)容是直接從愛(ài)奇藝網(wǎng)站下復(fù)制的。做法是：找到一個(gè)視頻 > 分享 > 點(diǎn)擊向下的箭頭（即更多）> 復(fù)制 html 代碼 即可

(2)、audio

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

常用屬性如下：

屬性	含義
src	定義音頻文件的路徑
autoplay	自動(dòng)播放
controls	顯示默認(rèn)播放控件
loop	循環(huán)播放
preload	頁(yè)面初始化時(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">
        提示語(yǔ)：您的瀏覽器不支持audio標(biāo)簽
    </audio>

    <br/>

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

注意，如果歌曲比較大，那么加載的過(guò)程會(huì)比較長(zhǎng)?。?！但是，只要設(shè)置了 autoplay ，加載完成后必然會(huì)自動(dòng)播放

(3)、video

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

常用屬性如下：

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

HTML:HTML 快速入門(mén)

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

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

三、HTML開(kāi)發(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）、水平線(xiàn)標(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）、無(wú)序列表 <ul>

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

（3）、自定義列表 <dl></dl>

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

12、表頭標(biāo)簽

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

14、網(wǎng)頁(yè)元素檢查（開(kāi)發(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、文檔類(lèi)型設(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

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

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

三、HTML開(kāi)發(fā)工具

四、html基本骨架

2、charset（字符編碼集）

五、HTML標(biāo)簽

1、排版標(biāo)簽

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

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

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

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

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

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

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

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

（2）、錨點(diǎn)

7、轉(zhuǎn)義字符

8、注釋標(biāo)簽

9、路徑

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

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

10、列表標(biāo)簽

（1）、無(wú)序列表 <ul>

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

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

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

14、網(wǎng)頁(yè)元素檢查（開(kāi)發(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、文檔類(lèi)型設(shè)定

2、字符設(shè)定

（2）、fieldset 示例

4、新增的input type屬性值

5、新增的input 屬性

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

（1）、embed

(2)、audio

(3)、video