整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          HTML5編程基礎(chǔ)知識普及:快速認(rèn)識HTML5

          HTML5編程基礎(chǔ)知識普及:快速認(rèn)識HTML5

          著HTML5技術(shù)的不斷發(fā)展HTML5逐漸成為網(wǎng)絡(luò)搭建的主流語言。并且隨著移動網(wǎng)絡(luò)的快速發(fā)展,HTML5的也得到了快速的發(fā)展,企業(yè)也越來越重視HTML5的開發(fā)人才。HTML5雖然興起時間不長,但是發(fā)展勢頭卻無比迅猛。但對HTML5你又了解多少知識呢?今天小編就為大家分享關(guān)于HTML5的一些知識,幫你快速認(rèn)識HTML5。

          一、網(wǎng)絡(luò)標(biāo)準(zhǔn)

          HTML5本身是由W3C推薦出來的,它的開發(fā)是通過谷歌、蘋果,諾基亞、中國移動等幾百家公司一起醞釀的技術(shù),這個技術(shù)最大的好處在于它是一個公開的技術(shù)。換句話說,每一個公開的標(biāo)準(zhǔn)都可以根據(jù)W3C的資料庫找尋根源。另一方面,W3C通過的HTML5標(biāo)準(zhǔn)也就意味著每一個瀏覽器或每一個平臺都會去實(shí)現(xiàn)。

          二、多設(shè)備跨平臺

          用HTML5的優(yōu)點(diǎn)主要在于,這個技術(shù)可以進(jìn)行跨平臺的使用。比如你開發(fā)了一款HTML5的游戲,你可以很輕易地移植到UC的開放平臺、Opera的游戲中心、Facebook應(yīng)用平臺,甚至可以通過封裝的技術(shù)發(fā)放到App Store或Google Play上,所以它的跨平臺性非常強(qiáng)大,這也是大多數(shù)人對HTML5有興趣的主要原因。

          三、自適應(yīng)網(wǎng)頁設(shè)計(jì)

          很早就有人設(shè)想,能不能“一次設(shè)計(jì),普遍適用”,讓同一張網(wǎng)頁自動適應(yīng)不同大小的屏幕,根據(jù)屏幕寬度,自動調(diào)整布局(layout)。

          2010年,Ethan Marcotte提出了”自適應(yīng)網(wǎng)頁設(shè)計(jì)“這個名詞,指可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)。

          這就解決了傳統(tǒng)的一種局面——網(wǎng)站為不同的設(shè)備提供不同的網(wǎng)頁,比如專門提供一個mobile版本,或者iPhone / iPad版本。這樣做固然保證了效果,但是比較麻煩,同時要維護(hù)好幾個版本,而且如果一個網(wǎng)站有多個portal(入口),會大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

          那么如果你想成為一名優(yōu)秀的HTML5工程師,你需要學(xué)習(xí)哪些東西呢?

          HTML、XHTML、CSS3、JavaScript、JQuery(JQuery-UI、JQuery-Mobile),這些軟件都是基礎(chǔ)是必須要學(xué)會,沒得捷徑可走,需要自己多加練習(xí)。

          其實(shí)想要成為一名優(yōu)秀的高薪HTML5工程師,是需要學(xué)不少東西的。但是也不要覺得這門技術(shù)很難學(xué)。其實(shí)入門還是很簡單的,只要你肯多動手練習(xí),再加上科學(xué)的學(xué)習(xí)方式,學(xué)HTML5是不難的哦!

          綜上所述,HTML5應(yīng)用的最大優(yōu)勢就是可以在網(wǎng)頁上直接調(diào)試和修改,為桌面和移動平臺帶來無縫銜接的豐富內(nèi)容,這就使得HTML5技術(shù)迅速風(fēng)靡全球。

          天發(fā)了一篇干貨,似乎沒人看,好吧,我們來說說技術(shù)吧。

          HTML5專題是隨性更新,不一定每天更新這個專題。

          一、結(jié)構(gòu)的精簡

          一個HTML5文檔的最簡單結(jié)構(gòu)是:

          結(jié)構(gòu)

          相比常規(guī)的html更為精簡

          二、整體文檔結(jié)構(gòu)化的代表標(biāo)簽

          <header><section><footer><nav><article><aside>

          三、文檔結(jié)構(gòu)和語義

          1、頁眉header、整個頁面的頭部

          2、正文article、博文或者新聞的展現(xiàn)

          3、頁腳footer、一般用于呈現(xiàn)頁面底部的相關(guān)信息,可以放在body最下面,也可以放在article的最下面,只要記住它的作用是呈現(xiàn)其他信息,且不能相互嵌套

          4、導(dǎo)航nav、可以出現(xiàn)在header,也可以出現(xiàn)在footer,也可以出現(xiàn)在section,只要保證語義化,即用作導(dǎo)航功能,如配合footer就可以表示為如下形式

          5、側(cè)邊欄aside、用于頁面上一些與主題聯(lián)系不大而相對獨(dú)立的區(qū)域,通常用于邊欄,例如展示以下內(nèi)容:快速鏈接、最多訪問、登錄注冊等

          6、文檔中的節(jié)section、通常表示一段專題性的內(nèi)容,一般會帶有標(biāo)題,應(yīng)用的典型場景有文章的章節(jié)、標(biāo)簽對話框中的標(biāo)簽頁、或者論文中有編號的部分,section可以說語義化強(qiáng)于div,但是弱于article,也可以這么說吧,article標(biāo)簽是特殊的section,section是特殊的div,語義遞減。對于 section 和 article 的區(qū)分乍看比較難,其實(shí)重點(diǎn)就是看看這段內(nèi)容脫離了整體是不是還能作為一個完整的、獨(dú)立的內(nèi)容而存在,這里面的重點(diǎn)又在完整身上。因?yàn)槠鋵?shí)說起來 section 包含的內(nèi)容也能算作獨(dú)立的一塊,但是它只能算是組成整體的一部分,article 才是一個完整的整體。

          那么section所用到的結(jié)構(gòu)可以如下幾種形式:

          通過上面可以看出,section可以應(yīng)用的場景很多,但是需要注意的就是保證語義化。

          四、文檔大綱

          通過第三點(diǎn)所列出的標(biāo)簽,可以對網(wǎng)站的大綱做一個總結(jié),并不代表正確的大綱就是如此,但是可以起到借鑒作用。

          當(dāng)然了,頁面結(jié)構(gòu)的設(shè)計(jì)完全取決于開發(fā)人員,但是為了更好的體現(xiàn)HTML5的語義化原則,清楚的認(rèn)識每個標(biāo)簽所代表的語義就很重要,這里所列出的文檔結(jié)構(gòu)只是一種代表,在<section>里面可以包含更多的新的標(biāo)簽,諸如<figure><video><hgroup>等,都需要根據(jù)需求來確定。

          對于使用不支持HTML5的瀏覽器的用戶,同樣有解決的辦法:

          可以在<head></head>內(nèi)部以注釋的形式(這樣的注釋只對IE(包括那些國產(chǎn)的IE內(nèi)核的瀏覽器)有效)引用這樣一個js,它托管在Google開源服務(wù)器上,它可以讓IE8及以下版本的ie也支持那些新的html5標(biāo)簽(包括IE6).

          以上全部還必須使用CSS形成自己的樣式,所謂語義,僅僅是開發(fā)人員在查看的頁面的時候可以很清晰的知道頁面結(jié)構(gòu),何處為頭部何處為內(nèi)容。

          更多前端小知識,盡在https://blog.imcyk.com

          許多人來說,學(xué)習(xí)HTML是學(xué)習(xí)Web設(shè)計(jì)和開發(fā)的第一步--甚至是更高級的編程語言。大多數(shù)人認(rèn)為HTML清晰易學(xué)。因?yàn)樗且环N標(biāo)記語言,它不同于編程語言。標(biāo)記語言旨在描述文檔中內(nèi)容片段的用途。

          關(guān)于HTML的一個常見誤解是它被用來設(shè)計(jì)網(wǎng)頁或網(wǎng)站。雖然HTML語言提供了結(jié)構(gòu),但該結(jié)構(gòu)與實(shí)際外觀脫節(jié)。HTML結(jié)構(gòu)可以應(yīng)用于大屏幕顯示器,移動設(shè)備,甚至打印版本的文檔。所以當(dāng)你在HTML5培訓(xùn)機(jī)構(gòu)學(xué)有所成之后,你的就業(yè)選擇也是很多的,不僅僅只是做網(wǎng)站。

          今天使用的HTML版本很多,最常用的是HTML5。使用HTML5,我們可以直接在Web瀏覽器中播放音頻和視頻。HTML5帶來了大量的新標(biāo)簽,使我們能夠構(gòu)造文檔。這些新標(biāo)簽包括頁眉、頁腳、文章、部分、旁邊和導(dǎo)航(用于導(dǎo)航元素)。

          要想學(xué)好HTML5,首先要理解HTML5代碼背后的詞匯表是很重要的,如果你理解并能夠識別HTML5代碼中的標(biāo)記、內(nèi)容、屬性和值,那么你就可以更好地理解代碼。我們在HTML5培訓(xùn)中學(xué)習(xí)時,要非常重視這一點(diǎn),不懂的要及時問老師,加深對代碼的理解,這對你學(xué)習(xí)其他語言也有好處。

          標(biāo)記和元素

          標(biāo)記是HTML的基本構(gòu)建塊。標(biāo)記是構(gòu)成HTML標(biāo)記語言的單個內(nèi)容單元。HTML標(biāo)記被配對成一個開始標(biāo)記和一個結(jié)束標(biāo)記。開始標(biāo)記、結(jié)束標(biāo)記和中間出現(xiàn)的任何內(nèi)容一起稱為元素。

          內(nèi)容

          內(nèi)容通常是用戶實(shí)際要閱讀、聆聽或查看的內(nèi)容。在瀏覽器中查看的所有文本都是存在于HTML代碼的某些元素中的內(nèi)容。

          屬性和值

          通常,需要以某種方式修改標(biāo)記,或者需要關(guān)于標(biāo)記應(yīng)該如何執(zhí)行的附加信息。通常,標(biāo)記需要鏈接到CSS或Javascript代碼,以便使它們具有動態(tài)。在這兩種情況中,都使用屬性和值。

          每個行業(yè)都有要使用的“工具”。在HTML的情況下,您會用一些程序來編寫和顯示代碼。有幾十種好工具。你可以通過反復(fù)嘗試找出你最喜歡的工具。HTML5培訓(xùn)中也會介紹很多種工具供你學(xué)習(xí),你熟悉的越多,對你在工作上的幫助也就越大。

          文本編輯器

          文本編輯器是編寫HTML5代碼的程序。文本編輯器類似于精簡的字處理器。最重要的是,與文字處理器相比,它們保持文本“純凈”,并且不會注入格式代碼來混淆試圖解釋HTML的瀏覽器。

          一個好的免費(fèi)文本編輯器是Adobe的括號。括號適用于pc和mac。網(wǎng)上也有免費(fèi)的供你下載

          瀏覽器

          瀏覽器的面貌總是在變化。大多數(shù)開發(fā)人員在他們的機(jī)器上安裝了幾個瀏覽器。目標(biāo)通常是確保HTML和CSS代碼在這一系列瀏覽器上執(zhí)行相同的操作。GoogleChrome仍然是許多開發(fā)人員的最愛,因?yàn)樗鼡碛袕V泛的開發(fā)工具。Chrome中的開發(fā)人員工具提供了一種測試HTML和Javascript代碼以及跟蹤問題的方法。

          除了Chrome之外,大多數(shù)Web開發(fā)人員都有Firefox、Safari甚至Opera來測試他們的HTML代碼。由于許多Windows用戶目前升級到Windows10,用戶也應(yīng)該考慮在WindowsEdge瀏覽器中進(jìn)行測試。

          熟悉關(guān)于HTML5培訓(xùn)的入門基礎(chǔ)知識,是為了讓你在HTML編碼方面有一個快速的開始。在掌握HTML編碼之前,還有更多的知識需要學(xué)習(xí)和了解。在HTML5培訓(xùn)機(jī)構(gòu)里,有專業(yè)的導(dǎo)師團(tuán)隊(duì),引領(lǐng)行業(yè)的先進(jìn)課程,讓每位學(xué)員可以更快的掌握想學(xué)的知識,學(xué)習(xí)更有成效。

          了解更多


          主站蜘蛛池模板: 无码人妻一区二区三区在线视频| 无码人妻精一区二区三区| 色婷婷香蕉在线一区二区| 性色AV 一区二区三区| 激情一区二区三区| 国产精品成人一区二区三区| 无码精品黑人一区二区三区 | 乱人伦一区二区三区| 国产亚洲一区二区手机在线观看| 奇米精品视频一区二区三区| 久久久久人妻精品一区三寸蜜桃| 亚洲一区AV无码少妇电影| 亚洲乱码一区二区三区在线观看 | 亚洲AV无码一区二区大桥未久| 日本中文字幕在线视频一区| 女女同性一区二区三区四区| 精品无码AV一区二区三区不卡| 国产亚洲综合一区柠檬导航| 无码精品前田一区二区| 国产一区二区三区美女| 午夜爽爽性刺激一区二区视频| 韩国一区二区视频| 无码精品一区二区三区在线| 久久青草精品一区二区三区| 久久福利一区二区| 色窝窝无码一区二区三区成人网站| 又硬又粗又大一区二区三区视频 | 亚洲sm另类一区二区三区| 精品国产一区AV天美传媒| 国产精品一级香蕉一区| 国产经典一区二区三区蜜芽| 精品一区二区三区四区在线播放| 精品国产一区二区三区色欲| 无码人妻一区二区三区一| 成人精品视频一区二区三区不卡 | 高清在线一区二区| 日韩一区二区三区视频| 国产在线一区观看| 一级特黄性色生活片一区二区| 一区二区视频在线免费观看| 国模丽丽啪啪一区二区|