簡(jiǎn)述
參考：HTML 教程- (HTML5 標(biāo)準(zhǔn))
HTML 語(yǔ)言的介紹、特點(diǎn)
HTML：超級(jí)文本標(biāo)記語(yǔ)言（HyperText Markup Language）
- “超文本” 就是指頁(yè)面內(nèi)可以包含圖片、鏈接等非文字內(nèi)容。
- “標(biāo)記” 就是使用標(biāo)簽的方法將需要的內(nèi)容包括起來。例如：
<a herf="sfdsfsd">www.itcast.cn</a> <img/>
HTML 用于編寫網(wǎng)頁(yè)。平時(shí)上網(wǎng)通過瀏覽器看到的大部分頁(yè)面都是由 html 編寫的。在瀏覽器訪問網(wǎng)頁(yè)時(shí)，可以通過“右鍵/查看網(wǎng)頁(yè)源代碼”看到具體的 html 代碼。
網(wǎng)頁(yè)內(nèi)容包含：HTML 代碼、CSS 代碼、JavaScript 代碼等內(nèi)容。
- HTML 代碼：用于展示需要顯示的數(shù)據(jù)。
- CSS 代碼：使顯示的數(shù)據(jù)更加好看。
- JavaScript 代碼：使整個(gè)頁(yè)面顯示的數(shù)據(jù)具有動(dòng)畫效果。
HTML 標(biāo)簽|元素
-
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)
-
“HTML 標(biāo)簽” 和 “HTML 元素” 通常都是描述同樣的意思
但是嚴(yán)格來講，一個(gè) HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽
-
HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如
<html> -
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如
<b>和</b>標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開始和結(jié)束標(biāo)簽也被稱為 開放標(biāo)簽 和 閉合標(biāo)簽
HTML 語(yǔ)言特點(diǎn)
-
HTML 文件不需要編譯，直接使用瀏覽器閱讀即可
-
HTML 文件的擴(kuò)展名是 *.html 或 *.htm
-
HTML 結(jié)構(gòu)都是由標(biāo)簽組成
-
標(biāo)簽名預(yù)先定義好的，只需要了解其功能即可
-
標(biāo)簽名不區(qū)分大小寫
例如：
<A name="屬性值" age="18" >標(biāo)簽體</a> -
通常情況下標(biāo)簽由開始標(biāo)簽和結(jié)束標(biāo)簽組成
例如：
<a 屬性名="屬性值" href="01_html">標(biāo)簽體</a> -
如果沒有結(jié)束標(biāo)簽，建議以 / 結(jié)尾。例如：
<img />
-
-
HTML 結(jié)構(gòu)包括兩部分：head（頭）和（body）體
-
html 和 xml 的區(qū)別
- html:
- 給用戶展示數(shù)據(jù)（顯示文字，顯示圖片…）
- 標(biāo)簽都是預(yù)定義好的，都是固定的，例如 a，img，hr…
- 使用瀏覽器打開 html 文檔，會(huì)自動(dòng)解析
- xml:
- 用來存儲(chǔ)數(shù)據(jù)
- 標(biāo)簽可以隨意編寫起名
- 使用 dom4j 解析 xml 文檔的內(nèi)容
- html:
HTML 頁(yè)面實(shí)例解析
-
<!DOCTYPE html>：聲明為 HTML5 文檔。聲明有助于瀏覽器中正確顯示網(wǎng)頁(yè)。網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明 HTML 的版本，瀏覽器就能正確顯示網(wǎng)頁(yè)內(nèi)容。
-
<html>：元素是 HTML 頁(yè)面的根元素，理論上一個(gè)頁(yè)面只需要一個(gè)，由頭和體組成。 -
<head>：頭標(biāo)簽，用于引入腳本、導(dǎo)入樣式、提供元信息等。一般情況下頭標(biāo)簽的內(nèi)容在瀏覽器端都不顯示文檔的元（meta）數(shù)據(jù)，如
-
<meta charset="utf-8">，定義網(wǎng)頁(yè)編碼格式為 utf-8 -
<title>：元素描述了文檔的標(biāo)題
-
-
<body>：體標(biāo)簽，是整個(gè)網(wǎng)頁(yè)的主體，元素包含了可見的頁(yè)面內(nèi)容 -
<h1>：元素定義一個(gè)大標(biāo)題 -
<p>：元素定義一個(gè)段落
**注：**在瀏覽器的頁(yè)面上使用鍵盤上的 F12 按鍵開啟調(diào)試模式，就可以看到組成標(biāo)簽。
Idea 創(chuàng)建 html 項(xiàng)目（圖示）
使用“記事本”開發(fā)效率低，可以使用 IDEA 提供模板代碼直接開發(fā) hmtl
瀏覽器內(nèi)核
瀏覽器內(nèi)核：瀏覽器的解析引擎
當(dāng)使用瀏覽器打開 html 文件的時(shí)候，瀏覽器會(huì)使用內(nèi)置的解析引擎（內(nèi)核），對(duì) html 頁(yè)面中的標(biāo)簽進(jìn)行解析，把 html 頁(yè)面中的標(biāo)簽解析為能看懂的內(nèi)容
瀏覽器分類：
- IE 內(nèi)核的瀏覽器（QQ，360，遨游，世紀(jì)之窗等殼子瀏覽器）：不建議使用，IE9 及以下版本不支持 html5
- 火狐內(nèi)核的瀏覽器：建議使用
- 谷歌（蘋果）內(nèi)核瀏覽器：建議使用
HTML 常用基礎(chǔ)標(biāo)簽
標(biāo)簽列表（含詳解）
傳送門
基礎(chǔ)標(biāo)簽
-
<!DOCTYPE>：定義文檔類型 -
<html>：定義一個(gè) HTML 文檔 -
<title>：為文檔定義一個(gè)標(biāo)題 -
<body>：定義文檔的主體 -
<h1>to<h6>：定義 HTML 標(biāo)題，標(biāo)題中的文字會(huì)自動(dòng)的加粗行間元素：會(huì)獨(dú)自占用 html 中的一行
<h1>標(biāo)題文字</h1>最大<h6>標(biāo)題文字</h6>最小 -
<p>：定義一個(gè)段落 -
<br>：定義簡(jiǎn)單的折行 -
<hr>：定義水平線，可以把頁(yè)面分成上下兩部分 -
<!--...-->：定義一個(gè)注釋注釋特點(diǎn)：
- 瀏覽器查看時(shí)，不顯示。右鍵查看源碼可以看到。
- 注釋標(biāo)簽不能嵌套。
- 注釋特殊用法，為不同的瀏覽器提供不同的解決方案 （了解）
格式標(biāo)簽
格式化標(biāo)簽的作用：用于對(duì)文字進(jìn)行格式化
常用標(biāo)簽：
-
<b>：定義粗體文本 -
<i>：定義斜體文本 -
<u>：定義下劃線文本 -
<font>：HTML5 不再支持， HTML 4.01 已廢棄。 定義文本的字體、尺寸和顏色注意：
-
在 html 中同級(jí)的標(biāo)簽是可以相互嵌套使用的
例如：
<b><i><font></font></i></b>
圖片標(biāo)簽
圖片標(biāo)簽作用：用于在頁(yè)面中顯示一個(gè)圖片
常用標(biāo)簽：
-
<img/>：定義圖像，自閉和標(biāo)簽常用屬性：
- src：設(shè)置圖片的路徑(建議使用相對(duì)路徑)
- title：設(shè)置圖片的標(biāo)題，鼠標(biāo)移動(dòng)到圖片上，會(huì)顯示標(biāo)題
- alt：圖片丟失，顯示文字
- height：設(shè)置圖片的高度，單位是像素px
- width：設(shè)置圖片的寬度，單位是像素px
示例：
<img src="img/2.jpg" height="200px" width="150px" title="我是一個(gè)美女"/>
列表標(biāo)簽
列表標(biāo)簽作用：用于在頁(yè)面中顯示一個(gè)列表
常用標(biāo)簽：
-
<ol>：定義一個(gè)有序列表格式：
<ol> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> ... <li>列表項(xiàng)</li> </ol>屬性：
- type：用于設(shè)置列表顯示的文字(1，I，A，a…)，缺省默認(rèn)是阿拉伯?dāng)?shù)字
-
<ul>：定義一個(gè)無序列表格式：
<ul> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> <li>列表項(xiàng)</li> ... <li>列表項(xiàng)</li> </ul>屬性：
-
type：用于設(shè)置列表顯示的形狀
屬性值： disc實(shí)心圓（不寫默認(rèn)）、 square方塊、circle空心圓
-
-
<li>：定義一個(gè)列表標(biāo)簽中的列表項(xiàng)注意：
- 單獨(dú)書寫 ol 和 ul 標(biāo)簽沒有意義，必須和列表項(xiàng) li 標(biāo)簽一起使用
- 每個(gè) li 標(biāo)簽都會(huì)占用 html 中的一行(行級(jí)元素)
超鏈接標(biāo)簽
超鏈接標(biāo)簽作用：用于頁(yè)面的跳轉(zhuǎn)，可以由一個(gè)頁(yè)面跳轉(zhuǎn)到另外一個(gè)頁(yè)面
常用標(biāo)簽：
-
<a>：定義一個(gè)鏈接使用示例：
<a>文字|圖片</a> <a href="http://www.itheima.com" target="_blank"> <img src="img/logo2.png"> </a>屬性：
-
href：設(shè)置跳轉(zhuǎn)的路徑
屬性值：
- 可以是其他的頁(yè)面（.html，.jsp）
- 可以是頁(yè)面的 url 地址（http://www.baidu.com）
-
target：設(shè)置跳轉(zhuǎn)的方式
屬性值：
- _self：默認(rèn)屬性，在當(dāng)前頁(yè)面打開新的鏈接
- _blank：在新的頁(yè)面打開新的鏈接
-
表格標(biāo)簽
HTML 表格由 <table> 標(biāo)簽以及一個(gè)或多個(gè) <tr>、<th> 或 <td> 標(biāo)簽組成。
-
<table>：定義一個(gè)表格。父標(biāo)簽，相當(dāng)于整個(gè)表格的容器。常用屬性：
- border ：表格邊框的寬度。單位像素 px
- width ：表格的寬度。單位像素 px
- cellpadding ：?jiǎn)卧呇嘏c其內(nèi)容之間的空白。單位像素 px
- cellspacing ：?jiǎn)卧裰g的空白。 單位像素 px
- bgcolor ：表格的背景顏色。
-
<tr>：定義表格中的行 -
<td>：定義表格中的單元（一個(gè)列）常用屬性：
- colspan ：?jiǎn)卧窨蓹M跨的列數(shù)
- rowspan ：?jiǎn)卧窨蓹M跨的行數(shù)
- align ：?jiǎn)卧駜?nèi)容的水平對(duì)齊方式，取值：left 左 、right 右、center 居中
- nowrap ：?jiǎn)卧裰械膬?nèi)容是否折行（自動(dòng)換行）
-
<th>：定義表格中的表頭單元格。單元格內(nèi)的內(nèi)容默認(rèn)居中、加粗。
實(shí)體字符（轉(zhuǎn)義字符）
常用：
-
：半個(gè)英語(yǔ)字母英文空格 -
 ： 一個(gè)漢字中文空格 -
<：小于號(hào) -
>：大于號(hào) -
&：& 符號(hào) -
×：× 叉號(hào) -
¥：￥ 人民幣符號(hào) -
$：美元符號(hào)
樣式/節(jié) 標(biāo)簽（style、dev、span）
作用：用于頁(yè)面的布局，可以把頁(yè)面分成一塊一塊的
頁(yè)面的流行的布局方式：div 標(biāo)簽和 span 標(biāo)簽 + CSS
div 標(biāo)簽和 span 標(biāo)簽一般都是和 CSS（層疊樣式表）一起使用，否則沒有意義
常用標(biāo)簽：
-
<style>：定義文檔的樣式信息（CSS） -
<div>：行級(jí)（間）標(biāo)簽，會(huì)霸占 html 中的一行 -
<span>：行內(nèi)標(biāo)簽，只會(huì)占用一行中的一部分（占用的大小和里邊的內(nèi)容多少有關(guān)）
按鈕標(biāo)簽
html 有兩種按鈕：
-
button 按鈕
button 按鈕的按鈕文字（按鈕名稱）就是
<button>和</button>間的內(nèi)容<button>按鈕文字</button> -
input 按鈕
input 按鈕的按鈕文字是由 value 屬性控制的，是 value 屬性的屬性值
<input type="button value="按鈕一" />
form 表單標(biāo)簽
form 表單常用標(biāo)簽
-
<form>：定義一個(gè) HTML 表單，用于用戶輸入單獨(dú)書寫沒有意義，需要配合子標(biāo)簽一起使用
常用屬性：
- action：設(shè)置表單提交的路徑，路徑一般都是 java 中的某一個(gè)類（沒有服務(wù)器，寫 #）
- method：設(shè)置表單的提交方式（get，post），不寫 method 默認(rèn)都是 get 方法
示例：
<form action="#" method="get"> -
<input>：form 標(biāo)簽的子標(biāo)簽，定義一個(gè)輸入控件。用于獲得用戶輸入信息，type 屬性值不同，搜集方式不同。
type 屬性：
-
text：普通文本（一行）
-
password：密碼輸入框，里邊的密碼以黑色的小圓點(diǎn)顯示
-
radio：?jiǎn)芜x框
注：
-
搭配屬性 name：給標(biāo)簽設(shè)置一個(gè)名字
-
同名的 radio 標(biāo)簽互斥，只能選擇一個(gè)
-
表單標(biāo)簽的屬性 checked：可以給單選框|多選框設(shè)置一個(gè)默認(rèn)選中的值
示例：
<input type="radio" name="sex" checked="checked">
-
-
checkbox：多選框
-
file：上傳文件
-
image：上傳圖片使用
配合屬性：
- src：設(shè)置要上傳圖片的路徑
- height：設(shè)置圖片的高度，單位像素
- width：設(shè)置圖片的寬度，單位像素
示例：
<input type="image" src="img/2.jpg" height="200px" width="170px"> -
hidden：隱藏域，存儲(chǔ)數(shù)據(jù)使用，不會(huì)在瀏覽器頁(yè)面顯示
配合屬性 value：給標(biāo)簽添加默認(rèn)值
示例：
<input type="hidden" value="18"> -
button：普通按鈕，配合 js 使用
配合屬性 value：給標(biāo)簽添加默認(rèn)值
示例：
<input type="button" value="一個(gè)按鈕"> -
reset：重置按鈕，把表單恢復(fù)到默認(rèn)狀態(tài)（清空表單）
-
submit：提交按鈕
根據(jù) form 標(biāo)簽的屬性 action 路徑，把表單的數(shù)據(jù)，提交到服務(wù)器
-
-
<select>：form 標(biāo)簽的子標(biāo)簽，定義選擇列表（下拉列表）可以讓用戶在多個(gè)值中選擇一個(gè)
注意：需要配合子標(biāo)簽 option（下拉選的列表項(xiàng)）一起使用
select 標(biāo)簽的常用屬性：
-
name 屬性：發(fā)送給服務(wù)器的名稱
-
multiple 屬性：不寫默認(rèn)單選，取值為“multiple”表示多選。
示例：
<select name="city" multiple="multiple">一般不用多選
-
size 屬性：多選時(shí)，可見選項(xiàng)的數(shù)目。
<option>：select 標(biāo)簽的子標(biāo)簽，定義選擇列表中的選項(xiàng)，即下拉列表中的一個(gè)選項(xiàng)（一個(gè)條目）option 標(biāo)簽的屬性：
- selected 屬性：勾選當(dāng)前列表項(xiàng)
- value 屬性：發(fā)送給服務(wù)器的選項(xiàng)值
-
-
<textarea>：form 標(biāo)簽的子標(biāo)簽，定義多行的文本輸入控件，可以讓用戶輸入多行文本常用屬性：
- rows：設(shè)置文本域默認(rèn)顯示的行數(shù)
-
cols：設(shè)置文本域默認(rèn)顯示的列數(shù)
注：多行文本域使用的不是特別多，已經(jīng)被文本編輯器給取代了
form 表單的通用屬性
-
name 屬性：元素名
如果需要表單數(shù)據(jù)提交到服務(wù)器，必須提供 name 屬性值，服務(wù)器通過屬性值獲得提交的數(shù)據(jù)。
-
value 屬性：設(shè)置 input 標(biāo)簽的默認(rèn)值。submit 和 reset 為按鈕顯示為按鈕名稱
注意：除了文本輸入域（text，password，textarea）外的其他標(biāo)簽需要設(shè)置 value 屬性值
-
checked 屬性：?jiǎn)芜x框或復(fù)選框被選中
-
readonly 屬性：是否只讀
-
disabled 屬性：是否可用
-
placeholder 屬性：html5 的新特性，給標(biāo)簽添加一個(gè)默認(rèn)值。輸入數(shù)據(jù)隱藏默認(rèn)值，刪除數(shù)據(jù)會(huì)顯示默認(rèn)值
form 表單的提交方式
form 標(biāo)簽的 method 屬性，可以設(shè)置表單的提交方式
-
get（不寫 method 屬性，默認(rèn)）：當(dāng)點(diǎn)擊提交按鈕的時(shí)候，會(huì)把表單中的數(shù)據(jù)追加到瀏覽器的地址欄中提交到服務(wù)器
格式：
xxx.html?k=v&k=v-
會(huì)在 .html 的后邊添加一個(gè) ?，? 后邊就是表單中提交的數(shù)據(jù)
-
數(shù)據(jù)是以鍵值對(duì)的方式提交的，多個(gè)鍵值對(duì)之間使用 & 符號(hào)連接
-
健值對(duì)：k=v
-
k：標(biāo)簽的 name 屬性值
name=“username”，則 k => username
name=“password”，則 k=> password
-
v：標(biāo)簽的 value 屬性值，文本輸入框則輸入框中輸入的內(nèi)容
value=“男”，則 v ==> 男
注意：除了文本輸入框，其他的標(biāo)簽若要在提交時(shí)發(fā)送到服務(wù)器，必須有 value 屬性值
-
示例：
- 標(biāo)簽：
<form action="#" method="get"> - 提交后地址欄：
...form表單的提交方式.html?username=rose&password=4321&sex=on&hobby=喝酒&city=杭州#
弊端：
- 把數(shù)據(jù)追加到瀏覽器的地址欄中，會(huì)暴漏敏感信息（密碼）
- 瀏覽器的地址欄的長(zhǎng)度是有限制的，提交的數(shù)據(jù)大小有限制，不能提交大的文件（最多能提交幾 kb 的數(shù)據(jù)）
-
-
post：會(huì)把提交的數(shù)據(jù)隱藏在請(qǐng)求服務(wù)器的請(qǐng)求體中（java web）
好處：
- 安全，用于無法直接看到提交的數(shù)據(jù)
- 可以提交大的文件
入門案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表單標(biāo)簽的屬性</title>
</head>
<body>
<form action="#" method="get">
請(qǐng)輸入用戶名:<input type="text" name="username" value="張三"/><br/>
請(qǐng)輸入用戶名:<input type="text" name="username" value="張三" readonly="readonly"/><br/>
請(qǐng)輸入用戶名:<input type="text" name="username" value="張三" disabled="disabled"/><br/>
<hr/>
用戶名:<input type="text" name="username" placeholder="請(qǐng)輸入姓名"/><br/>
密碼:<input type="password" name="password" placeholder="請(qǐng)輸入密碼"/><br/>
請(qǐng)選擇您的出生日期:<input type="date" name="date"><br/>
請(qǐng)選擇您的性別:
男<input type="radio" name="sex" checked="checked" value="男">
女<input type="radio" name="sex" value="女"><br/>
<!--- checkbox:多選框-->
請(qǐng)選擇您的愛好:
抽煙<input type="checkbox" name="hobby" value="抽煙">
喝酒<input type="checkbox" name="hobby" value="喝酒">
燙頭<input type="checkbox" checked="checked" name="hobby" value="燙頭"><br/>
<select name="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option>廣州</option>
<option>深圳</option>
<option selected="selected">杭州</option>
</select>
<select name="city" multiple="multiple">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option>廣州</option>
<option>深圳</option>
<option selected="selected">杭州</option>
</select>
<select name="city" multiple="multiple" size="2">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option>廣州</option>
<option>深圳</option>
<option selected="selected">杭州</option>
</select>
</form>
</body>
</html>
全局屬性
詳見：傳送門
常見全局屬性：
- class ：規(guī)定元素的類名（classname）
- id ：規(guī)定元素的唯一 id
- title ：規(guī)定元素的額外信息（可在工具提示中顯示）
- draggable ：指定某個(gè)元素是否可以拖動(dòng)
HTML 事件屬性
HTML 4 的新特性之一是可以使 HTML 事件觸發(fā)瀏覽器中的行為，比方說當(dāng)用戶點(diǎn)擊某個(gè) HTML 元素時(shí)啟動(dòng)一段 JavaScript。
表單事件
表單事件在 HTML 表單中觸發(fā) （適用于所有 HTML 元素，但該 HTML 元素需在 form 表單內(nèi)）：
| 屬性 | 值 | 描述 | 備注 |
|---|---|---|---|
| onblur | script | 當(dāng)元素失去焦點(diǎn)時(shí)運(yùn)行腳本 | |
| onchange | script | 當(dāng)元素改變時(shí)運(yùn)行腳本 | |
| oncontextmenu | script | 當(dāng)觸發(fā)上下文菜單時(shí)運(yùn)行腳本 | New |
| onfocus | script | 當(dāng)元素獲得焦點(diǎn)時(shí)運(yùn)行腳本 | |
| onformchange | script | 當(dāng)表單改變時(shí)運(yùn)行腳本 | New |
| onforminput | script | 當(dāng)表單獲得用戶輸入時(shí)運(yùn)行腳本 | New |
| oninput | script | 當(dāng)元素獲得用戶輸入時(shí)運(yùn)行腳本 | New |
| oninvalid | script | 當(dāng)元素?zé)o效時(shí)運(yùn)行腳本 | New |
| onreset | script | 當(dāng)表單重置時(shí)運(yùn)行腳本。HTML 5 不支持。 | |
| onselect | script | 當(dāng)選取元素時(shí)運(yùn)行腳本 | |
| onsubmit | script | 當(dāng)提交表單時(shí)運(yùn)行腳本 |
鍵盤事件
| 屬性 | 值 | 描述 |
|---|---|---|
| onkeydown | script | 當(dāng)按下按鍵時(shí)運(yùn)行腳本 |
| onkeypress | script | 當(dāng)按下并松開按鍵時(shí)運(yùn)行腳本 |
| onkeyup | script | 當(dāng)松開按鍵時(shí)運(yùn)行腳本 |
鼠標(biāo)事件
通過鼠標(biāo)觸發(fā)事件，類似用戶的行為
| 屬性 | 值 | 描述 | 備注 | |
|---|---|---|---|---|
| onclick | script | 當(dāng)單擊鼠標(biāo)時(shí)運(yùn)行腳本 | ||
| ondblclick | script | 當(dāng)雙擊鼠標(biāo)時(shí)運(yùn)行腳本 | ||
| ondrag | script | 當(dāng)拖動(dòng)元素時(shí)運(yùn)行腳本 | New | |
| ondragend | script | 當(dāng)拖動(dòng)操作結(jié)束時(shí)運(yùn)行腳本 | New | |
| ondragenter | script | 當(dāng)元素被拖動(dòng)至有效的拖放目標(biāo)時(shí)運(yùn)行腳本 | New | |
| ondragleave | script | 當(dāng)元素離開有效拖放目標(biāo)時(shí)運(yùn)行腳本 | New | |
| ondragover | script | 當(dāng)元素被拖動(dòng)至有效拖放目標(biāo)上方時(shí)運(yùn)行腳本 | New | |
| ondragstart | script | 當(dāng)拖動(dòng)操作開始時(shí)運(yùn)行腳本 | New | |
| ondrop | script | 當(dāng)被拖動(dòng)元素正在被拖放時(shí)運(yùn)行腳本 | New | |
| onmousedown | script | 當(dāng)按下鼠標(biāo)按鈕時(shí)運(yùn)行腳本 | ||
| onmousemove | script | 當(dāng)鼠標(biāo)指針移動(dòng)時(shí)運(yùn)行腳本 | ||
| onmouseout | script | 當(dāng)鼠標(biāo)指針移出元素時(shí)運(yùn)行腳本 | ||
| onmouseover | script | 當(dāng)鼠標(biāo)指針移至元素之上時(shí)運(yùn)行腳本 | ||
| onmouseup | script | 當(dāng)松開鼠標(biāo)按鈕時(shí)運(yùn)行腳本 | ||
| onmousewheel | script | 當(dāng)轉(zhuǎn)動(dòng)鼠標(biāo)滾輪時(shí)運(yùn)行腳本 | New | |
| onscroll | script | 當(dāng)滾動(dòng)元素的滾動(dòng)條時(shí)運(yùn)行腳本 | New |
其他事件
詳見：傳送門
-
窗口事件屬性
由窗口觸發(fā)該事件（適用于
<body>標(biāo)簽） -
多媒體事件
通過視頻（videos），圖像（images）或者音頻（audio） 觸發(fā)該事件，多應(yīng)用于 HTML 媒體元素比如
<audio>，<embed>，<img>，<object>和<video>
字符集
字符集的介紹及基本使用
-
HTML charset 屬性
如需正確地顯示 HTML 頁(yè)面，瀏覽器必須知道使用何種字符集。 網(wǎng)頁(yè)中的字符集使用
<meta>標(biāo)簽來指定：<meta charset="UTF-8">注：
-
H5 默認(rèn)的字符集編碼：UTF-8，之前的大部分默認(rèn)的字符編碼為：ISO-8859-1
-
萬維網(wǎng)早期使用的字符集是 ASCII。ASCII 支持 0-9 的數(shù)字，大寫和小寫英文字母表，以及一些特殊字符。
由于很多國(guó)家使用的字符并不屬于 ASCII，大多數(shù)瀏覽器默認(rèn)的字符集是 ISO-8859-1，再后來默認(rèn)為 UTF-8
完整的 ASCII 參考手冊(cè)
完整的 ISO-8859-1 參考手冊(cè)
-
-
ISO 字符集
ISO 字符集是國(guó)際標(biāo)準(zhǔn)組織（ISO）針對(duì)不同的字母表/語(yǔ)言定義的標(biāo)準(zhǔn)字符集。
世界各地使用的不同字符集詳見 傳送門
-
Unicode 標(biāo)準(zhǔn)
由于 ISO 字符集都有容量限制，而且不兼容多語(yǔ)言環(huán)境，Unicode 聯(lián)盟開發(fā)了 Unicode 標(biāo)準(zhǔn)。
Unicode 標(biāo)準(zhǔn)涵蓋了世界上的所有字符、標(biāo)點(diǎn)和符號(hào)。
不論是何種平臺(tái)、程序或語(yǔ)言，Unicode 都能夠進(jìn)行文本數(shù)據(jù)的處理、存儲(chǔ)和交換。
Unicode 可以被不同的字符集兼容。最常用的編碼方式是 UTF-8 和 UTF-16
字符集 描述 UTF-8 UTF8 中的字符可以是 1-4 個(gè)字節(jié)長(zhǎng)。UTF-8 可以表示 Unicode 標(biāo)準(zhǔn)中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是網(wǎng)頁(yè)和電子郵件的首選編碼。 UTF-16 16 比特的 Unicode 轉(zhuǎn)換格式是一種 Unicode 可變字符編碼，能夠?qū)θ?Unicode 指令表進(jìn)行編碼。UTF-16 主要被用于操作系統(tǒng)和環(huán)境中，比如微軟的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字節(jié)代碼環(huán)境。 注：
- 最前面的 256 個(gè) Unicode 字符集字符對(duì)應(yīng)于 256 個(gè) ISO-8859-1 字符
- 所有 HTML 4 瀏覽器都已支持 UTF-8，而所有 XHTML 和 XML 處理器支持 UTF-8 和 UTF-16
-
UTF-8 字符
很多 UTF-8 字符無法在鍵盤上輸入，但可以使用數(shù)字（稱為實(shí)體編號(hào)）來表示：A 為 65，B 為 66，C 為 67
注意：實(shí)體編號(hào)需要以 &# 開頭并以分號(hào) ; 結(jié)尾，這樣才能正確顯示一個(gè)字符。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <p>顯示結(jié)果： A B C</p> <p>顯示結(jié)果： A B C</p> </body> </html>
Emoji
-
Emoji 是來自 UTF-8 字符集的字符：?? ?? ??
表情符號(hào)（英語(yǔ)：emoji，日語(yǔ)：絵文字／えもじ emoji），是使用在網(wǎng)頁(yè)和聊天中的形意符號(hào)，最初是日本在無線通信中所使用的視覺情感符號(hào)（圖畫文字）。表情意指面部表情，圖標(biāo)則是圖形標(biāo)志的意思，可用來代表多種表情，如笑臉表示笑、蛋糕表示食物等。 Emoji 看起來像一張圖片或圖標(biāo)，其實(shí)不是。
Emoji 實(shí)際上是 UTF-8 (Unicode) 字符集上的字符。UTF-8 幾乎涵蓋了世界上所有的字符和符號(hào)。
-
Emoji 是字符，但無法在鍵盤上輸入，可以使用數(shù)字（稱為實(shí)體編號(hào)）來使用它：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> </head> <body> <h1>Emoji 標(biāo)簽符號(hào)</h1> <p>可以通過 font-size 屬性，像設(shè)置字體大小一樣，設(shè)置表情的大小。</p> <p style="font-size:48px"> 😀 😄 😍 💗 </p> </body> </html> -
Emoji 表情符號(hào)
下表列出來一些 Emoji 表情符號(hào)：
Emoji 值 ?? 🗻?? 🗼?? 🗽?? 🗾?? 🗿?? 😀?? 😁?? 😂?? 😃?? 😄?? 😅
URL 編碼
-
URL 編碼會(huì)將字符轉(zhuǎn)換為可通過因特網(wǎng)傳輸?shù)母袷健?/p>
-
URL 只能使用 ASCII 字符集 來通過因特網(wǎng)進(jìn)行發(fā)送。
由于 URL 常常會(huì)包含 ASCII 集合之外的字符，URL 必須轉(zhuǎn)換為有效的 ASCII 格式。
URL 編碼使用 “%” 其后跟隨兩位的十六進(jìn)制數(shù)來替換非 ASCII 字符。
URL 不能包含空格。URL 編碼通常使用 + 來替換空格。文章來源：http://www.zghlxwxcb.cn/news/detail-829243.html
-
ASCII 字符 URL 編碼參考手冊(cè)：傳送門文章來源地址http://www.zghlxwxcb.cn/news/detail-829243.html
到了這里，關(guān)于HTML 入門指南的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
