html5第1天1-教學(xué)筆記

第1章前 認(rèn)識 語 第2章語義 語義化........................................................................................常用語義.........................................................................兼容處 微數(shù) 第3章表 輸入類 表單元 表單屬 表單..........................................................................................第4章多................................................................................................音 ..................................................................................................第5章DOM擴 獲取元 類名操 自定義屬 第1章前HTML5并不僅僅只是作為HTML標(biāo)記語言的一個版本，更重要的是它制定了Web應(yīng)用開發(fā)的一系列標(biāo)準(zhǔn)，成為第一個將Web做為應(yīng)用開發(fā)平臺的HTML語言。HTML5定義了一系列新元素，如新語義、智能表單、等，可以幫助開發(fā)者創(chuàng)建富互聯(lián)網(wǎng)應(yīng)用，還提供了一系列JavasciptAI，如地理定位、重力感應(yīng)、硬件等，可以在瀏覽器內(nèi)實現(xiàn)類原生應(yīng)用，甚至結(jié)合Canvas我們可開發(fā)網(wǎng)頁版游戲，同時結(jié)合C3的過渡、轉(zhuǎn)換、動畫等特性，可以極大的增強用戶體驗，提升開發(fā)功能的可應(yīng)用性。我們?nèi)粘Ｓ懻摰腍5其實是一個泛稱，它指的是由HTML5+CSS3+Javascript等技術(shù)組合而成的一個應(yīng)用開發(fā)平臺。語隨著Web技術(shù)的更新，HTML也先后經(jīng)歷了HTML4.01、XHTML1.0、HTML5幾個重要的版本，在版本的演變過程中新增或廢棄了一些屬性對語范也做了一些調(diào)整，為了能夠保證瀏覽器可以兼容不同版本語范的，我們可以使用DOCTYP>指示瀏覽器應(yīng)該如何處理我們的HTML。見示例代碼1-HTML5在語范上也做了比較大的調(diào)整，去除了許多冗余的內(nèi)容，書見示例代碼1-通過以上的比較我們可以總結(jié)得出HTML5在語范上的特點1、更簡2、更寬但是我們在實際開發(fā)中應(yīng)規(guī)范書寫，不建議太并且現(xiàn)在基本所有都采用了HTML5的語范。W3C驗證地第2章語義所謂語義化是要使HTML具備很好的可讀性，可以清晰傳達每個列表<h1>~h6>表示一系列標(biāo)題等，在此基礎(chǔ)上HTML5增加了大量更有意義的語義，更有利于搜索引擎或輔助設(shè)備來理解HTML頁面內(nèi)容。傳統(tǒng)的做法我們通過添加類名如class="header"、class="footer"，使HTML頁面具有語義性的，但是不具有通用性（如class="header"也可能被寫成見示例代碼2-HTML5則是通過增加語義化的形式來解決這個問題，例<heade></heade>、<oote></foote>等，這樣就可以保證其具有通用性。見示例代碼22.htl此章節(jié)學(xué)習(xí)目的為了解增加語義的目的，以及各語義所表達的意義，在網(wǎng)頁布局中能夠合理使用。語導(dǎo)頁頁區(qū)文側(cè)邊進度見示例代碼2-本質(zhì)上新語義與<div>、<span>沒有區(qū)別，只是其具有語義性，使用時除了在HTML結(jié)構(gòu)上需要注意外，其它和普通的使用無任何差別，可以理解成<divclass="nav">相當(dāng)于<nav>不要好奇，它只是一個！盡量避免全局使用header、footer、aside等語義兼容處在不支持HTML5新的瀏覽器里，會將這些新的解析成行內(nèi)元素(inline)對待，所以我們只需要將其轉(zhuǎn)換成塊元素(block)即可使用，但是在IE9版本以下，并不能正常解析這些新，但是卻可以識別通過.createElement('tagName')創(chuàng)建的自定義，于是我們的解決方案就是將HTML5的新全部通過.createElement('tagName')來創(chuàng)建一遍，這樣IE低版本也能正常解析HTML5新了，但在實際開發(fā)中我們采用的是通過檢測IE瀏覽器的版本來加載第的一個JS庫來解決兼容問題，這個庫文件會幫自動通過.createElement('tagName')創(chuàng)建所有HTML5的新。見示例代碼2-微數(shù)據(jù)是在如span、div的內(nèi)添加屬性，讓機器（如搜索引擎）識別其含義，某些特定類型的信息，例如評論、人物信息或都有相應(yīng)的屬性，用來描述其含義，可以理解成新語義的一種補充。見示例代碼2-學(xué)習(xí)資WAI-ARIA[1],WebAccessibilityInitiative-AccessibleRichInternetApplications的縮寫，她主要解決的一個問題：讓殘障能無地網(wǎng)見參考第3章表伴隨著互聯(lián)網(wǎng)富應(yīng)用以及移動開發(fā)的興起，傳統(tǒng)的Web能滿足開發(fā)的需求，所以HTM5在Web表單方向也做了很大的改進，如拾色器、日期時間組件等，使表單處理變的更加高效。類使用示含<inputtype="輸入郵箱格<input 輸入號碼格<input輸入url格<input輸入數(shù)字格<input搜索框（體現(xiàn)語義化<input自由拖動滑<input拾色<input<input<input<input<input見示例代碼3-部分類型是針對移動設(shè)備生效的，且具有一定的兼容性，在實際應(yīng)用當(dāng)應(yīng)選擇性的使用，掃描 可以對比測試。元含數(shù)據(jù)列生成加密字符輸出結(jié)度量見示例代碼3-屬用含<inputtype="text"ceholder="請輸入用戶占位<inputtype="text"自動獲點<inputtype="file"多文件<input 自動完<inputtype="text"form="某表單<form關(guān)閉驗<inputtype="text"必填<inputtype="text"自定義見示例代碼3-第4章在HTML5之前，在網(wǎng)頁上音頻/的通用方法是利用Flash來播放，但是大多情況下，并非所有用戶的瀏覽器都安裝了Flash插件，由此使得處理音頻/變的非常復(fù)雜，并且移動設(shè)備的瀏覽器并不支持Flash插HTML5通過<audio>來解決音頻的問題。并且可以通過附加屬性可以更友好控制音頻的，如autoy自動controls是否顯不默認(rèn)控loop循環(huán)由于等原因，不同的瀏覽器可支持的格式是不一樣的，如下圖供參多瀏覽器支持的方案，如下見示例代碼4-4.2HTML5通過<>來解決音頻的問題。同音頻一樣，<>使用也相當(dāng)簡單，如下圖同樣，通過附加屬性可以更友好的控制的autoy自動controls是否顯示默認(rèn)控loop循環(huán)width設(shè)置窗口寬height設(shè)置窗口的高由于等原因，不同的瀏覽器可支持的格式是不一樣的，如下圖供參多瀏覽器支持的方案，如下見示例代碼4-第5章DOM擴1、.ge ementsByClassName('class')通過類名獲取元素，以偽數(shù)見示例代碼5- .querySelector('selector')通過CSS選擇器獲取元素，符合匹配條件的第1個元素。見示例代碼5-3、.querySelectorAll('selector')通過CSS選擇器獲取元素，以偽見示例代碼5-1、Node.classList.add('class')添加2、Node.classList.remove('class')移除3、Node.classList.toggle('class')切換class，有則移除，無則添4、Node.classList.contains('class')檢測是否存在classNode指一個有效的DOM節(jié)點，是一個通稱。見示例代碼5-在HTML5中我們可以自定義屬性，其格式如下data-*=""，例data-info="我是自定義屬性"，通過Node.dataset['info']我們便可以獲取到自定Node.dataset是以對象形式存在的，當(dāng)我們?yōu)橥粋€DOM節(jié)點指定了多個自定義屬性時，Node.dataset則了所有的自定義屬性的值。假設(shè)某元素<divid="demo"