html5中新增加的內容

2021-08-14 14:59:32 字數 2119 閱讀 4894

一、html5中新增加的語義化標籤

header、footer、article、figure...這些標籤不相容ie6-8低版本,相容處理:html5.min.js;

修改或者刪除了一些標籤:strong、small(附屬細則)、hr...修改指的是改變了標籤的語義化:font、center這些標籤建議不用(刪除);

新增一些標記標籤:mark(標記)、time(時間)、progress(進度)...

<

detailsopen>

<

summary>

我的筆記

summary>

details>

<

inputtype="text"id="search"list="searchlist">

<

datalistid="searchlist">

<

option>哈哈

是誰option>

<

option>哈哈

要幹嘛option>

<

option>

哈哈在**

option>

datalist>

二、針對於傳統的表單元素進行公升級

傳統的表單元素:form、laber、textarea、select、button...

input(text、password、radio、checkbox、file、submit、reset、button)

針對於傳統的公升級:給input新增加一些型別(search、email、number、tell、range、color、date)

公升級:給表單元素新增加屬性placeholder(給表單元素設定提示資訊)

公升級:提供了新的下拉框方式

給input設定新的型別作用:

1.當使用者輸入的時候,可以根據設定的型別,調取出最符合使用者輸入的鍵盤(比如型別設定為:number',調取出來的就是數字鍵盤...)

2.提供了css和js新的驗證方式(我們一半常用的還是正則驗證)

css驗證:

#useremail:valid

#useremail:invalid js內建驗證:

useremail.onkeydown = useremail.onkeyup = function () 

this.style.backgroundcolor = 'white';

};

正則驗證:

移動端事件中一班都沒有:keydown/keyup(移動端是虛擬鍵盤),我們使用input事件代替即可;

useremail.οninput=function...

自己編寫正則驗證(專案中最常用):

useremail.onkeydown = useremail.onkeyup = function (){}

四、新增canvas繪圖:canvas是乙個標籤,我們可以基於js,把它作為乙個畫布,繪製出想要的圖形或者動畫

echarts:圖示外掛程式,它是基於canvas實現

五、新增一些api(主要是供js使用的)

webstorage:localstorage、seessionstorage 本地儲存解決方案
web socket:新的客戶端和伺服器端通訊方案
獲取地理位置或者重力感應等api
...

HTML5新增內容

先附上原始碼 完成百分比 100 蘋果素有 水果之王 的美稱,它含有豐富的維生素c,能讓 細嫩 柔滑而白皙,蘋果 的做法很簡單,將蘋果去皮去核切塊後放入攪拌機攪成泥狀,乾性 的美眉在蘋果泥中加入新鮮的牛奶或蜂蜜,油性 的美眉則可加入少量蛋清,攪拌均勻後塗在臉上,敷10 15分鐘後洗淨,你會發現膚色有...

HTML5新增內容

1.html5 標準還在制定中 首先要注意的是,html5雖然現在很火,但是html5標準還在制定中,標準仍在改變。html4已經10多年了,不會有任何改變了。2.簡化的語法 html5簡化了很多細微的語法,例如doctype的宣告,你只需要寫就行了。html5與html5,xhtml1相容,但是與...

HTML5表單教程之input新增加的六種時間型別

今天介紹一下input在html5中新增加的時間型別的應用,如果在以下這幾種輸入框中輸入的格式不正確,是無法提交的。注意 此種型別的input在opera10 中效果為佳,chrome中效果不是十分好,外觀取決於瀏覽器 1 date型別 form inputid w3cfuns date name ...