天天看點
傳回

HTML5新增語義标簽、多媒體元素标記

HTML5，建構Web内容的一種語言描述方式,是HTML、CSS、Javascript的組合,在HTML4的基礎上重點解決了浏覽器的相容性、頁面文檔結構不夠明确、新增API解決Web應用程式功能受限

html5标準網頁聲明:

元素标記 

thead

全局屬性

新增全局屬性，即所有元素都可以使用的屬性。

contentEditable布爾值，元素内容是否可以修改

designMode定義整個頁面是否可修改off/on

hidden

tabindex當tab鍵用于導航時候，獲得焦點的順序

contexmenu屬性值是一個menu元素的id，右鍵元素時候出現

draggable設定元素是否可以拖動

新的語義化标簽

有利于SEO、丢失樣式時候能夠讓頁面呈現出清晰的結構、

<header>标簽：包含引導和導航等，通常包含h1~h6、搜尋框、logo等。
    <footer>标簽：一般配合address标簽(顯示位址)，包含作者資訊、相關連結等。
    <nav>标簽：一般包含多個a标簽，建構導航元件。
    <aside>标簽：主要裝載廣告、側邊欄。
    <article>标簽：包含文章，一般内嵌header、footer、h1、p标簽。
    <section>标簽：文章内容的獨立區塊，如章節、頭部、頂部可以用在以上任一一個标簽中劃分元件。 
    <figure>用于對元素進行組合，搭配子元素figcaption來添加标題
     <time>時間或日期
    <address>定義文檔或作者的聯系方式
           
div标簽的語義化轉化，有利于代碼可讀性和SEO。
           
<header>
	<h1>網頁标題</h1>
	<nav>
		<ul>
			<li><a href="#">首頁</a></li>
			<li><a href="#">新聞</a></li>
			<li><a href="#">圖檔</a></li>
		</ul>
	</nav>
</header>
<article>
	<section>
		<h1>文章主标題</h1>	
		<h2>文章副标題</h2>
	</section>
	<p>文章正文</p>
	<section>
		<article>
			<h1>評論标題</h1>
			<p>評論正文</p>
		</article>
	</section>
</article>
<footer>
	<address>聯系方式</address>
</footer>

progress元素定義運作中的任務進度

通過控制value值，在JavaScript中實作視圖與進度的連接配接

<progress id="myProgress" value="75" max="100">
</progress>

裝置相容

HTML5提供了豐富的API，讓開發者有了更多的選擇。

拖放API

手機都内置了方向傳感器和運動傳感器，對應有通路傳感器的API，DeviceMotionEvent

多媒體

容器container、編/解碼器codec

音視訊檔案實質上就是容器container，編/解碼器codec就是對特定的音視訊流進行編碼解碼的算法。隻有經過編解碼的媒體檔案才能正常播放

用于媒介回放的 video、canvas和 audio 标簽，打破了對于Flash 的依賴,無需插件，且媒體元素向web頁面提供了可腳本化控制的API

WebRTC

MediaDevices.getUserMedia() 會提示使用者給予使用媒體輸入的許可，媒體輸入會産生一個MediaStream，裡面包含了請求的媒體類型的軌道。此流可以包含一個視訊軌道（來自硬體或者虛拟視訊源，比如相機、視訊采集裝置和螢幕共享服務等等）、一個音頻軌道（同樣來自硬體或虛拟音頻源，比如麥克風、A/D轉換器等等），也可能是其它軌道類型。

它傳回一個 Promise 對象，成功後會resolve回調一個 MediaStream 對象。若使用者拒絕了使用權限，或者需要的媒體源不可用，promise會reject回調一個 PermissionDeniedError 或者 NotFoundError 。

代碼實作實時在頁面播放攝像頭音頻捕獲到的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * { margin: 0; padding: 0;}
    #box {
      width: 500px;
      height: 500px;
      border: 2px solid deeppink;
    }
  </style>
</head>

<body>
    <video src="/" controls="controls">
        your browser does not support the video tag
    </video>
        
  <script>
 // 想要擷取一個最接近 1280x720 的相機分辨率
var constraints = { audio: true, video: { width: 1280, height: 720 } };

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // 總是在最後檢查錯誤
  </script>
</body>
</html>

iframe

frame破壞網頁可用性和可通路性

嵌入視訊或者谷歌maps地圖。因為iframe常被用于嵌入第三方内容（惡意操作隐患），是以面臨安全問題。

新增sandbox、seamless、srcdoc用于保證頁面安全性，防止某些不信任操作在頁面上運作

缺點：

會阻塞首頁面的Onload事件

即使内容為空，加載它也需要時間

sandbox

HTML5新增語義标簽、多媒體元素标記
  1. 禁止通路父頁面的DOM
  2. 禁止腳本代碼的執行 allow-scripts
  3. 禁止ifame内的表單送出，禁止該頁面與伺服器端 allow-forms
  4. 禁止ifame内的導航到iframe和目前源之外的超連結 allow-top-navigation
  5. 禁止對本地儲存、本地SQL、Cookie的讀取
  6. 将iframe視作一個單獨的源 allow-same-origin

seamless

使iframe元素中的頁面看起來像包含的文檔的一部分

srcdoc

<iframe srcdoc="<p>Hello world!</p>" src="if_not_srcdoc_show.htm">
  <p>您的浏覽器不支援  iframe 标簽。</p>
</iframe>

Blob

Blob 對象表示一個不可變、原始資料的類檔案對象。其資料可以按文本或二進制的格式進行讀取，也可以轉換成 ReadableStream 來用于資料操作。

第一·個參數為數組，可以存放任意數量的String對象、Blob對象、ArrayBuffer對象、ArrayBufferView對象類型的對象，第二個參數用于建立Blob對象的type屬性值，MIME類型。

要從其他非blob對象和資料構造一個 Blob，請使用 Blob() 構造函數。要建立一個 blob 資料的子集 blob，請使用 slice() 方法。要擷取使用者檔案系統上的檔案對應的 Blob 對象。

Blob.slice([start[, end[, contentType]]])
傳回一個新的 Blob 對象，包含了源 Blob 對象中指定範圍内的資料。
Blob.stream()
傳回一個能讀取blob内容的 ReadableStream。
Blob.text()
傳回一個promise且包含blob所有内容的UTF-8格式的 USVString。
Blob.arrayBuffer()
傳回一個promise且包含blob所有内容的二進制格式的 ArrayBuffer

File 接口基于Blob，繼承了 blob 的功能并将其擴充使其支援使用者系統上的檔案。

多用途嵌入式元素 object、embed

embed用于插入各種媒體，元素格式可以是AU、AIFF、MP3、WAV

定位裝置 navigator.geolocation 

let btn = document.getElementById('btn');
    let box = document.getElementById('box');

    //點選按鈕擷取地理位置資訊
    btn.onclick = function () {
      //getCurrentPosition與定時器setInterval類似多次請求，因為位置需要不間斷的擷取
      //直接navigator.geolocation表示單次擷取位置
      navigator.geolocation.getCurrentPosition(function (position) {
        box.innerHTML += "經度" + position.coords.longitude;
        box.innerHTML += "緯度" + position.coords.latitude;
        box.innerHTML += "準确度" + position.coords.accuracy;
        box.innerHTML += "海拔" + position.coords.altitude;
        box.innerHTML += "海拔準确度" + position.coords.altitudeAcuracy;
        box.innerHTML += "行進方向" + position.coords.heading;
        box.innerHTML += "地面速度" + position.coords.speed;
        box.innerHTML += "請求的時間" + new Date(position.timestamp);
      }, function (err) {
        console.log(err);
        box.innerHTML="error"+err;
// code：傳回擷取位置的狀态
//          0  :  不包括其他錯誤編号中的錯誤
// ​		     1  :  使用者拒絕浏覽器擷取位置資訊
// ​		     2  :  嘗試擷取使用者資訊，但失敗了
// ​		     3  :   設定了timeout值，擷取位置逾時了
      }, {
          enableHighAcuracy: false, //位置是否精确擷取
          timeout: 5000,            //擷取位置允許的最長時間
          maximumAge: 1000          //多久更新擷取一次位置
        })
    }
JavaScript基礎 html5 html javascript
上一篇: 黑馬程式員_正規表達式總結
下一篇: 水晶頭詳解

繼續閱讀