一岭妖、問答
（一）临庇、不管是招聘還是聊天經(jīng)常能聽到 h5開發(fā)，它指的是什么昵慌？和 HTML5有什么關系?
h5開發(fā)其實就是指利用前端技術在手機頁面上呈現(xiàn)有聲音及畫面的動態(tài)酷炫效果的頁面開發(fā)假夺，其實稱作h5不專業(yè)，這是大家都這么叫斋攀，然后就成為約定俗成的概念了已卷。日常大家說的h5與HTML5其實沒多大關系，HTML5是HTML最新的修訂版本淳蔼，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定侧蘸。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準，以期能在網(wǎng)際網(wǎng)路應用迅速發(fā)展的時候鹉梨，使網(wǎng)路標準達到符合當代的網(wǎng)路需求讳癌。也就是說HTML5是一個標準，其跟h5不是同一個概念存皂。
（二）晌坤、HTML5是什么逢艘？有哪些新特性？有哪些新增標簽骤菠？如何讓低版本的 IE 支持 HTML5新標簽它改？
HTML5是HTML最新的修訂版本，2014年10月由萬維網(wǎng)聯(lián)盟（W3C）完成標準制定商乎。目標是取代1999年所制定的HTML 4.01和XHTML 1.0標準央拖，以期能在網(wǎng)際網(wǎng)路應用迅速發(fā)展的時候，使網(wǎng)路標準達到符合當代的網(wǎng)路需求鹉戚。
HTML5 中的一些有趣的新特性：
用于繪畫的 canvas 元素
用于媒介回放的 video 和 audio 元素
對本地離線存儲的更好的支持
新的特殊內(nèi)容元素鲜戒，比如 article、footer崩瓤、header袍啡、nav、section
新的表單控件却桶，比如 calendar境输、date、time颖系、email嗅剖、url、search新增的標簽有：
1嘁扼、<canvas> 新元素
Paste_Image.png
2信粮、新多媒體元素
Paste_Image.png
3、新表單元素
Paste_Image.png
4趁啸、新的語義和結構元素
Paste_Image.png
5强缘、已移除的元素
Paste_Image.png
- 對于低版本的IE 我們可以采用以下方法使得其支持HTML5：
我們可以使用 Sjoerd Visscher 創(chuàng)建的 "HTML5 Enabling JavaScript", "** shiv**" 來解決該問題:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代碼是一個注釋，作用是在 IE 瀏覽器的版本小于 IE9 時將讀取 html5.js 文件不傅，并解析它旅掂。
由于國內(nèi)谷歌服務器被墻，我們可以使用如下資源
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
值得注意的是html5shiv.js 引用代碼必須放在 <head> 元素中访娶，因為 IE 瀏覽器在解析 HTML5 新元素時需要先加載該文件商虐。
（三）、input 有哪些新增類型崖疤？
有以下新增類型：
color //用在input字段主要用于選取顏色
date // 允許你從一個日期選擇器選擇一個日期
datetime // 允許你選擇一個日期（UTC 時間）
datetime-local // 你選擇一個日期和時間 (無時區(qū)).
email // 用于應該包含 e-mail 地址的輸入域
month // 允許你選擇一個月份秘车。
number // 用于應該包含數(shù)值的輸入域。
range // 用于應該包含一定范圍內(nèi)數(shù)字值的輸入域劫哼。
search // 用于搜索域叮趴，比如站點搜索或 Google 搜索。
tel // 定義輸入電話號碼字段
time // 類型允許你選擇一個時間权烧。
url // 用于應該包含 URL 地址的輸入域眯亦。
week // week 類型允許你選擇周和年咳蔚。
（四）、瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別搔驼？ localStorage 如何存儲刪除數(shù)據(jù)。
Paste_Image.png
- 另外還要補充下三者之間作用域的區(qū)別：
cookie的作用域是所有窗口都是共享的侈询，和localStorage一樣舌涨；而sessionStorage的作用域是僅當前窗口有效，即使是同一個頁面扔字，也就是說不同的瀏覽器窗口它們之間不共享存儲的數(shù)據(jù)囊嘉。
舉個例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>點我</button>
<p>我將顯示點擊次數(shù)</p>
<script>
document.getElementsByTagName("button")[0].addEventListener("click",function(){
if(typeof(Storage)!==undefined){
if (sessionStorage.clickNumShow){
sessionStorage.clickNumShow=Number(sessionStorage.clickNumShow)+1;
document.getElementsByTagName("p")[0].innerHTML="你點了："+Number(sessionStorage.clickNumShow)+"次";
}else{sessionStorage.clickNumShow=1}
}else{alert("你的瀏覽器不支持HTML5中的Storage數(shù)據(jù)存儲")}
})
</script>
</body>
</html>
我用瀏覽器打開兩個頁面，發(fā)現(xiàn)它們之間的數(shù)據(jù)是獨立的革为，當我刷新及強制刷新（ctr+F5）數(shù)據(jù)都不會丟失扭粱，但是當我關閉窗口再打開（不是通過ctr+shift+t的方式恢復標簽頁）則數(shù)據(jù)會歸零了。
而如果我將上面的sessionStorage改成localStorage震檩，則發(fā)現(xiàn)兩個頁面的數(shù)據(jù)是共享的琢蛤，且我關閉頁面后數(shù)據(jù)還存在，不會歸零抛虏。
- 操作數(shù)據(jù)的用法：
保存數(shù)據(jù)：localStorage.setItem(key,value);
讀取數(shù)據(jù)：localStorage.getItem(key);
刪除單個數(shù)據(jù)：localStorage.removeItem(key);
刪除所有數(shù)據(jù)：localStorage.clear();
得到某個索引的key：localStorage.key(index);
//以上localStorage（沒有時間限制的數(shù)據(jù)存儲）都可被替換
//成 sessionStorage（針對一個 session 的數(shù)據(jù)存儲）
二博其、代碼
實現(xiàn)如下效果
1、標簽可在“全部”和“訂閱"兩個欄目來回拖動
2迂猴、實現(xiàn)方式參考 例子
- 方法一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,li{
list-style: none;
}
li{
float: left;
width: 40px;
background-color: #aaa;
padding: 10px;
margin: 10px;
text-align: center;
}
ul:after{
clear: both;
display: block;
content: "";
}
ul{
min-height: 40px;
border: 1px solid #ccc;
}
</style>
<script>
function drag (ev) {
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev) {
ev.preventDefault();
if (ev.target.tagName.toLocaleLowerCase()==="li"){return}
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev) {
ev.preventDefault();
}
</script>
<script>
</script>
</head>
<body>
<!--<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">-->
<!--<!–被拖動對象 設置成可拖動屬性慕淡，dragstart 事件里setData以存儲數(shù)據(jù) –>-->
<!---->
<!--</div>-->
<!--<!–目標對象 1、dragover 阻止默認事件 2沸毁、drop事件 （2.1）阻止默認事件 （2.2） getData （2.3） appendChild–>-->
<!--<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>-->
<h1>全部</h1>
<ul id="all" ondragover="allowDrop(event)" ondrop="drop(event)" >
<li draggable="true" ondragstart="drag(event)" id="drag0">軍事</li>
<li draggable="true" ondragstart="drag(event)" id="drag1">浙江</li>
<li draggable="true" ondragstart="drag(event)" id="drag2">手機</li>
<li draggable="true" ondragstart="drag(event)" id="drag3">宇宙</li>
<li draggable="true" ondragstart="drag(event)" id="drag4">娛樂</li>
<li draggable="true" ondragstart="drag(event)" id="drag5">美妝</li>
<li draggable="true" ondragstart="drag(event)" id="drag6">汽車</li>
<li draggable="true" ondragstart="drag(event)" id="drag7">科技</li>
</ul>
<h1>訂閱</h1>
<ul id="take" ondragover="allowDrop(event)" ondrop="drop(event)">
</ul>
</body>
</html>
方法二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,li{
list-style: none;
}
li{
float: left;
width: 40px;
background-color: #aaa;
padding: 10px;
margin: 10px;
text-align: center;
}
ul:after{
clear: both;
display: block;
content: "";
}
ul{
min-height: 40px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h1>全部</h1>
<ul id="all">
<li draggable="true" id="drag0">軍事</li>
<li draggable="true" id="drag1">浙江</li>
<li draggable="true" id="drag2">手機</li>
<li draggable="true" id="drag3">宇宙</li>
<li draggable="true" id="drag4">娛樂</li>
<li draggable="true" id="drag5">美妝</li>
<li draggable="true" id="drag6">汽車</li>
<li draggable="true" id="drag7">科技</li>
</ul>
<h1>訂閱</h1>
<ul id="take">
</ul>
<script>
dragEles=document.querySelectorAll("ul li");
dropAll=document.querySelector("#all");
dropTake=document.querySelector("#take");
for(var i=0;i<dragEles.length;i++){
dragEles[i].ondragstart=function (ev) {
ev.dataTransfer.setData("Text",ev.target.id)
}
}
dropAll.ondragover=dragoverAllow;
dropAll.ondrop=ondropAllow;
dropTake.ondragover=dragoverAllow;
dropTake.ondrop=ondropAllow;
function ondropAllow (ev) {
if(ev.target.tagName.toLowerCase() === 'li') return;
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data))
}
function dragoverAllow (ev) {
ev.preventDefault();
}
</script>
</body>
</html>
預覽地址：https://github.com/have-not-BUG/task/blob/master/renwu/task43/%E6%96%B9%E6%B3%95%E4%BA%8C.html
**本文版權歸本人即簡書筆名：該賬戶已被查封 所有峰髓，如需轉(zhuǎn)載請注明出處。謝謝息尺！ *
