0.推薦開發(fā)技術(shù)資料網(wǎng)站：http://www.shouce.ren/，里面包含了各種開發(fā)技術(shù)手冊、開發(fā)工具插件、各種技術(shù)書籍等等。


1 網(wǎng)頁開發(fā)方式上的兩個層次：
◆HTML4.1
◇結(jié)構(gòu)：html4.0
◇樣式：css css2
◇行為：js
◆HTML5
◇結(jié)構(gòu)：html5
◇樣式：css3
◇行為：js API 有所增強 如 地理定位 web存儲 拖拽 重力感應(yīng) 硬件訪問等


2.HTML5狹義的概念上就是HTML4的升級版本，HTML5廣義上的概念上就是代表著瀏覽器技術(shù)發(fā)展的的一個階段，也就是 html5+css3+js API 一套前端技術(shù)的組合


3.W3C標(biāo)記驗證服務(wù)官網(wǎng)：https://validator.w3.org/


4.html頁面的 meta標(biāo)簽的主要作用是 用于描述網(wǎng)頁的元(最根本的)信息，相當(dāng)于頁面的元神。


5.html5的語法規(guī)范更加的簡潔、寬松，而html4的語法規(guī)范更加嚴格，但是實際工作中無論是使用html5還是html4都要書寫規(guī)范，避免后期再看就看不懂了。


6.經(jīng)典的div加css網(wǎng)頁布局和html5網(wǎng)頁布局
◆div+css網(wǎng)頁布局【
<div class="header"></div>
<div class="nav"></div>
<div class="section">
<div class="aside"></div>
<div class="article"></div>
</div>
<div class="footer"></div>
】
◆html5網(wǎng)頁布局【
<header></header>
<nav></nav>
<section>
<aside></aside>
<article></article>
</section>
<footer></footer>
】
★IE8及以下版本的瀏覽器不支持html5及css3，所以需要引入一個html5的插件腳本 html5shiv.js ，<script src="html5shiv.min.js"></script>


7.IE瀏覽器 的條件注釋
<!--[if lte ie 8]><![endif]--> 表示當(dāng)前瀏覽器的版本小于等于ie 8 就執(zhí)行注釋標(biāo)簽對中的代碼，否則就不執(zhí)行，條件注釋只有ie瀏覽器中可 以識別，例如<!--[if lte ie 8]><script src="html5shiv.min.js"></script><![endif]--> ，這樣就能夠只會在ie8及其以下的版本瀏覽器中引入這個腳本了，l表示less既更小，t表示then既比較，e表示equal既等于，g表示great既更大。


8.html5新增的表單標(biāo)簽兼容性并不好，因為這些新增的表單標(biāo)簽實際原理，就是瀏覽器內(nèi)置了這些表單標(biāo)簽的js腳本，不同瀏覽器內(nèi)置的js腳本并不是完全一樣，所以展示這些表單標(biāo)簽的時候，功能雖然大同小異但是樣式各不一樣，所以說兼容性不好，并不像那些新增的結(jié)構(gòu)化標(biāo)簽一樣，只需要弄個腳本讓他們顯示為塊兒級元素。


9.css新增自適應(yīng)寬度【
width:100%;//寬度
max-width:640px;//最大寬度
min-width:320px;//最小寬度
】，以前需要通過設(shè)置一個父容器，然后讓兩個子容器浮動，左邊的固定寬度，右邊的自適應(yīng)父容器，然后設(shè)置右邊的容器左外邊距為左邊容器的寬度，這樣就能夠讓右邊的容器自適應(yīng)父容器的寬度，父容器變寬右邊的容器也會變寬，父容器變窄，右邊的容器也會變窄，但是現(xiàn)在不需要了，只需要設(shè)置css新增的自適應(yīng)寬度的樣式即可。


10.html5新表單標(biāo)簽
◆type=email：文本為email格式
◆type=tel：文本為手機號碼格式
◆type=number：文本為數(shù)字格式
◆type=search：有搜索框的一些樣式
◆type=range：有滑塊兒的樣式，并且value值為數(shù)字
◆type=color：拾色器，就是點擊之后可以選擇顏色
◆type=time：文本為時間格式，兼容好的話可以選擇時間
◆type=date：文本為日期格式，兼容好的話可以選擇日期
◆type=month：文本為月份格式，兼容好的話可以選擇月份
◆type=week：文本為星期格式，兼容好的話可以選擇星期
★新表單的兼容性并不好，原理都是瀏覽器內(nèi)嵌自帶的js腳本支持，所以版本低的瀏覽器可能不會有這些腳本的支持。?


11.html5新增文本框綁定數(shù)據(jù)下拉列表
【
<input type="text" list="bao" />
<datalist id="bao">
<option>寶馬</option>
<option>寶石</option>
<option>寶刀</option>
<option>寶劍</option>
<option>寶寶</option>
</datalist>
】


12.html5新增的其它標(biāo)簽
◆表單分組框：<fieldset><legend></legend></fieldset>
◆文本輸出：<output></output> //純輸出的標(biāo)簽，與span相比，僅僅是有語義化而已。
◆加密類型：<keygen /> //在有些瀏覽器上無效
◆度量器: <meter value="50" max="100" min="0" low="30" high="80"></meter>//max 和min 表示度量器的最大值與最小值，low和high表示度量器的正常取值范圍，低于或高于正常取值范圍，度量器都會變色，比如變黃或者變紅，在正常范圍下，度量器的顏色應(yīng)該是綠色的。
◆進度條：<progress value="40" max="100" min="0"></progress>


13.html5新增的表單屬性
◆占位符(提示文字)屬性：<input type="text" placeholder="例如：李狗蛋" />
◆自動獲取焦點屬性：<input type="text" autofocus />
◆自動補全屬性（默認 on）：<input type="text" autocomplete="on/off" />
◆文本框必填屬性：<input type="text" required />
◆文件 多選 屬性：<input type="file" multiple />
◆表單關(guān)閉驗證功能 屬性：<form action="" novalidate></form>
◆文本框自定義正則驗證 屬性 ：<input type="tel" pattern="^1\d{10}$" />


14.推薦一個網(wǎng)頁特效網(wǎng)站：http://www.5iweb.com.cn/，這里面有很多的網(wǎng)頁特效，可以用來參考。


15.html5新增的事件
◆oninvalid 當(dāng)html5表單元素驗證不通過時就會觸發(fā)【
txt1.oninvalid=function(){
//設(shè)置驗證不通過是的提示文字
this.setCustomValidity("您輸入的數(shù)據(jù)不符合要求，請重新輸入！")；


}
】


16.html5新增的多媒體標(biāo)簽
◆之前在網(wǎng)頁上播放多媒體 必須依賴于第三方 插件
◇mediaplay
◇快播
◇flash插件
◆現(xiàn)在html5里面提供了 視頻video和音頻audio的標(biāo)簽
◆audio 音頻標(biāo)簽
◇<audio src="music/yinyue.mp3" controls? autoplay? loop> controls顯示控制條、autoplay表示自動播放音樂、loop表示循環(huán)播放</audio>
◇audio 音頻標(biāo)簽只支持 Ogg Vorbis、MP3、Wav這三種格式的音頻文件，所以需要寫兼容性的寫法，【<audio controls loop autoplay>
<!-- 通過source標(biāo)簽指定多格式音頻文件 -->
<source src="music/yinyue.mp3" >
<source src="music/yinyue.ogg" >
<source src="music/yinyue.wav" >
您的瀏覽器不支持html5音頻播放功能
</audio>
】
◆video 視頻標(biāo)簽
◇<video src="video/movie.mp4"? controls? autoplay? loop></video>
◇video 視頻標(biāo)簽只支持 Ogg MPEG 4 WebM這三種格式的視頻文件，所以需要些兼容性的寫法，【<video autoplay controls loop >
<source src="video/movie.mp4" >
<source src="video/movie.ogg" >
<source src="video/movie.webm" >
您的瀏覽器不支持html5視頻播放功能
</video>
】
★原本html4中也有一個音樂標(biāo)簽 <embed src="music/yinyue.mp3"></embed> ，其實內(nèi)部渲染之后就是video了。


17.html5 新增的dom對象獲取方式
◆通過查詢選擇器的方式獲取dom對象：document.querySelector("#box");可以通過id獲取dom對象，只會獲取第一個查詢到的對象，無論你是類選擇器還是標(biāo)簽選擇器在或者id選擇器。
◆通過查詢選擇器的方式獲取多個dom對象（裝到偽數(shù)組中）：document.querySelectorAll(".box");可以獲取到查詢到的多個dom對象，返回值是一個偽數(shù)組，無論你是類選擇器還是標(biāo)簽選擇器再或者id選擇器，就算只有一個dom對象都會返回一個偽數(shù)組。
★無論是querySelector還是querySelectorAll，其實都是根據(jù)css2選擇器來獲取dom對象或偽數(shù)組dom對象


18.html5 新增的操作類的方式
◆box.classList.add("class5");//添加類，classList屬性表示類的列表，這個方法類似于jQuery中的addClass();
◆box.classList.remove("class5");//移除類，這個方法類似于jQuery中的removeClass();
◆box.classList.contains("class5");//是否包含類，這個方法類似于jQuery中的hasClass();
◆box.classList.toggle("class5");//切換類，如果有就刪除，如果沒有就添加，這個方法類似于jQuery中的toggleClass();


19.html5中的自定義屬性，必須以data開頭以-連接，如 <div id="box" data-size="200"></div>
◆獲取html5中的自定義屬性：box.dataset["size"]，表示獲取自定義屬性key為size的值
◆設(shè)置html5中的自定義屬性：box.dataset["size"]=500;
◆獲取值時注意，如果你設(shè)置的html5自定義屬性為<div id="box"? ?data-box-size="200"></div>時，有多個-，那么獲取的時候就必須使用小駝峰命名法這么獲取，box.dataset['boxSize']，只能夠這樣子來獲取。
◆設(shè)置html5中的自定義屬性【
var box=document.querySelector(".box");
? ? //獲取 一個 橫杠隔開 - 的自定義屬性
? ? console.log(box.dataset["name"]);
? ? //獲取 兩個 橫杠隔開 - 的自定義屬性
? ? console.log(box.dataset["childName"]);


? ? //設(shè)置 一個 橫杠隔開 - 的自定義屬性
? ? box.dataset["sex"]="男";
? ? //設(shè)置 兩個 橫杠隔開 - 的自定義屬性
? ? box.dataset["childSex"]="不詳";
】
★html5標(biāo)簽在頁面上設(shè)置自定義屬性時無法設(shè)置大寫的，更無法使用小駝峰命名法，就算你設(shè)置了大寫的自定義屬性，到后來都會被頁面標(biāo)簽渲染成全小寫的自定義屬性【
data-haSX-XhxaXi="hahaxixi" 會被渲染成? data-hasx-xhxaxi="hahaxixi"
】，只有在使用js的方式才能使用駝峰命名法來獲取或者設(shè)置頁面標(biāo)簽上顯示的多個-的自定義屬性。

轉(zhuǎn)載于:https://www.cnblogs.com/jwlLWJ2018/p/9247798.html

總結(jié)

以上是生活随笔為你收集整理的html5相关笔记（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。