一、问答
（一）、不管是招聘还是聊天经常能听到 h5开发，它指的是什么？和 HTML5有什么关系?
h5开发其实就是指利用前端技术在手机页面上呈现有声音及画面的动态酷炫效果的页面开发，其实称作h5不专业，这是大家都这么叫，然后就成为约定俗成的概念了。日常大家说的h5与HTML5其实没多大关系，HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在网际网路应用迅速发展的时候，使网路标准达到符合当代的网路需求。也就是说HTML5是一个标准，其跟h5不是同一个概念。
（二）、HTML5是什么？有哪些新特性？有哪些新增标签？如何让低版本的 IE 支持 HTML5新标签？
-
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在网际网路应用迅速发展的时候，使网路标准达到符合当代的网路需求。
-
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 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 创建的 "HTML5 Enabling JavaScript", "** shiv**" 来解决该问题:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
以上代码是一个注释，作用是在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它。
由于国内谷歌服务器被墙，我们可以使用如下资源
<!--[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 // 你选择一个日期和时间 (无时区).
email // 用于应该包含 e-mail 地址的输入域
month // 允许你选择一个月份。
number // 用于应该包含数值的输入域。
range // 用于应该包含一定范围内数字值的输入域。
search // 用于搜索域，比如站点搜索或 Google 搜索。
tel // 定义输入电话号码字段
time // 类型允许你选择一个时间。
url // 用于应该包含 URL 地址的输入域。
week // week 类型允许你选择周和年。
（四）、浏览器本地存储中 cookie 和 localStorage 有什么区别？ localStorage 如何存储删除数据。
Paste_Image.png
- 另外还要补充下三者之间作用域的区别：
cookie的作用域是所有窗口都是共享的，和localStorage一样；而sessionStorage的作用域是仅当前窗口有效，即使是同一个页面，也就是说不同的浏览器窗口它们之间不共享存储的数据。
举个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>点我</button>
<p>我将显示点击次数</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数据存储")}
})
</script>
</body>
</html>
我用浏览器打开两个页面，发现它们之间的数据是独立的，当我刷新及强制刷新（ctr+F5）数据都不会丢失，但是当我关闭窗口再打开（不是通过ctr+shift+t的方式恢复标签页）则数据会归零了。
而如果我将上面的sessionStorage改成localStorage，则发现两个页面的数据是共享的，且我关闭页面后数据还存在，不会归零。
- 操作数据的用法：
保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);
//以上localStorage（没有时间限制的数据存储）都可被替换
//成 sessionStorage（针对一个 session 的数据存储）
二、代码
实现如下效果
1、标签可在“全部”和“订阅"两个栏目来回拖动，demo 效果
2、实现方式参考 例子
- 方法一：
<!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以存储数据 –>-->
<!---->
<!--</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
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
网友评论