資訊專欄INFORMATION COLUMN
摘要：最近在復(fù)習(xí)前端的基礎(chǔ)知識(shí)，在這里做一個(gè)總結(jié)，這是篇。缺點(diǎn)該標(biāo)準(zhǔn)并未能很好的被瀏覽器所支持。應(yīng)用標(biāo)簽狀態(tài)標(biāo)簽標(biāo)簽備注實(shí)時(shí)狀態(tài)顯示氣壓氣溫。連接上了斷網(wǎng)了瀏覽器支持情況事件不支持已廢棄不支持不支持
最近在復(fù)習(xí)前端的基礎(chǔ)知識(shí)，在這里做一個(gè)總結(jié)，這是HTML5篇。新特性
取消了過時(shí)的顯示效果標(biāo)記和
新增語(yǔ)義化標(biāo)簽
新增多媒體標(biāo)簽（video視頻,audio音頻）
增加更多表單類型
新增canvas繪圖標(biāo)簽
增加了標(biāo)簽拖動(dòng)、數(shù)據(jù)存儲(chǔ)等一些API
HTML5優(yōu)缺點(diǎn) 優(yōu)點(diǎn)提高可用性和改進(jìn)用戶的友好體驗(yàn)；
可以給網(wǎng)站帶來更多的多媒體元素（視頻和音頻）；
可以很好的替代FLASH和Sliverlight;
當(dāng)涉及到網(wǎng)站的抓取和索引的時(shí)候，對(duì)于SEO很友好；
將被大量應(yīng)用于移動(dòng)應(yīng)用程序和游戲；
可移植性好。
缺點(diǎn)該標(biāo)準(zhǔn)并未能很好的被瀏覽器所支持。因新標(biāo)簽的引入，各瀏覽器之間將缺少一種統(tǒng)一的數(shù)據(jù)描述格式，造成用戶體驗(yàn)不佳。
純表現(xiàn)的元素
besefont、 big、center、 font、s、strike、tt、u
對(duì)可用性產(chǎn)生負(fù)面影響的元素
frame、frameset、noframes
產(chǎn)生混肴的元素
acronym、 applet、 isindex、dir
1.2 重定義標(biāo)簽顯示不變，只是表達(dá)的含義進(jìn)行了重新定義的標(biāo)簽
| 標(biāo)簽 | 備注 |
|---|---|
| b | 代表內(nèi)聯(lián)文本，通常是粗體，沒用傳遞表示重要的意思 |
| i | 代表內(nèi)聯(lián)文本，通常是斜體，沒有傳遞表達(dá)重要的意思 |
| dd | 可以同detailsy與figure一同使用，定義包含文本，dialog亦可使用 |
| dt | 可以同details與figrue一同使用，匯總細(xì)節(jié)，dialog也可用 |
| hr | 表示主題結(jié)束，而不是水平線，雖然顯示相同 |
| menu | 重新定義用戶界面的菜單，配合commond或者menuitem使用 |
| small | 表示小字體，例如打印注釋或則法律條款 |
| strong | 表示重要性而不是強(qiáng)調(diào)符號(hào) |
| 標(biāo)簽 | 備注 |
|---|---|
| article | 標(biāo)記定義一篇文章 |
| header | 標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的頭部 |
| nav | 標(biāo)記定義導(dǎo)航鏈接 |
| section | 標(biāo)記定義一個(gè)區(qū)域 |
| aisde | 標(biāo)記定義頁(yè)面內(nèi)容的側(cè)邊欄 |
| hgroup | 標(biāo)記定義文件中一個(gè)區(qū)塊的相關(guān)信息 |
| figure | 標(biāo)記定義一組媒體內(nèi)容以及他們的標(biāo)題 |
| figcaption | 標(biāo)記定義figure元素的標(biāo)題 |
| footer | 標(biāo)記定義一個(gè)頁(yè)面或一個(gè)區(qū)域的底部 |
| dialog | 標(biāo)記定義一個(gè)對(duì)話框（會(huì)話框）類似微信 |
| 標(biāo)簽 | 備注 |
|---|---|
| video | 標(biāo)記定義一個(gè)視屏 |
| audio | 標(biāo)記定義音頻內(nèi)容 |
| source | 標(biāo)記定義媒體資源 |
| canvas | 標(biāo)記定義圖片 |
| embed | 標(biāo)記定義外部的可交互的內(nèi)容或插件，比如flash |
標(biāo)簽的意義：多媒體標(biāo)簽的出現(xiàn)意味著多媒體的發(fā)展以及支持不適用插件的情況下即可操作媒體文件，極大提升了用戶體驗(yàn)。2.3 Web應(yīng)用標(biāo)簽
狀態(tài)標(biāo)簽
| 標(biāo)簽 | 備注 |
|---|---|
| meter | 實(shí)時(shí)狀態(tài)顯示：氣壓、氣溫。 例： |
| progress | 任務(wù)過程：安裝、 加載。 例： |
列表標(biāo)簽
| 標(biāo)簽 | 備注 |
|---|---|
| datalist | 為input標(biāo)記定義一個(gè)下拉列表，配合option |
| details | 標(biāo)記定義一個(gè)元素的詳細(xì)內(nèi)容，配合summary |
| summary | 標(biāo)簽為 元素定義一個(gè)可見的標(biāo)題。當(dāng)用戶點(diǎn)擊標(biāo)題時(shí)會(huì)顯示出詳細(xì)信息。 |
Menu
| 標(biāo)簽 | 備注 |
|---|---|
| menu | 命令列表（目前所有的主流瀏覽器都不支持） |
| menuitem | menu命令列表的標(biāo)簽（只有FireFox9.0+支持） |
| command | menu標(biāo)記定義一個(gè)命令按鈕（只有IE9支持） |
注釋標(biāo)簽
| 標(biāo)簽 | 備注 |
|---|---|
| ruby | 標(biāo)記定義注釋或音標(biāo) |
| rp | 告訴那些不支持ruby的元素的瀏覽器如何去顯示 |
| et | 標(biāo)記定義對(duì)rubyd 注釋內(nèi)容文本 |
其他標(biāo)簽
| 標(biāo)簽 | 備注 |
|---|---|
| mark | 標(biāo)記定義有標(biāo)記的文本（黃色選中狀態(tài)） |
| output | 標(biāo)記定義一些輸出類型，計(jì)算表單結(jié)果配合oninput事件 |
| keygen | 標(biāo)記定義表單里生成的鍵值（加密信息傳送） |
| time | 標(biāo)記定義一個(gè)日期/時(shí)間，目前所有主流的瀏覽器都不支持 |
對(duì)于不支持HTML5語(yǔ)法的瀏覽器（如：IE8及以下版本瀏覽器），要想使用這些新標(biāo)簽，需要那個(gè)通過JavaScript創(chuàng)建該標(biāo)簽。具體做法如下（以
在CSS中設(shè)置標(biāo)簽樣式為塊級(jí)
header { display: block; }
通過JavaScript的DOM方式創(chuàng)建該標(biāo)簽
document.createElement("header");
由于HTML5新增的標(biāo)簽很多， 如果用上述方法創(chuàng)建標(biāo)簽也比較麻煩，所以我們可以通過簡(jiǎn)單引用html5shiv.js文件解決這個(gè)問題。
3、多媒體 3.1 音頻3.2 視頻
不同格式音視頻的兼容性
查看效果
5、自定義屬性HTML5通過 "data-屬性名" 的方式創(chuàng)建自定義屬性。
JavaScript 通過dataset對(duì)象獲取自定義屬性。
注：獲取dataset中的屬性名需要改成駝峰式命名，如 user-sex 改為 userSex
var dv = document.getElementById("dv")
var dt = dv.dataset;
var str = ""
str = dt.name + "," + dt.age + "," + dt.userSex;
dv.innerText = str;
執(zhí)行上方代碼或 點(diǎn)擊這里 查看打印結(jié)果
6、讀取文件通過 FileReader 接口讀取文件內(nèi)容。
var f1 = document.querySelector("#f1");
var btn1 = document.querySelector("#btn1");
btn1.onclick = function(){
// 獲取上傳文件
var fl1 = f1.files[0];
// 讀取文件，創(chuàng)建讀取文件的對(duì)象
var fReader = new FileReader();
// 讀取文件
fReader.readAsText(fl1);
// 開始讀取文件的加載事件
fReader.onload = function() {
var style= document.createElement("style");
var result = fReader.result;
style.innerHTML = result;
document.querySelector("head").appendChild(style)
}
}
新建 style.txt 文件，編輯內(nèi)容：
#btn1{
width: 70px;
height: 30px;
border: none;
background-color: green;
font-size: 14px;
color: #fff;
}
運(yùn)行程序，上傳 style.txt 文件，查看樣式變化。
點(diǎn)擊此處 快速運(yùn)行
var state = window.navigator.onLine;
// 返回布爾值，網(wǎng)絡(luò)聯(lián)通為true，反之為false
if(state){
alert("在線")
}else{
alert("離線")
}
主流瀏覽器都支持。
7.2 document.ononlinewindow.ononline=function(){
alert("連接上了")
}
window.onoffline=function(){
alert("斷網(wǎng)了")
}
瀏覽器支持情況：
| 事件 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| ononline | 不支持 | IE8（IE11 已廢棄） | 3.0 | 不支持 | 不支持 |
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/52576.html
摘要：前端知識(shí)點(diǎn)總結(jié)新特性新的語(yǔ)義標(biāo)簽增強(qiáng)型表單音頻和視頻繪圖繪圖地理定位拖動(dòng)增強(qiáng)型表單新新的表單元素新特性數(shù)據(jù)列表本身不可見為提供輸入建議列表新特性進(jìn)度條左右晃動(dòng)進(jìn)度條具有指定進(jìn)度值進(jìn)度條新特性刻度尺用于標(biāo)示一個(gè)值所值的范圍不 前端知識(shí)點(diǎn)總結(jié)——H5 1.html5新特性 (1)新的語(yǔ)義標(biāo)簽 (2)增強(qiáng)型表單* (3)音頻和視頻 (4)Canvas繪圖 (5)SVG繪圖 (6)地...
摘要：前言月份開始出沒社區(qū)，現(xiàn)在差不多月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議那么今天我就把看過的一些學(xué)習(xí)資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區(qū)，現(xiàn)在差不多9月了，按照工作的說法，就是差不多過了三個(gè)月的試用期，準(zhǔn)備轉(zhuǎn)正了！一般來說，差不多到了轉(zhuǎn)正的時(shí)候，會(huì)進(jìn)行總結(jié)或者分享會(huì)議！那么今天我就...
閱讀 3557·2021-08-02 13:41
閱讀 2391·2019-08-30 15:56
閱讀 1520·2019-08-30 11:17
閱讀 1174·2019-08-29 15:18
閱讀 580·2019-08-29 11:10
閱讀 2671·2019-08-26 13:52
閱讀 508·2019-08-26 13:22
閱讀 2949·2019-08-23 15:41
