從新梳理HTML基礎知識

時間 2019-11-17

標籤從新梳理 html 基礎知識欄目 HTML 简体版

原文原文鏈接

緣起　html

　　HTML（HyperText Markup Language超文本標記語言）是用於構建web頁面的標記語言和通用標準。它並非一項新的發明，由於超文本（具備超連接的文本）和標記語言（用於電子文檔的定義和描述）在HTML問世之前都早已存在多年。做爲一項劃時代的創造，它再次印證了喬布斯的名言：創新即整合（Creativity is just connecting things）。html5

　　HTML的創造者，被後人稱爲互聯網之父的Tim Berners-Lee曾經是CERN（歐洲核子研究組織）的一位科學家。1990年，他受命開發一套軟件系統用於組織內部成員分享和查閱研究報告，因而他把超文本和標記語言合成了HTML，而後寫了一個瀏覽器和一個服務器，這就是萬維網（World Wide Web）的起源。是的，一羣科學家，只是爲了方便看報告，結果順手搞出了互聯網。web

　　Tim Berners-Lee並非一個廣爲人知的名字，緣由是他徹底放棄了萬維網所能帶給他的數不勝數的財富，和他相似的人還有不少，好比Linux的創始人Linus。正是這些具有非凡理念的人物奠基了互聯網的精神基調：平等、共享、開源和創造。canvas

　　1994年Tim建立了W3C，這是一個非盈利性的國際化組織，致力於維護和制定web相關的標準。瀏覽器

Tim Berners-Lee服務器

語義（semantic）　websocket

　　語義化標記，是指每種標記表示一種特定的內容形態，例如標題、列表、表格等。與之對應的概念，是樣式標記（presentational markup）。Tim最初設想HTML應該是一種純語義化的標記語言，然而在混沌無序的初始階段，各家瀏覽器廠商多少受到另外一種通行多年的標記語言SGML的影響，因爲該語言同時存在語義化標記和樣式標記，因而早期的HTML也被設計成了兩類標記的雜合體。不過隨着90年代末CSS的逐步應用以及隨之而起的「內容與表現分離」理念，樣式標記在新的HTML版本中被逐漸廢除，但出於向後兼容的考慮，仍然有部分樣式標記被保留，例如：i（樣式）/ em（語義）；b（樣式）/ strong（語義）。app

　　爲何須要使用語義化標記？框架

一、HTML自己就是語義化標記語言，使用符合語義的標記，才談得上正確使用HTMLsocket

二、使用合適的標記，能夠合理應用瀏覽器默認樣式

三、有利於SEO

四、使用合適的標記是確保可訪問性的一個前提

五、更好的可維護性

版本與規格　　

　　HTML歷經多個版本迭代，早期版本由瀏覽器廠商主導，直到1999年W3C發佈第四代標準。

　　第四代標準分化爲兩類，一類是SGML-based HTML，即HTML4.01，另外一類是XML-based HTML，即XHTML1.0。其中每一類下又分爲三種規格：Strict、Transitional和Frameset。

　　XHTMl是W3C爲了規束HTML所作的一廂情願的徒勞，它試圖以嚴格的語法和極低的容錯率來矯正早期HTML市場上業已存在的種種不規範行爲。然而互聯網世界沒有誰能夠成爲上令下行的權威，而且標準必然是滯後於現實的，所以W3C後來放棄了XHTML2.0，轉而投入向後兼容的HTML5。

　　2014年第五代標準HTML5發佈（Recommendation）。它最先是由一個由瀏覽器廠商表明組成的叫WHATWG的組織提出的，後來學院派的W3C在放棄XHTML的制定後，與實務派的WHATWG聯合，共同制定了H5標準。歷經十五年的換代升級，HTML5新增了大量的內容，包括新的標記（新的語義標籤、多媒體支持、新的屬性）和新的API（canvas、svg、webstorage、websocket……），其中許多內容模塊至今仍在完善中。

　　 HTML使用<!DOCTYPE >來聲明其版本及規格。

DTD是通用標記語言SGML用於定義文檔遵循何種標準的一套語法規則，HTML4.01基於SGML，所以HTML4.01也引入了DTD的聲明方式，一共有三種模式：

Strict：嚴格模式，不容許樣式標記和框架集

　　 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional：鬆散（混合、過渡）模式，容許樣式標記，不容許框架集

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset：框架集模式，容許樣式標記和框架集

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5不基於SGML，所以沒有引入DTD，也只有一種聲明：

　　<!DOCTYPE html>

標籤（tags）

圖例：H5元素；替換元素*；行內元素

注：僅包含全部H5支持的標籤。

全局標準屬性

　　class、id、title、lang、style、tabindex

　　dir：設置內容的文本方向

　　accesskey：設置激活元素的快捷鍵

　　/* H5新增 */

　　contenteditable：規定內容是否可編輯，值爲布爾值

　　contextmenu：與menu標籤配合使用，用於自定義右鍵菜單，目前僅火狐實現

　　data-*：用於嵌入自定義數據

　　draggable：用於規定元素是否可拖動，值爲布爾值

　　dropzone：目前不支持。copy | move | link

　　hidden：沒有值，單獨使用。IE不支持

　　spellcheck：規定是否對元素內容進行拼寫檢查，值爲布爾值

　　translate：規定是否翻譯元素內容。支持較差。yes | no

ARIA Role Attributes

Accessible Rich Internet Applications (ARIA),是一個補充性的標準，用於進一步提升HTML的語義，以便於輔助性設備的識別。

例如：

替換元素（replaced element）

　　從CSS的角度看，替換元素是一種內容樣式在CSS控制範圍以外的元素，它的內容是一個獨立的外部對象。典型的替換元素有<img>, <object>, <video>，以及某些表單元素如<textarea>和<input>。有的元素如<audio>和<canvas>僅在某些狀況下是替換元素。使用僞元素content屬性插入的對象屬於匿名替換元素。

In CSS, a replaced element is an element whose representation is outside the scope of CSS. These are a type of external object whose representation is independent of the CSS. Typical replaced elements are <img>, <object>, <video> or form elements like <textarea> and <input>. Some elements, like <audio> or <canvas> are replaced elements only in specific cases. Objects inserted using the CSS content properties are anonymous replaced elements.

　　——from MDN

可見大部分替換元素都是單標籤，但也有少部分是標籤對，如textarea和canvas。

行內元素（inline）與塊級元素（block-level）

　　區別：

　　一、在正常流中是否另起一行

　　二、盒模型規則不一樣

meta

meta標籤有四種屬性：

name用於指定文檔的元數據信息，例如application-name | description | keywords | author | viewport ……

http-equiv指定預編譯指令（pragma directive），用於設置響應頭，但僅當服務器未設置相應響應頭時才起做用。

content用於描述前二者的內容。

charset用於指定字符集，可單獨使用。