HTML5新特性——Assignment

問答

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 是輸入域的選項列表

【form-attribute-demo】

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ū)別】

代碼

實現(xiàn)如下效果:

  1. 標簽可在“全部”和“訂閱"兩個欄目來回拖動夺饲,demo 效果
  2. 實現(xiàn)方式參考 例子

【jsbin】

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末奸汇,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子往声,更是在濱河造成了極大的恐慌擂找,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,366評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浩销,死亡現(xiàn)場離奇詭異贯涎,居然都是意外死亡,警方通過查閱死者的電腦和手機慢洋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,521評論 3 395
  • 文/潘曉璐 我一進店門塘雳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人普筹,你說我怎么就攤上這事败明。” “怎么了太防?”我有些...
    開封第一講書人閱讀 165,689評論 0 356
  • 文/不壞的土叔 我叫張陵妻顶,是天一觀的道長。 經(jīng)常有香客問我,道長盈包,這世上最難降的妖魔是什么沸呐? 我笑而不...
    開封第一講書人閱讀 58,925評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮呢燥,結(jié)果婚禮上崭添,老公的妹妹穿的比我還像新娘。我一直安慰自己叛氨,他們只是感情好呼渣,可當我...
    茶點故事閱讀 67,942評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著寞埠,像睡著了一般屁置。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上仁连,一...
    開封第一講書人閱讀 51,727評論 1 305
  • 那天蓝角,我揣著相機與錄音,去河邊找鬼饭冬。 笑死使鹅,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的昌抠。 我是一名探鬼主播患朱,決...
    沈念sama閱讀 40,447評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼炊苫!你這毒婦竟也來了裁厅?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,349評論 0 276
  • 序言:老撾萬榮一對情侶失蹤侨艾,失蹤者是張志新(化名)和其女友劉穎执虹,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唠梨,經(jīng)...
    沈念sama閱讀 45,820評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡声畏,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,990評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了姻成。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,127評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡愿棋,死狀恐怖科展,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情糠雨,我是刑警寧澤才睹,帶...
    沈念sama閱讀 35,812評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響琅攘,放射性物質(zhì)發(fā)生泄漏垮庐。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,471評論 3 331
  • 文/蒙蒙 一坞琴、第九天 我趴在偏房一處隱蔽的房頂上張望哨查。 院中可真熱鬧,春花似錦剧辐、人聲如沸寒亥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,017評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽溉奕。三九已至,卻和暖如春忍啤,著一層夾襖步出監(jiān)牢的瞬間加勤,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,142評論 1 272
  • 我被黑心中介騙來泰國打工同波, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留鳄梅,地道東北人。 一個月前我還...
    沈念sama閱讀 48,388評論 3 373
  • 正文 我出身青樓参萄,卻偏偏與公主長得像卫枝,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子讹挎,可洞房花燭夜當晚...
    茶點故事閱讀 45,066評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案校赤? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1 92
  • 接上 關于HTML/HTML5(一)http://www.reibang.com/p/33fc7840c079 學...
    Amyyy_閱讀 791評論 0 4
  • 本文主要介紹Html5和Html4的區(qū)別。 語法的改變 內(nèi)容類型HTML5 的文件擴展符與內(nèi)容類型保持不變筒溃。擴展符...
    layjoy閱讀 1,844評論 0 23
  • 今天跟H5班的一個同學聊面試。 我已經(jīng)成功一半了歪玲。迁央。。 怎么說滥崩? 我這邊已經(jīng)認可公司了岖圈,就等公司認可我。 哈钙皮,這種...
    藍鷗科技閱讀 10,436評論 3 20
  • 問答 1.不管是招聘還是聊天經(jīng)常能聽到 h5開發(fā)蜂科,它指的是什么顽决?和 HTML5有什么關系? h5指的是一系列技術(shù)做...
    GarenWang閱讀 28,390評論 2 20