關(guān)于HTML5如何自定義屬性

HTML5新增自定義屬性的特性,在HTML代碼中,我們可以在標(biāo)簽上直接定義自定義屬性,自定義屬性命要以'data-'開頭

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)營銷推廣、網(wǎng)站重做改版、穆棱網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為穆棱等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

p?data-hello="這是自定義屬性的值"呵呵呵呵/p

我們可以使用原生JS獲取到自定義屬性的值

let?p?=?document.querySelector('p')

console.log(p.dataset.hello)?//這是自定義屬性的值

也可以通過jquery獲取自定義屬性的值

$('p').data('hello')?//這是自定義屬性的值

當(dāng)然,也可以通過傳統(tǒng)的方法來獲取自定義屬性的值

let?p?=?document.querySelector('p')

p.getAttribute('data-hello');

p.setAttribute('data-hello','這是重新賦值')

//jquery

$('p').attr('data-hello')??//獲取

$('p').attr('data-hello','設(shè)置')??//設(shè)置

html5新增的全局屬性有哪幾個(gè)?描述其主要功能。

HTML5新增的全局屬性，是指可以對(duì)任何元素都使用的屬性。功能如下所示。

屬性

描述

HTML5新增

accesskey

規(guī)定訪問元素的鍵盤快捷鍵

class

規(guī)定元素的類名（用于規(guī)定樣式表中的類）。

contenteditable

規(guī)定是否允許用戶編輯內(nèi)容。

是

contextmenu

規(guī)定元素的上下文菜單。

是

dir

規(guī)定元素中內(nèi)容的文本方向。

draggable

規(guī)定是否允許用戶拖動(dòng)元素。

是

dropzone

規(guī)定當(dāng)被拖動(dòng)的項(xiàng)目/數(shù)據(jù)被拖放到元素中時(shí)會(huì)發(fā)生什么。

是

hidden

規(guī)定該元素是無關(guān)的。被隱藏的元素不會(huì)顯示。

是

id

規(guī)定元素的唯一 ID。

lang

規(guī)定元素中內(nèi)容的語言代碼。

spellcheck

規(guī)定是否必須對(duì)元素進(jìn)行拼寫或語法檢查。

是

style

規(guī)定元素的行內(nèi)樣式。

tabindex

規(guī)定元素的 tab 鍵控制次序。

title

規(guī)定有關(guān)元素的額外信息。

HTML5有哪些新的元素和屬性

HTML5 引入了新的 HTML 元素和屬性，有的是傳統(tǒng)通用元素的語義化版本，如取代 div 元素的 nav, footer

等元素，也有一些全新的元素，如 audio, video。一些在 HTML4 中不被推薦使用的元素，如 font 和 center

將被棄用。HTML5 引入的新 HTML 元素包括：

article：文章

aside：內(nèi)容旁邊的側(cè)邊欄內(nèi)容

audio：音頻

canvas：2D 繪圖

command：命令按鈕

datalist：下拉選擇框

details：對(duì)象的細(xì)節(jié)

dialog：對(duì)話框

embed：外部插件或?qū)ο?/p>

figure：一組媒體對(duì)象以及標(biāo)簽文字

footer：頁腳

header：頁首

hgroup：文檔某一部分的信息

keygen：表單生成的 Key

mark：標(biāo)注的文字

meter：預(yù)先定義的范圍內(nèi)的度量

nav：導(dǎo)航條

output：輸出

progress：進(jìn)度條

rp：標(biāo)識(shí) rubby 內(nèi)容

rt：rubby 內(nèi)容的解釋

ruby：rubby 內(nèi)容

section：定義一個(gè)部分

source：媒體的資源

time：日期時(shí)間

video：視頻

簡述幾種html5的常用標(biāo)簽和新增屬性的含義

HTML5 新增常用元素

HTML5的聲明為：!DOCTYPE html

它不用再像之前的版本一樣在聲明中引用DTD。DTD(document type definition)定義合法的XML文檔構(gòu)建模塊，它使用一系列合法的元素來定義文檔的結(jié)構(gòu)。在HTML中，DTD規(guī)定了標(biāo)記語言的規(guī)則，使瀏覽器能正確地呈現(xiàn)內(nèi)容。而HTML5不基于SGML，所以不需要引用DTD。

文檔結(jié)構(gòu)元素

article: 定義可以獨(dú)立于內(nèi)容其余部分的完整獨(dú)立內(nèi)容塊。

header: 頁面頂部。

nav: 導(dǎo)航欄(邊導(dǎo)航,頁面導(dǎo),底部導(dǎo))標(biāo)簽。

hgroup: 定義多個(gè)標(biāo)題時(shí)。

section: 內(nèi)容分塊.可設(shè)置cite屬性。

aside: 側(cè)邊欄，定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

figure: 代表一個(gè)和文檔有關(guān)的圖例。

figcaption: 代表一個(gè)圖例的說明（標(biāo)題）。

footer: 頁面底部。

dialog:定義對(duì)話框。

嵌入元素

video 代表一段視頻 及其視頻文件和字幕，并提供了播放視頻的用戶界面。屬性有：

src

autoplay（控制自動(dòng)播放）

loop（播放完后是否重新播放）

controls（顯示用戶界面）

width

height

audio 代表一段聲音 ，或音頻流。 標(biāo)簽內(nèi)的文字會(huì)在標(biāo)簽不被支持時(shí)呈現(xiàn)。屬性有：

src

autoplay

loop（播放次數(shù)，為-1時(shí)循環(huán)播放）

controls

volume(音量)

source 為 video 或 audio 這類媒體元素指定媒體源。屬性有src\type（指定資源的MIME類型）。

track為 video 或 audio 這類媒體元素指定文本軌道（字幕） 。屬性有：

kind（數(shù)據(jù)類型）

src

srclang（track文本數(shù)據(jù)的語言）

label 當(dāng)列出可用的text tracks時(shí)，給瀏覽器使用的text track的標(biāo)題，這種標(biāo)題是用戶可讀的。

注意：一個(gè)media 元素的任意兩個(gè) track 子元素不能有相同的 kind, srclang, 和 label屬性。

canvas 代表位圖區(qū)域，可以通過腳本在它上面實(shí)時(shí)呈現(xiàn)圖形，如圖表、游戲繪圖等。

embed 代表一個(gè)嵌入的外部資源，如應(yīng)用程序或交互內(nèi)容。屬性有：

width

height

src

type 用于選擇插件實(shí)例化的 MIME 類型。

表單元素

meter代表滑動(dòng)條。顯示實(shí)時(shí)狀態(tài)。屬性有:

value 當(dāng)前數(shù)值，如果給定的值不在最小值和最大值之間，它的值就等于它最接近的一端的值。

min 值域的最小邊界值，默認(rèn)為0

max 值域的最大邊界值，默認(rèn)為1

low 定義了低值區(qū)間的上限值，當(dāng)數(shù)值處于low-min或high-max時(shí)就會(huì)呈現(xiàn)不同的樣式。

high 定義了高值區(qū)間的下限值。

optimum 最優(yōu)值

output代表計(jì)算值 。

for 其它影響計(jì)算結(jié)果的標(biāo)簽的ID，可以多個(gè)。

form 與當(dāng)前標(biāo)簽有關(guān)聯(lián)的form（從屬的表單）。該屬性的值必須是當(dāng)前文檔內(nèi)的表單元素的ID。如果未指明該屬性，output標(biāo)簽必須是一個(gè)form的后代標(biāo)簽。該屬性的用處在于可以讓output標(biāo)簽脫離form標(biāo)簽，存在于一個(gè)網(wǎng)頁文檔的任意位置。

name

form oninput="result.value=parseInt(a.value)+parseInt(b.value)"

input type="range" name="b" value="50" / +

input type="number" name="a" value="10" / =

output name="result"/output

/form

1

2

3

4

5

progress代表進(jìn)度條，表示任務(wù)過程，屬性有max（任務(wù)總量）\value。

datalist為Input標(biāo)記定義一個(gè)下拉列表，配合option標(biāo)簽。

其他

details創(chuàng)建一個(gè)掛件，僅在被切換成展開狀態(tài)時(shí)，它才會(huì)顯示內(nèi)含的信息。

summary 是details 元素的子元素，表示其綜述或標(biāo)題 。

mark代表一段需要被高亮的引用文字。

ruby表示需要被ruby 注釋 標(biāo)記的文本，如中文漢字和它的拼音。

rt 表示ruby 注釋 ，如中文拼音。

rp 在ruby 注釋兩邊的額外插入文本 ，用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。

ruby夼rp(/rprtkuang/rtrp)/rp/ruby

1

順便一提，html5刪除了的元素：

純表現(xiàn)的：basefont\big\center\font\s\strike\tt\u

對(duì)可用性有負(fù)面影響的：frame\frameset\noframes

產(chǎn)生混淆的：acronym\applet\isindex\dir

同時(shí)HTML5也對(duì)某些元素進(jìn)行了重定義，改變了它們的語言內(nèi)容但表現(xiàn)不變。如b標(biāo)簽、i標(biāo)簽，仍然表示為粗體、斜體，但代表了一段需要被關(guān)注的文字、一段不同性質(zhì)的文字，如技術(shù)術(shù)語、外文短語等。

HTML5屬性變化

新增類型

email \ url \ tel \ number

Datepickers:date \ month \ week（iphone不兼容） \ time \ datetime(UTC格式，安卓、i6+、PC端不兼容) \ datetime-local

針對(duì)PC端：range(水平桿，兩邊為min和max) \ search（有內(nèi)容時(shí)右邊出現(xiàn)×）\ color（顏色選擇框）

表單屬性

autocomplete屬性：自動(dòng)完成功能，適用于標(biāo)簽，以及以下類型的input標(biāo)簽：text \ search \ url \ tel \ email \ password \ datepickers \ range \ color

form autocomplete="on" //on為打開，Off為關(guān)閉

/form

1

2

autofocus屬性：域自動(dòng)地獲得焦點(diǎn)，適用于所有的標(biāo)簽的類型

input autofocus="autofocus"/

1

multiple屬性：規(guī)定輸入域中可選擇多個(gè)值，適用于email \ file類型的標(biāo)簽

input type="file" multiple="multiple" /

1

placeholder屬性：提供一種提示，描述輸入域所期待的值，適用于text \ search \ url \ tel \ email \ password 類型的標(biāo)簽

input type="text" placeholder="please input your name!"/

1

required屬性：規(guī)定必須在提交之前填寫輸入域，且必須按照相應(yīng)域的格式，如，email域必須要有@、郵件域。適用于text \ search \ url \ tel \ email \ password \ datepickers number \ checkbox \ radio \ file 類型的標(biāo)簽

input type="email" requried="required" /

1

鏈接屬性

sizes

link rel="icon" href="icon.gif" type="image/gif" sizes="16*16"

//網(wǎng)頁頭部標(biāo)題的logo，可根據(jù)不同分辨率引用不同的sizes

//type為該圖標(biāo)的類型，說明該圖標(biāo)格式為gif

1

2

3

target

base href="......" target="_blank"

1

base標(biāo)簽寫在head標(biāo)簽內(nèi)。target屬性控制整個(gè)頁面所有超鏈接的默認(rèn)打開方式（本來是_self），href指定頁面中所有相對(duì)鏈接的基準(zhǔn) URL；

超鏈接的屬性

media=“handheld”（表示對(duì)設(shè)備進(jìn)行優(yōu)化，handheld對(duì)“手持”設(shè)備進(jìn)行支持，tv對(duì)”電視“設(shè)備進(jìn)行支持）；

hreflang=“zh”（設(shè)置語言，zh表示是簡體中文）

rel=“external”（設(shè)置超鏈接的引用，external表示其為外部鏈接）

其他屬性

script的屬性

defer：加載完腳本后并不執(zhí)行（延遲執(zhí)行），而是等整個(gè)頁面加載完之后再執(zhí)行，只有ie兼容

async：對(duì)腳本進(jìn)行異步加載，加載完腳本后立刻執(zhí)行，而不用等整個(gè)頁面都加載完才能執(zhí)行。

如果 async=“async”：腳本相對(duì)于頁面的其余部分異步地執(zhí)行（當(dāng)頁面繼續(xù)進(jìn)行解析時(shí)，腳本將被執(zhí)行）

如果不使用 async 且 defer=“defer”：腳本將在頁面完成解析時(shí)執(zhí)行

如果既不使用 async 也不使用defer：在瀏覽器繼續(xù)解析頁面之前，立即讀取并執(zhí)行腳本

ol的屬性

start：設(shè)置序號(hào)的起始值

reversed：倒敘排列 reversed=“reversed”

html的屬性：manifest

!DOCTYPE HTML

html manifest="demo.appcache"

...

/html

1

2

3

4

通過在頁面中設(shè)置manifest屬性或在manifest文件中加入頁面，可以將此頁面緩存，這樣我們就可以離線訪問，且獲得更快的速度，因?yàn)橐丫彺尜Y源加載得更快。還可以減少服務(wù)器負(fù)載。

一旦文件被緩存，則瀏覽器會(huì)繼續(xù)展示已緩存的版本，即使修改了服務(wù)器上的文件。為了確保瀏覽器更新緩存，需要更新 manifest 文件。

style的屬性scoped：內(nèi)嵌CSS,可以寫在任何位置，而不止是head。不過這樣會(huì)違反我們低耦合的原則。

style scoped

...

style

html5新屬性

1)email:郵件輸入域，在表達(dá)提交時(shí)提供的郵箱格式驗(yàn)證，并彈出一個(gè)提示窗口。

2)url：地址輸入域，在表單提交時(shí)提供簡單的URL地址格式驗(yàn)證，并彈出一個(gè)提示窗口。

3)number：數(shù)字輸入域，（可設(shè)置min、max、step）。

4)tel：電話號(hào)碼輸入域，在手機(jī)瀏覽器彈出數(shù)字輸入域。

5)search：搜索輸入域，在手機(jī)瀏覽器右下角呈現(xiàn)搜索按鍵。

6)range：范圍選擇空件。

7)color：顏色選擇控件。

8)date/month/week：時(shí)間選擇控件。

1)autocomplete: autocomplete屬性規(guī)定輸入的字段是否應(yīng)該啟用自動(dòng)完成功能。

自動(dòng)完成功能允許瀏覽器預(yù)測(cè) 字段輸入，當(dāng)用戶在字段開始鍵入時(shí)，瀏覽器基于鍵入的值。應(yīng)該顯示出在字段中填寫的選項(xiàng)。

2)placeholder：占位符，用于在輸入框中顯示提示性文字，與value不同，不能被提交。

3)autofoaus：自動(dòng)獲取輸入焦點(diǎn)。

4)multiple：是否允許多個(gè)輸入值，若聲明該屬性，那么輸入框允許輸入多個(gè)用逗號(hào)隔開的值。

5)form：值為某個(gè)表單的id，若設(shè)置，則該輸入域可放在該表單外面。

6)required：在表單提交時(shí)會(huì)驗(yàn)證是否有輸入，沒有則彈出提示信息。

7)maxlength：限制最大長度，只有在有輸入的情況下才有用，不區(qū)分中英文。

minlength：限制最小長度，但它不是H5標(biāo)準(zhǔn)屬性，僅部分瀏覽器支持。

8)min：限定輸入數(shù)字的最小值。

9)max：限定輸入數(shù)字的最大值。

10)step：限定輸入數(shù)字的步長，與min連用。

11)pattern：指定一個(gè)正則表達(dá)式，對(duì)輸入進(jìn)行驗(yàn)證。(正則默認(rèn)首尾加^$)

作用：getCurrentPosition() 方法來獲得用戶的位置。

格式：一般在js中書寫方式。

案例：

分享題目：html5屬性,html5屬性選擇器
網(wǎng)站地址：http://chinadenli.net/article9/dsiioih.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、搜索引擎優(yōu)化、定制網(wǎng)站、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)