TML5 是第五個且是當前的 HTML 版本,它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。 -- Palak Shah
本文導航
-新標簽和元素 …… 08%
-HTML5 的高級功能 …… 16%
-地理位置 …… 16%
-網絡存儲 …… 33%
-應用緩存(AppCache) …… 44%
-視頻 …… 50%
-音頻 …… 61%
-畫布(Canvas) …… 71%
-HTML5 工具 …… 78%
編譯自: http://opensourceforu.com/2017/06/introduction-to-html5/作者: Palak Shah
譯者: geekpi
HTML5 是第五個且是當前的 HTML 版本,它是用于在萬維網上構建和呈現內容的標記語言。本文將幫助讀者了解它。
HTML5 通過 W3C 和Web 超文本應用技術工作組Web Hypertext Application Technology Working Group之間的合作發展起來。它是一個更高版本的 HTML,它的許多新元素可以使你的頁面更加語義化和動態。它是為所有人提供更好的 Web 體驗而開發的。HTML5 提供了很多的功能,使 Web 更加動態和交互。
HTML5 的新功能是:
新標簽,如 <header> 和 <section>
用于 2D 繪圖的 <canvas> 元素
本地存儲
新的表單控件,如日歷、日期和時間
新媒體功能
地理位置
HTML5 還不是正式標準(LCTT 譯注:HTML5 已于 2014 年成為“推薦標準”),因此,并不是所有的瀏覽器都支持它或其中一些功能。開發 HTML5 背后最重要的原因之一是防止用戶下載并安裝像 Silverlight 和 Flash 這樣的多個插件。
語義化元素: 圖 1 展示了一些有用的語義化元素。
表單元素: HTML5 中的表單元素如圖 2 所示。
圖形元素: HTML5 中的圖形元素如圖 3 所示。
媒體元素: HTML5 中的新媒體元素如圖 4 所示。
圖 1:語義化元素
圖 2:表單元素
圖 3:圖形元素
圖 4:媒體元素
地理位置
這是一個 HTML5 API,用于獲取網站用戶的地理位置,用戶必須首先允許網站獲取他或她的位置。這通常通過按鈕和/或瀏覽器彈出窗口來實現。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理位置功能。
地理位置的一些用途是:
公共交通網站
出租車及其他運輸網站
電子商務網站計算運費
旅行社網站
房地產網站
在附近播放的電影的電影院網站
在線游戲
網站首頁提供本地標題和天氣
工作職位可以自動計算通勤時間
工作原理: 地理位置通過掃描位置信息的常見源進行工作,其中包括以下:
全球定位系統(GPS)是最準確的
網絡信號 - IP地址、RFID、Wi-Fi 和藍牙 MAC地址
GSM/CDMA 蜂窩 ID
用戶輸入
該 API 提供了非常方便的函數來檢測瀏覽器中的地理位置支持:
if (navigator.geolocation) {// do stuff
}
getCurrentPosition API 是使用地理位置的主要方法。它檢索用戶設備的當前地理位置。該位置被描述為一組地理坐標以及航向和速度。位置信息作為位置對象返回。
語法是:
getCurrentPosition(showLocation, ErrorHandler, options);
showLocation:定義了檢索位置信息的回調方法。
ErrorHandler(可選):定義了在處理異步調用時發生錯誤時調用的回調方法。
options (可選): 定義了一組用于檢索位置信息的選項。
我們可以通過兩種方式向用戶提供位置信息:測地和民用。
描述位置的測地方式直接指向緯度和經度。
位置信息的民用表示法是人類可讀的且容易理解。
如下表 1 所示,每個屬性/參數都具有測地和民用表示。
圖 5 包含了一個位置對象返回的屬性集。
圖5:位置對象屬性
網絡存儲
在 HTML 中,為了在本機存儲用戶數據,我們需要使用 JavaScript cookie。為了避免這種情況,HTML5 已經引入了 Web 存儲,網站利用它在本機上存儲用戶數據。
與 Cookie 相比,Web 存儲的優點是:
更安全
更快
存儲更多的數據
存儲的數據不會隨每個服務器請求一起發送。只有在被要求時才包括在內。這是 HTML5 Web 存儲超過 Cookie 的一大優勢。
有兩種類型的 Web 存儲對象:
本地 - 存儲沒有到期日期的數據。
會話 - 僅存儲一個會話的數據。
如何工作: localStorage 和 sessionStorage 對象創建一個 key=value 對。比如: key="Name", value="Palak"。
這些存儲為字符串,但如果需要,可以使用 JavaScript 函數(如 parseInt() 和 parseFloat())進行轉換。
下面給出了使用 Web 存儲對象的語法:
存儲一個值:
localStorage.setItem("key1", "value1");
localStorage["key1"] = "value1";
得到一個值:
alert(localStorage.getItem("key1"));
alert(localStorage["key1"]);
刪除一個值: -removeItem("key1");
刪除所有值:
localStorage.clear();
應用緩存(AppCache)
使用 HTML5 AppCache,我們可以使 Web 應用程序在沒有 Internet 連接的情況下脫機工作。除 IE 之外,所有瀏覽器都可以使用 AppCache(截止至此時)。
應用緩存的優點是:
網頁瀏覽可以脫機
頁面加載速度更快
服務器負載更小
cache manifest 是一個簡單的文本文件,其中列出了瀏覽器應緩存的資源以進行脫機訪問。 manifest 屬性可以包含在文檔的 HTML 標簽中,如下所示:
<html manifest="test.appcache">...
</html>
它應該在你要緩存的所有頁面上。
緩存的應用程序頁面將一直保留,除非:
用戶清除它們
manifest 被修改
緩存更新
視頻
在 HTML5 發布之前,沒有統一的標準來顯示網頁上的視頻。大多數視頻都是通過 Flash 等不同的插件顯示的。但 HTML5 規定了使用 video 元素在網頁上顯示視頻的標準方式。
目前,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 發布之前,在網頁上播放音頻沒有統一的標準。大多數音頻也通過 Flash 等不同的插件播放。但 HTML5 規定了通過使用音頻元素在網頁上播放音頻的標準方式。音頻元素用于播放聲音文件和音頻流。
目前,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)
要在網頁上創建圖形,HTML5 使用 畫布 API。我們可以用它繪制任何東西,并且它使用 JavaScript。它通過避免從網絡下載圖像而提高網站性能。使用畫布,我們可以繪制形狀和線條、弧線和文本、漸變和圖案。此外,畫布可以讓我們操作圖像中甚至視頻中的像素。你可以將 canvas 元素添加到 HTML 頁面,如下所示:
<canvas id="myCanvas" width="200" height="100"></canvas>
畫布元素不具有繪制元素的功能。我們可以通過使用 JavaScript 來實現繪制。所有繪畫應在 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 所示。
你可以繪制許多對象,如弧、圓、線/垂直梯度等。
為了有效操作,所有熟練的或業余的 Web 開發人員/設計人員都應該使用 HTML5 工具,當需要設置工作流/網站或執行重復任務時,這些工具非常有幫助。它們提高了網頁設計的可用性。
以下是一些幫助創建很棒的網站的必要工具。
HTML5 Maker: 用來在 HTML、JavaScript 和 CSS 的幫助下與網站內容交互。非常容易使用。它還允許我們開發幻燈片、滑塊、HTML5 動畫等。
Liveweave: 用來測試代碼。它減少了保存代碼并將其加載到屏幕上所花費的時間。在編輯器中粘貼代碼即可得到結果。它非常易于使用,并為一些代碼提供自動完成功能,這使得開發和測試更快更容易。
Font dragr: 在瀏覽器中預覽定制的 Web 字體。它會直接載入該字體,以便你可以知道看起來是否正確。也提供了拖放界面,允許你拖動字形、Web 開放字體和矢量圖形來馬上測試。
HTML5 Please: 可以讓我們找到與 HTML5 相關的任何內容。如果你想知道如何使用任何一個功能,你可以在 HTML Please 中搜索。它提供了支持的瀏覽器和設備的有用資源的列表,語法,以及如何使用元素的一般建議等。
Modernizr: 這是一個開源工具,用于給訪問者瀏覽器提供最佳體驗。使用此工具,你可以檢測訪問者的瀏覽器是否支持 HTML5 功能,并加載相應的腳本。
Adobe Edge Animate: 這是必須處理交互式 HTML 動畫的 HTML5 開發人員的有用工具。它用于數字出版、網絡和廣告領域。此工具允許用戶創建無瑕疵的動畫,可以跨多個設備運行。
Video.js: 這是一款基于 JavaScript 的 HTML5 視頻播放器。如果要將視頻添加到你的網站,你應該使用此工具。它使視頻看起來不錯,并且是網站的一部分。
The W3 Validator: W3 驗證工具測試 HTML、XHTML、SMIL、MathML 等中的網站標記的有效性。要測試任何網站的標記有效性,你必須選擇文檔類型為 HTML5 并輸入你網頁的 URL。這樣做之后,你的代碼將被檢查,并將提供所有錯誤和警告。
HTML5 Reset: 此工具允許開發人員在 HTML5 中重寫舊網站的代碼。你可以使用這些工具為你網站的訪問者提供一個良好的網絡體驗。
Palak Shah
作者是高級軟件工程師。她喜歡探索新技術,學習創新概念。她也喜歡哲學。你可以通過 palak311@gmail.com[1] 聯系她。
via: http://opensourceforu.com/2017/06/introduction-to-html5/
作者:Palak Shah[2] 譯者:geekpi 校對:wxy
本文由 LCTT 原創編譯,Linux中國 榮譽推出
tml5文件分割上傳解決方案
html5提供的文件API中可以輕松的對文件進行分割切片, 然后通過javascript異步處理向服務器傳輸數據, 突破對大文件上傳的限制, 同時異步處理在一定程度上也提高了文件上傳的效率。用戶體驗上也優于前述方案。
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;
//發送請求
function sendRequest() {
var blob = document.getElementById('file').files[0];
var start = 0;
var end;
var index = 0;
// 計算文件切片總數
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--;
// 如果所有文件切片都成功發送,發送文件合并請求。
if(slices == 0) {
mergeFile(blob);
alert('文件上傳完畢');
}
}
};
chunk =blob.slice(start,end);//切割文件
//構造form數據
fd = new FormData();
fd.append("file", chunk);
fd.append("name", blob.name);
fd.append("index", index);
xhr.open("POST", "upload.php", true);
//設置二進制文邊界件頭
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部分
//當前目錄下建立一個uploads文件夾
//接收文件名時進行轉碼,防止中文亂碼。
$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);
關鍵函數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);
相關的屬性如下:
lastModified: 1511081596000
lastModifiedDate: Sun Nov 19 2017 16:53:16 GMT+0800 (中國標準時間) {}
name: "IMG_20171119_165316.jpg"
size: 4383101
type: "image/jpeg"
slice: ? slice() 用于切割文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文網(html.cn)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>
解析
|
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞,比如 <html>
HTML 標簽通常是成對出現的,比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽,第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
<標簽>內容</標簽>
“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽,如下實例:
HTML 元素:
<p>這是一個段落。</p>
頭部元素包含關于文檔的概要信息,也稱為元信息(meta-information)。Meta 意為“關于某方面的信息”。
可以這么說,元數據(meta-data)是關于數據的信息,而元信息是關于信息的信息。
<head> 元素包含了所有的頭部標簽元素。在 元素中你可以插入腳本(scripts), 樣式文件(CSS),及各種meta信息。
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素:
1.定義了瀏覽器工具欄的標題
2.當網頁添加到收藏夾時,顯示在收藏夾中的標題
3.顯示在搜索引擎結果頁面的標題
<base> 標簽描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
|
<link> 標簽定義了文檔與外部資源之間的關系。
<link> 標簽通常用于鏈接到樣式表:
|
<style> 標簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
|
meta標簽描述了一些基本的元數據。
<meta> 標簽提供了元數據.元數據也不顯示在頁面上,但會被瀏覽器解析。
META 元素通常用于指定網頁的描述,關鍵詞,文件的最后修改時間,作者,和其他元數據。
元數據可以使用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他Web服務。
<meta> 一般放置于 <head> 區域
<script>標簽用于加載腳本文件,如: JavaScript。
<script> 元素在以后的章節中會詳細描述。
HTML head 元素
標簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關系 |
<meta> | 定義了HTML文檔中的元數據 |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
開始標簽 | 元素內容 | 結束標簽 |
<p> | 這是一個段落 | </p> |
<a href="default.html"> | 這是一個鏈接 | </a> |
<br> | 換行 |
HTML注釋標簽<!--...-->用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示??墒褂米⑨寣δ拇a進行解釋,這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用
<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script>
<!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> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>
HTML 文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
HTML”計算機輸出”標簽
標簽 | 描述 |
<kbd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
<code> | 定義計算機代碼 |
HTML 引文,引用,及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
HTML 區塊元素
可以通過 <div> 和 <span> 將 HTML 元素組合起來
HTML塊級元素
塊級元素在瀏覽器顯示時,通常會以新行來開始和結束 - 例:<h1>, <p>, <ul>, <table>
HTML內聯元素
內聯元素在顯示時通常不會以新行開始 - 例:<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是塊級元素,瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用,<div> 元素可用于對大的內容塊設置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局
HTML <span> 元素
HTML <span> 元素是內聯元素,可用作文本的容器 - 與 CSS 一同使用時,<span> 元素可用于為部分文本設置樣式屬性
HTML 實體
在 HTML 中,某些字符是預留的。
比如在 HTML 中不能使用小于號(<)和大于號(>)因為瀏覽器會誤認為它們是標簽,所以希望能正確地顯示預留字符,我們必須在 HTML 源代碼中使用字符實體(character entities)。
字符實體類似這樣&entity_name;
或
entity_number;
HTML 字符實體
不間斷空格
HTML 中的常用字符實體是不間斷空格( )
瀏覽器總是會截短 HTML 頁面中的空格,如果需要在頁面中增加空格的數量,需要使用 字符實體
有用的字符實體
顯示結果 | 描述 | 實體名稱 | 實體編碼 |
空格 | |||
< | 小于號 | < | < |
> | 大于號 | > | > |
& | 和號 | & | & |
“ | 引號 | " | " |
‘ | 撇號 | ' (IE不支持) | ' |
¢ | 分 | ¢ | ¢ |
£ | 鎊 | £ | £ |
¥ | 元 | ¥ | ¥ |
€ | 歐元 | € | € |
§ | 小節 | § | § |
? | 版權 | ? | ? |
? | 注冊商標 | ? | ? |
? | 商標 | ? | ? |
× | 乘號 | × | × |
÷ | 除號 | ÷ | ÷ |
歡迎大家提議、分享、交流、共同學習進步
*請認真填寫需求信息,我們會在24小時內與您取得聯系。