您現在的位置是:電腦技術吧?>? 故障問題 ??>??HTML5有哪些新特性,HTML新特性??>??正文詳情

HTML5有哪些新特性,HTML新特性

季凌蘭2019-11-05 12:21:12 人圍觀
簡介h5css3新特性HTML5必須對每個人都很熟悉,因為有太多的媒體在討論這項技術。然而,你能確切地告訴HTML5帶來了哪些新功能嗎本文總結了html5帶給您的15個新特性,您必須簡述html5的新特性

HTML5想必大家都很熟悉了,因為太多的媒體在討論這一技術。

然而,你能準確地說出HTML5帶來了哪些新特性嗎?

本文總結了HTML5帶來的15項你必須知道的新特性。

一起來看下:

1.新的文檔類型(New Doctype)目前許多網頁還在使用XHTML1.0并且要在第一行像這樣聲明文檔類型:
  1. !DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
在HTML5中,上面那種聲明方式將失效。

下面是HTML5中的聲明方式:

  1. !DOCTYPEhtml

2.腳本和鏈接無需type (No More Types for Scripts and Links)在HTML4或XHTML中,你需要用下面的幾行代碼來給你的網頁添加CSS和JavaScript文件。

  1. linkrel=stylesheethref=path/to/stylesheet.csstype=text/css/
  2. scripttype=text/javascriptsrc=path/to/script.js/script
而在HTML5中,你不再需要指定類型屬性。

因此,代碼可以簡化如下:

  1. linkrel=stylesheethref=path/to/stylesheet.css/
  2. scriptsrc=path/to/script.js/script

3.語義Header和Footer (The Semantic Header and Footer)在HTML4或XHTML中,你需要用下面的代碼來聲明Header和Footer。

  1. divid=header
  2. ...
  3. /div
  4. ..........
  5. divid=footer
  6. ...
  7. /div
在HTML5中,有兩個可以替代上述聲明的元素,這可以使代碼更簡潔。

  1. header
  2. ...
  3. /header
  4. footer
  5. ...
  6. /footer

4.Hgroup在HTML5中,有許多新引入的元素,hgroup就是其中之一。

假設我的網站名下面緊跟著一個子標題,我可以用h1和h2標簽來分別定義。

然而,這種定義沒有說明這兩者之間的關系。

而且,h2標簽的使用會帶來更多問題,比如該頁面上還有其他標題的時候。

在HTML5中,我們可以用hgroup元素來將它們分組,這樣就不會影響文件的大綱。

  1. header
  2. hgroup
  3. h1RecallFanPage/h1
  4. h2Onlyforpeoplewhowantthememoryofalifetime./h2
  5. /hgroup
  6. /header

5.標記元素 (Mark Element)你可以把它當做高亮標簽。

被這個標簽修飾的字符串應當和用戶當前的行動相關。

比如說,當我在某博客中搜索OpenyourMind時,我可以利用一些JavaScript將出現的詞組用mark修飾一下。

  1. h3SearchResults/h3
  2. pTheywereinterrupted,justafterQuatosaid,markOpenyourMind/mark./p

6.圖形元素 (Figure Element)在HTML4或XHTML中,下面的這些代碼被用來修飾圖片的注釋。

  1. imgsrc=path/to/imagealt=Aboutimage/
  2. pImageofMars./p
然而,上述代碼沒有將文字和圖片內在聯系起來。

因此,HTML5引入了figure元素。

當和figcaption結合起來后,我們可以語義化地將注釋和相應的圖片聯系起來。

  1. figure
  2. imgsrc=path/to/imagealt=Aboutimage/
  3. figcaption
  4. pThisisanimageofsomethinginteresting./p
  5. /figcaption
  6. /figure

7.重新定義small (Small Element redefined)在HTML4或XHTML中,small元素已經存在。

然而,卻沒有如何正確使用這一元素的完整說明。

在HTML5中,small被用來定義小字。

試想下你網站底部的版權狀態,根據對此元素新的HTML5定義,small可以正確地詮釋這些信息。

8.占位符 (Placeholder)在HTML4或XHTML中,你需要用JavaScript來給文本框添加占位符。

比如,你可以提前設置好一些信息,當用戶開始輸入時,文本框中的文字就消失。

而在HTML5中,新的placeholder就簡化了這個問題。

9.必要屬性 (Required Attribute)HTML5中的新屬性required指定了某一輸入是否必需。

有兩種方法聲明這一屬性。

  1. inputtype=textname=someInputrequired
  2. inputtype=textname=someInputrequired=required
當文本框被指定必需時,如果空白的話表格就不能提交。

下面是一個如何使用的例子。

  1. formmethod=postaction=
  2. labelfor=someInputYourName:/label
  3. inputtype=textid=someInputname=someInputplaceholder=DouglasQuaidrequired
  4. buttontype=submitGo/button
  5. /form
在上面那個例子中,如果輸入內容空且表格被提交,輸入框將被高亮顯示。

10.Autofocus屬性 (Autofocus Attribute)同樣,HTML5的解決方案消除了對JavaScript的需要。

如果一個特定的輸入應該是選擇或聚焦,默認情況下,我們現在可以利用自動聚焦屬性。

  1. inputtype=textname=someInputplaceholder=DouglasQuaidrequiredautofocus

11.Audio支持 (Audio Support)目前我們需要依靠第三方插件來渲染音頻。

然而在HTML5中,audio元素被引進來了。

  1. audioautoplay=autoplaycontrols=controls
  2. sourcesrc=file.ogg/
  3. sourcesrc=file.mp3/
  4. ahref=file.mp3Downloadthisfile./a
  5. /audio
當使用audio元素時請記得包含兩種音頻格式。

FireFox想要.ogg格式的文件,而Webkit瀏覽器則需要.mp3格式的。

和往常一樣,IE是不支持的,且Opera10及以下版本只支持.wav格式。

12.Video支持 (Video Support)HTML5中不僅有audio元素,而且還有video。

然而,和audio類似,HTML5中并沒有指定視頻解碼器,它留給了瀏覽器來決定。

雖然Safari和InternetExplorer9可以支持H.264格式的視頻,Firefox和Opera是堅持開源Theora和Vorbis格式。

因此,指定HTML5的視頻時,你必須提供這兩種格式。

  1. videocontrolspreload
  2. sourcesrc=cohagenPhoneCall.ogvtype=video/ogg;codecs='vorbis,theora'/
  3. sourcesrc=cohagenPhoneCall.mp4type=video/mp4;'codecs='avc1.42E01E,mp4a.40.2'/
  4. pYourbrowserisold.ahref=cohagenPhoneCall.mp4Downloadthisvideoinstead./a/p
  5. /video

13.視頻預載 (Preload attribute in Videos element)當用戶訪問頁面時這一屬性使得視頻得以預載。

為了實現這個功能,可以在video元素中加上preload=preload或者只是preload。

  1. videopreload

14.顯示控制條 (Display Controls)如果你使用過上面的每一個提到的技術點,你可能已經注意到,使用上面的代碼,視頻僅僅顯示的是張圖片,沒有控制條。

為了渲染出播放控制條,我們必須在video元素內指定controls屬性。

  1. videopreloadcontrols

15.正規表達式 (Regular Expressions)在HTML4或XHTML中,你需要用一些正規表達式來驗證特定的文本。

而HTML5中新的pattern屬性讓我們能夠在標簽處直接插入一個正規表達式。

  1. formaction=method=post
  2. labelfor=usernameCreateaUsername:/label
  3. inputtype=text
  4. name=username
  5. id=username
  6. placeholder=410
  7. pattern=[A-Za-z]{4,10}
  8. autofocus
  9. required
  10. buttontype=submitGo/button
  11. /form

結論事實上,還有很多新元素和特性,上面提到的只是一些我認為網站開發中常用的,剩下的就由你們自己去摸索啦。

版權聲明:本文由 季凌蘭 整理編輯。

原標題:html5 css3新特性,不是html5的新特性

轉載注明出處:http://www.dn9ww09s.icu/fault/11171.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 數據線連接電腦沒反應,手機用數據線連接電腦沒反應

    數據線連接電腦沒反應,手機用數據線連接電腦沒反應 相關圖片跳過usb調試連接電腦當我們的手機連接到電腦上時,會出現輸入端口已經插好,但電腦沒有響應,無法檢測到手機的連接提示我們現在該怎么辦?今天,我要告訴你,當手機的數據線連...

  • 表格布局,表格怎么做

    表格布局,表格怎么做 相關圖片表格樣式今天,我帶了一個簡短的教程來制作和實現一個帶有ulli的css表。我聽說過去用css實現一個表是不好的,但是最好直接用傳統的表來實現。實際上,我不這么認為如果您ExceL如何...

  • 計算機丟失msvcr80,計算機丟失msvcr100

    計算機丟失msvcr80,計算機丟失msvcr100 相關圖片計算機丟失msvcp100當用戶一次運行程序時,由于計算機中缺少msvcr.dll,因此無法啟動程序。請嘗試重新安裝程序以解決此問題。“當時,我說不出話來,因為系統剛剛安裝好。怎么處理?...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽除了全局屬性之外,基本標記還有兩個屬性,即:href和target沒有內容值接口HTMLBaseElement:HTMLElement{attribute DO自定標簽...

  • 電腦開機藍屏怎么解決,電腦一直藍屏怎么辦

    電腦開機藍屏怎么解決,電腦一直藍屏怎么辦 相關圖片電腦藍屏怎么解決步驟為什么會出現藍屏?事實上,有很多原因,如硬件故障、刪除顯卡的更新驅動程序等,都可能導致電腦出現藍屏然后編輯會告訴你如何解決藍屏的問題當我們使用...

  • 電腦機箱配置推薦,筆記本組裝配置清單

    電腦機箱配置推薦,筆記本組裝配置清單 相關圖片組裝電腦吧很多朋友會認為商場里的電腦總是不符合我們的愿望這時,非常需要組裝計算機。但就電腦配置而言,對于一個懂電腦的朋友來說,這是非常簡單的但對于那些不懂電腦的人...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽body元素是html文檔的主要內容標簽。您可以將屬性onafterprint設置為在打印文檔之后運行腳本onbeforeprint設置為在打印文檔之前運行腳本自定標簽...

  • dxf文件如何打開,什么是dxf文件

    dxf文件如何打開,什么是dxf文件 相關圖片dxf文件打開空白什么是DXF文件?小編在這里給你一個簡單的解釋dxf文件是矢量數據的開放格式文件。所以,在我們理解了它的含義之后,讓我們了解一下它的開放模式。接下來,小編會...

  • css動態樣式,如何動態改變css樣式

    css動態樣式,如何動態改變css樣式 相關圖片如何動態選擇css動態添加樣式:(紅色字體是動態添加樣式的語句),是動態生成無序列表的功能,用于顯示搜索到的WiFi信號,包括3個參數、WiFi名稱、加密方法和信號強度。代碼如下...

  • 電腦如何恢復出廠設置,恢復出廠設置如何還原

    電腦如何恢復出廠設置,恢復出廠設置如何還原 相關圖片臺式電腦怎么恢復出廠設置眾所周知,計算機長期使用后會產生大量的系統垃圾。同時,可能會出現一些系統故障。當故障嚴重時,我們只能通過重新安裝系統或恢復出廠設置來解決此...

熱評文章

  • 如何關閉電腦自動更新win10,電腦關閉更新

    如何關閉電腦自動更新win10,電腦關閉更新 相關圖片關閉自動更新自動更新,這四個字最常用于手機或電腦軟件,以及電腦系統但小編今天不是來討論電腦更新的有用性的這是關于當我們不想讓電腦自動更新時如何關閉它。如何關閉自動...

  • 標簽和標識的區別,行標簽和塊標簽的區別

    標簽和標識的區別,行標簽和塊標簽的區別 相關圖片單標簽有哪些(1)觀念的轉變:HTML5注重內容和結構,但不注重標題H組導航相關數據的表現/H組/標題導航菜單/導航文章H1標題:HTML5專題視頻教程/H1(2)聲明和標單標簽...

  • tenda路由器怎么設置,tenda路由器重置

    tenda路由器怎么設置,tenda路由器重置 相關圖片tendawifi使用路由器橋接功能可以使路由器網絡覆蓋范圍更廣。騰達路由器具有橋接功能。騰達無線路由器的設置特別簡單。它非常適合許多小的白色設置。那么如何設置tenda路由器呢騰達...

  • 電腦開機顯示器沒有反應,電腦開機顯示器沒信號的解決方法

    電腦開機顯示器沒有反應,電腦開機顯示器沒信號的解決方法 相關圖片電腦檢測不到顯示器他們都說計算機應該經常使用,否則很容易壞。但是電腦也有很長的壽命如果長期使用,還是會有問題的就像小編今天說監視器沒有信號一樣。那我們怎么解決呢接...

  • 元素浮動,浮動元素特點

    元素浮動,浮動元素特點 相關圖片什么是浮動根據css規范,浮動將從文檔流中移出,這不會影響塊框的布局,而只影響內聯框(通常是文本)的排列。因此,當其高度超過包含容器時,父容器將不會自動擴展以關閉浮動...

  • 電腦開機花屏,電腦花屏無法開機

    電腦開機花屏,電腦花屏無法開機 相關圖片電腦花屏怎么辦世界上每天都有那么多人使用電腦。所以每天,世界每個角落都有許多人面臨著不同的計算機問題今天,我將討論如何在電腦打開啟動屏幕時解決這個問題所以,伙計們...

  • 表單設計,html表單設計

    表單設計,html表單設計 相關圖片表單頁面設計許多css愛好者不喜歡html表格,尤其是在制作表單時。雖然現在是xhtml css的時代,但大多數表單仍然使用表布局進行設計。那么,有沒有更好的方法來使用純語工作流表單設...

  • 安全模式進不去,如何退出安全模式

    安全模式進不去,如何退出安全模式 相關圖片退出安全模式我們的電腦使用很長時間后,容易出各種各樣的問題這時我們需要安全模式。因為有時我們需要進入安全模式來改變系統的一些操作。所以問題是,如何進入安全模式所以...

  • 筆記本外接顯示器,筆記本外接顯示器掉幀

    筆記本外接顯示器,筆記本外接顯示器掉幀 相關圖片筆記本外接2k顯示器我們習慣每天做一件事。當我們突然有一天不去做的時候,我們感到很不習慣。這和使用電腦是一樣的。當我們習慣于使用大屏幕的電腦時,突然間我們不習慣使用小...

  • 拍照上傳,拍照上傳改本地上傳

    拍照上傳,拍照上傳改本地上傳 相關圖片本地相冊替換相機拍照在HTML5規范的支持下,webapp可以在手機上拍照接下來,我將解釋web應用如何使用手機拍攝照片,在頁面上顯示并上傳到服務器。一。視頻流HTML5媒體捕獲A拍照識別...

關注微信

变脸官网查询