從零學前端第四講：H5究竟是什麼？一節課帶你從零開始深刻理解Html5

時間 2019-12-07

標籤前端第四 h5 究竟什麼一節課開始深刻理解 html5 html 欄目 HTML5 简体版

原文原文鏈接

Html5最新規範css

概述
新增元素
表單
音頻和視頻

直播錄屏版html

傳送門：https://v.qq.com/x/page/z0726...html5

1.概述web

什麼是html5？瀏覽器

提到html5你們可能首先會想到的是移動端頁面，但這只是html5的運用範圍之⼀。app

其實html5是最新的html規範，也是一系列用來製做現代web內容的相關技術的總稱。ide

固然其中最重要的就是html5，css和js了。函數

html發展到現在，只經歷了了短短的十多年。它是在1993年首次發佈，做爲一種網上信息瀏覽傳輸的規範。oop

以後的幾年又迅速發佈了2.0版，再到3.2版和4.0版。直到1999年的4.01版成爲一個標誌性的版本。post

在這高速發展的⼏年⾥，W3C組織逐漸掌握了html規範的控制權。

當時在快速發佈了這幾個版本以後，業界廣泛認爲html已經窮途末路了，甚至想要開發其餘新的語言來替代它。

由於這個時候的html若是想要支持更新的web應用，克服現有的缺點，那就迫切須要添加新的功能，指定新的規範。

2006年W3C從新接入其中，於2008年發佈了html5的草案，提出了解決問題的辦法和標準。

因而各大瀏覽器廠商按耐不住開始升級瀏覽器以支持html5，html從新煥發出無窮無盡的生命力並在互聯網的舞臺上大放光彩。

能夠說，html5的出現和設計就是爲了解決問題，它不是一個顛覆性的概念。

相反，它的核心理念是保持一切新特性平滑過渡，以保證兼容性因此能夠放心使用。

同時它的更新很是具備實用性，它在全部可能的地方都努力進行了分離：

讓表現和內容分離，使得訪問下更佳，下降了不必要的複雜度

讓代碼更具備可讀性，同時讓文件不會過大致使頁面加載變慢

還化繁爲簡，有了新的簡化的doctype，新的簡化的字符集聲明，簡單而強大的html5API

還以瀏覽器原生功能替代了部分js代碼，開發體驗使用體驗大大加強。

2.新增元素

說到html的元素的使用其實很是簡單，但知道如何使用這些元素和理解它們的含義，是同等重要的。

在html5中有一個很大變化是講語義與元素所表現的結果分開。

之因此要這樣作，是由於這樣更合適：

html元素負責文檔的內容結構

內容的表現形式則有css來控制

相互之間互不不影響，讓代碼清晰易讀，便於團隊維護開發。

搜索引擎也能夠根據標籤的語義肯定上下文等問題。

所以寫頁面的時候少用那種有呈現樣式做用的元素，好比strong，small之類。

盡量作到之內容類型爲依據，使用最具體的元素，不不要誤用元素。

2.1 新的doctype和新的字符集寫法

瀏覽器會根據doctype來識別應該⽤什麼模式來顯示頁⾯，用什麼規則來驗證⻚面。

在過去的版本中，須要加入⼀⻓串規則l地址，好比：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""" style="font-family: "Microsoft YaHei", 微軟雅黑; font-size: 15px; caret-color: red;" _href="http://www.w3.org/TR/html4/loose.dtd">">http://www.w3.org/TR/html4/lo...d">

而在html5中已經沒有這個必要了：

<!DOCTYPE html>

html的字符集能夠告訴瀏覽器以什麼內碼什麼語⾔來顯示⽹頁。

在過去的版本中設置這項會⽐比較複雜很難記憶：

⽽在html5中就要簡單許多

2.2 新增語義元素——結構類

article 表示一篇任何形式的文章，能夠獨立的內容區塊

aside 表示獨立於周圍內容的一個完整的內容塊

figure 表示一副插畫

figcaption 放在figure中標註插畫標題的，目的是反應圖片與標題之間是有關聯的

header 表示加強的標題，能夠包含標題或其餘內容

footer 表示頁面底部的頁腳

hgroup 表示加強型的標題，目的是把標題和副標題聯繫到一塊兒

nav 表示頁面中重要的一組連接

section 表示文檔中的一個區塊，或一組文檔。這是一個通用型的容器

基本規則就是必須開始於一個標題，而後應該在其餘語義元素不適用的狀況下再選用section

2.3 新增語義元素——文本類

time 標註日期和時間

output 標註js的返回值

mark 標註突顯文本

3 Form表單

表單，是指從網站訪問者手里收集信息的地方

好比能夠填寫文本的文本框，能夠選中或者取消的多選框，只能多選一的單選框，下拉列表框等等。

表單的用途很是廣，能夠說只要上網就會遇到它。

html中的form表單和html語言幾乎是同時出現的，多年來都沒有絲毫改進。

一直到html5的出現，它在原來的表單基礎上進行修訂，加強了了許多功能，讓交互變得更加容易起來。

3.1 新增的表單元素

html中的input是個神奇的存在，只須要修改它的type類型，就能實現許多不同類型的輸入控件。

若是瀏覽器器不認識這些類型，就會把它們當作一個普通的text類型的文本框來處理，所以下面這些控件都能在不一樣瀏覽器放心使用。

在更現代的瀏覽器中使用這些類型的控件會顯得更加方便：

能夠提供便於編輯的輔助；

限制可能出現的錯誤；

以及執⾏行行驗證。

tel 電話號碼控件，在移動瀏覽器中會呼出特別的鍵盤：只包含數字沒有字母

email 電子郵件控件，驗證規則是這個字符串中必須含有@符號和一個點號，並且二者之間至少要間隔一個字符，點號後面至少要有兩個字符，這差不多就是郵件的驗證規則

url 網址類型控件

search 搜索框控件，用於執行某種搜索，它有其特定語義，便於瀏覽器或輔助上網軟件知道這里是幹嗎用的

range 滑動條控件

color 顏色控件，可讓用戶從下拉式色盤中選取一個顏色

number 常規數值類型控件，瀏覽器自動忽略⾮數字類型字符。而且能夠配合min和max屬性使用

date 日期控件，提供一個方便的下拉式日曆，避免輸入者對日期格式的困惑，也能避免輸入不存在的日期。格式爲YYYY-MM-DD

time 時間控件，格式爲HH:mm:ss.ss

3.2 新增的表單特性和函數

placeholder 佔位

autocomplete 規定表單是否應該啓用自動完成填充功能

autofocus 爲表單挑選正確的起點焦點

list+datalist 顯示輸入建議

min+max 最小值和最大值，在多種表示數值的控件中可用

step 規定數字的間隔，能夠與min和max配合使用，建立合法值範圍

required 規定是否必填

4 音頻和視頻

最開始的網頁中若是須要插入一段多媒體的音頻和視頻，一般都是使用<embed>元素硬塞

而後瀏覽器用系統的視頻播放器建立一個視頻窗口放在頁面中。

這樣作的問題在於一切都是聽天由命，沒法控制播放器，也不能提早緩衝，更不能知道用戶到底有過哪些操做。

而用瀏覽器插件好比flash，解決了瀏覽器支持的問題。

但要把它放到網頁中，必須用<object><embed>元素編寫一大堆亂七⼋八糟的標記，必須適當地編碼文件。

更糟糕的是蘋果的移動設備上根本就不支持flash。

所以在html5中直接就對這些進行了支持，支持的思路很是簡單，就是使用和img這種元素差不多的方式爲網頁添加視頻音頻。

因此html5就增長了audio和video這倆元素來添加音頻視頻。

4.1 音頻

基本寫法很簡單：

其中src是多媒體的連接，controls屬性是告訴瀏覽器要包含基本的播放控件。

除此以外還有一些經常使用屬性：

preload 告訴瀏覽器如何下載⾳音頻。

有三種值，auto讓瀏覽器後臺下載整個文件

metadata告訴瀏覽器先獲取音頻文件開頭的數據塊肯定基本信息

none表示不必預下載

autoplay 告訴瀏覽器在加載完成一篇以後當即播放

loop 表示循環播放

4.2 視頻

視頻video和audio幾乎是同樣的用法，只是比起audio來要多出3個屬性：

height，width和poster。

height和width不必多說都能明白，這是用於設置視頻可視窗口的高和寬的。

而poster用於設置替換視頻的圖片，使用這個圖片的狀況通常有三種：

一、視頻第一幀還未加載完畢的狀況；

二、preload屬性設置爲none時；

三、沒有找到指定視頻文件時。

4.3 媒體格式支持

因爲html5標準並無要求瀏覽器支持哪一種多媒體格式，也不太可能規定死這個格式

所以各家瀏覽器開發商能夠自由選擇想要支持的格式，而後咱們就發現不同瀏覽器支持的格式根本就不同樣了。。。

如今經常使用的音頻視頻格式能夠見下表：

MP3 世界上最流行的音頻格式 .mp3 audio/mp3

Ogg Vorbis 免費開放的標準，可以提供高質量的壓縮音頻，能夠和mp3媲美 .ogg audio/ogg

WAV 未加工數字音頻的初始格式，體積奇大，通常不不適合web .wav audio/wav

H.264 視頻壓縮的行業標準，特別適合高清晰度視頻 .mp4 video/mp4

Ogg Theora 免費開放的視頻標準，品質和性能不及H.264但能夠滿⾜足大多數人的須要.ogv video/ogg

WebM 最新的視頻格式，谷歌買下VP8以後，將其改成免費標準 .webm video/webm

4.4 如何支持不同瀏覽器

因爲不同瀏覽器器支持的多媒體格式不同，所以通常說來有兩種方案以支持每一款瀏覽器器：

第一種是首選flash，以html5爲後備

第二種是首選html5，以flash爲後備

按如今的趨勢來說，flash江河⽇日下，html5纔是將來的強者

所以通常說來可使用第二種方案。

利用了一個原理，就是有史以來的瀏覽器都會自動忽略掉它不認識的元素，所以能夠這麼作：

首先加入html5方式的音頻標籤，這里source標籤的做用是在擁有多份源文件的時候，瀏覽器自行選擇它所支持的文件

</audio>

而後在里面加入flash

若是瀏覽器沒法識別這些元素，那麼會自動讀到flash部分。

這樣就能在任意瀏覽器中完美加載多媒體文件了。

flash">

</object>

</audio>

以上就是上節課的內容解析啦，想進一步深刻的同窗歡迎加入咱們的IT交流羣437496285共同討論學習~

下節預告

靜態頁面很差看？

CSS動畫，讓畫面動起來！

相關標籤/搜索

每日一句

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