簡述幾種html5的常用標簽和新增屬性的含義

HTML5 新增常用元素

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、巴林右旗網(wǎng)站維護、網(wǎng)站推廣。

HTML5的聲明為：!DOCTYPE html

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

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

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

header: 頁面頂部。

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

hgroup: 定義多個標題時。

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

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

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

figcaption: 代表一個圖例的說明（標題）。

footer: 頁面底部。

dialog:定義對話框。

嵌入元素

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

src

autoplay（控制自動播放）

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

controls（顯示用戶界面）

width

height

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

src

autoplay

loop（播放次數(shù)，為-1時循環(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時，給瀏覽器使用的text track的標題，這種標題是用戶可讀的。

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

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

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

width

height

src

type 用于選擇插件實例化的 MIME 類型。

表單元素

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

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

min 值域的最小邊界值，默認為0

max 值域的最大邊界值，默認為1

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

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

optimum 最優(yōu)值

output代表計算值 。

for 其它影響計算結(jié)果的標簽的ID，可以多個。

form 與當(dāng)前標簽有關(guān)聯(lián)的form（從屬的表單）。該屬性的值必須是當(dāng)前文檔內(nèi)的表單元素的ID。如果未指明該屬性，output標簽必須是一個form的后代標簽。該屬性的用處在于可以讓output標簽脫離form標簽，存在于一個網(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代表進度條，表示任務(wù)過程，屬性有max（任務(wù)總量）\value。

datalist為Input標記定義一個下拉列表，配合option標簽。

其他

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

summary 是details 元素的子元素，表示其綜述或標題 。

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

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

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

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

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

1

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

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

對可用性有負面影響的：frame\frameset\noframes

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

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

HTML5屬性變化

新增類型

email \ url \ tel \ number

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

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

表單屬性

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

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

/form

1

2

autofocus屬性：域自動地獲得焦點，適用于所有的標簽的類型

input autofocus="autofocus"/

1

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

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

1

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

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 類型的標簽

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

1

鏈接屬性

sizes

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

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

//type為該圖標的類型，說明該圖標格式為gif

1

2

3

target

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

1

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

超鏈接的屬性

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

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

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

其他屬性

script的屬性

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

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

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

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

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

ol的屬性

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

reversed：倒敘排列 reversed=“reversed”

html的屬性：manifest

!DOCTYPE HTML

html manifest="demo.appcache"

...

/html

1

2

3

4

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

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

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

style scoped

...

style

html5怎么用 i標簽做小圖標

這是一個示例，可以試著先在阿里巴巴圖標將圖標加入購物車，然后再下載代碼，將文件加壓后，引入iconfont.css文件，在i標簽中class屬性名為iconfont，style樣式可以自定義圖標的大小和顏色，這里“#xe782;”為一個問號的代碼。頁面顯示的為一個紅色的問號。i標簽做圖標的好處就是將圖片文字化，還有其他的方法就是通過i標題的偽類來顯示圖標，配合 ::before 或者::after偽元素實現(xiàn)，因為沒有內(nèi)容，讀屏器不會朗讀（這樣即使有特殊處理也跳過了），機器理解起來應(yīng)該也沒什么影響。使用偽類的好處就是：插入的內(nèi)容在頁面的源碼里是不可見的，只能在css里可見。

div里面的icon屬性怎么用?我的icon屬性不見了,坐等解答

div中沒有icon屬性，icon是html5的新標簽command特有的一個屬性，icon=“URL”，對于URL的描述：規(guī)定用于代表命令的圖像的 URL。可以理解為用圖片作為按鈕，包括單選復(fù)選。不過目前大多數(shù)瀏覽器都不支持command這個標簽，好像只有ie9支持。

HTML5怎么這個搜索框右邊的放大鏡怎么加的？

需要準備的材料分別有：電腦、瀏覽器、html編輯器。

1、首先，打開html編輯器，新建html文件，例如：index.html。

2、在index.html中的body標簽中，輸入html代碼（其中icon.png是放大鏡圖標）：。

div

input type="text" /

img style="width: 20px;position: absolute;left: 140px;top: 15px;" src="icon.png" /

/div

3、瀏覽器運行index.html頁面，此時輸入框右邊添加了放大鏡。

html5 怎么寫網(wǎng)站logo

首先，有制圖軟件把你的LOGO,做成16*16像素的圖片，命名為“favicon.ico”（只要擴展名自己正確就可以，名字可以自己隨意定義），然后直接傳到網(wǎng)站的上，一般都放在根目錄下就可以。

其次，就是在網(wǎng)頁中添加加載代碼：link rel="SHORTCUT ICON" href="http://網(wǎng)址路徑/favicon.ico" ??，一定要把代碼加在HTML源文件“head/head”之間，如果是網(wǎng)站的頭部是公用的，那么加載一次即可。如果有其他情況，那么需要各自添加，是整個網(wǎng)站每個頁面都顯示。

HTML5中l(wèi)ink圖標icon和shortcut icon區(qū)別，有必要像下面這樣寫這么多嗎？

shortcut icon，特指瀏覽器中地址欄左側(cè)顯示的圖標，一般放大小為16x16，后綴名為.icon的圖標；

icon，可放的格式可為PNG\GIF\JPEG，尺寸一般為16x16、24x24、36x36等。

分享標題：html5icon,html5icon圖標怎么設(shè)置大小
當(dāng)前鏈接：http://chinadenli.net/article39/dsiscsh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、移動網(wǎng)站建設(shè)、搜索引擎優(yōu)化、微信小程序、品牌網(wǎng)站建設(shè)、域名注冊

廣告

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