1. 不管是招聘還是聊天經常能聽到 h5開發，它指的是什么？和 HTML5有什么關系?
h5指的是一系列技術做的移動端ppt,它的頁面很酷炫，可以提高公司的逼格，亮瞎訪問者的雙眼，讓小白頓生膜拜之感，即使ppt毫無實質，使用大量的插件或庫，主要技術有：
- 頁面素材加載技術，使用使用createJS之中的preloadJS（現成的庫）
- 音樂加載播放技術，createJS中同樣有soundJS可以實現（又是它）
- 可以滑動的頁面，這不就是ppt嗎？用了swiper.js這個Jquery插件（又是庫）
- 可以隨意涂抹修改，使用canvas疊加層，canvas是HTML5標準里面的標簽。這不是ppt嗎？
- 有動態的文字和圖片，常見的是使用了css3或者直接使用js動畫,這不是ppt嗎?
- 可以填表報名，使用最基本的表單
- 可以支持分享自定義的文案和圖片
html5 和h5的區別
html5 是公認的web開發的html規范，是一系列關于html的標準，它就好比是國家的法律，比如未成年不準進網吧，網吧要是允許未成年人進入，國家就要對網吧和未成年人進行處罰和教育。同樣的，你寫的html網頁不遵守html5規范，可能導致你的網頁在瀏覽器上出現一系列問題，后果自負。
h5是一系列技術的集合，它是應用一系列的web技術出現的產物。
2.HTML5是什么？有哪些新特性？有哪些新增標簽？如何讓低版本的 IE 支持 HTML5新標簽？
HTML5 是 HTML標準的最新演進版本,它是一個新的 HTML 語言版本包含了新的元素，屬性和行為，同時包含了一系列可以被用來讓 Web 站點和應用更加多樣化，功能更強大的技術。 這套技術往往被稱作 HTML5 和它的朋友們，通常簡稱為 HTML5
新特性
- 語意特性,添加<header><header/><nav><nav>等標簽
- 多媒體， 用于媒介回放的 video 和 audio 元素
- 圖像效果，用于繪畫的 canvas 元素，svg元素等
- 離線 & 存儲,對本地離線存儲的更好的支持,local Store,Cookies等
- 設備兼容特性 ，HTML5提供了前所未有的數據與應用接入開放接口。使外部應用可以直接與瀏覽器內部的數據直接相連，
- 連接特性，更有效的連接工作效率，使得基于頁面的實時聊天，更快速的網頁游戲體驗，更優化的在線交流得到了實現。HTML5擁有更有效的服務器推送技術，Server-Sent Event和WebSockets就是其中的兩個特性，這兩個特性能夠幫助我們實現服務器將數據“推送”到客戶端的功能
- 性能與集成特性，HTML5會通過XMLHttpRequest2等技術，幫助您的Web應用和網站在多樣化的環境中更快速的工作
新增標簽
- 多媒體：<audio></audio>, <video><video>,<source></source>, <embed></embed>, <track></track>
- 新表單元素：<datalist> ,<output> , <keygen>
- 新文檔節段和綱要:<header>頁面頭部、<section>章節、<aside>邊欄、<article>文檔內容、<footer>頁面底部、<section>章節、<aside>邊欄、<article>文檔內容、<footer>頁面底部等
使用html5shiv可以解決ie低版本不兼容的問題，只需要在head中加上,當版本低于IE9時，瀏覽器會加載html5.js腳本，使得支持html5的新功能，也可以將腳本文件下載到本地
<head>
<!--[if lt IE 9]>
<script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>
</script>
<![endif]-->
</head>
color,選擇顏色
date 選擇日期
email 用于檢測輸入的是否為email格式的地址
month 選擇月份
number 用于應該包含數值的輸入域，可以設定對輸入值的限定
range 用于定義一個滑動條，表示范圍
search 用于搜索，比如站點搜索或 Google 搜索
tel 輸入電話號碼
-time 選擇時間
url 輸入網址
week 選擇周和年
4.瀏覽器本地存儲中 cookie 和 localStorage 有什么區別？ localStorage 如何存儲刪除數據。
共同點
sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。
區別:1
- cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞，localStorage不會自動把數據發給服務器，僅在本地保存
- cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下，存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。localStorage不會自動把數據發給服務器
- cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據
- localStorage支持事件通知機制，可以將數據更新的通知發送給監聽者。 api 接口使用更方便。而cookie的原生接口不友好，需要程序員自己封裝
HTML5中提供了localStorage對象可以將數據長期保存在客戶端，除非人為清除，localStorage提供了幾個方法:
- 存儲:localStorage.setItem(key,value)如果key存在時，更新value
- 獲取 localStorage.getItem(key)如果key不存在返回null
- 刪除 localStorage.removeItem(key)一旦刪除，key對應的數據將會全部刪除
- 全部清除 localStorage.clear() 使用removeItem逐個刪除太麻煩，可以使用clear,執行的后果是會清除所有localStorage對象保存的數據
注意：localStorage存數的數據是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數據,儲存空間5M。 - 寫出如下 CSS3效果的簡單事例
1、圓角， 圓形
2、div 陰影
3、2D 轉換：放大、縮小、偏移、旋轉
4、3D 轉換：移動、旋轉
5、背景色漸變
6、過渡效果
7、動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.circularA{
width: 100px;
height:100px;
border: 1px solid #000;
border-radius: 10px;
background-color: #6633FF;
text-align: center;
line-height: 100px;
margin: 10px;
}
.circularB{
width: 100px;
height:100px;
border: 1px solid #000;
border-radius: 50%;
background-color: #FF6699;
text-align: center;
line-height: 100px;
margin: 10px;
}
.shadow{
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
margin: 10px;
width: 50%;
height: 50%;
color: #666;
transform: rotate(-7deg);
}
.shadow>img{
width: 90%;
height: 90%;
margin-top: 20px;
}
.change2d{
/*margin: 100px;*/
color: #666;
text-align: center;
width: 300px;
margin: 150px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: rotate(9deg);
}
.change2d>img{
margin-top: 20px;
width: 90%;
height: auto;
color: #666;
cursor: pointer;
}
.change2d:hover{
transform: matrix(1.5,0,0,1.5,50,50);
transition: all 1s;
}
.change3d{
/*margin: 100px;*/
color: #666;
text-align: center;
width: 300px;
margin: 150px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.change3d>img{
margin-top: 20px;
width: 90%;
height: auto;
color: #666;
cursor: pointer;
}
.ct-3d{
/*transform-style:preserve-3d;*/
perspective: 160;
-webkit-perspective:160; /* Safari and Chrome */
perspective-origin:150% center;
-webkit-perspective-origin:150% center;/* Safari and Chrome */
}
.change3d:hover{
transform:rotateX(5deg) translate3d(250px,50px,10px);
transition: all 1s;
}
.bgGradient{
width: 400px;
height: 400px;
border-radius: 50%;
background: repeating-radial-gradient(red ,green,blue 10%);
}
.transitionEg{
width: 300px;
height: 500px;
margin: 50px 10px 10px 150px;
transform-style:preserve-3d;
}
.transitionEg img{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 400px;
}
.transitionEg img:nth-child(1){
z-index: 1;
opacity: .6;
}
.transitionEg img:nth-child(2){
z-index: 2;
-webkit-transform: scaleZ(3) rotateX(45deg);
transform: scaleZ(3) rotateX(45deg);
}
.transitionEg h3{
position: absolute;
top: 80%;
left: 20%;
}
.transitionCt{
position: relative;
-webkit-perspective: 4200;
perspective: 4200;
cursor: pointer;
}
.transitionCt:hover{
-webkit-perspective: 2200;
perspective: 2200;
transition: all 2s;
}
.btn{
margin: 20px 10px 200px 10px;
display: inline-block;
padding: 15px 25px;
font-size: 24px;
font-weight: bolder;
cursor: not-allowed;
text-align: center;
color: #fff;
border-radius: 15px;
background-color: #4caf39;
box-shadow: 0 20px #999;
}
@keyframes myfirstAnimation {
from { }
to{
background-color: #0c8e35;
box-shadow: 0 2px #666;
transform: translateY(12px);
}
}
.btn{
-webkit-animation: myfirstAnimation 2s linear 1.5s infinite;
animation: myfirstAnimation 2s linear 1.5s infinite;
/*-webkit-animation-name:myfirst;*/
/*-webkit-animation-duration:5s; 完成時間 */
/*-webkit-animation-timing-function:linear;規定動畫的速度曲線。默認是 "ease"。*/
/*-webkit-animation-delay:2s; 延遲時間*/
/*-webkit-animation-iteration-count:infinite; 循環次數 */
/*-webkit-animation-direction:alternate; 是否反過來運行*/
/*-webkit-animation-play-state:running;規定動畫是否正在運行或暫停*/
}
.animateEg{
height: 100px;
width: 400px;
}
</style>
</head>
<body>
<div class="circularA">圓角</div>
<div class="circularB">圓形</div>
<div class="shadow"><h3>美麗的風景</h3></div>
<div class="change2d"><h3>鼠標放上去我會放大</h3></div>
<div class="ct-3d">
<div class="change3d"><h3>鼠標放上去我會移動和旋轉</h3></div>
</div>
<div class="bgGradient"></div>
<div class="transitionCt">
<div class="transitionEg">
<h3>鼠標放上來我會慢慢動</h3>
</div>
</div>
<div class="animateEg">
<button class="btn">按鈕正在被連續按下</button>
</div>
</body>
6： 實現如下全屏圖加過渡色的效果
http://js.jirengu.com/tehesonace/1/edit
7： 寫出如下 loading 動畫效果
http://js.jirengu.com/yagohadoda/2/edit
http://js.jirengu.com/dewilozoce/2/edit
