App下載

10個html5增加的重要新特性和內(nèi)容

猿友 2021-01-22 13:47:46 瀏覽數(shù) (2966)
反饋

文章開篇之前我們先了解一下什么是 html5,百度上是這樣定義 html5 的:萬維網(wǎng)的核心語言、標準通用標記語言下的一個應(yīng)用超文本標記語言(HTML)的第五次重大修改。


其實說白了 html5 也就是人為定義的一些規(guī)則和新的 api 的集合。下面我就介紹一些開發(fā)常用的 html5 新特性:

一:canvas 標簽

<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas">your browser does not support the canvas tag </canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
</body>
</html>

渲染結(jié)果:

1091597-20170616150224259-100747651

通過這個元素你可以繪制你想要的圖案。

二:video標簽??

<video src="視頻地址" controls="controls" autoplay="autoplay" > 
your browser does not support the video tag   //可以在開始標簽和結(jié)束標簽之間放置文本內(nèi)容,這樣老的瀏覽器就可以顯示出不支持該標簽的信息。
</video>

video 標簽具有以下屬性:

  1.autoplay:如果出現(xiàn)該屬性,則視頻在就緒之后馬上播放

  2.controls:如果出現(xiàn)該屬性,則向用戶顯示控件,比如播放按鈕

  3.height:設(shè)置視頻播放器高度

  4.loop:如果出現(xiàn)該屬性,則會重復(fù)播放

  5.preload:如果出現(xiàn)該屬性,則視頻在頁面加載時進行加載,并預(yù)備播放。如果使用“autoplay”,則忽略該屬性。

  6.src:視頻地址

  7.width:設(shè)置視頻播放器寬度

三:localStorage 和 sessionStorage

   Web Storage 的概念和 cookie 相似,區(qū)別是它是為了更大容量存儲設(shè)計的。Cookie 的大小是受限的,并且每次你請求一個新的頁面的時候 Cookie 都會被發(fā)送過去,這樣無形中浪費了帶寬,另外 cookie 還需要指定作用域,不可以跨域調(diào)用。

   1.localStorage: 用于持久化的本地存儲,除非主動刪除數(shù)據(jù),否則數(shù)據(jù)是永遠不會過期的。

   2.sessionStorage: 用于本地存儲一個會話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此 sessionStorage 不是一種持久化的本地存儲,僅僅是會話級別的存儲。

   Web Storage 擁有 setItem,getItem,removeItem,clear 等方法,不像 cookie 需要前端開發(fā)者自己封裝 setCookie,getCookie。

  sessionStorage.setItem("name", "三十億少女的夢");    
  console.log(sessionStorage.getItem("name")); //三十億少女的夢

四:語義化標簽

在 HTML5 出來之前,我們用 div 構(gòu)建頁面,但是這些 div 都沒有實際意義。我們只能通過 id 等屬性認為賦予它一些身份。為了便于開發(fā)者觀察和 seo(搜索引擎優(yōu)化),html5 推出了這些語義化標簽。

  header:代表“網(wǎng)頁”或“section”的頁眉。

  footer:代表“網(wǎng)頁”或“section”的頁腳,通常含有該節(jié)的一些基本信息,譬如:作者,相關(guān)文檔鏈接,版權(quán)資料。

  hgroup:代表“網(wǎng)頁”或“section”的標題,當元素有多個層級時,該元素可以將 h1 到 h6 元素放在其內(nèi),譬如文章的主標題和副標題的組合

  nav:元素代表頁面的導(dǎo)航鏈接區(qū)域。用于定義頁面的主要導(dǎo)航部分。

  aside:被包含在 article 元素中作為主要內(nèi)容的附屬信息部分,其中的內(nèi)容可以是與當前文章有關(guān)的相關(guān)資料、標簽、名次解釋等。

  section:代表文檔中的“節(jié)”或“段”,“段”可以是指一篇文章里按照主題的分段;“節(jié)”可以是指一個頁面里的分組。

  article:最容易跟 section 和 div 容易混淆,其實 article 代表一個在文檔,頁面或者網(wǎng)站中自成一體的內(nèi)容,其目的是為了讓開發(fā)者獨立開發(fā)或重用。譬如論壇的帖子,博客上的文章,一篇用戶的評論,一個互動的 widget 小工具。(特殊的section)

五:新表單控件

  html5 中添加了 date(日期選擇)、time(時間選擇)、email(郵箱地址)、url(鏈接)等表單控件,我個人非常喜歡這些添加。比如 email 控件,以前我們沒有這個控件的時候要判斷用戶輸入的是不是 email 格式只能通過js正則表達式來判斷,但 h5 之后只用在 input 的 type 屬性寫上 email 就可以了,但這只是基本的判斷不能保證百分百過濾,為了安全,后臺還是要進行 email 格式判斷的。

<input type="email" />

六:去掉 script 和 link 標簽里的 type 屬性

html5 之后你的 script 和 link 不用再加 type 屬性,一樣可以工作正常,但是為了不出差錯,最好還是加上。

七:contenteditable 屬性

你的任何 dom 節(jié)點只要加上 contenteditable="true"就可以變得可編輯,也是一個很棒的屬性添加,用這個你可以模擬 textarea。

八:input 添加了 placeholder,required,autofocus,pattern 等屬性

<input type="text" placeholder="請輸入姓名" />  
<!--當這個輸入框為空時框內(nèi)顯示:請輸入姓名 -->
<input type="text" required /> <!--輸入框為必填,否則不能提交表單 -->
<input type="text" autofocus /> <!--進入頁面,自動聚焦到這個input -->
<input type="text" name="country_code" pattern="[A-z]{3}"> <!--輸入值必須與正則匹配-->

九:mark標簽

使用 mark 標簽可以使你的內(nèi)容有醒目的標記,從 mark 這個單詞相信你就能猜出這個標簽大概用途

十:pageInput 創(chuàng)建滑塊

HTML5 引用的 range 類型可以創(chuàng)建滑塊,它接受 min, max, step 和 value 屬性,可以使用 css 的 :before 和 :after 來顯示 min 和 max 的值 ,但是顯示的不是很友善。

<style>
input[type=range]:before {
content: attr(min);
padding-right: 5px;
}
?
input[type=range]:after {
content: attr(max);
padding-left: 5px;}
}
</style>
<input type=”range” name=”range” min=”0″ max=”10″ step=”1″ />


1 人點贊