從零開始學 Web 之 HTML5（一）HTML5概述，語義化標籤

阿新 • • 發佈：2019-01-15

一、HTML5簡介

1、什麼是html5

html5 不是一門新的語言，而是我們之前學習的 html 的第五次重大修改版本。

2、html的發展歷史

超文字標記語言（第一版，不叫 HTML 1.0）——在1993年6月作為網際網路工程工作小組（IETF）工作草案發布（並非標準）；
HTML 2.0——1995年11月作為RFC 1866釋出，在RFC 2854於2000年6月釋出之後被宣佈已經過時
HTML 3.2——1997年1月14日，W3C推薦標準
HTML 4.0——1997年12月18日，W3C推薦標準
HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準
HTML 5——2014年10月28日，W3C推薦標準

3、HTML5的設計目的

HTML5的設計目的是為了在移動裝置上支援多媒體。之前網頁如果想嵌入視訊音訊，需要用到 flash ，但是蘋果裝置是不支援 flash 的，所以為了改變這一現狀，html5應運而生。

新的語法特徵被引進以支援視訊音訊，如video、audio和 canvas 標記。

HTML5還引進了新的功能，可以真正改變使用者與文件的互動方式。比如增加了新特性：語義特性，本地儲存特性，裝置相容特性，連線特性，網頁多媒體特性，三維、圖形及特效特性，效能與整合特性，CSS3特性。

相比之前的進步：

取消了一些過時的 HTML4 標記
將內容和展示分離
一些全新的表單輸入物件
全新的，更合理的Tag

本地資料庫
Canvas 物件
瀏覽器中的真正程式
Html5取代Flash在移動裝置的地位

4、html5優缺點

優點：

提高可用性和改進使用者的友好體驗；
有幾個新的標籤，這將有助於開發人員定義重要的內容；
可以給站點帶來更多的多媒體元素(視訊和音訊)；
可以很好的替代FLASH和Silverlight；
當涉及到網站的抓取和索引的時候，對於SEO很友好；
將被大量應用於移動應用程式和遊戲；
可移植性好。

缺點

該標準並未能很好的被Pc端瀏覽器所支援。因新標籤的引入，各瀏覽器之間將缺少一種統一的資料描述格式，造成使用者體驗不佳。

5、html5 應用場景

（1）極具表現力的網頁：內容簡約而不簡單。

（2）網頁應用程式：

代替PC端的軟體：Office、騰訊文件、有道雲筆記等。
代替 APP 的網頁：淘寶、京東、拼多多等。
微信端：公眾號、小程式等。

（3）混合式本地應用。

（4）簡單的遊戲。

6、html5支援的瀏覽器

html5支援絕大部分主流瀏覽器，比如國外的 chrome，firefox，safari，IE9及以上，opera 等，國內的 360瀏覽器，QQ瀏覽器等。

注意：IE9為部分支援，IE8及以下不支援 html5。

二、語義化標籤

1、什麼是語義化標籤？

類似於 p，span，img等這樣的，看見標籤就知道里面應該儲存的是什麼內容的是語義化標籤。

像 div 這樣的裡面可以裝任意東西的就是非語義化標籤。

以前我們要做下面這個結構可能會這麼佈局：

<div class="header"></div>
<div class="nav"></div>
<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

那麼在 html5 下語義化標籤怎麼做呢？

<header></header>
<nav></nav>
<main>
    <article></article>
    <aside></aside>
</main>
<footer></footer>

是不是語義化更清晰，程式碼更簡潔呢？

2、html5 部分新增的標籤

2.1、結構標籤

section：獨立內容區塊，可以用 h1~h6 組成大綱，表示文件結構，也可以有章節、頁首、頁尾或頁首的其他部分；
article：特殊獨立區塊，表示這篇頁首中的核心內容；
aside：標籤內容之外與標籤內容相關的輔助資訊；
header：某個區塊的頭部資訊/標題；
hgroup：頭部資訊/標題的補充內容；
footer：底部資訊；
nav：導航條部分資訊；
figure：獨立的單元，例如某個有圖片與內容的新聞塊。

2.2、表單標籤

email：必須輸入郵件；
url：必須輸入url地址；
number：必須輸入數值；
range：必須輸入一定範圍內的數值；
Date Pickers：日期選擇器；

date：選取日、月、年
month：選取月、年
week：選取周和年
time：選取時間（小時和分鐘）
datetime：選取時間、日、月、年（UTC時間）
datetime-local：選取時間、日、月、年（本地時間）
search：搜尋常規的文字域；
color：顏色

<form action="">
    <fieldset>
        <legend>學生檔案</legend>
        <label for="userName">姓名:</label>
        <input type="text" name="userName" id="userName" placeholder="請輸入使用者名稱">
        <label for="userPhone">手機號碼:</label>
        <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$">
        <label for="email">郵箱地址:</label>
        <input type="email" required name="email" id="email">
        <label for="collage">所屬學院:</label>
        <input type="text" name="collage" id="collage" list="cList" placeholder="請選擇">
        <datalist id="cList">
            <option value="前端與移動開發學院"></option>
            <option value="java學院"></option>
            <option value="c++學院"></option>
        </datalist>
        <label for="score">入學成績:</label>
        <input type="number" max="100" min="0" value="0" id="score">
        <label for="level">基礎水平:</label>
        <meter id="level" max="100" min="0" low="59" high="90"></meter>
        <label for="inTime">入學日期:</label>
        <input type="date" id="inTime" name="inTime">
        <label for="leaveTime">畢業日期:</label>
        <input type="date" id="leaveTime" name="leaveTime">
        <input type="submit">
    </fieldset>
</form>

2.3、媒體標籤

video：視訊；
audio：音訊；
embed：嵌入內容（包括各種媒體），Midi、Wav、AU、MP3、Flash、AIFF等。

<body>
<!--embed:可以直接插入音訊視訊，本質是通過本機安裝的音訊視訊播放軟體來播放的。要求必須已經安裝了這些軟體  相容性-->

<!--flash:  1.先學習flash,增加使用成本  2.iphone,ipd,不支援flash-->

<!--audio:音訊-->
<!--
src:播放檔案的路徑
controls:音訊播放器的控制器面板
autoplay:自動播放
loop:迴圈播放-->
<audio src="../mp3/aa.mp3" controls></audio>

<!--video：視訊-->
<!--
src:播放檔案的路徑
controls:音訊播放器的控制器面板
autoplay:自動播放
loop:迴圈播放
poster:指定視訊還沒有完全下載完畢，或者使用者沒有點選播放前顯示的封面。 預設顯示當前視訊檔案的第一副影象
width:視訊的寬度
height:視訊的高度
-->
<!--注意事項：視訊始終會保持原始的寬高比。意味著如果你同時設定寬高，並不是真正的將視訊的畫面大小設定為指定的大小，而只是將視訊的佔據區域設定為指定大小，除非你設定的寬高剛好就是原始的寬高比例。所以建議：在設定視訊寬高的時候，一般只會設定寬度或者高度，讓視訊檔案自動縮放-->
<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls  height="600"></video>

<!--source:因為不同的瀏覽器所支援的視訊格式不一樣，為了保證使用者能夠看到視訊，我們可以提供多個視訊檔案讓瀏覽器自動選擇-->
<video src="../mp3/flv.flv" controls></video>
<video controls>
    <!--視訊源，可以有多個源-->
    <source src="../mp3/flv.flv" type="video/flv">
    <source src="../mp3/mp4.mp4" type="video/mp4">
</video>
</body>

2.4、其他功能標籤

mark：標註；
progress：進度條；

<progress max="最大進度條的值" value="當前進度條的值">
time：資料標籤，給搜尋引擎使用；

釋出日期 <time datetime="2014-12-25T09:00">9：00</time>

更新日期 <time datetime="2015-01-23T04:00" pubdate>4:00</time>
ruby和rt：對某一個字進行註釋；

<ruby><rt>註釋內容</rt><rp>瀏覽器不支援時如何顯示</rp></ruby>
wbr：軟換行，頁面寬度到需要換行時換行；
canvas：使用JS程式碼做內容進行影象繪製；
command：按鈕；
deteils ：展開選單；
dateilst：文字域下拉提示；
keygen：加密

<form action="">
    <!--專業：
    <select name="" id="">
        <option value="1">前端與移動開發</option>
        <option value="2">java</option>
        <option value="3">javascript</option>
        <option value="4">c++</option>
    </select>-->
    <!--不僅可以選擇，還應該可以輸入-->
    <!--建立輸入框與datalist的關聯  list="datalist的id號"-->
    專業：<input type="text" list="subjects"> <br>
    <!--通過datalist建立選擇列表-->
    <datalist id="subjects">
        <!--建立選項值：value:具體的值 label:提示資訊，輔助值-->
        <!--option可以是單標籤也可以是雙標籤-->
        <option value="英語" label="不會"/>
        <option value="前端與移動開發" label="前景非常好"></option>
        <option value="java" label="使用人數多"></option>
        <option value="javascript" label="做特效"></option>
        <option value="c" label="不知道"></option>
    </datalist>

    網址：<input type="url" list="urls">
    <datalist id="urls">
        <!--如果input輸入框的type型別是url,那麼value值必須新增http://-->
        <option value="http://www.baidu.com" label="百度"></option>
        <option value="http://www.sohu.com"></option>
        <option value="http://www.163.com"></option>
    </datalist>
</form>

3、語義化標籤相容性處理

IE9：部分支援（所有語義標籤都被認定為行級元素）

IE8：不支援。如果想要IE8支援的話：

方式一：可以使用 js 手動建立這些語義標籤，建立的語義標籤預設也是行級元素。

document.createElement("header");
document.createElement("nav");
document.createElement("main");
document.createElement("article");
document.createElement("aside");
document.createElement("footer");

方式二：引入第三方外掛 “html5shiv.js” 檔案，就可以使得 html5 支援 IE8及以下瀏覽器。

從零開始學 Web 之 CSS3（一）CSS3概述，選擇器

https 兼容問題 3.1 線性 web前端不同錨點 splay lock 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔

從零開始學 Web 之 Ajax（三）Ajax 概述，快速上手

lan 技術分享 php 概述由於 val asc logs 更新大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：ht

從零開始學 Web 之 JavaScript（一）JavaScript概述

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、JavaScr

從零開始學 Web 之 DOM（一）DOM的概念，對標簽操作

關註 1.5 pan 什麽 tin p標簽 nod text == 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，

從零開始學 Web 之 jQuery（七）事件冒泡，事件參數對象，鏈式編程原理

eval uri turn 定位 return 也會否則 ont sele 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客

從零開始學 Web 之 CSS（一）選擇器

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 W

從零開始學 Web 之 CSS3（二）顏色模式，文字陰影，盒模型，邊框圓角，邊框陰影

一、顏色模式顏色模式有兩種： RGBA rgba(0,0,0,0.5); //黑色，透明度0.5 HSLA（顏色(0~360)，飽和度(0%~100%)，明度(0%~100%)，透明度(0~1)）紅橙黃綠青藍紫紅：顏色從 0~360 順序，各佔30度。比如紅色為0，黃色為120，綠色為240。

從零開始學 Web 之 jQuery（三）元素操作，鏈式程式設計，動畫方法

一、使用css操作元素樣式 1、常規寫法 $("#dv").css("width", "200px"); $("#dv").css("height", "100px"); $("#dv").css("background", "red"); 2、鏈式寫法 $("#dv").css("width", "20

從零開始學 Web 之 CSS3（六）動畫animation，Web字型

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 部落格園：http://www.cnblogs.com/lvonve/ CSDN：https://blog.csdn.net/lvonve/

從零開始學 Web 之 DOM（一）DOM的概念，對標籤操作

大家好，這裡是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！一、DOM概念 D

從零開始學 Web 之 jQuery（七）事件冒泡，事件引數物件，鏈式程式設計原理

一、事件冒泡與阻止事件冒泡事件冒泡：當一個元素觸發某個事件的時候，會把這個事件傳播到其父元素，一直到頂層元素。阻止事件冒泡：在被觸發事件的子元素中新增 return false; 即可。二、事件的觸發之前講的繫結事件是事件觸發後的事件處理過程，並且上面的事件觸發是被動的事件觸發，怎麼可以主動觸發事

從零開始學 Web 之 jQuery（一）jQuery的概念，頁面載入事件

一、jQuery的概念 1、什麼是 JavaScript 庫？ JavaScript 開發的過程中，處理瀏覽器的相容很複雜而且很耗時，於是一些封裝了這些操作的庫應運而生。這些庫還會把一些常用的程式碼進行封裝。把一些常用到的方法寫到一個單獨的 js 檔案，使用的時候直接去引用這js檔案就可以了，這個 js

從零開始學 Web 之 BOM（一）BOM的概念，一些BOM物件

大家好，這裡是「從零開始學 Web 系列教程」，並在下列地址同步更新...... +------------------------------------------------------------ github：https://github.com/Daotin/Web 微信公眾號：Web前端之

從零開始學 Web 之 HTML（一）認識前端

大家好，這裡是 Daotin 從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」，歡迎大家訂閱關注。在這裡我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的專案。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！ 1、什麼是前端前端對於網站來說，

從零開始學 Web 之 Ajax（一）伺服器相關概念

一、伺服器和客戶端伺服器和客戶端都是電腦，在硬體層面上沒有明顯的劃分，配置很差的個人電腦任然可以作為伺服器。伺服器如果想對外提供服務，必須安裝相應的軟體，所以不是伺服器這臺電腦可以提供服務，而是其安裝的軟體提供的服務。比如： HTTP網頁服務：Apache，Tomcat，IIS等檔案上傳下載服務：V

從零開始學 Web 之 ES6（一）ES5嚴格模式

一、ECMAScript 5 嚴格模式 1、概述除了正常執行模式，ECMAscript 5添加了第二種執行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下執行。 2、目的消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為;

從零開始學 Web 之 CSS3（四）邊框圖片，過渡

一、邊框圖片邊框圖片：就是給邊框加圖片背景。我們之前加的邊框都是純顏色的邊框，那麼我們怎麼給邊框加圖片呢？原理：把一張圖片分成九宮格的形式，然後一一對應到需要新增邊框的元素上。並且，新增邊框圖片是以背景的方式新增的，所以會有可能文字覆蓋在邊框的情況，後面也會介紹處理方法。語法： /* bord

從零開始學 Web 之 DOM（四）節點

def clas scrip while p標簽設置 ner 操作 text 大家好，這裏是「 Daotin的夢囈」從零開始學 Web 系列教程。此文首發於「 Daotin的夢囈」公眾號，歡迎大家訂閱關註。在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相

從零開始學 Web 之 BOM（三）offset，scroll，變速動畫函數

樣式清理 java mar dde sof mov har width 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔博客園：

從零開始學 Web 之 jQuery（二）獲取和操作元素的屬性

eight images idt 隱藏 lis 屬性 ner master lin 大家好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新...... github：https://github.com/Daotin/Web 微信公眾號：Web前端之巔