H5泛指: html css js 三個方向的提升 語義化標簽 表單類型 過渡 轉換 背景 盒子陰影 盒子邊框圓角 本地存儲 歷史管理 拖拽事件 多媒體
屬性選擇器
[attr=value] 選中屬性名稱為attr且值完全等於value的元素
[attr=^value] 選中屬性名稱為attr且值以value開頭的元素
[attr$=value] 選中屬性名稱為attr且值以value結尾的元素
[attr*=value] 選中屬性名稱為attr且值包含value的元素
偽類選擇器
:first-child 選中第一個元素
:last-child 選中最后一個元素
:nth-child(N)選中第 N 個元素
:nth-last-child(N) 選中倒數第 N 個元素
偽類選擇器
:before
:after
.clearfix:after{ content:""; display:block; height:0; clear:both; visibility:hidden; } //兼容低版本ie .clearfix{zoom:1}
:before和:after主要用來清除浮動元素
另一種清除浮動的方法是 clear=both 用到這個屬性最好是寫行內樣式 用法就是 在要清除浮動的元素最后添加一個空標簽 在這個空標簽中寫一個行內樣式 style="clear:both"
邊框圓角
border-radius: 1px 1px 1px 1px 1px 1px 1px 1px
前四個是X軸的半徑 后四個是Y軸的半徑
設置正圓 border-radius： 50%；// 這樣就是圓形
設置半圓：
width: 100px; height: 50px; border:1px solid black; background-color: blue; border-radius: 100px 100px 0 0;
寬度是高度的一半
創建非對稱圓角：
border-radius： 1px 1px 1px 1px / 3px 3px 3px 2px;
語義化標簽
頭部 <header></header>
導航<nav><nav>
主體<section></section>
側邊欄<aside></aside>
內容區域<article></article>
底部區域 <footer></footer>
遇到沒見過的標簽不要驚訝: 和div類似只是名字不同而已 (應該是語義化標簽)
以上標簽在 IE9一下會有兼容問題(會解析成行內元素)
解決辦法: 使用 html5shiv.js 來處理不兼容的標簽 下載地址 https://github.com/aFarkas/html5shiv
使用方法:(記住 必須在頭部引入)
// 只有在IE低版本瀏覽器才不兼容，只有在IE低版本瀏覽器才需要去加載這個插件
// 條件注釋
<!--[if lt IE 9]> <script src="html5shiv.min.js"></script> <![endif]-->
<!--[if lte IE 8]>任何東西都可以 內容、標簽都可以<![endif]-->
<!--10. 當滿足條件的時候 注釋內的內容才會去執行-->
<!--11. lte 小於等於 gte 大於等於 lt 小於 gt 大於-->
navigator.userAgent 可以查看當前使用的瀏覽器
表單元素類型
語法: <input type="value">
| 值 | 描述 |
|---|---|
| button | 定義可點擊的按鈕（通常與 JavaScript 一起使用來啟動腳本）。 |
| checkbox | 定義復選框。 |
| colorNew | 定義拾色器。 |
| dateNew | 定義 date 控件（包括年、月、日，不包括時間）。 |
| datetimeNew | 定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，基於 UTC 時區）。 |
| datetime-localNew | 定義 date 和 time 控件（包括年、月、日、時、分、秒、幾分之一秒，不帶時區）。 |
| emailNew | 定義用於 e-mail 地址的字段。 |
| file | 定義文件選擇字段和 "瀏覽..." 按鈕，供文件上傳。 |
| hidden | 定義隱藏輸入字段。 |
| image | 定義圖像作為提交按鈕。 |
| monthNew | 定義 month 和 year 控件（不帶時區）。 |
| numberNew | 定義用於輸入數字的字段。 |
| password | 定義密碼字段（字段中的字符會被遮蔽）。 |
| radio | 定義單選按鈕。 |
| rangeNew | 定義用於精確值不重要的輸入數字的控件（比如 slider 控件）。 |
| reset | 定義重置按鈕（重置所有的表單值為默認值）。 |
| searchNew | 定義用於輸入搜索字符串的文本字段。 |
| submit | 定義提交按鈕。 |
| telNew | 定義用於輸入電話號碼的字段。 |
| text | 默認。定義一個單行的文本字段（默認寬度為 20 個字符）。 |
| timeNew | 定義用於輸入時間的控件（不帶時區）。 |
| urlNew | 定義用於輸入 URL 的字段。 |
| weekNew | 定義 week 和 year 控件（不帶時區）。 |
表單屬性:
當你有name屬性 瀏覽器會記錄你之前的提交 當你再次輸入的時候,會自動給你彈出提示(自動填充功能)
表單元素的屬性-->
autocomplete 設置是否使用自動填充功能 off on 針對當前表單元素
required 必須屬性 加上必填項 不加不去校驗
表單的屬性
autocomplete 設置是否使用自動填充功能 off on 針對當前整個表單
novalidate 是否去進行整個表單的校驗
普通表單和密碼表單的屬性:
name: 設置當前控件的名稱
value：設置當前控件的默認值
placeholder： 占位符[虛隱文字]【當前控件的一個提示信息】
id: 設置當前控件唯一標識的屬性【身份證】
readonly： 設置當前控件為只讀模式【當前控件只能看一看，不能輸入】
disabled： 設置當前控件不能輸入
maxlength： 設置當前控件最多能輸入多少個字符
autofocus: 自動獲取焦點
提交表單:<input type="submit" name="btn">
屬性: action： 用來指定當前表單控件中的數據要交給哪個后台文件去處理
method： 用來指定一種數據提交方式 method： get | post
get: 這種方式提交數據的時候，會將數據在地址欄中顯示【安全性差】
post: 這種方式提交數據的時候，數據會以后台的形式提交給文件【安全】
單選控件: <input type="radio">
屬性: checked： 設置當前控件默認選中
注意：
默認單選控件不能實現單選效果
只要給單選空件設置相同的name值即可。\
多選控件: <input type="checkbox" checked>
多選控件中設置默認選中項的屬性與單選控件一樣
視差滾動
/*視差滾動：是元素以不同的速度滾動 形成的視覺上的層次感 */
background-attachment: fixed; 固定背景,當你滾動到這個位置才能完全顯示,能實現視差效果
想要實現視差滾動效果需要 jquery.stellar.js 這個插件
使用插件的基本配置
<div class="sound_bg" data-stellar-background-ratio="0.3"></div> 需要設置 背景的元素為 background-attachment:fixed 需要設置 背景的滾動的速度 data-stellar-background-ratio="0.3" 初始化 $(function(){ $.stellar({ horizontalScrolling:false,//配置橫向滾動沒有視差效果 responsive:true //當頁面尺寸發生改變 重新初始化插件 }); });
參數解釋:
| 名稱 | 說明 |
| horizontalScrolling 和 verticalScrolling | 該配置項用來設置視差效果的方向。horizontalScrolling設置水平方向，verticalScro設置垂直方向， 為布爾值，默認為true |
| responsive | 該配置項用來制定load或者resize時間觸發時是否刷新頁面，其值為布爾值，默認為false |
| hideDistantElements | 該配置項用來設置移出視線的元素是否隱藏，其值為布爾值，若不想隱藏則設置為false |
| data-stellar-ratio="0.5"(一般設置在標簽上) | 定義了此元素針對頁面滾動的速度比率，比如，0.5為頁面滾動的50%，2為頁面滾動的200%，所以數值越大，你可以看到頁面元素滾動速度越快。 |
| data-stellar-background-ratio | 該配置項用在單個元素中，其值為一個正數，用來改變被設置元素的影響速度。 例如 值為0.3時，則表示背景的滾動速度為正常滾動速度的0.3倍。如果值為小數時最好在樣式表中設置 |
js的提升
document.querySelector()[0] 根據選擇器獲取【單個節點對象】。返回一個節點對象（ID記得加 # 類名加 .）
document.querySelectorAll() 根據標簽的name值獲取【一組節點對象】。返回一個偽數組
添加class 節點.classList.add('要添加的類名')
移除class 節點.classList.remove('要刪除的類名')
切換類名(有就刪除沒有就添加) 節點.classList.toggle('類名')
監測類名是否存在 節點.classList.contains('要檢查的類名')
以上分別對應jQuery的 addClass(添加類) removeClass(刪除類) toggleClass(切換類) hasClass(判斷是否包含類)
自定義屬性
非標准的屬性,就是自定義屬性 標准屬性有 name class id title......等等都是標准屬性
一般以 data- 開始的屬性都可以認為是自定義屬性
自定義屬性一般是用來存儲數據的屬性
操作自定義屬性應注意
獲取自定義屬性 節點.dataset.屬性名稱 或者 節點.dataset['屬性名稱']
注意: 屬性名稱如 data-user-name 要寫成 userName
設置和添加自定義屬性 節點.dataset.自定義屬性名稱 = 屬性值
獲取節點對象 節點.getAttribute('屬性名'); // 會返回標簽的屬性的值
設置節點對象 節點.setAttribute('屬性名','值'); // 會修改或添加標簽屬性
刪除節點對象 節點.removeAttribute('屬性名'); // 會刪除標簽的屬性
注意：自定義標簽屬性的操作只能夠通過元素的getAtrribute、setAttribute、removeAttribute提供的方法操作。 不能直接通過元素點的方式直接獲取或設置
案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab切換</title> <style> .tab{ width: 400px; margin: 100px auto; } .nav{ width: 100%; height: 50px; } .nav a{ width: 25%; float: left; height: 100%; line-height: 50px; text-align: center; background: green; color: #fff; text-decoration: none; } .nav a.now{ background: hotpink; } .content{ width: 100%; height: 350px; overflow: hidden; } .content section{ width: 100%; height: 100%; display: none; } .content section.active{ display: block; } </style> </head> <body> <div class="tab"> <nav class="nav"> <a href="javascript:;" data-content="china">國內新聞</a> <a href="javascript:;" data-content="other">國際新聞</a> <a href="javascript:;" data-content="sports">體育新聞</a> <a href="javascript:;" data-content="funny">娛樂新聞</a> </nav> <div class="content"> <section id="sports"> 體育新聞123789 </section> <section id="funny"> 娛樂新聞abc </section> <section id="other"> 國際新聞123456 </section> <section id="china"> 國內新聞123 </section> </div> </div> <script> (function(index){ /*1. 當頁面初始化的時候 根據索引去初始化默認顯示的 頁簽和內容 */ //index就是你想初始化的標簽和內容的索引 //console.log(index); /*1.1 選中索引所對應的頁簽*/ var nav = document.querySelector('.nav'); var aList = nav.querySelectorAll('a'); /*需要初始化的A*/ var initA = aList[index]; /*加now類*/ initA.classList.add('now'); /*1.2 顯示當前頁簽所對應的內容*/ var initContentId = initA.dataset.content; var initContent = document.querySelector('#'+initContentId); initContent.classList.add('active'); /*2. 點擊頁簽對應的切換內容*/ nav.onclick = function(e){ /*獲取當前點擊的頁簽*/ var currentA = e.target; /*判斷是否已經選中*/ if(currentA.classList.contains('now')) return; var oldA = document.querySelector('.nav a.now'); /*2.1 選中索引所對應的頁簽 且 清除之前的選中*/ currentA.classList.add('now'); oldA.classList.remove('now'); /*2.2 顯示當前頁簽所對應的內容 且 隱藏之前的選中內容*/ var currentContentId = currentA.dataset.content; var currentContent = document.querySelector('#'+currentContentId); currentContent.classList.add('active'); var oldContentId = oldA.dataset.content; var oldContent = document.querySelector('#'+oldContentId); oldContent.classList.remove('active'); } })(3); </script> </body> </html>
拖拽事件
語法:
<div class="box" draggable="true"></div>
draggable 開啟拖拽事件
元素.addEventListener('事件名稱',function(){//當前元素的拖拽事件});
拖拽元素
ondrag 應用於拖拽元素，整個拖拽過程都會調用
ondragstart應用於拖拽元素，當拖拽開始時調用
ondragleave應用於拖拽元素，當鼠標離開拖拽元素時調用
ondragend應用於拖拽元素，當拖拽結束時調用
目標元素
ondragenter應用於目標元素，當拖拽元素進入時調用
ondragover應用於目標元素，當停留在目標元素上時調用
ondrop應用於目標元素，當在目標元素上松開鼠標時調用
ondragleave應用於目標元素，當鼠標離開目標元素時調用
var box = document.querySelector('.box');
var bigBox = document.querySelector('.bigBox');
/*綁定事件*/
/*當前元素的事件*/
box.addEventListener('drag',function(e){
// e.preventDefault();
//當前元素的拖拽事件
console.log('drag');
});
box.addEventListener('dragstart',function(){
//當前元素的拖拽開始事件
console.log('dragstart');
});
box.addEventListener('dragend',function(){
//當前元素的拖拽結束事件
console.log('dragend');
});
box.addEventListener('dragleave',function(){
//當前元素的拖拽離開本身事件
console.log('dragleave');
});
/*目標元素的事件*/
bigBox.addEventListener('dragenter',function(e){
// e.preventDefault();
console.log('dragenter');//進入目標元素事件
});
bigBox.addEventListener('dragover',function(e){
e.preventDefault();
//console.log('dragover');//在目標元素上來回移動的事件
});
bigBox.addEventListener('drop',function(e){
e.preventDefault();
//不會觸發的原因是：瀏覽器默認行為 禁止放下操作
// 記得把上邊倆個事件也要阻止瀏覽器默認行為
console.log('drop');//在目標元素上松開鼠標的事件
});
bigBox.addEventListener('dragleave',function(){
console.log('dragleave');//離開目標元素的事件
});
案例：
<!--1. 入口函數：--> <!--1.1 頁面加載完成 去寫程序的一個入口--> <!--1.2 jquery 入口函數 $(function(){}) 只有html結構加載完畢觸發 --> <!--1.3 javascript 入口函數 window.onload = function(){} 需要所有的頁面資源加載完畢--> <!--2. 自調用函數 --> <!-- (function(){})(); !function(){}(); -->
本地存儲
在H5中，本地存儲有兩個，一個是永久存儲localstorage，一個是會話存儲sessionStorage
他們可以把一些數據存儲在瀏覽器端
他們的應用場景大概是有，記住用戶信息，記錄閱讀歷史等等
他們和cookie的區別
| 區別 | sessionStorage | localstorage | cookie |
| 存儲量 | 5M（具體看瀏覽器版本） | 5M（具體看瀏覽器版本） | 4KB |
| 存放地點 | 瀏覽器 | 瀏覽器 | 瀏覽器 |
| 發送http請求時 | 不會帶上 | 不會帶上 | 會帶上 |
| 生命周期 | 瀏覽器關閉后不存在 | 永久保留 | 過期日期 |
| 訪問權限 | 同源網站 | 同源網站 | 同源網站 |
sessionStorage是會話存儲，當關閉當前會話數據就會自動清除，一個會話就可以認為是發送一請求，服務器處理，響應到瀏覽器，關閉當前頁面的一個完整的過程
localStorage是存儲在瀏覽器物理空間中，如果你不手動的清除，理論上可以永久存儲
語法：(兩種語法完全一樣) 【存儲的數據只能是
字符串】
存入：localStorage.setItem(key,value)
sessionStorage.setItem(key,value)
獲取：localStorage.getItem(key)
sessionStorage.getItem(key)
移除：localStorage.removeItem(key)
sessionStorage.removeItem(key)
清除: localStorage.clear()
sessionStorage.clear()
小知識： 在使用getItem是 最好在獲取的時候 在后邊加一個'[]' 這樣就不會獲取到null
獲取本地存儲的字符串數據是 將其轉換為數組，一開始的時候沒有當前存儲的歷史數據 所以也沒有對應的key，為了避免以后的錯誤，這里返回一個空值數組
var iHistory = JSON.parse(localStorage.getItem('user_History') || '[]')