HTML5是什么?有哪些新特性?有哪些新增標簽菜循?如何讓低版本的 IE 支持 HTML5新標簽?
HTML5是HTML第五次重大修改申尤,廢棄了許多沉冗的標簽癌幕,同時也新增了許多新的標簽,使HTML更加語義化昧穿,交互功能更加豐富勺远。
在HTML5中,擁有許多新的特性:
1时鸵、更多語義化標簽胶逢,賦予網(wǎng)頁更好的意義和結構;
2饰潜、支持本地存儲宪塔。網(wǎng)頁APP擁有更短的啟動時間,更快的聯(lián)網(wǎng)速度
3囊拜、設備兼容某筐。外部應用可以直接與瀏覽器內部的數(shù)據(jù)直接相連,例如視頻影音可直接與microphones及攝像頭進行交互
4冠跷、鏈接更快南誊。實現(xiàn)了Server-Sent Event和WebSockets,使得基于頁面的實時聊天蜜托,更快速的網(wǎng)頁游戲體驗抄囚,更優(yōu)化的在線交流得到了實現(xiàn)
5、audio和video標簽的引用橄务,可以在頁面上嵌入多媒體內容
6幔托、基于svg,canvas的三維蜂挪、圖形及特效特性
下面就是一些新增的標簽和改變
1重挑、關于DOCTYPE
//以前的HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
//HTML5
<!DOCTYPE htm>
2、關于meta
//以前HTML
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
//HTML5
<meta charset="utf-8">
3棠涮、新的標簽
canvas
標簽定義圖形谬哀,比如圖表和其他圖像。該標簽基于 JavaScript 的繪圖 API
audio
定義音頻內容
video
定義視頻(video 或者 movie)
source
定義多媒體資源 <video> 和<audio>
embed
定義嵌入的內容严肪,比如插件
track
為諸如 <video> 和 <audio> 元素之類的媒介規(guī)定外部文本軌道
datalist
定義選項列表史煎。與 input 元素配合使用該元素谦屑,來定義 input 可能的值
keygen
規(guī)定用于表單的密鑰對生成器字段
output
定義不同類型的輸出,比如腳本的輸出
article
定義頁面正文內容
aside
定義頁面內容之外的內容
bdi
設置一段文本篇梭,使其脫離其父元素的文本方向設置
command
定義命令按鈕氢橙,比如單選按鈕、復選框或按鈕
details
用于描述文檔或文檔某個部分的細節(jié)
dialog
定義對話框恬偷,比如提示框
summary
標簽包含details
元素的標題
figure
規(guī)定獨立的流內容(圖像悍手、圖表、照片喉磁、代碼等等)
figcaption
定義<figure>
元素的標題
footer
定義section
或document
的頁腳
header
定義了文檔的頭部區(qū)域
mark
定義帶有記號的文本
meter
定義度量衡谓苟。僅用于已知最大和最小值的度量
nav
導航
progress
定義任何類型的任務的進度
ruby
定義ruby注釋(中文注音或字符)
rt
定義字符(中文注音或字符)的解釋或發(fā)音
rp
在 ruby 注釋中使用,定義不支持ruby元素的瀏覽器所顯示的內容
section
定義文檔中的節(jié)(section协怒、區(qū)段)
time
定義日期或時間
wbr
規(guī)定在文本中的何處適合添加換行符
以往我們會使用<div>
標簽了劃分頁面區(qū)塊涝焙,現(xiàn)在HTML5中新增了<footer>
、<header>
等新元素孕暇,頁面結構就更清晰了
如何讓低版本的IE也支持HTML5新元素
方法1
在<head>
中加入JavaScript
<head>
<script type="text/javascript">
document.createElement('header')
document.createElement('footer')
</script>
</head>
這樣就可以在IE中使用添加的標簽
<header></header>
<footer></footer>
方法2
使用html5shiv.js
在<head>
中加入
<!--[if lt IE 9]>
<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<![endif]-->
如果瀏覽器版本低于IE9仑撞,這段script就會被解析
input有哪些新增類型?
emali
輸入郵箱妖滔,不符合郵箱格式無法提交隧哮,且會彈出提示
url
輸入url,不符合url格式無法提交座舍,且會彈出提示
number
只能輸入數(shù)字
range
一個拖動控件
Date
日期選擇控件
瀏覽器本地存儲中Cookie和localStorage有什么區(qū)別沮翔?localStorage如何存儲刪除數(shù)據(jù)?
什么是Cookie
Cookie指某些網(wǎng)站為了辨別用戶身份而儲存在用戶本地終端(Client Side)上的數(shù)據(jù)
Cookie總是保存在客戶端中曲秉,按在客戶端中的存儲位置采蚀,可分為內存Cookie和硬盤Cookie。
內存Cookie由瀏覽器維護承二,保存在內存中榆鼠,瀏覽器關閉后就消失了,其存在時間是短暫的亥鸠。硬盤Cookie保存在硬盤里妆够,有一個過期時間,除非用戶手工清理或到了過期時間负蚊,硬盤Cookie不會被刪除神妹,其存在時間是長期的。所以盖桥,按存在時間灾螃,可分為非持久Cookie和持久Cookie
以登陸為例
1、客戶端發(fā)送用戶名和密碼到服務端
2揩徊、服務端驗證成功腰鬼,把用戶的認證狀態(tài)與SessionID綁定記錄在服務器端
3、向客戶端響應時塑荒,會在響應頭部字段Set-Cookie內寫入SessionID
4熄赡、客戶端收到響應,把SessionID作為一個Cookie保存下來齿税,從這以后彼硫,客戶端發(fā)送的請求都會在請求頭帶上這一個Cookie
什么是localStorage
localStorage是本地持久儲存客戶端數(shù)據(jù)的API
同一個域名的網(wǎng)站共享同一個localStorage對象,不同域名的localStorage不能相互訪問 (cookie也是一樣的)
每一個域名的儲存空間是有限的凌箕,至少為5MB (cookie大約只有4kb)
localStorage使用鍵值對的方式儲存數(shù)據(jù),鍵值都必須為字符串(cookie也一樣)
cookie和localStorage有什么區(qū)別拧篮?
1、服務器發(fā)送請求時會帶上cookie
2牵舱、cookie有存儲期限串绩,到期了會自動失效,而localStorage則不會芜壁,除非手動刪除
3礁凡、cookie大小限制大約為4KB,localStorage大約為5MB
CSS3效果實現(xiàn)
http://js.jirengu.com/wafe/4/edit
背景漸變
http://js.jirengu.com/hibow/7/edit