【前端】之HTML5基礎知識

時間 2019-11-13

標籤前端 html5 html 基礎知識欄目 HTML5 简体版

原文原文鏈接

HTML5 文件格式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!-- 個人HTML5代碼 -->
    </body>
</html>

HTML5 對瀏覽器的支持

HTML5支持Chrome、Firefox和IE9及以上的瀏覽器。

若是須要考慮IE8及如下的瀏覽器，能夠加入html5shiv.js的引用。方法以下：javascript

<!--[if lt IE 9]>
<script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
<![endif]-->

HTML5 語義性標籤

<header>：頭部
<nav>：導航欄
<section>：內容區域
<aside>：側邊欄
<article>：文章（詳細內容區域）
<footer>：底部

注：以上全部標籤的做用和<div>標籤的做用徹底相同，但加強了語義性（可讀性）。

HTML5 <input>標籤

type="email"：郵箱（123456@qq.com）
type="url"：網址（http://www.baidu.com）
type="number"：數字，能夠經過點擊加減
type="tel"：電話號碼
type="search"：搜索框，框的最後有一個叉，能夠清空內容
type="range"：範圍，能夠拖動的條
type="color"：顏色選擇器
type="date"：日期選擇器

注：HTML5中的input標籤，若是輸入不合法，會自動彈出提示信息。
input標籤中新增的屬性：
- placeholder屬性：input標籤中的提示信息，至關於Android中的hint屬性
- autofocus屬性：頁面加載以後讓表單自動獲取焦點，不須要寫值
- autocomplete屬性：值on/off，on時能夠自動顯示之前輸入的數據
- required屬性：指示是否必填，不須要寫值
- multiple屬性：用於文件上傳表單，能夠選擇多個文件，不須要寫值
- novalidate屬性：關閉H5表單默認的驗證功能，只能加在
  標籤上，不須要寫值
- pattern屬性：自定義正則驗證

表單驗證事件：

oninput：當用戶輸入的時候觸發的事件，示例代碼以下：

document.getElementById("username").oninput = function() {
    // 每當用戶在表單中輸入一個字符，就會觸發一次這個事件
}

oninvalid：當驗證不經過時觸發的事件，示例代碼以下：

document.getElementById("email").oninvalid = function() {
    this.setCustomValidity("您輸入的郵箱不正確！");
}

HTML5 其餘標籤簡介

<datalist>標籤：能夠輸入數據的下拉菜單，須要結合input>text使用，代碼以下：html

<!-- text表單右側有一個下拉箭頭，能夠直接下拉；輸入時能夠模糊匹配 -->
<input type="text" list="cars" />
<datalist id="cars">
  <option>寶馬</option>
  <option>寶駿</option>
  <option>寶寶</option>
</datalist>

<fieldset>標籤：表單框，盛放多個表單的容器，代碼以下：html5

<form action="">
  <fieldset>
      <legend>用戶驗證表單</legend> <!-- 標題 -->
      <!-- 這裏寫其餘標籤代碼 -->
  </fieldset>
</form>

<label>標籤：點擊該標籤中的文本，能夠觸發該標籤中的表單的焦點，代碼以下：java
```
<label>
  姓名：<input type="text"/>
</label>
```
<keygen>標籤：加密標籤，保證數據傳輸安全，能夠選擇不一樣強度的加密，代碼以下：jquery
```

加密：<keygen/>
```

<meter>標籤：度量器，相似溫度計，根據在不一樣的值區間顯示不一樣的顏色，代碼以下：git

<!-- 當在low和high之間時顯示綠色，不然顯示黃色 -->
<meter max="100" min="0" low="30" high="70" value="50"></meter>

<progress>標籤：進度條，代碼以下：web

<progress max="100" min="0" value="40"></progress>

<audio>標籤：音頻播放標籤，H5播放音頻不依賴於任何插件，代碼以下：數組

<!-- controls：顯示控制條；autoplay：自動播放；loop：自動循環播放 -->
<audio controls autoplay loop>
  <source src="music/fireworks.ogg" />
  <source src="music/fireworks.mp3" />
  <source src="music/fireworks.wav" />
  抱歉，當前瀏覽器不支持播放此音頻！
</audio>
<!-- 注：audio標籤目前只支持.ogg、.mp三、.wav三種音頻格式 -->
<!-- 不一樣瀏覽器支持的音頻格式不一樣，所以須要在服務端保存三種格式的音頻文件 -->

<video>標籤：視頻播放標籤，H5播放音頻不依賴與任何插件，代碼以下：瀏覽器

<video controls autoplay loop>
  <source src="music/movie.ogg" />
  <source src="music/movie.mp4" />
  <source src="music/movie.webm" />
  抱歉，當前瀏覽器不支持播放此視頻！
</video>
<!-- 注：video標籤目前只支持.ogg、.mp四、.webm三種音頻格式 -->

<figure>標籤：多媒體標籤（圖片、音頻、視頻等），代碼以下：緩存

<figure>
  <figcaption>多媒體標題</figcaption>
  <!-- 這裏能夠寫多媒體代碼或其餘代碼 -->
</figure>

HTML5 DOM拓展

獲取文檔元素：H5新增了對元素的統一獲取方法，代碼以下：

var box01 = document.querySelector(".box1"); // 只會選擇符合條件的第一個元素
var boxes = document.querySelectorAll("div"); // 獲取全部符合條件的元素的數組

類名操做：H5新增了對元素類的添加、刪除、切換、查找操做，代碼以下：

document.querySelector("box").classList.add("box1"); // 添加
document.querySelector("box").classList.remove("box1"); // 刪除
var flag = document.querySelector("box").classList.contains("box1"); // 查詢
document.querySelector("box").classList.toggle("box1"); // 切換

自定義屬性：H5支持自定義屬性，但屬性名必須以「data-」開頭，代碼以下：

<div id="mydiv" data-name="myname" data-my-content="mycontent"></div>
<script>
  console.log(document.querySelector("#mydiv").dataset["name"]);
  console.log(document.querySelector("#mydiv").dataset["myContent"]);
</script>

HTML5 元素拖拽

拖拽元素：要想讓一個元素能夠拖拽，須要設置元素的draggable屬性爲true
目標元素：頁面中的全部元素都一個做爲拖拽的目標元素
拖拽事件：
- ondragstart：應用於拖拽元素，當拖拽開始時被回調
- ondrag：應用於拖拽元素，整個拖拽過程都會不斷回調這個方法
- ondragleave：應用與拖拽元素，當鼠標離開拖拽元素時被回調
- ondragend：應用於拖拽元素，當拖拽結束時被回調
- ondragenter：應用於目標元素，當拖拽元素進入目標元素區域時被回調
- ondragover：應用於目標元素，當拖拽元素停留在目標元素上時會不斷回調這個方法
- ondrop：應用於目標元素，當在目標元素上鬆開鼠標時被回調
- ondragleave：應用於目標元素，當鼠標離開目標元素區域時被回調
當拖拽元素懸浮在目標元素上方時，能夠設置鼠標樣式，代碼以下：
```
target.ondragover = function(event) {
    event.preventDefault();
};
```

HTML5 全屏

HTML5容許用戶自定義網頁上的任意元素全屏顯示，代碼以下：

// 請求全屏代碼：
if (elem.requestFullscreen) { // 能夠默認請求全屏，screen小寫
    elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { // 能夠火狐請求全屏，Screen大寫
    elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {  // 能夠webkit請求全屏，Screen大寫
    elem.webkitRequestFullScreen();
}
// 取消全屏代碼：
if (elem.cancelFullscreen) {
    elem.cancelFullscreen();
} else if (elem.mozCancelFullScreen) {
    elem.mozCancelFullScreen();
} else if (elem.webkitCancelFullScreen) {
    elem.webkitCancelFullScreen();
}

HTML5 WEB存儲

傳統的WEB存儲方式：使用document.cookie存儲。
- 缺陷一：存儲大小隻有4K左右，過小
- 缺陷二：須要使用截取字符串的方式解析，麻煩
HTML5提出的WEB存儲方案：Storage存儲，這種方式存儲，可能存儲在瀏覽器內存裏面（window.sessionStorage），也有可能存儲在計算機硬盤裏面（window.localStorage）。使用這種方式存儲數據的特性有：
- 設置、讀取方便
- 容量較大：sessionStorage約5M，localStorage約20M
- 只能存儲字符串，若是是對象，能夠先轉化成字符串（JSON.stringify），而後存儲
瀏覽器存儲：window.sessionStorage
- 生命週期到管理瀏覽器窗口爲止
- 在同一個窗口下，數據能夠共享
本地存儲：window.localStorage
- 永久存儲，除非手動刪除
- 能夠多窗口共享

使用方法（方法相同，這裏以sessionStorage爲例）：

window.sessionStorage.setItem("username", "zhangsan"); // 存儲數據
var value = window.sessionStorage.getItem("username"); // 獲取數據
window.sessionStorage.setItem("username", "lisi"); // 修改數據
window.sessionStorage.removeItem("username"); // 刪除數據
window.sessionStorage.clear(); // 清空數據

查看存儲位置方法：瀏覽器->F12打開開發者工具->Resource->local/session storage

HTML5 檢測網絡狀態

// 當用戶網絡鏈接後回調的事件：
window.addEventListener("online", function() {
    alert("網絡已鏈接！");
});
// 當用戶斷開網絡鏈接後回調的事件：
window.addEventListener("offline", function() {
    alert("網絡已斷開！");
});

HTML5 應用緩存

HTML5支持應用緩存，須要建立一個cache manifest（緩存清單）文件
HTML5應用緩存的優點：
- 可配置須要緩存的資源
- 網絡無鏈接時，應用仍可用
- 本地讀取緩存資源，提高訪問速度，加強用戶體驗
- 減小請求，緩解服務器負擔

操做流程：

建立緩存清單文件：建立一個文件，以.appcache爲後綴名，如my.appcache
在HTML頁面中添加以下代碼：
```
<html manifest="my.appcache">
```

appcache文件結構以下所示：

CACHE MANIFEST
# .appcache文件以「#」開啓註釋
# 能夠緩存網絡文件，也能夠緩存本地文件，本地文件用相對路徑
CACHE:  # 指定須要緩存的靜態資源：
    http://...........jpg
NETWORK:  # 指定要在線能訪問的資源：
    http://...........jpg
FALLBACK:  # 當頁面沒法訪問時，跳轉到的頁面：
    404.html

HTML5 地理定位

HTML5新增了獲取用戶地理信息的API

簡單代碼以下：

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
} else {
    alert("你的瀏覽器不支持地理定位！");
}
function onSuccess (position) {
    var latitude = position.coords.latitude; // 獲取維度
    var langitude = position.coords.longitude; // 獲取經度
}
function onError (error) {
    alert(error);
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。