干貨：詳解HTML5中常見(jiàn)的五大全局屬性

TML5中新增了“全部屬性”的概念。所謂全局屬性它是指可以對(duì)任何元素都可以使用的屬性，今天為大家詳細(xì)介紹三種常見(jiàn)的全局屬性。

contentEditable屬性

contentEditable是由微軟開(kāi)發(fā)。被其他瀏覽器反編譯并投入應(yīng)用的一個(gè)全局屬性。它的主要功能是是否允許用戶編輯元素的內(nèi)容，被編輯元素必須是獲得鼠標(biāo)焦點(diǎn)的元素，而且在點(diǎn)擊后要提供一個(gè)插入符號(hào)，提示用戶該元素中內(nèi)容允許編輯。contentEditable屬性是一個(gè)布爾值屬性，可以指定為ture或false。該屬性還有一個(gè)隱藏屬性的inherit狀態(tài)，為true是允許用戶編輯；為false時(shí)元素不能被用戶編輯；沒(méi)有指定時(shí)則由inherit狀態(tài)決定，如果父元素是可編輯的，該元素也是可編輯的。支持contentEditable屬性元素有A、DD、DIR、DIV、BUTTON、FORM、DL、DT、FONT、DFN、hn、CODE、ABBR等。

designMode屬性

designMode屬性主要功能是指定整個(gè)頁(yè)面是否可編輯，頁(yè)面可編輯時(shí)，頁(yè)面中任何支持contentEditable屬性的元素都變成了可編輯狀態(tài)。designMode屬性有兩個(gè)值“on”和"off"。屬性為“on”時(shí)，頁(yè)面可編輯；屬性為“off”時(shí)，頁(yè)面不可編輯。不過(guò)各個(gè)瀏覽器支持情況也不一樣，IE8不支持designMode屬性，IE9支持designMode屬性，fixfox和Opera瀏覽器支持designMode屬性、Chrom和Safari瀏覽器在內(nèi)嵌frame支持designMode屬性。

hidden屬性

在HTML5中所有的元素允許使用hidden屬性。它類(lèi)似input元素中的hidden屬性，使元素處于不可見(jiàn)狀態(tài)。hidden屬性設(shè)置為ture，元素處于不可見(jiàn)狀態(tài)；hidden屬性設(shè)置為false時(shí)元素處于可見(jiàn)狀態(tài)。

spellcheck屬性

spellcheck屬性主要是針對(duì)input元素和textarea這兩個(gè)文本輸入框提供的新屬性，它的功能是對(duì)輸入內(nèi)容進(jìn)行拼寫(xiě)和語(yǔ)法檢查。它有個(gè)特殊的地方，就是必須聲明屬性值true或者false。如果元素是readonly屬性或者disabled屬性為true，不執(zhí)行拼寫(xiě)檢查。Firfox、IE、Chrome、Safari等瀏覽器都支持該屬性。

tabindex屬性

tabindex在程序開(kāi)發(fā)概念，是指不斷敲擊Tab鍵讓窗口或頁(yè)面中控件獲得焦點(diǎn)，對(duì)窗口的控件進(jìn)行遍歷，每個(gè)控件的tabindex表示第幾個(gè)被訪問(wèn)的。之前這個(gè)屬性在編輯網(wǎng)頁(yè)很有用，現(xiàn)在是根據(jù)元素所在位置決定遍歷順序，所以就不需要了。不過(guò)tabindex拎一個(gè)作用，只有鏈接元素與表單元素可以通過(guò)按鍵獲得焦點(diǎn)。如果對(duì)元素使用了tabindex屬性后，也能讓元素獲得焦點(diǎn)，執(zhí)行focus（）語(yǔ)句時(shí)，可以讓元素獲得焦點(diǎn)了。但是這樣會(huì)出現(xiàn)一個(gè)問(wèn)題，元素會(huì)通過(guò)tab獲得焦點(diǎn)，而這時(shí)候我們不想讓該元素獲得焦點(diǎn)這不是我們想要的結(jié)果。

把元素的tabindex值設(shè)定為負(fù)數(shù)后就可以解決這個(gè)問(wèn)題了。tabindex為負(fù)值時(shí)，可以通過(guò)編程的方式讓元素獲得焦點(diǎn)，但按下Tab鍵該元素就不能獲得焦點(diǎn)了，這在復(fù)雜的頁(yè)面是非常有用的。HTML5中巧妙運(yùn)用該屬性發(fā)揮了很大的作用。

如果大家喜歡這篇文章的話，希望大家能夠收藏，轉(zhuǎn)發(fā) 謝謝！更多相關(guān)資訊可以關(guān)注西安華美校區(qū)，免費(fèi)獲得java零基礎(chǔ)教程！額外附送excel教程！

例

簡(jiǎn)單的三框架頁(yè)面：

</frameset>

瀏覽器支持

所有主流瀏覽器都支持 <frame> 標(biāo)簽。

標(biāo)簽定義及使用說(shuō)明

HTML5 不支持 <frame> 標(biāo)簽。

<frame> 標(biāo)簽定義 <frameset> 中的子窗口（框架）。

<frameset> 中的每個(gè) <frame> 都可以設(shè)置不同的屬性，比如 border、scrolling, noresize 等等。

注釋：如果您希望驗(yàn)證包含框架的頁(yè)面，請(qǐng)確保 <!DOCTYPE> 被設(shè)置為 "HTML Frameset DTD" 或者 "XHTML Frameset DTD" 。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <frame> 標(biāo)簽，HTML 4.01 支持 <frame> 標(biāo)簽。

HTML 與 XHTML 之間的差異

在 HTML 中，<frame> 標(biāo)簽沒(méi)有結(jié)束標(biāo)簽。在 XHTML 中，<frame> 標(biāo)簽必須被正確地關(guān)閉。

可選的屬性

屬性	值	描述
frameborder	01	HTML5 不支持。規(guī)定是否顯示框架周?chē)倪吙颉?/td>
longdesc	URL	HTML5 不支持。規(guī)定一個(gè)包含有關(guān)框架內(nèi)容的長(zhǎng)描述的頁(yè)面。
marginheight	pixels	HTML5 不支持。規(guī)定框架的上方和下方的邊距。
marginwidth	pixels	HTML5 不支持。規(guī)定框架的左側(cè)和右側(cè)的邊距。
name	name	HTML5 不支持。規(guī)定框架的名稱。
noresize	noresize	HTML5 不支持。規(guī)定無(wú)法調(diào)整框架的大小。
scrolling	yesnoauto	HTML5 不支持。規(guī)定是否在框架中顯示滾動(dòng)條。
src	URL	HTML5 不支持。規(guī)定在框架中顯示的文檔的 URL。

標(biāo)準(zhǔn)屬性

在 HTML 4.01 中，<frame> 標(biāo)簽支持如下標(biāo)準(zhǔn)屬性：

屬性	值	描述
class	classname	規(guī)定元素的類(lèi)名
id	id	規(guī)定元素的唯一 id
style	style_definition	規(guī)定元素的行內(nèi)樣式
title	text	規(guī)定元素的額外信息

如需完整的描述，請(qǐng)?jiān)L問(wèn)標(biāo)準(zhǔn)屬性。

事件屬性

根據(jù) W3C 的標(biāo)準(zhǔn)，在 HTML 4.01 中，<frame> 標(biāo)簽不支持任何的事件屬性。

但是，所有的瀏覽器都支持 onload 事件。

如需完整的描述，請(qǐng)?jiān)L問(wèn)事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

么是html？

html是一種簡(jiǎn)單易記，功能強(qiáng)大的標(biāo)記語(yǔ)言，它是學(xué)習(xí)前端知識(shí)的第一站，也是所有WEB開(kāi)發(fā)者、乃至產(chǎn)品經(jīng)理、運(yùn)營(yíng)人員必須學(xué)習(xí)的一項(xiàng)基礎(chǔ)內(nèi)容。

為什么學(xué)習(xí)html5？

1. html5是WEB開(kāi)發(fā)者，必須掌握的基礎(chǔ)知識(shí)；

2. html5應(yīng)用廣泛，它可以用來(lái)開(kāi)發(fā)網(wǎng)站、WEB應(yīng)用、WEB游戲等等，如微信小程序、移動(dòng)端小游戲等都跟html5有關(guān)；

3. html5很容易掌握，花幾個(gè)小時(shí)就可以掌握它；

課程特點(diǎn)

1. 講師講課風(fēng)格幽默，整個(gè)學(xué)習(xí)過(guò)程輕松有趣，不枯燥、不乏味；

2. 以就業(yè)為導(dǎo)向，與實(shí)戰(zhàn)相結(jié)合，滿足大部分學(xué)員的學(xué)習(xí)需求；

學(xué)習(xí)建議

1. 學(xué)完每一節(jié)課程，動(dòng)手將代碼打一遍；

2. 舉一反三，學(xué)完每節(jié)課程，思考一下它的應(yīng)用場(chǎng)景；

3. 完成本門(mén)課程，試著自己寫(xiě)一個(gè)純html5的網(wǎng)頁(yè)；

適宜人群

1. 零基礎(chǔ)學(xué)員；

2. 前端愛(ài)好者；

1、DOCTYPE 描述文檔的類(lèi)型，規(guī)定web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。

網(wǎng)頁(yè)可以使用的具體版本，網(wǎng)頁(yè)中可以使用那些標(biāo)記，每個(gè)版本的DTD版本均有不同

2、<html></html> 網(wǎng)頁(yè)文檔中的根標(biāo)記

html 標(biāo)簽有三個(gè)特殊的屬性　　

manifest 指定網(wǎng)頁(yè)緩存文件，可以讓用戶離線的時(shí)候也可以訪問(wèn)文件。
xmlns 設(shè)置html名空間，比如把網(wǎng)頁(yè)設(shè)置成xhml的時(shí)候可以使用這個(gè)值。
lang 設(shè)置網(wǎng)頁(yè)的描述語(yǔ)言，比如中文是zh；英文是en。

3、<head></head>頭部標(biāo)簽在網(wǎng)頁(yè)中只能有一個(gè)，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會(huì)在頁(yè)面中顯示出來(lái)·。

head里面的標(biāo)記

<meta> 標(biāo)記
<title>定義網(wǎng)頁(yè)的標(biāo)題
<link> 鏈接
<script> 標(biāo)記JavaScript腳本的內(nèi)容
<style> 標(biāo)記css樣式
meta 標(biāo)記

4、<body></body>只能有一個(gè)，顯示網(wǎng)頁(yè)的主體內(nèi)容。

（一）、<meta>標(biāo)簽

<meta>元素的屬性：

name 描述信息的名稱，來(lái)標(biāo)記這是一個(gè)什么樣的信息
http-equiv 描述行為
content 描述的內(nèi)容
charset 指定網(wǎng)頁(yè)的編碼

1、name 屬性

1 <meta name="author" content="nyw">
2     <!--作者， 定義網(wǎng)頁(yè)的作者 -->
3 <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
4     <!-- 描述，描述網(wǎng)頁(yè)的實(shí)際內(nèi)容 -->
5 <meta name="keywords" content="HTML,meta">
6     <!-- 關(guān)鍵字，定義網(wǎng)頁(yè)關(guān)鍵字 -->

2、http-equiv屬性

1 <meta http-equiv="refresh" content="30">
2     <!-- 網(wǎng)頁(yè)30s后自動(dòng)刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4     <!-- 網(wǎng)頁(yè)30秒后跳轉(zhuǎn)到dom.html文檔 -->

<meta http-equiv="refresh" content="5,url=dom.html">

http-equiv描述網(wǎng)頁(yè)的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個(gè)文檔。

3、content 屬性

特殊屬性

content-type 指定http頭部信息的文字編碼（最為常用）
default-style 指定優(yōu)先使用的樣式單（stylesheet）
refresh 用于網(wǎng)頁(yè)的自動(dòng)刷新或是頁(yè)面跳轉(zhuǎn)
set-cookie 設(shè)置頁(yè)面的cookie（現(xiàn)在已經(jīng)不再推薦使用）

4、charset屬性

指定網(wǎng)頁(yè)的編碼，推薦使用UTF-8來(lái)增加網(wǎng)頁(yè)的兼容性。

代碼實(shí)例：

為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息

這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁(yè)。

<meta name="robots" content="noindex,nofollow">
    <!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->

代碼實(shí)例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>網(wǎng)頁(yè)標(biāo)題(顯示在瀏覽器上)</title>
 6     <meta name="author" content="nyw">
 7     <!--作者， 定義網(wǎng)頁(yè)的作者 -->
 8     <meta name="description" content="meta標(biāo)記學(xué)習(xí)">
 9     <!-- 描述，描述網(wǎng)頁(yè)的實(shí)際內(nèi)容 -->
10     <meta name="keywords" content="HTML,meta">
11     <!-- 關(guān)鍵字，定義網(wǎng)頁(yè)關(guān)鍵字 -->
12     <meta http-equiv="refresh" content="30">
13     <!-- 網(wǎng)頁(yè)30s后自動(dòng)刷新 -->
14     <meta http-equiv="refresh" content="5,url=dom.html">
15     <!-- 網(wǎng)頁(yè)30秒后跳轉(zhuǎn)到dom.html文檔 -->
16     <meta name="robots" content="noindex,nofollow">
17     <!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->
18 </head>
19 <body>
20 </body>
21 </html>

（二）、title、base標(biāo)記

title和base標(biāo)記都是寫(xiě)在head標(biāo)簽中

title：設(shè)置網(wǎng)頁(yè)的標(biāo)題

寫(xiě)法：<title>內(nèi)容</title>。

base：指定網(wǎng)頁(yè)跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

寫(xiě)法：<base href="http://www.aaa.zzz/">

base屬性值：

href 指定網(wǎng)頁(yè)跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。

<base href="http://baidu.com/"> 這是將頁(yè)面跳轉(zhuǎn)到百度的網(wǎng)站打開(kāi)。

target 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁(yè)面中跳轉(zhuǎn)。

<base target="_blank"> 網(wǎng)頁(yè)中的鏈接都應(yīng)該在新的窗口中打開(kāi)。

terget屬性值：

_blank 在新窗口中打開(kāi)被鏈接的文檔
_self 默認(rèn)值，在相同框架中打開(kāi)被鏈接的文檔
_parent 在父框架集中
_top 在整個(gè)窗口中打開(kāi)被鏈接文檔·
framename 在指定框架中打開(kāi)被鏈接文檔

（三）、link標(biāo)記

link標(biāo)記：鏈接外部文件時(shí)使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來(lái)，使當(dāng)前網(wǎng)頁(yè)實(shí)現(xiàn)更多的功能。

link屬性：

href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/span>

rel：引用文件，引用資源的類(lèi)型定義

我們?cè)谑褂胠ink標(biāo)簽引用外部文件的時(shí)候，外部文件的類(lèi)型是多種多樣的。

alternate 代替文檔（種子，其他語(yǔ)言版本，其他格式等等）

author 網(wǎng)頁(yè)的作者

help 幫助文件的鏈接

icon 網(wǎng)頁(yè)的圖標(biāo)

next 如果是連續(xù)網(wǎng)頁(yè)的時(shí)候，指定下一個(gè)網(wǎng)頁(yè)

prefetch 把鏈接外部資源時(shí)提前緩存起來(lái)。

prev 如果是連續(xù)網(wǎng)頁(yè)

media 鏈接文件或是資源屬于哪一種資源。

hreflang 鏈接文件的語(yǔ)言種類(lèi)

type 鏈接文件的mi/me類(lèi)型（比如說(shuō)，圖片圖標(biāo)文本）

sizes 根據(jù)link鏈接文件的類(lèi)型，來(lái)指定文件的大小

代碼示例：

鏈接網(wǎng)頁(yè)圖標(biāo)：

網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾

1 <!-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 -->
2     <link rel="icon">
3     <!-- 示例 -->
4     <link rel="icon" href="img/favicon.png" type="image/png">
5     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6     <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">

注意：后面的href和前面type標(biāo)注的類(lèi)型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上

鏈接外部樣式單

1 <link rel="stylesheet">
2     <link rel="stylesheet" href="style1.css" media="screen">
3     <link rel="stylesheet" href="style2.css" title="主題樣式文件">
4     <link rel=" alternate stylesheet" href="style3.css" title="可選樣式單">

說(shuō)明：

alternate 會(huì)在瀏覽器中會(huì)彈出一個(gè)對(duì)話框，供用戶可以進(jìn)行選擇

media 表示媒體類(lèi)型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀

title 對(duì)這個(gè)link進(jìn)行簡(jiǎn)單的說(shuō)明

網(wǎng)站RSS種子指定

<!-- 網(wǎng)站RSS種子指定 -->
    <link rel="alternate" type="application/rss+xml">

為搜索引擎的準(zhǔn)備的網(wǎng)頁(yè)的URL

<!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁(yè)的URL -->
    <link rel="canonical">
    <link rel="canonical" href="http://www.aaa.zzz/help.html">

告訴搜索引擎代替URL是哪里。

在線咨詢

上一篇：巖石薄片地化分析技巧與應(yīng)用
下一篇：thinkphp3.2之URL簡(jiǎn)化設(shè)置

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商