共计 2606 个字符，预计需要花费 7 分钟才能阅读完成。
文章大纲来源：【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 是主流
原文引用：
HTML、XML、XHTML 和 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 参考手册
语义化
语义化的含义就是用正确的标签做正确的事情。
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
