HTML5的設(shè)計目的是為了在移動設(shè)備上支持多媒體。
成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),昌邑企業(yè)網(wǎng)站建設(shè),昌邑品牌網(wǎng)站建設(shè),網(wǎng)站定制,昌邑網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,昌邑網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè),幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力??沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學(xué)習、思考、沉淀、凈化自己,讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
HTML5中的新標簽,語義化更明確。
!doctype 聲明必須位于 HTML5 文檔中的第一行,使用非常簡單。
兼容問題:現(xiàn)代的瀏覽器都支持html5
html新元素
canvas :繪圖標簽 ,通過js在canvas 上進行繪圖 ,cocos-2d引擎 做網(wǎng)頁游戲 基于js的繪圖API來制作
新多媒體元素
video 定義視頻
src 視頻的路徑 autoplay 自動播放 controls 控制器 loop 通過js提供的api來制作視頻控制
audio 定義音頻內(nèi)容
src 視頻的路徑 autoplay 自動播放 controls 控制器 loop 通過js提供的api來制作視頻控制
source 定義多媒體資源,是視頻音頻資源文件
新的表單元素
datalist 提示列表 和input 連用
keygen 秘鑰標簽 私有秘鑰(在本地) 公有秘鑰(在服務(wù)器)
output 輸出計算值 結(jié)合js
新的語義和結(jié)構(gòu)元素
article 定義相對頁面獨立的內(nèi)容區(qū)域
aside 定義側(cè)邊欄
bdi 文本突出 類似span
details 描述詳細 顯示詳細類容 標簽 兼容性不太好
figure 是包 圖片 表單 代碼
footer 定義頁腳的
header 定義頭部
mark 文本的突出顯示 默認帶黃色
meter 定義進度條的
nav 定義導(dǎo)航
progress 定義進度條
section 定義內(nèi)容
time 寫時間的
新增的結(jié)構(gòu)標簽:
1、section元素 ,表示頁面中的一個內(nèi)容區(qū)塊,比如章節(jié)、頁眉、頁腳或頁面的其他部分??梢院蚳1、 h2……等元素結(jié)合起來使用,表示文檔結(jié)構(gòu)。例:HTML5中section…/section;HTML4中div ……/div。
2、article元素 ,表示頁面中一塊與上下文不相關(guān)的獨立內(nèi)容。比如一篇文章。
3、aside元素,表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。
4、header元素,表示頁面中一個內(nèi)容區(qū)塊或真?zhèn)€頁面的標題。
5、hgroup元素,表示對真?zhèn)€頁面或頁面中的一個內(nèi)容區(qū)塊的標題進行組合。
6、footer元素,表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注。一般來說,他會包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。
7、nav元素,表示頁面中導(dǎo)航鏈接的部分。
8、figure元素 ,表示一段獨立的流內(nèi)容,一般表示文檔主體流內(nèi)容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。
延展回答:
廢除的元素:
1、能用css代替的元素 ,basefont、big、center、font、s、strike、tt、u。這些元素純粹是為畫面展示服務(wù)的,HTML5中提倡把畫面展示性功能放在css中統(tǒng)一編輯。
2、不再使用frame框架。frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服務(wù)器方創(chuàng)建的由多個頁面組成的符合頁面的形式,刪除以上這三個標簽。
3、只有部分瀏覽器支持的元素,applet、bgsound、blink、marquee等標簽。
4、其他被廢除的元素。
廢除rb,樹勇ruby替代。
廢除acronym使用abbr替代。
廢除dir使用ul替代。
廢除isindex使用form與input相結(jié)合的方式替代。
新增的結(jié)構(gòu)標簽:
1、header元素
表示頁面中一個內(nèi)容區(qū)塊或真?zhèn)€頁面的標題。
2、hgroup元素
表示對真?zhèn)€頁面或頁面中的一個內(nèi)容區(qū)塊的標題進行組合。
3、article元素?
表示頁面中一塊與上下文不相關(guān)的獨立內(nèi)容。比如一篇文章。
4、aside元素
表示article元素內(nèi)容之外的、與article元素內(nèi)容相關(guān)的輔助信息。
5、footer元素
表示整個頁面或頁面中一個內(nèi)容區(qū)塊的腳注。一般來說,他會包含創(chuàng)作者的姓名、創(chuàng)作日期以及創(chuàng)作者的聯(lián)系信息。
HTML5新規(guī)則:
新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。 減少對外部插件的需求(比如 Flash),更優(yōu)秀的錯誤處理,更多取代腳本的標記,HTML5 應(yīng)該獨立于設(shè)備開發(fā)進程應(yīng)對公眾透明 ;
HTML5?新特性:
新的特殊內(nèi)容元素,比如 article、footer等,新的表單控件,比如 calendar、date、time、email、url、search;用于媒介回放的 video 和 audio 元素;用于繪畫的 canvas 元素?
對本地離線存儲的更好的支持。
HTML5 新增常用元素
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 當列出可用的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 當前數(shù)值,如果給定的值不在最小值和最大值之間,它的值就等于它最接近的一端的值。
min 值域的最小邊界值,默認為0
max 值域的最大邊界值,默認為1
low 定義了低值區(qū)間的上限值,當數(shù)值處于low-min或high-max時就會呈現(xiàn)不同的樣式。
high 定義了高值區(qū)間的下限值。
optimum 最優(yōu)值
output代表計算值 。
for 其它影響計算結(jié)果的標簽的ID,可以多個。
form 與當前標簽有關(guān)聯(lián)的form(從屬的表單)。該屬性的值必須是當前文檔內(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í)行(當頁面繼續(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
source標簽是為了兼容各個瀏覽器,寫多個讓瀏覽器可以選擇他所支持的音視頻。
我們使用html5的video標簽,可以不依賴于任何第三方的插件或控件,直接在瀏覽器中實現(xiàn)視頻播放功能。
在了解了video標簽之后,下面我們就使用html5的video標簽來實現(xiàn)視頻播放。
現(xiàn)在,我們打開瀏覽器,看一看具體的效果:
為了更好地兼容各種瀏覽器,你可以為一個video標簽添加多個source子標簽,每個source標簽引用一個不同格式的視頻文件。這樣,html5瀏覽器會自動在這些source標簽中從上到下依次尋找并識別出該瀏覽器可以播放的第一個視頻文件并進行播放,從而實現(xiàn)兼容多個瀏覽器的視頻播放功能。
注:html5的video標簽?zāi)壳爸恢С植シ?mp4、.ogg、.webm等幾種格式的視頻文件,暫不支持其他格式的視頻文件。此外,不同的html5瀏覽器支持的視頻文件格式也略有不同,這種狀況可能會在未來的html5中得以改善。
當前題目:sourcehtml5,html source標簽
URL鏈接:http://jinyejixie.com/article10/dssojgo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供響應(yīng)式網(wǎng)站、定制網(wǎng)站、Google、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、企業(yè)建站
聲明:本網(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)