• QQ咨詢:4001806960
  • 咨詢熱線:400-180-6960

HTML5基礎知識及兼容處理

作者:日期:2019-01-11 20:01:24 點擊:243

HTML5基礎概述

HTML:超文本標記語言(頁面中不僅只有文字,而且可以呈現出圖片、音視頻等媒體資源)

XHTML:它是HTML比較規範嚴謹的一代版本

XML:可擴展的標記語言(HTML中使用的標簽都是W3C標准中規定的,XML允許我們自己擴展標簽的),它的作用不是用來寫頁面結構的,而是用來存儲一些數據的(以自己擴展的標簽作爲標識,清晰明了的展示出數據的結構…)

HTML5:當前HTML最新的一代版本,也是非常成功的一代版本,目前市場上基本上都是基于H5規範進行開發的(它相對于傳統的HTML更多的是增加一些有助于開發的內容,對原有規範的修改調整很少)

XML

<root>
<student>
<name>珠峰培訓</name>
<age>9</age>
</student>
<student>
<name>周嘯天</name>
<age>27</age>
</student></root>

XHML

文檔聲明比較複雜,需要特殊強調當前的頁面需要嚴謹一些

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Title</title>
</head>
<body>
</body>
</html>

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>

HTML5

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> <html lang='en'><!--聲明頁面的語言模式:english,如果頁面中出現了英文單詞,浏覽器會自主發起是否翻譯的功能-->
<head>
<!--指定當前頁面的編碼格式是國際統一編碼格式:UTF-8 GB2312中國編碼...-->
<meta charset='UTF-8'>
</head>
<body>
</body>
</html>

HTML5提供的新語法規範

  • 對原有語義化標簽的升級
    語義化標簽(標簽語義化):每一個HTML標簽都有自己特殊的含義,我們在搭建頁面結構的時候,應該讓合理的標簽做合適的事情

  • HTML5中新增加一些語義化標簽:
    article:文章區域 header:頭部區域 footer:尾部區域 main:主體內容區域 section:普通區域,用來做區域劃分 figure:配圖區域 figcaption:配圖說明區域 aside:與主體內容無關的區域(一般用來打廣告) nav:導航區域 … =>這些語義化標簽在兼容它的浏覽器中都是塊級標簽。

  • H5中新增加一些標記標
    mark:用來標記需要高量顯示的文本 time:用來標記日期文本 …

  • H5中對于原有的標簽還有一些調整
    strong:之前是加粗,現在是重點朗讀(效果還是加粗,但是語義不一樣了) small:之前是變小,現在是附屬細則(效果還是變小) hr:之前是一條直線,現在是分割線,用來分隔兩個區域 …

  • H5中刪除一些不經常使用的標簽:這裏的刪除不是不讓用(用了也不報錯),只是按照最新標准沒有語義了
    font:之前是標記字體修改某些文字樣式的,現在呢我們不建議使用了 center:之前是使某些內容居中,但是目前我們都是基于CSS樣式控制居中,不在使用這個標簽 …
    目前不管是在PC端開發還是在移動端開發,我們更應該使用H5規範的語義化標簽搭建頁面的結構

問題
IE6~8中不能識別這些新增加的語義化標簽,我們無法爲其設置具體的樣式

解決
在當前頁面的head中(CSS後),我們導入一個JS插件:html5.min.js,它就是用來把頁面中所有用到的不兼容的H5語義化標簽進行兼容處理

1、把頁面中所有不兼容的標簽進行替換
2、把CSS中使用標簽選擇器設置的樣式(標簽是H5標簽)也替換成其它方式

標准浏覽器中不需要引用,只有IE6~8中才需要(使用條件注釋來區分浏覽器)

<head>
<!--[if lt IE 9]>
<script src="js/html5.min.js"></script>
<![endif]-->
</head> <!--條件注釋中的代碼要嚴格區分大小寫以及空格等細節問題-->

H5中對于表單元素的升級

  • 傳統表單元素
    form
    input:text、password(暗紋輸入)、button、submit、reset、file、hidden、radio、checkbox…
    button
    select
    label
    textarea

  • H5對于表單的升級
    1、給input設置了很多新的類型
    search
    email
    tel
    number
    range
    color
    date
    time

    [優勢]
    1)強大了
    2)使用合適的類型,在移動的開發的時候,用戶輸入,可以調取出最符合輸入內容格式的虛擬鍵盤,方便用戶操作
    3)部分類型提供了表單驗證(內置驗證機制:和我們自己寫的正則驗證不太一樣,但是也可以湊合 [ CSS中可以驗證、JS中也可以驗證 ])
    2、給input新增一個屬性:placeholder,給表單框做默認的信息提示
    3、二級下拉框(select一級下拉框)

<input type="text" id="department" list="departmentList">
<datalist id="departmentList">
<option value="市場部">市場部</option>
option value="技術部">技術部</option>
<option value="總裁辦">總裁辦</option>
</datalist>

H5針對于表單元素升級的部分,在IE低版本(有的IE9和10都不兼容)中不兼容,而且沒辦法處理兼容,所以我們一般移動端使用這些新特性,PC端還是延續傳統的操作辦法;
H5中的表單驗證(內置規則不是特別好),所以真實項目中的表單驗證依然延續傳統的正則驗證完成

placeholder兼容處理

整個IE浏覽器對于placeholder兼容性都不好
1、IE10+雖然兼容,但是文本框獲取焦點後,提示信息就消失了
2、IE9-不兼容這個屬性

~function () {
//=>獲取頁面中所有具備DATA-PLACE自定義屬性的INPUT
var inputList = document.getElementsByTagName('input'),
inputAry = [];
for (var i = 0; i < inputList.length; i++) {
var item = inputList[i];
item.getAttribute('data-place') !== null ? inputAry.push(item) : null;
}
//=>非IE浏覽器中,我們只需要把自定義屬性值存放在PLACE-HOLDER屬性中即可,浏覽器可以自己根據這個屬性做好提示的工作
if (!/(MSIE|Trident)/i.test(navigator.userAgent)) {
for (var k = 0; k < inputAry.length; k++) {
var itemInp = inputAry[k];
itemInp.placeholder = itemInp.getAttribute('data-place');
}
return;
}
//=>IE浏覽器(包含IE EDGE):不用內置的PLACE-HOLDER,而是采用我們自己設定的方式來處理
for (var z = 0; z < inputAry.length; z++) {
var inputItem = inputAry[z],
inputText = inputItem.getAttribute('data-place');
inputItem.placeholder = '';
/*
* 1、新創建一個SPAN,把其存放在INPUT它爹末尾(作爲INPUT的弟弟)
* 2、給SPAN設置一定的樣式
* 相對于其父級元素定位
* 和INPUT的基礎樣式類似
* 3、INPUT或者SPAN都要綁定相關的事件行爲:完成和內置PLACE-HOLDER相同的效果
*/
var spanTip = document.createElement('span');
spanTip.innerHTML = inputText;
spanTip.className = 'placeLike';
spanTip.style.cursor = 'text';
inputItem.parentNode.appendChild(spanTip);
//=>把每一個INPUT和SPAN的索引進行存儲(並且把SPAN-TIP作爲屬性值存儲在INPUT的自定義屬性上,方便後期獲取使用)
inputItem.index = spanTip.index = z;
inputItem.spanTip = spanTip;
//=>SPAN的點擊行爲:點擊SPAN讓INPUT獲取對應光標
spanTip.onclick = function () {
inputAry[this.index].focus();
};
//=>控制INPUT的輸入行爲(建議使用DOM2事件綁定:防止後期再其它的地方也需要通過KEYUP或者KEYDOWN行爲處理其它的事情)
inputItem.onkeydown = inputItem.onkeyup = function (e) {
var value = this.value,
spanTip = this.spanTip;
spanTip.style.display = value.length > 0 ? 'none' : 'block';
};
}
}();
頁面結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>珠峰培訓</title>
<link rel="stylesheet" href="css/reset.min.css">
<style>
.inputBox {
position: relative;
margin: 20px;
width: 200px;
}
 
.inputBox input, .inputBox .placeLike {
display: block;
padding: 0 10px;
width: 178px;
height: 30px;
line-height: 30px;
border: 1px solid green;
}
 
.inputBox .placeLike {
position: absolute;
top: 0;
left: 0;
z-index: 100;
color: #AAA;
}
</style>
</head>
<body>
<div class="inputBox">
<input type="text" data-place="請輸入用戶名">
</div>
<div class="inputBox">
<input type="password" data-place="請輸入密碼">
</div>
<div class="inputBox">
<input type="email" data-place="請輸入郵箱">
</div>
<script src="js/placeholder.js"></script>
</body>
</html>

H5中其它新增內容

  • 增加了新的媒體解決方案
    音頻:audio
    視頻:video
    傳統的音視頻播放是基于flash來完成的,需要浏覽器中安裝 adobe flash player 插件
    現在只需要基于audio或者video播放即可,但是對于音視頻的格式有限制,對于浏覽器也有限制
    移動端對于flash的支持不好,但是基本上都支持audio和video
    PC端的IE浏覽器(低版本)不支持audio和video,但是支持flash

  • H5中增加了canvas(繪圖)
    它是一個畫布,允許我們在JS中通過代碼繪制圖形以及實現一些好玩的動畫
    百度統計圖插件:Echarts就是基于canvas開發的

  • 提供了很多強大的JS API
    API:Application Programming Interface 應用程序接口(凡是提供一個共別人調取使用的都可以稱之爲接口,例如:使用AJAX從服務器端獲取數據,需要一個URL地址,此地址就是一個API,浏覽器提供給我們很多常用的方法,每一個方法都可以叫做API)

本地存儲

webStorage:
localStorage:本地信息存儲
sessionStorage:本地會話存儲
在沒有H5本地存儲之前,我們都使用cookie做的本地存儲

獲取本機地理位置

通過H5可以獲取當前用戶地理位置(精度、緯度、精准度…),再結合第三方地圖(高德地圖、百度地圖、騰訊地圖…)API接口,實現一些生活服務的推薦等

提供了新的通信方式:websocket

想要實現實時通訊類的産品,基本上現在都是基于socket.io這個框架來完成的

提供操作手機硬件功能的API

調取手機的重力感應器,實現搖一搖,或者實現一些小遊戲
調取手機的攝像頭或者通訊錄

不是所有的手機浏覽器都支持這些功能,即時支持這些功能的浏覽器,在實現效果上也是不理想的(不穩定、卡頓等)

H5離線緩存:manifest

第一次連網請求完成頁面,把信息緩存到本地,下一次即時斷網的情況下,也可以看到上一次的信息

上一篇: 移動端響應式布局開發常用知識

下一篇: HTML的前世今生