文章大綱來源：【Day 1】HTML & HTML 5
- 標記語言
- XHTML/HTML/HTML 5異同
- 瞭解doctype
- HTML
- HTML 5
標記語言
標記語言(ML)即 Markup Language，可以準確定義數據信息本身以及和數據相關的信息。
其中標記(markup)這個詞，來源於傳統出版業的“標記”手稿，也就是在原稿邊緣加註一些符號來指示打印上的要求（字體段落的要求）。
在這個例子中，原稿本身就是數據信息，加註的指示就是和數據相關的信息。
HTML/XHTML/HTML 5異同
HTML 簡述
HTML 是超文本標記語言 (HyperType Markup Language) 的簡稱，HTML是用來描述網頁的一種語言。
XHTML 簡述
XHTML 是可擴展超文本標籤語言 (EXtensible HyperText Markup Language)的簡稱， XHTML 的目標是用規範化語法結構來取代 HTML ，以 XML 爲根本重構了 HTML 4.01 。
HTML 5 簡述
HTML 5 的設計目的是爲了在移動設備上支持多媒體。
新的語法特性被引進以支持這一點，如video、audio和canvas標記 (tag) 。
HTML 5 將會取代1999年制定的 HTML 4.01、XHTML 1.0 標準。
三者異同點
- HTML 5 和 XHTML 是老版 HTML 的替代
- HTML 5 主要用來在移動設備上支持多媒體
- XHTML 爲了用來嚴格規範語法結構
- HTML/XHTML/HTML 5 僅僅是版本不同
- 目前 HTML 5 是主流
原文引用：
拓展閱讀：
- 英文原文: Jeremy Keith | The Design of HTML 5
- 翻譯：Web的真諦：HTML 5到底是什麼意思？
- 原演講視頻：Jeremy Keith | The Design of HTML 5 | Fronteers 2010
doctype
<!DOCTYPE> 聲明幫助瀏覽器正確地顯示網頁。
<!DOCTYPE> 不是 HTML 標籤。它爲瀏覽器提供一項信息（聲明），即 HTML 是用什麼版本編寫的。
HTML 5 聲明：
<!DOCTYPE html>HTML 4.01 聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0 聲明：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">內容引用：HTML <!DOCTYPE>
HTML
基本格式
標準的HTML 5文檔的格式：
<!DOCTYPE html>
<!--文檔類型聲明,不區分大小寫，主要是告訴瀏覽器當前的文檔類型-->
<html>
<!-- 表示html文檔開始 -->
<head>
<!-- 包含文檔元數據開始 -->
<meta charset="UTF-8">
<!-- 聲明字符編碼 -->
<title>Title Tag</title>
<!-- 設置文檔標題 -->
</head>
<!-- 包含文檔元數據接受 -->
<body>
<!-- 表示html內容部分開始，也就是可見部分 -->
</body>
<!-- 表示html內容部分結束 -->
</html>
<!-- 表示html文檔結束 -->內容引用：HTML 5的基本格式
塊級(block)元素
塊級元素最常使用的是div，其他的還有hX、p、nav、aside、header、footer、section、article、ul-li、address等等，也可以對任意元素進行display:block屬性設置。
塊級元素特徵：
- 設置寬高屬性有效
-
margin、padding上下左右（水平垂直）均有效 - 內容會自動進行換行
- 多個塊狀元素標籤寫在一起，默認排序從上到下
行內(inline)元素
行內元素最常使用的是span，其他的還有a、code、i、img、input、textarea等等，也可以對任意元素進行display:inline屬性設置。
行內元素特徵：
- 設置寬高屬性無效
-
margin設置僅左右（水平）方向有效，上下（垂直）無效 -
padding設置上下左右都有效 - 內容不會自動進行換行
行內塊(inline-block)元素
行內塊元素綜合了兩者的特徵，各有取捨，可以對任意元素進行display:inline-block屬性設置。
行內塊元素特徵：
- 內容不會自動進行換行
- 能夠識別寬高
- 多個行內塊元素默認排列方式從左到右
HTML tag
也不用每個都詳細說一下，後面有時間的話開一個專題挑幾個常用的出來詳細說一下。
語義化
語義化的含義就是用正確的標籤做正確的事情。
HTML語義化就是讓頁面的內容結構化，便於瀏覽器、搜索引擎（機器）理解解析，利於SEO。
內容引用：前端工程師手冊-HTML語義化
script/style/link
<script>標籤用於在 HTML 頁面中插入一段 JavaScript 。
<script type="text/javascript">
document.write("Hello World!")
</script>script元素既可以包含腳本語句（如上），也可以通過src屬性指向外部腳本文件：
<script src=".../filename.js"/></script><style>標籤用於爲HTML文檔定義樣式信息。
在style中，可以規定瀏覽器如何呈現HTML文檔，標籤中type屬性是必須的，定義style元素的內容，唯一可能值是text/css，style元素位於head部分中。
<head>
<style type="text/css">
/* ... */
</style>
</head><link>標籤定義文檔與外部資源的關係，常見的用途是連接樣式表，在 HTML 中，<link> 標籤沒有結束標籤。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>HTML 5
初期需要了解內容：
- 新便籤在各瀏覽器的兼容情況
- 與媒體相關的標籤
- HTML 5 API
- Canvas
在後面涉及到的時候再開專題進行介紹。
個人靜態博客：
- 氣泡的前端日記： https://rheabubbles.github.io