干貨：詳解HTML5中常見的五大全局屬性

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

contentEditable屬性

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

designMode屬性

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

hidden屬性

在HTML5中所有的元素允許使用hidden屬性。它類似input元素中的hidden屬性，使元素處于不可見狀態。hidden屬性設置為ture，元素處于不可見狀態；hidden屬性設置為false時元素處于可見狀態。

spellcheck屬性

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

tabindex屬性

tabindex在程序開發概念，是指不斷敲擊Tab鍵讓窗口或頁面中控件獲得焦點，對窗口的控件進行遍歷，每個控件的tabindex表示第幾個被訪問的。之前這個屬性在編輯網頁很有用，現在是根據元素所在位置決定遍歷順序，所以就不需要了。不過tabindex拎一個作用，只有鏈接元素與表單元素可以通過按鍵獲得焦點。如果對元素使用了tabindex屬性后，也能讓元素獲得焦點，執行focus（）語句時，可以讓元素獲得焦點了。但是這樣會出現一個問題，元素會通過tab獲得焦點，而這時候我們不想讓該元素獲得焦點這不是我們想要的結果。

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

如果大家喜歡這篇文章的話，希望大家能夠收藏，轉發謝謝！更多相關資訊可以關注西安華美校區，免費獲得java零基礎教程！額外附送excel教程！

例

簡單的三框架頁面：

</frameset>

瀏覽器支持

所有主流瀏覽器都支持 <frame> 標簽。

標簽定義及使用說明

HTML5 不支持 <frame> 標簽。

<frame> 標簽定義 <frameset> 中的子窗口（框架）。

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

注釋：如果您希望驗證包含框架的頁面，請確保 <!DOCTYPE> 被設置為 "HTML Frameset DTD" 或者 "XHTML Frameset DTD" 。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <frame> 標簽，HTML 4.01 支持 <frame> 標簽。

HTML 與 XHTML 之間的差異

在 HTML 中，<frame> 標簽沒有結束標簽。在 XHTML 中，<frame> 標簽必須被正確地關閉。

可選的屬性

屬性	值	描述
frameborder	01	HTML5 不支持。規定是否顯示框架周圍的邊框。
longdesc	URL	HTML5 不支持。規定一個包含有關框架內容的長描述的頁面。
marginheight	pixels	HTML5 不支持。規定框架的上方和下方的邊距。
marginwidth	pixels	HTML5 不支持。規定框架的左側和右側的邊距。
name	name	HTML5 不支持。規定框架的名稱。
noresize	noresize	HTML5 不支持。規定無法調整框架的大小。
scrolling	yesnoauto	HTML5 不支持。規定是否在框架中顯示滾動條。
src	URL	HTML5 不支持。規定在框架中顯示的文檔的 URL。

標準屬性

在 HTML 4.01 中，<frame> 標簽支持如下標準屬性：

屬性	值	描述
class	classname	規定元素的類名
id	id	規定元素的唯一 id
style	style_definition	規定元素的行內樣式
title	text	規定元素的額外信息

如需完整的描述，請訪問標準屬性。

事件屬性

根據 W3C 的標準，在 HTML 4.01 中，<frame> 標簽不支持任何的事件屬性。

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

如需完整的描述，請訪問事件屬性。

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

么是html？

html是一種簡單易記，功能強大的標記語言，它是學習前端知識的第一站，也是所有WEB開發者、乃至產品經理、運營人員必須學習的一項基礎內容。

為什么學習html5？

1. html5是WEB開發者，必須掌握的基礎知識；

2. html5應用廣泛，它可以用來開發網站、WEB應用、WEB游戲等等，如微信小程序、移動端小游戲等都跟html5有關；

3. html5很容易掌握，花幾個小時就可以掌握它；

課程特點

1. 講師講課風格幽默，整個學習過程輕松有趣，不枯燥、不乏味；

2. 以就業為導向，與實戰相結合，滿足大部分學員的學習需求；

學習建議

1. 學完每一節課程，動手將代碼打一遍；

2. 舉一反三，學完每節課程，思考一下它的應用場景；

3. 完成本門課程，試著自己寫一個純html5的網頁；

適宜人群

1. 零基礎學員；

2. 前端愛好者；

1、DOCTYPE 描述文檔的類型，規定web 瀏覽器關于頁面使用哪個 HTML 版本進行編寫的指令。

網頁可以使用的具體版本，網頁中可以使用那些標記，每個版本的DTD版本均有不同

2、<html></html> 網頁文檔中的根標記

html 標簽有三個特殊的屬性　　

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

3、<head></head>頭部標簽在網頁中只能有一個，設置HTML文檔的頭部信息，里面內容不會在頁面中顯示出來·。

head里面的標記

<meta> 標記
<title>定義網頁的標題
<link> 鏈接
<script> 標記JavaScript腳本的內容
<style> 標記css樣式
meta 標記

4、<body></body>只能有一個，顯示網頁的主體內容。

（一）、<meta>標簽

<meta>元素的屬性：

name 描述信息的名稱，來標記這是一個什么樣的信息
http-equiv 描述行為
content 描述的內容
charset 指定網頁的編碼

1、name 屬性

1 <meta name="author" content="nyw">
2     <!--作者， 定義網頁的作者 -->
3 <meta name="description" content="meta標記學習">
4     <!-- 描述，描述網頁的實際內容 -->
5 <meta name="keywords" content="HTML,meta">
6     <!-- 關鍵字，定義網頁關鍵字 -->

2、http-equiv屬性

1 <meta http-equiv="refresh" content="30">
2     <!-- 網頁30s后自動刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4     <!-- 網頁30秒后跳轉到dom.html文檔 -->

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

http-equiv描述網頁的行為，行為 refresh刷新，內容為5，表示5秒后跳轉到 dom.html這個文檔。

3、content 屬性

特殊屬性

content-type 指定http頭部信息的文字編碼（最為常用）
default-style 指定優先使用的樣式單（stylesheet）
refresh 用于網頁的自動刷新或是頁面跳轉
set-cookie 設置頁面的cookie（現在已經不再推薦使用）

4、charset屬性

指定網頁的編碼，推薦使用UTF-8來增加網頁的兼容性。

代碼實例：

為搜索引擎抓取機器人準備一些信息

這段代碼可以禁止搜索引擎緩存和跟蹤網頁。

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

代碼實例：

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

（二）、title、base標記

title和base標記都是寫在head標簽中

title：設置網頁的標題

寫法：<title>內容</title>。

base：指定網頁跳轉基準URL，如果不指定的話默認為當前網站的當前路徑。

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

base屬性值：

href 指定網頁跳轉到基準URL，如果不指定的話則默認為當前網站的當前路徑。

<base href="http://baidu.com/"> 這是將頁面跳轉到百度的網站打開。

target 指定鏈接的跳轉幀如果不指定的話，則是在當前頁面中跳轉。

<base target="_blank"> 網頁中的鏈接都應該在新的窗口中打開。

terget屬性值：

_blank 在新窗口中打開被鏈接的文檔
_self 默認值，在相同框架中打開被鏈接的文檔
_parent 在父框架集中
_top 在整個窗口中打開被鏈接文檔·
framename 在指定框架中打開被鏈接文檔

（三）、link標記

link標記：鏈接外部文件時使用的標記，可以把外部文件的內容引入到當前文件中來，使當前網頁實現更多的功能。

link屬性：

href：指定鏈接外部路徑的路徑和文件名，要設置全路徑并且帶文件名

rel：引用文件，引用資源的類型定義

我們在使用link標簽引用外部文件的時候，外部文件的類型是多種多樣的。

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

author 網頁的作者

help 幫助文件的鏈接

icon 網頁的圖標

next 如果是連續網頁的時候，指定下一個網頁

prefetch 把鏈接外部資源時提前緩存起來。

prev 如果是連續網頁

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

hreflang 鏈接文件的語言種類

type 鏈接文件的mi/me類型（比如說，圖片圖標文本）

sizes 根據link鏈接文件的類型，來指定文件的大小

代碼示例：

鏈接網頁圖標：

網站的圖標指定，可以顯示在瀏覽器的圖標欄，也可以被手機讀取作為網站的圖標存入收藏夾

1 <!-- 網站的圖標指定，可以顯示在瀏覽器的圖標欄，也可以被手機讀取作為網站的圖標存入收藏夾 -->
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標注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機上

鏈接外部樣式單

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="可選樣式單">

說明：

alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進行選擇

media 表示媒體類型為屏幕，可以是手機，但不包括打印機和投影儀

title 對這個link進行簡單的說明

網站RSS種子指定

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

為搜索引擎的準備的網頁的URL

<!-- 為搜索引擎的準備的網頁的URL -->
    <link rel="canonical">
    <link rel="canonical" href="http://www.aaa.zzz/help.html">

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

在線咨詢

上一篇：巖石薄片地化分析技巧與應用
下一篇：thinkphp3.2之URL簡化設置

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商