一. H5的概念
H5代表着互聯網技術發展的一個階段,是一套前端技術的統稱(移動端開發)
包括 : html5 css3 新增 js API
二. H5語法規範
更簡潔:
更寬鬆: 單標籤 省略 關閉符號
雙標籤 省略 結束標籤
html body head 完全省略
meta標籤的作用 L描述網頁信息
三.語義標籤
header 頭部 footer 底部 nav 導航
section 區域 article 文章 aside 側邊欄
好處:有語義
對於html5的語義標籤的兼容問題,可以通過引入htmlshiv.min.js來解決:
條件註釋: 滿足條件就是執行,不滿足就是一個普通的註釋, 只有ie能識別
<!--
less 小於
equal 等於
great 大於
than 比較
-->
<!--[if lt ie 9]>
<script src="./html5shiv.min.js"></script>
<![endif]-->
四.表單
1.表單類
部分類型是針對移動端生效的,具有一定的兼容性
| 類型 | 使用示例 | 含義 |
| <input type="email"> | 輸入郵箱格式 | |
| tel | <input type="tel"> | 輸入手機號碼格式 |
| url | <input type="url"> | 輸入url格式 |
| number | <input type="number"> | 輸入數字格式 |
| search | <input type="search"> | 搜索框（體現語義化） |
| range | <input type="range"> | 自由拖動滑塊 |
| color | <input type="color"> | 拾色器 |
| time | <input type="time"> | 時間 |
| date | <input type="date"> | 日期 |
| datetime | <input type="datetime"> | 日期時間 |
| month | <input type="month"> | 月份 |
| week | <input type="week"> | 周 |
2.表單屬性
| 屬性 | 用法 | 含義 |
| placeholder | <input type="text" placeholder="請輸入用戶名"> | 佔位符 |
| autofocus | <input type="text" autofocus> | 自動獲得焦點 |
| multiple | <input type="file" multiple> | 多文件上傳 |
| autocomplete | <input type="text" autocomplete="off"> | 自動完成 |
| required | <input type="text" required> | 必填項 |
五.DOM擴展
1.獲取元素的新方法
通過css選擇器獲取元素,返回符合要求的是一個元素,返回的的對象
document.querySelector('css選擇器'); 假如有一堆的div,css選擇器下的是div,那麼只會返回第一個div
通過css選擇器獲取元素,返回僞數組
document.querySelectorAll('css選擇器')
2.類名操作(有兼容性問題)
添加類: node.classList.add("classname");
移出類: node.classList.remove("classname");
切換類: node.classList.toggle("classname");
判斷是否有指定的類: node.classList.contains("classname");
3.自定義屬性
在html5中我們可以定義屬性,其格式爲:data-xxx="" ;例如 data-info = "自定義屬性"
通過Node,dataset['info']我們可以獲取自定義的屬性值
Node.dataaet是以對象形式存在的
<div data-name="zs"></div>
<script>
//獲取data-name屬性的值
var divName = document.querySelector('div').dataset['name'];
</script>
六.CSS3 的現狀
1.瀏覽器支持程度比較好,需要添加私有前綴
2.移動端支持優於pc端
使用遵循 漸進增強原則 : 讓低版本可以有基本的額功能,版本的瀏覽器具有更好的用戶體驗
七,選擇器
1.關係選擇器
| 語法 | 描述 | 示例 |
| s1>s2 | 子代選擇器,選擇div的子級中所有的p標籤 | div>p |
| s1 s2 | 後代選擇器,選擇div後代中所有的p標籤 | div p |
| s1+s2 | 相鄰選擇器,選擇器緊跟着div後面的p標籤 | div+p |
| s1~s2 | 兄弟選擇器,選擇div後面的所有兄弟元素中的p標籤 | div~p |
2.屬性選擇器
| 語法 | 描述 | 示例 |
| E[attr] | 選擇擁有attr屬性的元素 | li[title] |
| E[attr="val"] | 選擇擁有attr屬性,並且值爲val的元素 | li[title="aa"] |
| E[attr^="val"] | 選擇擁有attr屬性,並以爲val開頭的元素 | li[title^="aa"] |
| E[attr$="val"] | 選擇擁有attr屬性,並以爲val結尾的元素 | li[title$="aa"] |
| E[attr*="val"] | 選擇擁有attr屬性,幷包含val的元素 | li[title*="aa"] |
3.僞類選擇器
| 語法 | 描述 | 示例 | |
| E:first-child | 匹配的是li的父元素ul的一個子元素 | li:first-child | |
| E:last-child | 匹配的是li的父元素ul的最後一個子元素 | li:last-child | |
| E:nth-child | 匹配的是li的父元素ul的指定下標的子元素(從1開始) | li:nth-child(1) | |
| E:nth-child(odd) | 匹配的是li的父元素ul中下標爲奇數的那些子元素 | li:nth-child(odd) | |
| E:nth-child(2n) | 匹配的是li的父元素ul中下標爲偶數的那些子元素 | li:nth-child(2n) |
4.其他選擇器
:focus 查找獲取到焦點的文本框
:checked 獲得選中的checkbox
:disabled 獲得不可用的框
:enabled 獲得可用的框
:not(selector) 選擇不匹配selector的那些元素
:target 獲取當前活躍的錨點鏈接
5.僞元素選擇器
E::before 在元素子節點的最前面添加一個內容
E::after 在元素子節點的最後面添加一個內容
注意事項: 1.必須有content屬性,可以在content屬性中寫入文本內容
2.默認是行內樣式,無法設置寬高,需要指定display:block;或者position:absolute
E::first-line 選中第一行
E::first-letter 選中第一個字
E::selection 被選中的區域