MM131美女爱做视频在线看_性强烈的欧美三级视频_男女性潮高清免费网站_日日摸日日碰夜夜爽歪歪

IT培訓(xùn)-高端面授IT培訓(xùn)機(jī)構(gòu)
云和教育:云和數(shù)據(jù)集團(tuán)高端IT職業(yè)教育品牌
  • 國(guó)家級(jí)
    全民數(shù)字素養(yǎng)與技能培訓(xùn)基地
  • 河南省
    第一批產(chǎn)教融合型企業(yè)建設(shè)培育單位
  • 鄭州市
    數(shù)字技能人才(碼農(nóng))培養(yǎng)評(píng)價(jià)聯(lián)盟

詳解HTML5,知道了這些可以成為前端工程師

  • 發(fā)布時(shí)間:
    2019-06-18
  • 版權(quán)所有:
    云和教育
  • 分享:

HTML5并不僅僅是作為HTML標(biāo)記語(yǔ)言的一個(gè)最新版本,更重要的是它制定了web應(yīng)用開(kāi)發(fā)的一系列標(biāo)準(zhǔn), 成為第一個(gè)將web作為應(yīng)用程序開(kāi)發(fā)平臺(tái)的HTML語(yǔ)言。

配圖1 HTML5的優(yōu)勢(shì).jpg

HTML5定義了一系列的新元素, 如新語(yǔ)義標(biāo)簽, 智能表單, 多媒體標(biāo)簽, 可以幫助開(kāi)發(fā)者創(chuàng)建互聯(lián)網(wǎng)應(yīng)用, 同時(shí)有令人眼花的css3, 還提供了一些JavaScript的API(應(yīng)用程序接口), 列如: 地理定位 重力感應(yīng), 硬件訪問(wèn), 可以在瀏覽器內(nèi)實(shí)現(xiàn)類似于原生應(yīng)用, 制作webAPP, 甚至結(jié)合Canvas可開(kāi)發(fā)一些網(wǎng)頁(yè)板的小游戲啊。

配圖2 什么是HTML5.jpg

H5其實(shí)只是一個(gè)泛稱, 是由HTML5+CSS3+JavaScript等技術(shù)結(jié)合而成的一個(gè)應(yīng)用開(kāi)發(fā)平臺(tái)。

1.HTML5的兼容性

新增的部分有兼容性的問(wèn)題, 并不是所有的html5都是IE9兼容的, 有一些屬性是需要IE10或者更高級(jí)的瀏覽器才能兼容, 所以, html5更多應(yīng)用在移動(dòng)端的方面, 因?yàn)橐苿?dòng)端搭載的瀏覽器比較高級(jí)。

2.HTML5的骨架

配圖3 云和數(shù)據(jù)HTML5課程升級(jí).jpg

代碼示例:

<!DOCTYPE html>  <html>    <head>      <meta charset=”UTF-8″>      <title>Title</title>     <style>     </style>    </head>    <body>    </body>  </html>

HTML5骨架是沒(méi)有兼容的問(wèn)題的。

反問(wèn):如果在xt的文檔DTD里面書(shū)寫(xiě)h5的內(nèi)容,會(huì)帶來(lái)兼容問(wèn)題么?

答:跟你用什么文檔DTD沒(méi)有關(guān)系 主要跟瀏覽器有關(guān)系。

3.HTML5新增的標(biāo)簽

新增的6大結(jié)構(gòu)標(biāo)簽:

(1)header 網(wǎng)站頭部 (2)nav 導(dǎo)航欄(3)section 類似于div (4)aside 文件側(cè)欄(5)article 文章/文本內(nèi)容(6)footer 網(wǎng)站腳部

作用:跟div一模一樣 ,就是增加了語(yǔ)義性更加利于seo優(yōu)化。

配圖4 云和數(shù)據(jù)HTML5培訓(xùn).jpg

由于html5新增的標(biāo)簽有兼容問(wèn)題,所以我們需要做兼容!怎么實(shí)現(xiàn)?

(1)利用document.creatElement()去創(chuàng)建html5的新標(biāo)簽,同時(shí)設(shè)置成塊元素

<!–[if lt IE 9]>

<script type=”text/javascript”>

var e = “abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video”.split(‘, ‘);

var i= e.length;

while (i–){

document.createElement(e[i])

}

</script>

<![endif]–>

(1)借助于第三方的JS框架 =>html5shiv.min.js (推薦)配合IE的hack實(shí)現(xiàn)最佳兼容。

<!–[if lt IE 9]>

<script src=”js/html5shiv.min.js”></script>

<![endif]–>

注明:還有一些新增的用到的不多,所以了解即可,上述六個(gè)結(jié)構(gòu)標(biāo)簽是最為常用的。

配圖5 學(xué)習(xí)HTML5要多長(zhǎng)時(shí)間.jpg

4.HTML5新增的智能表彰

以前學(xué)過(guò) type =text ,submit ,reset,radio。。。。

type=”email” 限制用戶輸入必須為Email類型

type=”url” 限制用戶輸入必須為URL類型

type=”date” 自動(dòng)生成一個(gè)日期控件

type=”number” 限制用戶輸入必須為數(shù)字類型

type=”range” 產(chǎn)生一個(gè)進(jìn)度條的表單

type=”search” 產(chǎn)生一個(gè)搜索意義的表單

type=”color” 生成一個(gè)顏色選擇表單

總結(jié):智能表單的兼容比較大,在移動(dòng)端用的較多,移動(dòng)端會(huì)自動(dòng)調(diào)取手機(jī)本身的控件(不同手機(jī)之間會(huì)略有不同,但如果需要高度自定義,就需要用JS去寫(xiě)了)。