目錄
  上下文選單使用menu和menuitems元素
  細部(Details)與總結(Summary)元素
  更多的input類型- month,week 和datetime-local
  響應式圖片
  用form.reportValidity()驗證表單
  frames新的布林屬性allowfullscreen可以控制內容是否可以透過questrequestFullscreen( )方法來全螢幕展示內容。
  新的element.forceSpellCheck()方法允許你在text元素上觸發拼字檢查。這也是本文所列出的所有特性中第一個還不被任何瀏覽器支援的特性。也許,這可以用來進行檢查還沒有被使用者直接編輯的元素。
  補充
首頁 web前端 H5教程 HTML5.1中有哪些新特性?

HTML5.1中有哪些新特性?

May 31, 2017 pm 03:47 PM

 HTML 5.1概覽

#  兩年前HTML5標準的發布對於web開發社群來說是一件大事。不僅是因為它包含了一系列令人印象深刻的新特性, 還因為它是1999年發布的HTML4.01標準以後,對HTML的第一個大版本更新。你現在依然可以看到一些網站誇耀他們在使用「現代」的HTML5標準。

  幸運的是我們不需為下一次HTML標準的更新等待那麼長時間。 2015年10月,W3C開始著手HTML5.1草案,其目標是修復一些HTML5遺留的問題。多次迭代後, 草案於2016年6月達到“候選建議(Candidate Recommendation)”階段,2016年9月達到“提議建議(Proposed Recommendation)”,最終2016年11月發布W3C 建議。關注新標準的人可能注意到了,這是一段曲折之路。很多開始提出的HTML5.1特性因為不好的設計或缺少瀏覽器廠商支援而被廢棄了。

  儘管HTML5.1仍在發展, W3C已經開始著手HTML5.2草案,該標準預計2017年末發布。本文是對HTML5.1一些有趣的新功能和提升的概覽。瀏覽器對這些特性依然缺乏支持,但是至少我們會告訴你一些支援這些特性的瀏覽器,用來測試每個範例。

  上下文選單使用menu和menuitems元素

  HTML5.1草案介紹了兩種不同的menu元素: context和toolbar。前者用來擴展本地上下文選單,通常被頁面上的滑鼠右鍵啟動;後者用來定義一個普通的選單元件。在發展過程中,toolbar 被放棄了,但是context選單保存了下來。

  可以使用

標籤來定義一個包含一個或幾個 元素的選單,然後把它綁定到任何使用contextmenu 屬性的元素上。

  每個 可以是以下三種類型之一:

  • checkbox – 允許選擇或取消選擇一個選項(option);

  • command – 允許在點擊滑鼠時執行一個動作;

  • radio – 允許在一組選項中選擇一個.

  這裡有一個基本的使用例子,可以在Firefox49中運行, 但是Chrome54目前不行。

  請看SitePoint (@SitePoint)在CodePen上HTML5.1選單範例。

  在一個支援的瀏覽器上,這個上下文選單的範例應該看起來這樣:

A HTML 5.1 context menu

  上下文選單中有自訂項目。

  細部(Details)與總結(Summary)元素

  新的

元素可以透過滑鼠點擊實現附加資訊的展示和隱藏。這是使用JavaScript時候常在做的事,現在可以使用
元素和元素代勞了。點選元素可以展示和隱藏details元素的其餘部分.

  下面的範例可以在Firefox和Chrome中進行測試。

  請看SitePoint (@SitePoint)在CodePen上HTML5.1 細節與總結 demo。

  這個demo在支援的瀏覽器上應該是下面這樣:

Details and summary elements

  更多的input類型- month,week 和datetime-local

  input擴充了三種類型: month, week 和datetime-local。

  前兩種讓你可以選擇週或月。在Chrome中兩者都渲染成下拉的日曆,可以選擇某週或某月。當你用JavaScript得到它們的值,你將得到一個大致這樣的字串: "2016-W43"(week input); "2016-10" (month input)。

  最初,HTML5.1草案介紹了兩種日期類型input — datetime和datetime-local。不同的是,datetime-local 使用使用者時區, 而datetime允許你選擇時區。發展過程中,datetime 被放棄了,現在只有datetime-local存在。 datetime-local input由兩部分組成 — 日期,可以像week 和 month一樣進行選擇;時間, 可以單獨輸入。

  下面是關於所有新類型input的例子,它在chrome中可以正常展示,但是firfox不行。

  請看SitePoint (@SitePoint)在CodePen上HTML 5.1 week, month 和 datetime inputs。

  這個demo在支援的瀏覽器上應該是下面這樣:

Week, month and datetime-local inputs

  響應式圖片

  HTML5.1包含幾個在不使用CSS情況下實現響應式圖片的新特性。每個特性都有自己單獨的使用場景。

  srcset屬性

  srcset影像屬性允許列出多個可用於替代的圖片資料來源,這些資料來源的像素密度不同。這使得瀏覽器可以針對使用者裝置選擇合適品質的圖片(由裝置的像素密度、縮放比例或網路速度決定)。例如,在低速手機網路和小螢幕手機的情況下,應該為使用者提供低像素的圖片。

  srcset屬性接受一個用逗號分隔的URL列表,每個URL帶有一個表示最接近所請求圖片像素比(一個CSS像素所代表的物理像素數量)的修飾x。以下是一個簡單的例子:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 1x, 
  images/high-res.jpg 2x, 
  images/ultra-high-res.jpg 3x"
>
登入後複製

  在這個例子中,如果使用者裝置的像素比是1,圖片low-res將會被展示;如果是2,圖片high-res將會被展示;如果是3或更大,圖片ultra-high-res將會被展示。

  或者,你可以選擇將圖片展示成不同尺寸。這需要使用w:

<img src="images/low-res.jpg" srcset="
  images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>
登入後複製

  在這個例子中,圖片low-res被定義成600px寬,圖片high-res被定義成1000px寬,ultra-high-res是1400px寬。

  sizes屬性

  你可能想要根據使用者螢幕尺寸來使用不同方式展示圖片。例如,你可能想在寬螢幕上用兩欄展示圖片,窄一些的螢幕上用一欄。這點用sizes屬性就可以實現。它允許你為圖片分配螢幕的寬度,然後透過srcset屬性選擇合適的圖片。下面是一個例子:

<img src="images/low-res.jpg" sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/low-res.jpg 600w, 
  images/high-res.jpg 1000w, 
  images/ultra-high-res.jpg 1400w"
>
登入後複製

  當視口寬度大於40em時,sizes屬性把圖片的寬度定義為視口寬度的50%;當視口(viewport)寬度小於或者等於40em時,把圖片寬度定義為視窗寬度的100%。

  picture元素

  如果根據螢幕不同改變圖片的尺寸還是無法滿足需求,你想根據螢幕不同展示不同的圖片,那就需要使用picture元素。它允許你透過用指定多個不同元素,來為不同尺寸的螢幕定義不同資源的圖片。 元素作為URL載入圖片的來源。

<picture>
  <source media="(max-width: 20em)" srcset="
    images/small/low-res.jpg 1x,
    images/small/high-res.jpg 2x, 
    images/small/ultra-high-res.jpg 3x
  ">
  <source media="(max-width: 40em)" srcset="
    images/large/low-res.jpg 1x,
    images/large/high-res.jpg 2x, 
    images/large/ultra-high-res.jpg 3x
  ">

  <img src="images/large/low-res.jpg">
</picture>
登入後複製

  如果你想知道更多關於響應式圖片的東西,請戳How to Build Responsive Images with srcset.

  用form.reportValidity()驗證表單

##  用form.reportValidity()驗證表單

# HTML5定義的form.checkValidity()方法可以檢查表單是否符合事先定義好的驗證器然後傳回一個布林值。新的reportValidity() 方法很相似 — 它也可以檢驗一個表單並傳回結果,但是它也能為使用者報告錯誤。以下是一個例子(請在Firefox或Chrome中測試):

  請在CodePen上看SitePoint (@SitePoint)的範例HTML 5.1 report validity demo。

  "First name"輸入框被要求非空,如果不填寫它將被標記有錯誤。如果符合預期,它將是這樣:Working form validation with a message

  frames的AllowfullscreenFrames的Allowfullscreen屬性

  frames新的布林屬性allowfullscreen可以控制內容是否可以透過questrequestFullscreen( )方法來全螢幕展示內容。

  使用element.forceSpellCheck()進行拼字檢查

  新的element.forceSpellCheck()方法允許你在text元素上觸發拼字檢查。這也是本文所列出的所有特性中第一個還不被任何瀏覽器支援的特性。也許,這可以用來進行檢查還沒有被使用者直接編輯的元素。

  沒有寫進HTML5.1的特性

  一些特性在第一版的草案中被定義但是最終被刪除了,大部分原因是瀏覽器廠商缺乏興趣。以下是其中一些有趣的方法: 

 inert屬性

  inert屬性可以停用所有子元素的使用者交互,就像給所有子元素都加了disabled屬性。

  dialog元素

  

元素提供一個原生的彈出框,它甚至有一個方便的表單集合- 在上使用method屬性可以阻止表單提交到伺服器上,而是關閉彈出框並將結果傳回給彈出框的建立者。

  這個特性似乎在firfox仍然支持,所以可以看看下面這個例子(譯者註:firfox V49.0.2不支持:

###  請看SitePoint (@SitePoint)在CodePen的例子HTML dialog element。

  補充

  這不是一篇關於HTML5.1所有新功能的文章。有許多小的新特性、改變已經從現行標準中刪除,還有一些從未使用過的特性也被刪除了。

【相關推薦】

1. HTML5開發手機應用程式-詳細介紹viewport的作用(圖文)

#2. #20分鐘看懂html5 看看H5都有啥新功能

#3. H5學習之旅-H5的新功能(1)

#

以上是HTML5.1中有哪些新特性?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

win7家庭版與win7旗艦版的差異介紹 win7家庭版與win7旗艦版的差異介紹 Jul 12, 2023 pm 08:41 PM

大家都知道win7系統有很多種版本,像是win7旗艦版、win7專業版、win7家用版等,有不少用戶在家庭版和旗艦版之間糾結,不知道選擇哪個版本比較好,所以今天小編來跟大家說說win7家庭餐與win7旗艦版的差別介紹,大家一起來看看。 1.體驗不同家庭普通版使您的日常操作變得更快、更簡單,可以更快、更方便地存取使用最頻繁的程式和文件。家庭高級版讓您享有最佳的娛樂體驗,可以輕鬆欣賞和分享您喜愛的電視節目、照片、影片和音樂。旗艦版集各版本功能大全,具備Windows7家庭高級版的所有娛樂功能與專

掌握Spring MVC的關鍵概念:了解這些重要特性 掌握Spring MVC的關鍵概念:了解這些重要特性 Dec 29, 2023 am 09:14 AM

了解SpringMVC的關鍵特性:掌握這些重要的概念,需要具體程式碼範例SpringMVC是一種基於Java的Web應用開發框架,它透過模型-視圖-控制器(MVC)的架構模式來幫助開發人員建立靈活可擴展的Web應用程式。了解和掌握SpringMVC的關鍵特性將使我們能夠更有效地開發和管理我們的網路應用程式。本文將介紹一些SpringMVC的重要概念

Golang中有類似類別的物件導向特性嗎? Golang中有類似類別的物件導向特性嗎? Mar 19, 2024 pm 02:51 PM

在Golang(Go語言)中並沒有傳統意義上的類別的概念,但它提供了一種稱為結構體的資料類型,透過結構體可以實現類似類別的物件導向特性。在本文中,我們將介紹如何使用結構體實現物件導向的特性,並提供具體的程式碼範例。結構體的定義和使用首先,讓我們來看看結構體的定義和使用方式。在Golang中,結構體可以透過type關鍵字定義,然後在需要的地方使用。結構體中可以包含屬

選擇適用的Go版本,依需求和特性 選擇適用的Go版本,依需求和特性 Jan 20, 2024 am 09:28 AM

隨著網路的快速發展,程式語言也不斷演化和更新。其中,Go語言作為一種開源的程式語言,在近年來備受關注。 Go語言的設計目標是簡單、有效率、安全且易於開發和部署。它具有高並發、快速編譯和記憶體安全等特性,讓它在Web開發、雲端運算和大數據等領域中有著廣泛的運用。然而,目前Go語言也有不同的版本可供選擇。在選擇合適的Go語言版本時,我們需要考慮需求和特性兩個面向。首

5g的三個特性是什麼 5g的三個特性是什麼 Dec 09, 2020 am 10:55 AM

5g的三個特性是:1、高速率;在實際應用中,5G網路的速率是4G網路10倍以上。 2、低時延;5G網路的時延約幾十毫秒,比人的反應速度還要快。 3.廣連結;5G網路出現,配合其他技術,將會打造一個全新的萬物互聯景象。

C++ 函式的型別和特性 C++ 函式的型別和特性 Apr 11, 2024 pm 03:30 PM

C++函式有以下型別:簡單函式、const函式、靜態函式、虛函式;特性包括:inline函式、預設參數、參考回傳、重載函式。例如,calculateArea函數使用π計算給定半徑圓的面積,並將其作為輸出傳回。

java的特性是什麼 java的特性是什麼 Aug 09, 2023 pm 03:05 PM

java的特性是:1、簡單易學;2、面向對象,使得程式碼更可重複使用和維護;3、平台無關性,能在不同的作業系統上運作;4、記憶體管理,透過自動垃圾回收機制來管理記憶體;5、強型別檢查,變數在使用前必須先聲明類型;6、安全性,可以防止未經授權的存取和惡意程式碼的執行;7、多執行緒支持,能提高程式的效能和回應能力;8、異常處理,可以避免程式崩潰;9、大量的開發庫和框架;10、開源生態系統。

提升程式碼效率的五大PHP8亮點功能! 提升程式碼效率的五大PHP8亮點功能! Jan 13, 2024 am 08:19 AM

PHP8的五大亮點功能,讓你的程式碼更有效率! PHP(HypertextPreprocessor)是一種廣泛使用的開源腳本語言,用於Web開發。它簡單易學,可以與HTML嵌套使用,同時也支援物件導向程式設計。 PHP8作為最新版本,具有許多令人興奮的新功能和改進,以下是五個主要亮點功能,可以讓你的程式碼更有效率。一、JIT編譯器(Just-In-TimeCompile

See all articles