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

時間 2019-11-17

標籤開始 web html5 html 概述語義標籤欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、HTML5簡介

一、什麼是html5

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

二、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推薦標準html5

三、HTML5的設計目的

HTML5的設計目的是爲了在移動設備上支持多媒體。以前網頁若是想嵌入視頻音頻，須要用到 flash ，可是蘋果設備是不支持 flash 的，因此爲了改變這一現狀，html5應運而生。java

新的語法特徵被引進以支持視頻音頻，如video、audio和 canvas 標記。c++

HTML5還引進了新的功能，能夠真正改變用戶與文檔的交互方式。好比增長了新特性：語義特性，本地存儲特性，設備兼容特性，鏈接特性，網頁多媒體特性，三維、圖形及特效特性，性能與集成特性，CSS3特性。git

相比以前的進步：github

取消了一些過期的 HTML4 標記
將內容和展現分離
一些全新的表單輸入對象
全新的，更合理的Tag
本地數據庫
Canvas 對象
瀏覽器中的真正程序
Html5取代Flash在移動設備的地位

四、html5優缺點

優勢：chrome

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

缺點數據庫

該標準並未能很好的被Pc端瀏覽器所支持。因新標籤的引入，各瀏覽器之間將缺乏一種統一的數據描述格式，形成用戶體驗不佳。

五、html5 應用場景

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

（2）網頁應用程序：

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

（3）混合式本地應用。

（4）簡單的遊戲。

六、html5支持的瀏覽器

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

注意：IE9爲部分支持，IE8及如下不支持 html5。

2、語義化標籤

一、什麼是語義化標籤？

相似於 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>

是否是語義化更清晰，代碼更簡潔呢？

二、html5 部分新增的標籤

2.一、結構標籤

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

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.三、媒體標籤

video：視頻；
audio：音頻；
embed：嵌入內容（包括各類媒體），Midi、Wav、AU、MP三、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.四、其餘功能標籤

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：加密

-----以上參考連接： http://www.javashuo.com/article/p-qigdrcsr-kd.html

<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>

三、語義化標籤兼容性處理

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及如下瀏覽器。