問答
1. 不管是招聘還是聊天經(jīng)常能聽到 h5開發(fā)消返,它指的是什么?和 HTML5有什么關系? 百度 h5 qq H5
H5主要值的是移動端應用的頁面開發(fā),例如微信內(nèi)的宣傳活動頁面;
HTML5是W3C發(fā)布的關于HTML的最新標準,H5可以說是HTML5的具體應用嗤形,當然H5所使用到的技術(shù)有可能不僅僅是HTML5;
2. HTML5是什么弧圆?有哪些新特性赋兵?有哪些新增標簽?如何讓低版本的 IE 支持 HTML5新標簽
2.1 HTML5是什么
HTML5是HTML標準的最新演進版本搔预,包含兩種含義:
- 它是包含新元素霹期、屬性和行為的HTML語言的新版本;
- 一系列使得網(wǎng)站和應用更加多樣和強大的技術(shù)
2.2有哪些新特征
基于HTML5的新增功能拯田,可以將其歸類為以下幾個部分:
- 語義:精確描述文檔內(nèi)容历造;
- 連通性:與服務器通信的創(chuàng)新方法;
- 離線 & 存儲:客戶端存儲數(shù)據(jù)和離線高效運行船庇;
- 多媒體:讓音頻和視頻在所有Web中成為第一等公民吭产;
- 2D/3D繪圖 & 效果:提供更寬泛的展示選擇;
- 性能和集成:提供更快的性能優(yōu)化和硬件的利用鸭轮;
- 設備訪問:允許不同輸入和輸出設備的利用臣淤;
- 樣式:讓開發(fā)者撰寫更復雜的主題
2.3 新增的標簽
- 語義類標簽
<section>:指定獨立的主體內(nèi)容,用于生成文檔節(jié)段并計入大綱张弛;
//以下新標簽生成節(jié)段但不計入大綱
<header>:頭部分節(jié)便簽荒典,定義頁眉
<nav>:導航分節(jié)標簽;
<aside>:側(cè)邊欄吞鸭;
<article>:引用他人的文章的節(jié)段;
<footer>:腳部分節(jié)標簽覆糟,定義頁腳刻剥;
//以下標簽屬于分節(jié)根,分節(jié)根是擁有自己大綱的HTML元素滩字,但是大綱內(nèi)的節(jié)段和標題相對于其上級等同于不存在
<details>
<fieldset>
<figure>:規(guī)定獨立的流內(nèi)容造虏;
<figcaption>:規(guī)定<figure>的標題;
//一些新增的語義元素
<details>:規(guī)定了用戶可見的或者隱藏的需求的補充細節(jié)麦箍;
<summary>: 為details元素定義一個可見的標題漓藕。 當用戶點擊標題時會顯示出詳細信息;
<embed>:標簽定義了一個容器挟裂,用來嵌入外部應用或者互動程序(插件);
<meter>:標簽定義度量衡享钞,僅用于已知最大和最小值的度量;
<progress>:定義運行中的任務進度(進程);
<ruby>:標簽定義ruby注釋(中文注音或字符);
- 多媒體標簽
<audio>
<vedio>
//兩種引入方式
<audio id='audio' src="http://192.168.1.104:8080/down%20by%20the%20salley%20garden.mp3#t=10,30" controls loop preload='auto'></audio>
<vedio>
<source src='foo.ogg' type='vedio/ogg'>
<source src='bar.mp4' type='vedio/mp4'>
</vedio>
//下面是多媒體標簽的可選屬性
width&height:設置寬高;
controls:顯示控件诀蓉;
autoplay:自動播放栗竖;
loop:循環(huán)播放暑脆;
muted:靜音;
preload:auto|metadata|none用于緩沖資源狐肢;
//設定標記播放范圍:
可在多媒體標簽的引入資源的url上附加#制定媒體片段:
http://foo.com/video.ogg#t=10,20:
指定視頻播放范圍為從第10秒到第20秒;
http://foo.com/video.ogg#t=,10.5:
指定視頻從開始播放到第10.5秒;
http://foo.com/video.ogg#t=,02:00:00
指定視頻從開始播放到兩小時;
http://foo.com/video.ogg#t=60
指定視頻從第60秒播放到結(jié)束;
- 2D或3D圖像標簽
<canvas>:canvas是一個可以使用腳本在其畫布上繪制圖形的HTML元素添吗,它可用于制作圖形、圖像或動畫份名。
關于canvas的解讀碟联,詳見基于Canvas的動畫基本原理與數(shù)理分析
2.4讓低版本的IE支持HTML5新標簽
利用html5shiv.js解決低版本IE不支持HTML5新標簽的問題;
<head>
<!--[if lt IE 9]>
<script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'></script>
<![endif]-->
</head>
3. input 有哪些新增類型僵腺?
3.1 input的新類型
<input type="color">
<br>
<input type="date">
<br>
<input type="time">
<br>
<input type="month">
<br>
<input type="week">
<br>
<input type="email"> <br>
<input type="number"> <br>
<input type="range" min='1' max='10' step='1' value=2><br>
<input type="search">
<br>
<input type="tel">
<br>
<input type="url">
3.2 HTML5表單的新屬性
form的新屬性:
autocomplete:form域擁有自動完成功能
novalidate:規(guī)定提交表單時不應該驗證form域
<form action="demo-form.php" autocomplete="on" novalidate>
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
----------------------------------------
input的新屬性
autocomplete & novalidate
autofocus:自動聚焦
form:規(guī)定輸入域所屬的表單
formaction:定義了表單提交的方式
formmethod:描述了 <input> 元素在表單提交時無需被驗證
formnovalidate:描述了 <input> 元素在表單提交時無需被驗證
formtarget:指定一個名稱或一個關鍵字來指明表單提交數(shù)據(jù)接收后的展示
pattern:描述了一個正則表達式用于驗證 <input> 元素的值
placeholder:提供一種提示(hint)鲤孵,描述輸入域所期待的值
required:規(guī)定必須在提交之前填寫輸入域(不能為空)
list:規(guī)定輸入域的 datalist。datalist 是輸入域的選項列表
3.3 HTML5表單的新元素
datalist:規(guī)定輸入域的選項列表
keygen:提供一種驗證用戶的可靠方法,用于表單的密鑰對生成器字段
當提交表單時想邦,會生成兩個鍵裤纹,一個是私鑰,一個公鑰丧没。
私鑰(private key)存儲于客戶端鹰椒,公鑰(public key)則被發(fā)送到服務器。公鑰可用于之后驗證用戶的客戶端證書(client certificate)呕童。
output:作為計算結(jié)果輸出顯示(比如執(zhí)行腳本的輸出)
4. 瀏覽器本地存儲中 cookie 和 localStorage 有什么區(qū)別漆际? localStorage 如何存儲刪除數(shù)據(jù)。
【W(wǎng)eb Storage和Cookie聯(lián)系與區(qū)別】