文章大纲来源：

• 标记语言
• 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 是主流

原文引用：

拓展阅读：

• 英文原文:
• 翻译：
• 原演讲视频：

doctype

<!DOCTYPE> 声明帮助浏览器正确地显示网页。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

HTML 5 声明：

HTML 4.01 声明：

XHTML 1.0 声明：

内容引用：

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。

内容引用：

script/style/link

<script>标签用于在 HTML 页面中插入一段 JavaScript 。

script元素既可以包含脚本语句（如上），也可以通过src属性指向外部脚本文件：

<style>标签用于为HTML文档定义样式信息。

在style中，可以规定浏览器如何呈现HTML文档，标签中type属性是必须的，定义style元素的内容，唯一可能值是text/css，style元素位于head部分中。

<link>标签定义文档与外部资源的关系，常见的用途是连接样式表，在 HTML 中，<link> 标签没有结束标签。

HTML 5

初期需要了解内容：

• 新便签在各浏览器的兼容情况
• 与媒体相关的标签
• HTML 5 API
• Canvas

在后面涉及到的时候再开专题进行介绍。

---

个人静态博客：

• 气泡的前端日记：