關(guān)于 HTML5 你需要了解的基礎(chǔ)知識

TML5 是第五個且是當(dāng)前的 HTML 版本，它是用于在萬維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語言。本文將幫助讀者了解它。 -- Palak Shah

本文導(dǎo)航
-新標(biāo)簽和元素 …… 08%
-HTML5 的高級功能 …… 16%

-地理位置 …… 16%
-網(wǎng)絡(luò)存儲 …… 33%
-應(yīng)用緩存（AppCache） …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布（Canvas） …… 71%

-HTML5 工具 …… 78%

編譯自： http://opensourceforu.com/2017/06/introduction-to-html5/
作者： Palak Shah
譯者： geekpi

HTML5 是第五個且是當(dāng)前的 HTML 版本，它是用于在萬維網(wǎng)上構(gòu)建和呈現(xiàn)內(nèi)容的標(biāo)記語言。本文將幫助讀者了解它。

HTML5 通過 W3C 和Web 超文本應(yīng)用技術(shù)工作組Web Hypertext Application Technology Working Group之間的合作發(fā)展起來。它是一個更高版本的 HTML，它的許多新元素可以使你的頁面更加語義化和動態(tài)。它是為所有人提供更好的 Web 體驗而開發(fā)的。HTML5 提供了很多的功能，使 Web 更加動態(tài)和交互。

HTML5 的新功能是：

新標(biāo)簽，如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲
新的表單控件，如日歷、日期和時間
新媒體功能
地理位置

HTML5 還不是正式標(biāo)準(zhǔn)（LCTT 譯注：HTML5 已于 2014 年成為“推薦標(biāo)準(zhǔn)”），因此，并不是所有的瀏覽器都支持它或其中一些功能。開發(fā) HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。

新標(biāo)簽和元素

語義化元素：圖 1 展示了一些有用的語義化元素。
表單元素： HTML5 中的表單元素如圖 2 所示。
圖形元素： HTML5 中的圖形元素如圖 3 所示。
媒體元素： HTML5 中的新媒體元素如圖 4 所示。

圖 1：語義化元素

圖 2：表單元素

圖 3：圖形元素

圖 4：媒體元素

HTML5 的高級功能

`地理位置`

這是一個 HTML5 API，用于獲取網(wǎng)站用戶的地理位置，用戶必須首先允許網(wǎng)站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現(xiàn)。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。

地理位置的一些用途是：

公共交通網(wǎng)站
出租車及其他運輸網(wǎng)站
電子商務(wù)網(wǎng)站計算運費
旅行社網(wǎng)站
房地產(chǎn)網(wǎng)站
在附近播放的電影的電影院網(wǎng)站
在線游戲
網(wǎng)站首頁提供本地標(biāo)題和天氣
工作職位可以自動計算通勤時間

工作原理：地理位置通過掃描位置信息的常見源進(jìn)行工作，其中包括以下：

全球定位系統(tǒng)（GPS）是最準(zhǔn)確的
網(wǎng)絡(luò)信號 - IP地址、RFID、Wi-Fi 和藍(lán)牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入

該 API 提供了非常方便的函數(shù)來檢測瀏覽器中的地理位置支持：

if (navigator.geolocation) {
// do stuff
}

getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設(shè)備的當(dāng)前地理位置。該位置被描述為一組地理坐標(biāo)以及航向和速度。位置信息作為位置對象返回。

語法是：

getCurrentPosition(showLocation, ErrorHandler, options);

showLocation：定義了檢索位置信息的回調(diào)方法。
ErrorHandler（可選）：定義了在處理異步調(diào)用時發(fā)生錯誤時調(diào)用的回調(diào)方法。
options （可選）：定義了一組用于檢索位置信息的選項。

我們可以通過兩種方式向用戶提供位置信息：測地和民用。

描述位置的測地方式直接指向緯度和經(jīng)度。
位置信息的民用表示法是人類可讀的且容易理解。

如下表 1 所示，每個屬性/參數(shù)都具有測地和民用表示。

圖 5 包含了一個位置對象返回的屬性集。

圖5：位置對象屬性

`網(wǎng)絡(luò)存儲`

在 HTML 中，為了在本機(jī)存儲用戶數(shù)據(jù)，我們需要使用 JavaScript cookie。為了避免這種情況，HTML5 已經(jīng)引入了 Web 存儲，網(wǎng)站利用它在本機(jī)上存儲用戶數(shù)據(jù)。

與 Cookie 相比，Web 存儲的優(yōu)點是：

更安全
更快
存儲更多的數(shù)據(jù)
存儲的數(shù)據(jù)不會隨每個服務(wù)器請求一起發(fā)送。只有在被要求時才包括在內(nèi)。這是 HTML5 Web 存儲超過 Cookie 的一大優(yōu)勢。

有兩種類型的 Web 存儲對象：

本地 - 存儲沒有到期日期的數(shù)據(jù)。
會話 - 僅存儲一個會話的數(shù)據(jù)。

如何工作： localStorage 和 sessionStorage 對象創(chuàng)建一個 key=value 對。比如： key="Name"， value="Palak"。

這些存儲為字符串，但如果需要，可以使用 JavaScript 函數(shù)（如 parseInt() 和 parseFloat()）進(jìn)行轉(zhuǎn)換。

下面給出了使用 Web 存儲對象的語法：

存儲一個值：

localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";

得到一個值：

alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);

刪除一個值： -removeItem("key1");
刪除所有值：

localStorage.clear();

`應(yīng)用緩存（AppCache）`

使用 HTML5 AppCache，我們可以使 Web 應(yīng)用程序在沒有 Internet 連接的情況下脫機(jī)工作。除 IE 之外，所有瀏覽器都可以使用 AppCache（截止至此時）。

應(yīng)用緩存的優(yōu)點是：

網(wǎng)頁瀏覽可以脫機(jī)
頁面加載速度更快
服務(wù)器負(fù)載更小

cache manifest 是一個簡單的文本文件，其中列出了瀏覽器應(yīng)緩存的資源以進(jìn)行脫機(jī)訪問。 manifest 屬性可以包含在文檔的 HTML 標(biāo)簽中，如下所示：

<html manifest="test.appcache">
...
</html>

它應(yīng)該在你要緩存的所有頁面上。

緩存的應(yīng)用程序頁面將一直保留，除非：

用戶清除它們
manifest 被修改
緩存更新

`視頻`

在 HTML5 發(fā)布之前，沒有統(tǒng)一的標(biāo)準(zhǔn)來顯示網(wǎng)頁上的視頻。大多數(shù)視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規(guī)定了使用 video 元素在網(wǎng)頁上顯示視頻的標(biāo)準(zhǔn)方式。

目前，video 元素支持三種視頻格式，如表 2 所示。

下面的例子展示了 video 元素的使用：

<! DOCTYPE HTML>
<html>
<body>
<video src=" vdeo.ogg" width="320" height="240" controls="controls">
This browser does not support the video element.
</video>
</body>
</html>

例子使用了 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要使視頻在 Safari 和未來版本的 Chrome 中工作，我們必須添加一個 MPEG4 和 WebM 文件。

video 元素允許多個 source 元素。source 元素可以鏈接到不同的視頻文件。瀏覽器將使用第一個識別的格式，如下所示：

<video width="320" height="240" controls="controls">
<source src="vdeo.ogg" type="video/ogg" />
<source src=" vdeo.mp4" type="video/mp4" />
<source src=" vdeo.webm" type="video/webm" />
This browser does not support the video element.
</video>

圖6：Canvas 的輸出

`音頻`

對于音頻，情況類似于視頻。在 HTML5 發(fā)布之前，在網(wǎng)頁上播放音頻沒有統(tǒng)一的標(biāo)準(zhǔn)。大多數(shù)音頻也通過 Flash 等不同的插件播放。但 HTML5 規(guī)定了通過使用音頻元素在網(wǎng)頁上播放音頻的標(biāo)準(zhǔn)方式。音頻元素用于播放聲音文件和音頻流。

目前，HTML5 audio 元素支持三種音頻格式，如表 3 所示。

audio 元素的使用如下所示：

<! DOCTYPE HTML>
<html>
<body>
<audio src=" song.ogg" controls="controls">
This browser does not support the audio element.
</video>
</body>
</html>

此例使用 Ogg 文件，并且可以在 Firefox、Opera 和 Chrome 中使用。要在 Safari 和 Chrome 的未來版本中使 audio 工作，我們必須添加一個 MP3 和 Wav 文件。

audio 元素允許多個 source 元素，它可以鏈接到不同的音頻文件。瀏覽器將使用第一個識別的格式，如下所示：

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
This browser does not support the audio element.
</audio>

`畫布（Canvas）`

要在網(wǎng)頁上創(chuàng)建圖形，HTML5 使用畫布 API。我們可以用它繪制任何東西，并且它使用 JavaScript。它通過避免從網(wǎng)絡(luò)下載圖像而提高網(wǎng)站性能。使用畫布，我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外，畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面，如下所示：

<canvas id="myCanvas" width="200" height="100"></canvas>

畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現(xiàn)繪制。所有繪畫應(yīng)在 JavaScript 中。

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="blue";
cxt.storkeStyle = "red";
cxt.fillRect(10,10,100,100);
cxt.storkeRect(10,10,100,100);
</script>

以上腳本的輸出如圖 6 所示。

你可以繪制許多對象，如弧、圓、線/垂直梯度等。

HTML5 工具

為了有效操作，所有熟練的或業(yè)余的 Web 開發(fā)人員/設(shè)計人員都應(yīng)該使用 HTML5 工具，當(dāng)需要設(shè)置工作流/網(wǎng)站或執(zhí)行重復(fù)任務(wù)時，這些工具非常有幫助。它們提高了網(wǎng)頁設(shè)計的可用性。

以下是一些幫助創(chuàng)建很棒的網(wǎng)站的必要工具。

HTML5 Maker：用來在 HTML、JavaScript 和 CSS 的幫助下與網(wǎng)站內(nèi)容交互。非常容易使用。它還允許我們開發(fā)幻燈片、滑塊、HTML5 動畫等。
Liveweave：用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結(jié)果。它非常易于使用，并為一些代碼提供自動完成功能，這使得開發(fā)和測試更快更容易。
Font dragr：在瀏覽器中預(yù)覽定制的 Web 字體。它會直接載入該字體，以便你可以知道看起來是否正確。也提供了拖放界面，允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。
HTML5 Please：可以讓我們找到與 HTML5 相關(guān)的任何內(nèi)容。如果你想知道如何使用任何一個功能，你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設(shè)備的有用資源的列表，語法，以及如何使用元素的一般建議等。
Modernizr：這是一個開源工具，用于給訪問者瀏覽器提供最佳體驗。使用此工具，你可以檢測訪問者的瀏覽器是否支持 HTML5 功能，并加載相應(yīng)的腳本。
Adobe Edge Animate：這是必須處理交互式 HTML 動畫的 HTML5 開發(fā)人員的有用工具。它用于數(shù)字出版、網(wǎng)絡(luò)和廣告領(lǐng)域。此工具允許用戶創(chuàng)建無瑕疵的動畫，可以跨多個設(shè)備運行。
Video.js：這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網(wǎng)站，你應(yīng)該使用此工具。它使視頻看起來不錯，并且是網(wǎng)站的一部分。
The W3 Validator： W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網(wǎng)站標(biāo)記的有效性。要測試任何網(wǎng)站的標(biāo)記有效性，你必須選擇文檔類型為 HTML5 并輸入你網(wǎng)頁的 URL。這樣做之后，你的代碼將被檢查，并將提供所有錯誤和警告。
HTML5 Reset：此工具允許開發(fā)人員在 HTML5 中重寫舊網(wǎng)站的代碼。你可以使用這些工具為你網(wǎng)站的訪問者提供一個良好的網(wǎng)絡(luò)體驗。

Palak Shah

作者是高級軟件工程師。她喜歡探索新技術(shù)，學(xué)習(xí)創(chuàng)新概念。她也喜歡哲學(xué)。你可以通過 palak311@gmail.com[1] 聯(lián)系她。

via: http://opensourceforu.com/2017/06/introduction-to-html5/

作者：Palak Shah[2] 譯者：geekpi 校對：wxy

本文由 LCTT 原創(chuàng)編譯，Linux中國榮譽(yù)推出

點擊“了解更多”可訪問文內(nèi)鏈接

tml5文件分割上傳解決方案

html5提供的文件API中可以輕松的對文件進(jìn)行分割切片, 然后通過javascript異步處理向服務(wù)器傳輸數(shù)據(jù), 突破對大文件上傳的限制, 同時異步處理在一定程度上也提高了文件上傳的效率。用戶體驗上也優(yōu)于前述方案。

index.html

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>大文件上傳實例</title>
<script type="text/javascript">
    const BYTES_PER_CHUNK = 1024 * 1024; // 每個文件切片大小定為1MB .
    var slices;
    var totalSlices;
    //發(fā)送請求
    function sendRequest() {
        var blob = document.getElementById('file').files[0];
        var start = 0;
        var end;
        var index = 0;
        // 計算文件切片總數(shù)
        slices = Math.ceil(blob.size / BYTES_PER_CHUNK);
        totalSlices= slices;
        while(start < blob.size) {
        end = start + BYTES_PER_CHUNK;
        if(end > blob.size) {
            end = blob.size;
        }
        uploadFile(blob, index, start, end);
        start = end;
        index++;
        }
    }
    //上傳文件
    function uploadFile(blob, index, start, end) {
        var xhr;
        var fd;
        var chunk;
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
        if(xhr.responseText) {
            alert(xhr.responseText);
        }
        slices--;
        // 如果所有文件切片都成功發(fā)送，發(fā)送文件合并請求。
        if(slices == 0) {
            mergeFile(blob);
            alert('文件上傳完畢');
        }
        }
        };
        chunk =blob.slice(start,end);//切割文件
        //構(gòu)造form數(shù)據(jù)
        fd = new FormData();
        fd.append("file", chunk);
        fd.append("name", blob.name);
        fd.append("index", index);
        xhr.open("POST", "upload.php", true);
        //設(shè)置二進(jìn)制文邊界件頭
        xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));
        xhr.send(fd);
    }
    function mergeFile(blob) {
        var xhr;
        var fd;
        xhr = new XMLHttpRequest();
        fd = new FormData();
        fd.append("name", blob.name);
        fd.append("index", totalSlices);
        xhr.open("POST", "merge.php", true);
        xhr.setRequestHeader("X_Requested_With", location.href.split("/")[3].replace(/[^a-z]+/g, '$'));
        xhr.send(fd);
    }
</script>
</head>
<body>
<input type="file" id="file"/>
<button onclick="sendRequest()">上傳</button>
</body>
</html>

upload.php

<?php
//省略了文件接收判斷isset部分
//當(dāng)前目錄下建立一個uploads文件夾
//接收文件名時進(jìn)行轉(zhuǎn)碼，防止中文亂碼。
$target = "uploads/" .iconv("utf-8","gbk",$_POST["name"]) . '-' . $_POST['index'];
move_uploaded_file($_FILES['file']['tmp_name'], $target);
// Might execute too quickly.
sleep(1);
?>

merge.php

<?php
//文件合并
$target = "uploads/" .iconv("utf-8","gbk",$_POST["name"]);
$dst = fopen($target, 'wb');
for($i = 0; $i < $_POST['index']; $i++) {
$slice = $target . '-' . $i;
$src = fopen($slice, 'rb');
stream_copy_to_stream($src, $dst);
fclose($src);
unlink($slice);
}
fclose($dst);

關(guān)鍵函數(shù)stream_copy_to_stream()

int stream_copy_to_stream ( resource $source , resource $dest [, int $maxlength = -1 [, int $offset = 0 ]] )

<?php
$src = fopen('http://www.example.com', 'r');
$dest1 = fopen('first1k.txt', 'w');
$dest2 = fopen('remainder.txt', 'w');
echo stream_copy_to_stream($src, $dest1, 1024) . " bytes copied to first1k.txt\n";
echo stream_copy_to_stream($src, $dest2) . " bytes copied to remainder.txt\n";
?>

var blob = document.getElementById('file').files[0];
console.dir(blob);

相關(guān)的屬性如下:

lastModified: 1511081596000

lastModifiedDate: Sun Nov 19 2017 16:53:16 GMT+0800 (中國標(biāo)準(zhǔn)時間) {}

name: "IMG_20171119_165316.jpg"

size: 4383101

type: "image/jpeg"

slice: ? slice() 用于切割文件

文本標(biāo)記語言(英文HyperText Markup Language,簡稱：HTML)是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言!
對于中文網(wǎng)頁需要使用<meta charset='utf-8'>聲明編碼，否則會出現(xiàn)亂碼。有些瀏覽器（如360瀏覽器）會設(shè)置GBK為默認(rèn)編碼，則你需要設(shè)置為<meta charset='gbk'>
例子模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文網(wǎng)(html.cn)</title>
</head>
<body>
    <h1>我的第一個標(biāo)題</h1>
    <p>我的第一個段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個大標(biāo)題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標(biāo)記語言：HyperText Markup Language
HTML 不是一種編程語言，而是一種標(biāo)記語言
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁面

HTML 標(biāo)簽

HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。
HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如 <html>
HTML 標(biāo)簽通常是成對出現(xiàn)的，比如 <b> 和 </b>
標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽
開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
<標(biāo)簽>內(nèi)容</標(biāo)簽>

HTML 元素

“HTML 標(biāo)簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴(yán)格來講, 一個 HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>

HTML 頭部元素

頭部元素包含關(guān)于文檔的概要信息，也稱為元信息（meta-information）。Meta 意為“關(guān)于某方面的信息”。
可以這么說，元數(shù)據(jù)（meta-data）是關(guān)于數(shù)據(jù)的信息，而元信息是關(guān)于信息的信息。

HTML <HEAD> 元素

<head> 元素包含了所有的頭部標(biāo)簽元素。在元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區(qū)域的元素標(biāo)簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <TITLE> 元素

<title> 標(biāo)簽定義了不同文檔的標(biāo)題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素：
1.定義了瀏覽器工具欄的標(biāo)題
2.當(dāng)網(wǎng)頁添加到收藏夾時，顯示在收藏夾中的標(biāo)題
3.顯示在搜索引擎結(jié)果頁面的標(biāo)題

HTML <BASE> 元素

<base> 標(biāo)簽描述了基本的鏈接地址/鏈接目標(biāo)，該標(biāo)簽作為HTML文檔中所有的鏈接標(biāo)簽的默認(rèn)鏈接:

<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>

HTML <LINK> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <STYLE> 元素

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <META> 元素

meta標(biāo)簽描述了一些基本的元數(shù)據(jù)。
<meta> 標(biāo)簽提供了元數(shù)據(jù).元數(shù)據(jù)也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，文件的最后修改時間，作者，和其他元數(shù)據(jù)。
元數(shù)據(jù)可以使用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他Web服務(wù)。
<meta> 一般放置于 <head> 區(qū)域

<META> 標(biāo)簽- 使用實例

為搜索引擎定義關(guān)鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網(wǎng)頁定義描述內(nèi)容:
<meta name="description" content="免費 Web & 編程教程">
定義網(wǎng)頁作者:
<meta name="author" content="HTML">
每30秒鐘刷新當(dāng)前頁面:
<meta http-equiv="refresh" content="30">

HTML <SCRIPT> 元素

HTML head 元素

標(biāo)簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標(biāo)題
<base>	定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址
<link>	定義了一個文檔和外部資源之間的關(guān)系
<meta>	定義了HTML文檔中的元數(shù)據(jù)
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

HTML 元素

HTML元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。例：

開始標(biāo)簽	元素內(nèi)容	結(jié)束標(biāo)簽
<p>	這是一個段落	</p>
<a href="default.html">	這是一個鏈接	</a>
<br>	換行

說明：HTML 文檔是由 HTML 元素定義的
注：開始標(biāo)簽常被稱為起始標(biāo)簽（opening tag），結(jié)束標(biāo)簽常稱為閉合標(biāo)簽（closing tag）。

元素語法

HTML 元素以開始標(biāo)簽起始
HTML 元素以結(jié)束標(biāo)簽終止
元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
某些 HTML 元素具有空內(nèi)容（empty content）
空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）
大多數(shù) HTML 元素可擁有屬性
注釋: 您將在本教程的下一章中學(xué)習(xí)更多有關(guān)屬性的內(nèi)容。
嵌套的 HTML 元素
HTML 文檔由嵌套的 HTML 元素構(gòu)成。大多數(shù) HTML 元素可以嵌套（可以包含其他 HTML 元素）。
空元素
沒有內(nèi)容的 HTML 元素被稱為空元素。空元素是在開始標(biāo)簽中關(guān)閉的。
<br> 就是沒有關(guān)閉標(biāo)簽的空元素（<br> 標(biāo)簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關(guān)閉。
在開始標(biāo)簽中添加斜杠，比如 <br />，是關(guān)閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠(yuǎn)的保障。

注釋標(biāo)簽

HTML注釋標(biāo)簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。可使用注釋對您的代碼進(jìn)行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用

標(biāo)簽定義及使用說明

注釋標(biāo)簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。
您可使用注釋對您的代碼進(jìn)行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用。
您也可以在注釋內(nèi)容存儲針對程序所定制的信息。在這種情況下，這些信息對用戶是不可見的，但是對程序來說是可用的。一個好的習(xí)慣是把注釋或樣式元素放入注釋文本中，這樣就可避免不支持腳本或樣式的老瀏覽器把它們顯示為純文本。

<script type="text/javascript">
<!--
function displayMsg()
{
  alert("Hello World!")
}
//-->
</script>

注釋：命令行最后的兩個正斜杠（//）是 JavaScript 注釋符號。這確保了 JavaScript 不會執(zhí)行 –> 標(biāo)簽。
除了在源文檔中有非常明顯的作用外，許多 Web 服務(wù)器也利用注釋來實現(xiàn)文檔服務(wù)端軟件特有的特性。這些服務(wù)器可以掃描文檔，從傳統(tǒng)的 HTML/XHTML 注釋中找到特定的字符序列，然后再根據(jù)嵌在注釋中的命令采取相應(yīng)的動作。這些動作可能是簡單地包括其他文件中的文本（即所謂的服務(wù)器端包含，server-inside include），也可能是復(fù)雜地執(zhí)行其他命令去動態(tài)生成文檔的內(nèi)容。

HTML 段落與文字

標(biāo)題

在 HTML 文檔中，標(biāo)題很重要。標(biāo)題（Heading）是通過 <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。其中<h1> 定義最大的標(biāo)題，<h6> 定義最小的標(biāo)題
HTML中的標(biāo)題標(biāo)簽通過<h1>-<h6>來設(shè)置，越往下標(biāo)題越小

段落

在HTML中段落是通過p標(biāo)簽來定義的，它可以將HTML文檔分割為若干段落部分。因為p標(biāo)簽是塊級元素，所以瀏覽器會自動地在段落的前后添加空行。
注意：因為p標(biāo)簽是塊級元素，所以瀏覽器會自動地在段落的前后添加空行
我們可以通過<br/>標(biāo)簽來對段落進(jìn)行換行
如果希望在不產(chǎn)生一個新段落的情況下進(jìn)行換行，就可以使用<br /> 標(biāo)簽，注意它是一個單標(biāo)簽。

文本格式化

HTML可定義很多供格式化輸出的元素，例：使用標(biāo)簽 <b>(“bold”) 與 <i>(“italic”) 對輸出的文本進(jìn)行格式，從而顯示粗體或者斜體
示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML教程(html.cn)</title> 
</head> 
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標(biāo)</sub> 和 <sup> 上標(biāo)</sup>
</body>
</html>

HTML 文本格式化標(biāo)簽

標(biāo)簽	描述
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號字
<strong>	定義加重語氣
<sub>	定義下標(biāo)字
<sup>	定義上標(biāo)字
<ins>	定義插入字
<del>	定義刪除字

HTML”計算機(jī)輸出”標(biāo)簽

標(biāo)簽	描述
<kbd>	定義鍵盤碼
<samp>	定義計算機(jī)代碼樣本
<var>	定義變量
<pre>	定義預(yù)格式文本
<code>	定義計算機(jī)代碼

HTML 引文，引用，及標(biāo)簽定義

標(biāo)簽	描述
<abbr>	定義縮寫
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長的引用
<q>	定義短的引用語
<cite>	定義引用、引證
<dfn>	定義一個定義項目

區(qū)塊

大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結(jié)束）；而內(nèi)聯(lián)元素則不會。

HTML 區(qū)塊元素
可以通過 <div> 和 <span> 將 HTML 元素組合起來

HTML塊級元素
塊級元素在瀏覽器顯示時，通常會以新行來開始和結(jié)束 - 例：<h1>, <p>, <ul>, <table>

HTML內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時通常不會以新行開始 - 例：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是塊級元素，瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局

HTML <span> 元素
HTML <span> 元素是內(nèi)聯(lián)元素，可用作文本的容器 - 與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性

HTML字符實體

在 HTML 中，某些字符是預(yù)留的，這些預(yù)留字符必須被替換為字符實體；而，一些在鍵盤上找不到的字符也可以使用字符實體來替換。

HTML 實體
在 HTML 中，某些字符是預(yù)留的。
比如在 HTML 中不能使用小于號（<）和大于號（>）因為瀏覽器會誤認(rèn)為它們是標(biāo)簽，所以希望能正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
字符實體類似這樣
&entity_name;
或
&#entity_number;

HTML 字符實體
不間斷空格
HTML 中的常用字符實體是不間斷空格( )
瀏覽器總是會截短 HTML 頁面中的空格，如果需要在頁面中增加空格的數(shù)量，需要使用字符實體

有用的字符實體

顯示結(jié)果	描述	實體名稱	實體編碼
	空格
<	小于號	<	<
>	大于號	>	>
&	和號	&	&
“	引號	"	"
‘	撇號	' (IE不支持)	'
￠	分	￠	￠
￡	鎊	￡	￡
￥	元	￥	￥
€	歐元	€	€
§	小節(jié)	§	§
?	版權(quán)	?	?
?	注冊商標(biāo)	?	?
?	商標(biāo)	?	?
×	乘號	×	×
÷	除號	÷	÷

注意：實體名稱對大小寫敏感

歡迎大家提議、分享、交流、共同學(xué)習(xí)進(jìn)步

在線咨詢

上一篇：「HTML4」HTML入門
下一篇：前端CSS-3D交互，跟隨鼠標(biāo)3D旋轉(zhuǎn)

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

關(guān)于 HTML5 你需要了解的基礎(chǔ)知識

新標(biāo)簽和元素

HTML5 的高級功能

地理位置

網(wǎng)絡(luò)存儲

應(yīng)用緩存（AppCache）

視頻

音頻

畫布（Canvas）

HTML5 工具

點擊“了解更多”可訪問文內(nèi)鏈接

什么是HTML？

HTML 標(biāo)簽

HTML 元素

HTML 頭部元素

HTML <HEAD> 元素

HTML <TITLE> 元素

HTML <BASE> 元素

HTML <LINK> 元素

HTML <STYLE> 元素

HTML <META> 元素

<META> 標(biāo)簽- 使用實例

HTML <SCRIPT> 元素

HTML 元素

元素語法

注釋標(biāo)簽

標(biāo)簽定義及使用說明

HTML 段落與文字

標(biāo)題

段落

文本格式化

區(qū)塊

HTML字符實體

您的項目需求

`地理位置`

`網(wǎng)絡(luò)存儲`

`應(yīng)用緩存（AppCache）`

`視頻`

`音頻`

`畫布（Canvas）`