HTML5 語法基礎二（筆記）

TML5 語法基礎二（筆記）

一、 HTML 語法簡介

1、HTML 介紹

1-1、HTML的全稱

1-2、誰發明了HTML

1-3、HTML的版本進化

1-4、HTML5

2、HTML全稱：

Hyper Text Markup Language

超文本標記語言

3、誰發明了HTML？

HTML 是在1982年由Tim Berners-Lee 給出原始定義，進一步成為國際標準，由萬維網聯盟（W3C）維護。

4、HTML的版本進化

HTML1.0 --- HTML2.0 --- HTML3.0 --- HTML4.0 --- XHTML1.0 --- HTML5.0

XHTML：

eXtensible Hyper Text Markup Language

可擴展超文本標記語言

XHTML也是一種標記語言，表現方式與HTML4.0類似，不過語法上更加嚴格

XHTML基于XML（可擴展標記語言）

XHTML1.0在2000年1月26日成為W3C的推薦標準。

HTML5 的由來：

2007年4月10日，Mozilla 基金會、蘋果、Opera軟件公司組成的WHATWG小組建議W3C采納HTML5。

2007年5月9日，新HTML工作組采納了他們的建議。

2014年10月29日，W3C宣傳，經過幾乎8年的艱辛努力，該標準規范終于最終制定完成。

二、HTML 語句的基本格式

1、XHTML1.0 語法公式

2、HTML5.0 語句基本格式及建議

1、XHTML1.0 語法基本格式

<標簽屬性="屬性值" 屬性="屬性值">內容標簽>

內容

1、標簽和屬性都為英文小寫

2、必須用英文半角雙引號""

代碼示例：

內容

1、以上代碼中，標簽是誰？他具有哪些屬性？

2、Stop();在這里標簽還是屬性還是屬性值？

當標簽中無內容時：

<標簽屬性="屬性值" />

2、HTML5 基本語法

在html5中兼容xhtml1.0語法，同時也允許：

標簽與屬性可以使用大寫（注：為了兼容HTML4.0,并不建議）

標簽可以不結束

部分屬性值可以省略

建議在HTML5中主要使用較嚴謹的XHTML1.0語法

標簽和屬性使用小寫字母

無內容的標簽可以直接省云結束

無值的屬性可以省云屬性值

舉例：

----標簽是章節的意思

title here

<video src="video.ogv" poster="poster.jpg" width="320" height="240" < span>controls >瀏覽器不兼容時會出現的信息

texe here

小結：

<標簽屬性="屬性值" 屬性="屬性值">內容標簽>

<標簽屬性="屬性值">

<標簽屬性>

三、HTML標簽關系與DOM

1、標簽關系

2、DOM

1、標簽關系

標題

--- 01、標簽可以與另一個標簽并列

段落文本

--- 01、標簽可以與另一個標簽并列

--- 02、標簽可以嵌套其他標簽

列表項
--- 02、標簽可以嵌套其他標簽
列表項
錯誤的標簽關系：段落標簽不可以交叉嵌套。手寫代碼技巧：立即寫結束標簽 2、DOM --- 文件對象模型（Document Object Model）類似下來的樹型結構圖：bodyh1pullili 小結：標簽可以與標簽并列或嵌套，不可交叉。標簽之間的關系可以用DOM來表示。四、HTML 的一般文檔結構 --- html5 的頁面標準htmlhead --- 頁面頭部信息...... body --- 網頁主體部分...... 常用的頭元素 1、title2、meta 與字符編碼3、meta 與 seo 1、title 標簽2、meta 與字符編碼常見編碼集：Gb2312Big5UTF-8(Unicode) 3、meta 標簽和 SEO 搜索引擎優化01.02.4、其它head 中還可能出現以下元素style --- CSS樣式塊script --- javascript 等程序塊link --- 關聯外部文件，如css文件....小結：head中的常見子元素有 title 和 metameta 與字符編碼集、搜索引擎優化有關推薦字符編碼集UTF-8

”XMLHttpRequest 的異步調用網上找的例子運行沒問題，但稍微改了一點點就報錯”InvalidStateError: XMLHttpRequest has an invalid context“。斷斷續續搞了3天終于通了，可以接收二進制文件了。 “ 之后找到了下篇文章，發現我所使用的方法是下方中的老方法。準備再按下文所說新方法試試。

下文是2011寫的了，想必所說內容到現在已是所有瀏覽器都支持的了吧。

以下轉自： https://www.html5rocks.com/zh/tutorials/file/xhr2/。

XMLHttpRequest2 新技巧

HTML5 Rocks

HTML5 世界中有這樣一位無名英雄：XMLHttpRequest。嚴格地說，XHR2 并不屬于 HTML5。不過，它是瀏覽器供應商對于核心平臺不斷做出的改進中的一部分。我之所以將 XHR2 加入我們新的百寶囊中，就是因為它在如今復雜的網絡應用中扮演了不可或缺的角色。

結果呢，我們這位老朋友來了個大變身，很多人都不知道它的新功能了。2 級 XMLHttpRequest 引入了大量的新功能（例如跨源請求、上傳進度事件以及對上傳/下載二進制數據的支持等），一舉封殺了我們網絡應用中的瘋狂黑客。這使得 AJAX 可以與很多尖端的 HTML5 API 結合使用，例如 File System API、Web Audio API 和 WebGL。

此教程重點介紹 XMLHttpRequest 中的新功能，尤其是可用于處理文件的功能。

抓取數據

以前通過 XHR 抓取二進制 blob 形式的文件是很痛苦的事情。從技術上來說，這甚至是不可能的實現。有一種廣為流傳的一種技巧，是將 MIME 類型替換為由用戶定義的字符集，如下所示：

提取圖片的舊方法：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
// Hack to pass bytes through unprocessed.
xhr.overrideMimeType('text/plain; charset=x-user-defined');
xhr.onreadystatechange = function(e) {
 if (this.readyState == 4 && this.status == 200) {
 var binStr = this.responseText;
 for (var i = 0, len = binStr.length; i < len; ++i) {
 var c = binStr.charCodeAt(i);
 //String.fromCharCode(c & 0xff);
 var byte = c & 0xff; // byte at offset i
 }
 }
};
xhr.send();

雖然這種方法可行，但是 responseText 中實際返回的并不是二進制 blob，而是代表圖片文件的二進制字符串。我們要巧妙地讓服務器在不作處理的情況下，將這些數據傳遞回去。雖然這個技巧有用，但是我不推薦大家走這種歪門邪道。只要是通過玩弄字符代碼和字符串操控技巧，強行將數據轉化成所需的格式，都會出現問題。

指定響應格式

在前一個示例中，我們通過替換服務器的 MIME 類型并將響應文本作為二進制字符串處理，下載了二進制“文件”形式的圖片。現在，讓我們利用 XMLHttpRequest 新增的 responseType 和 response 屬性，告知瀏覽器我們希望返回什么格式的數據。

xhr.responseType

在發送請求前，根據您的數據需要，將 xhr.responseType 設置為“text”、“arraybuffer”、“blob”或“document”。請注意，設置（或忽略）xhr.responseType = '' 會默認將響應設為“text”。

xhr.response

成功發送請求后，xhr 的響應屬性會包含 DOMString、ArrayBuffer、Blob 或 Document 形式（具體取決于 responseTyp 的設置）的請求數據。

憑借這個優秀的新屬性，我們可以修改上一個示例：以 ArrayBuffer 而非字符串的形式抓取圖片。將緩沖區移交給 BlobBuilder API 可創建 Blob：

BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
 if (this.status == 200) {
 var bb = new BlobBuilder();
 bb.append(this.response); // Note: not xhr.responseText
 var blob = bb.getBlob('image/png');
 ...
 }
};
xhr.send();

好多了！

ArrayBuffer 響應

ArrayBuffer 是二進制數據通用的固定長度容器。如果您需要原始數據的通用緩沖區，ArrayBuffer 就非常好用，但是它真正強大的功能是讓您使用 JavaScript 類型數組創建底層數據的“視圖”。實際上，可以通過單個 ArrayBuffer 來源創建多個視圖。例如，您可以創建一個 8 位整數數組，與來自相同數據的現有 32 位整數數組共享同一個 ArrayBuffer。底層數據保持不變，我們只是創建其不同的表示方法。

例如，下面以 ArrayBuffer 的形式抓取我們相同的圖片，但是現在，會通過該數據緩沖區創建無符號的 8 位整數數組。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
 var uInt8Array = new Uint8Array(this.response); // this.response == uInt8Array.buffer
 // var byte3 = uInt8Array[4]; // byte at offset 4
 ...
};
xhr.send();

Blob 響應

如果您要直接處理 Blob 且/或不需要操作任何文件的字節，可使用 xhr.responseType='blob'：

window.URL = window.URL || window.webkitURL; // Take care of vendor prefixes.
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
 if (this.status == 200) {
 var blob = this.response;
 var img = document.createElement('img');
 img.onload = function(e) {
 window.URL.revokeObjectURL(img.src); // Clean up after yourself.
 };
 img.src = window.URL.createObjectURL(blob);
 document.body.appendChild(img);
 ...
 }
};
xhr.send();

Blob 可用于很多場合，包括保存到 indexedDB、寫入 HTML5 文件系統或創建 Blob 網址（如本例中所示）。

發送數據

能夠下載各種格式的數據固然是件好事，但是如果不能將這些豐富格式的數據送回本壘（服務器），那就毫無意義了。XMLHttpRequest 有時候會限制我們發送 DOMString 或 Document (XML) 數據。但是現在不會了。現已替換成經過修改的 send() 方法，可接受以下任何類型：DOMString、Document、FormData、Blob、File、ArrayBuffer。本部分的其余內容中的示例演示了如何使用各類型發送數據。

發送字符串數據：xhr.send(DOMString)

function sendText(txt) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) {
 if (this.status == 200) {
 console.log(this.responseText);
 }
 };
 xhr.send(txt);
}
sendText('test string');
function sendTextNew(txt) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.responseType = 'text';
 xhr.onload = function(e) {
 if (this.status == 200) {
 console.log(this.response);
 }
 };
 xhr.send(txt);
}
sendText2('test string');

這沒有新內容，只是正確的代碼段略有不同。其中設置了 responseType='text' 作為對比。再次說明，省略此行會得到同樣的結果。

提交表單：xhr.send(FormData)

很多人可能習慣于使用 jQuery 插件或其他庫來處理 AJAX 表單提交。而我們可以改用 FormData，這是另一種針對 XHR2 設計的新數據類型。使用 FormData 能夠很方便地實時以 JavaScript 創建 HTML <form>。然后可以使用 AJAX 提交該表單：

function sendForm() {
 var formData = new FormData();
 formData.append('username', 'johndoe');
 formData.append('id', 123456);
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) { ... };
 xhr.send(formData);
}

實質上，我們只是動態創建了 <form>，并通過調用 append 方法為其附加了 <input> 值。

當然，您無需從一開始就創建 <form>。FormData 對象可通過頁面上現有的 HTMLFormElement 進行初始化。例如：

<form id="myform" name="myform" action="/server">
 <input type="text" name="username" value="johndoe">
 <input type="number" name="id" value="123456">
 <input type="submit" onclick="return sendForm(this.form);">
</form>
function sendForm(form) {
 var formData = new FormData(form);
 formData.append('secret_token', '1234567890'); // Append extra data before send.
 var xhr = new XMLHttpRequest();
 xhr.open('POST', form.action, true);
 xhr.onload = function(e) { ... };
 xhr.send(formData);
 return false; // Prevent page from submitting.
}

HTML 表單可包含文件上傳（例如 <input type="file">），而 FormData 也可以處理此操作。只需附加文件，瀏覽器就會在調用 send() 時構建 multipart/form-data 請求。

function uploadFiles(url, files) {
 var formData = new FormData();
 for (var i = 0, file; file = files[i]; ++i) {
 formData.append(file.name, file);
 }
 var xhr = new XMLHttpRequest();
 xhr.open('POST', url, true);
 xhr.onload = function(e) { ... };
 xhr.send(formData); // multipart/form-data
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 uploadFiles('/server', this.files);
}, false);

上傳文件或 blob：xhr.send(Blob)

我們也可以使用 XHR 發送 File 或 Blob。請注意，所有 File 都是 Blob，所以在此使用兩者皆可。

該示例使用 BlobBuilder API 從頭開始創建新的文本文件，并將該 Blob 上傳到服務器。該代碼還設置了一個處理程序，用于通知用戶上傳進度：

<progress min="0" max="100" value="0">0% complete</progress>
function upload(blobOrFile) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) { ... };
 // Listen to the upload progress.
 var progressBar = document.querySelector('progress');
 xhr.upload.onprogress = function(e) {
 if (e.lengthComputable) {
 progressBar.value = (e.loaded / e.total) * 100;
 progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
 }
 };
 xhr.send(blobOrFile);
}
// Take care of vendor prefixes.
BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
var bb = new BlobBuilder();
bb.append('hello world');
upload(bb.getBlob('text/plain'));

上傳字節：xhr.send(ArrayBuffer)

最后也是相當重要的一點就是，我們能以 XHR 的有效負載形式發送 ArrayBuffer。

function sendArrayBuffer() {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) { ... };
 var uInt8Array = new Uint8Array([1, 2, 3]);
 xhr.send(uInt8Array.buffer);
}

跨源資源共享 (CORS)

CORS 允許一個域上的網絡應用向另一個域提交跨域 AJAX 請求。啟用此功能非常簡單，只需由服務器發送一個響應標頭即可。

啟用 CORS 請求

假設您的應用已經在 example.com 上了，而您想要從 www.example2.com 提取數據。一般情況下，如果您嘗試進行這種類型的 AJAX 調用，請求將會失敗，而瀏覽器將會出現“源不匹配”的錯誤。利用 CORS，www.example2.com 只需添加一個標頭，就可以允許來自 example.com 的請求：

Access-Control-Allow-Origin: http://example.com

可將 Access-Control-Allow-Origin 添加到某網站下或整個域中的單個資源。要允許任何域向您提交請求，請設置如下：

Access-Control-Allow-Origin: *

其實，該網站 (html5rocks.com) 已在其所有網頁上均啟用了 CORS。啟用開發人員工具后，您就會在我們的響應中看到 Access-Control-Allow-Origin 了：

html5rocks.com 上的 Access-Control-Allow-Origin 標頭

啟用跨源請求是非常簡單的，因此如果您的數據是公開的，請務必啟用 CORS！

提交跨域請求

如果服務器端已啟用了 CORS，那么提交跨域請求就和普通的 XMLHttpRequest 請求沒什么區別。例如，現在 example.com 可以向 www.example2.com 提交請求了：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.example2.com/hello.json');
xhr.onload = function(e) {
 var data = JSON.parse(this.response);
 ...
}
xhr.send();

實際示例：

下載文件并保存到 HTML5 文件系統

假設您有一個圖片庫，想要提取一些圖片，然后使用 HTML5 文件系統本地保存這些圖片。一種方法是以 ArrayBuffer 形式請求圖片，通過數據構建 Blob，并使用 FileWriter 寫入 blob：

window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
function onError(e) {
 console.log('Error', e);
}
var xhr = new XMLHttpRequest();
xhr.open('GET', '/path/to/image.png', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
 window.requestFileSystem(TEMPORARY, 1024 * 1024, function(fs) {
 fs.root.getFile('image.png', {create: true}, function(fileEntry) {
 fileEntry.createWriter(function(writer) {
 writer.onwrite = function(e) { ... };
 writer.onerror = function(e) { ... };
 var bb = new BlobBuilder();
 bb.append(xhr.response);
 writer.write(bb.getBlob('image/png'));
 }, onError);
 }, onError);
 }, onError);
};
xhr.send();

請注意：要使用此代碼，請參閱“探索 FileSystem API”教程中的瀏覽器支持和存儲限制。

分割文件并上傳各個部分

使用 File API，我們可以將操作簡化為上傳大文件。我們采用的技術是：將要上傳的文件分割成多個部分，為每個部分生成一個 XHR，然后在服務器上將各部分組合成文件。這類似于 Gmail 快速上傳大附件的方法。使用這種技術還可以規避 Google 應用引擎對 http 請求的 32 MB 限制。

window.BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder ||
 window.BlobBuilder;
function upload(blobOrFile) {
 var xhr = new XMLHttpRequest();
 xhr.open('POST', '/server', true);
 xhr.onload = function(e) { ... };
 xhr.send(blobOrFile);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
 var blob = this.files[0];
 const BYTES_PER_CHUNK = 1024 * 1024; // 1MB chunk sizes.
 const SIZE = blob.size;
 var start = 0;
 var end = BYTES_PER_CHUNK;
 while(start < SIZE) {
 // Note: blob.slice has changed semantics and been prefixed. See http://goo.gl/U9mE5.
 if ('mozSlice' in blob) {
 var chunk = blob.mozSlice(start, end);
 } else {
 var chunk = blob.webkitSlice(start, end);
 }
 upload(chunk);
 start = end;
 end = start + BYTES_PER_CHUNK;
 }
}, false);
})();

用于在服務器上重組文件的代碼并未在此顯示。

趕快試試吧！

于新手學習html5的同學來說，想要學好html5首先要有一點學習的方法和路線圖，了解清楚之后再開始學習會更加清晰自己的學習效果。

隨著互聯網的高速發展，近年來HTMl5發展的越來越火熱，而在HTML5高薪資、優待遇的誘惑之下，現在學習學習HTML5人也是日益漸增的，但是學習HTML5除了要拋下足夠的汗水之外，我們還需要有一個正確的學習技巧通常合理的學習方法能夠達到事半功倍的效果，相反不合理的學習方法則只能夠事倍功半。

html5可以將web打造成創建真正應用程序的一流環境，html5提供了對瀏覽器API的一系列關鍵擴展，以此加強了Java現有的工具集，隨著全球html5設備的使用量不斷提升，html5開發人才需求量也與日劇增，可以看出html5開發的發展前景十分廣闊，接下來就簡單了解一些html5學習方法指南中的三要素和技能清單的相關內容吧。

html5學習方法之三要素：

Web 前端開收技術包括三個要素：HTML、CSS和Java，但隨著RIA的流行和普及，Flash/Flex、Silverlight、XML 和服務器端語言也是前端開收工程師應該掌握的。Web前端開收工程師既要與上游的交互設計師、視覺設計師和產品經理溝通，又要與下游的服務器端工程師溝通，需要掌握的技能非常多。這就從常識的廣度上對Web前端開收工程師提出了要供。如果要精通前端開發，起碼要精通十行，但現實生活中這樣的全才是很少的，所以對于一些不太重要的常識，只需通便可。

Html5開發可以說前端開發的入門門檻是比較低的，與服務器端語言先緩后快的學習曲線相比，前端開收的學習曲線是先快后緩。所以，對于從事IT工作的人來說，前端是個不錯的切入點。為了滿足“高可保護性”的需要，需要更深入、更系統地去掌握前端常識，這樣才可能創建一個好的前端架構，保證代碼的質量。

html5學習方法之技能清單：

必須掌握基本的Web前端開收技術，其中包括：CSS、HTML、DOM、java、Ajax，jquery，Vue，jquery- mobile，zepto等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。這是前端工程師的核心技能，是專做頁面效果的技術。如果想更深條理的做好前端開收，那就需要學習和了解更多的東西，比如一些熱門的框架backbone，angularjs 等;nodejs近幾年也越來越火了，同樣需要學習。

對于初學者來說，想進入html5開發行業，掌握必須要學習的內容，才能夠更好的去入行這一職業，才能在就業中迎刃有余，那么學習html5自身應該注重哪幾點呢？

方法一：注重實踐，由實踐出真知

現在學多的學員在學習HTNL5的過程中有很多不喜歡自己動手實踐操作，而是喜歡講師或者自己背誦，其實這種學習方法是不對的，因為學習代碼是需要我們自己動手實踐的只有實踐的多了我們才會更加的熟悉，他是一個需要循循漸進的過程。所以掌握代碼不僅僅只有記憶還有嘗試。嘗試自己去寫代碼，然后發現問題，最后進行歸納總結，同時形成理論并記憶。

方法二：由整體到局部，由骨架到血肉

我們在學習HTML和css的時候，會經常涉及到網頁的搭建等相關知識，而我們在學習這方面知識的時候我們采取的方法是，“由外及內”、“由整體到部分”、“由全局到細節”的學習方法。所以我們在學習新的知識的時候一定要主干到枝葉，不要拘泥于某一個細節而沉溺于其中。主干如同我們學習的一個大綱，這種先找主干后添枝葉的學習方法能夠讓知識遺漏變成最少，也會比較容易建立起知識與知識間的關系。

方法三：記憶很重要

在方法一種我們講到注重實踐，但是這并不是代表就讓我們忽略了記憶，記憶也是非常重要的，我們在學習中經常會遇到個匯總各樣的問題這時就是需要記憶的知識點。如有哪些數據類型、有哪些標簽元素等等。遇到這類知識點時我們一定要通過記憶將其熟練掌握，因為許多人在學習的過程中覺得還是理解是最重要的，這種想法是錯誤的。因為如果連記都記不住還談什么理解呢?

方法四：類比

在學習CSS引入方式這種知識點時，我們采用了另一種學習方法。類比，或者也可以叫做辨析。而這種學習的方法主要是針對于我們區分相似的兩種或多種事物。如strong與em，塊元素與行元素，同步與異步等等此類知識具有相似性的知識，所以我們在學習的時候應多多思考，抓取幾種事物的不同點，結合去記憶。

方法五：循序漸進的學習

學習是一個日積月累的過程，誰也不能一下子就能學習很多的東西，正如我們在學習的過程中通常會遇到一些大型的知識，這種知識是比較難啃的。當然我們遇到此類型的知識的時候，千萬不要著急，要腳踏實地一步一步的來，例如動畫框架的學習就是一個典型的例子。

學習并不是一蹴而就的，在學習過程中有一個良好的學習方法這是至關重要的。掌握一套自己的學習方法，日后必定受益終生的。

在線咨詢

上一篇：網頁背景全屏就這？分享 1 段優質 CSS 代碼片段！
下一篇：Axure技能：自適應移動設備屏幕大小

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML5 語法基礎二（筆記）

title here

標題

XMLHttpRequest2 新技巧

目錄

您的項目需求