HTML文档声明
特点
文档声明必须是HTML文档的第一行、且顶格显示，对大小写不敏感。因为任何放在DOCTYPE前面的东西，比如批注或XML声明，会令IE9或更早期的浏览器触发怪异模式(后面的渲染模式会介绍)
由于文档类型声明不是标签，因此不应具有关闭标签
版本
声明
HTML5
在HTML5之前，文档声明一般有三种类型：严格型strict、过渡型transitional、框架frameset
严格型DTD包含所有HTML元素和属性，但不包含展示性的和弃用的元素(如font)；而过渡型或宽松型(loose)则包含展示性和启用的元素。
HTML4.01
XHTML1.0
XHTML1.1 等同于XHTML1.0 Strict
【DTD】
DTD称为文档类型定义，它可以定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。在HTML中，DTD使用XML定义了HTML标签规范
由于HTML5不基于SGML，所以不需要引用DTD。但是需要doctype来启用标准模式(后面的渲染模式会介绍)。HTML5的语法元素来自SGML、HTML、XHTML1.X，使它成为一种有自己规则的合成语言
HTML、XML和SGML这三者的关系并不容易区分。HTML是SGML的一个实例，它的DTD作为标准被固定下来，因此，HTML不能作为定义其它置标语言的元语言。XML是SGML的一个子集，严格地讲，XML也还是SGML。与HTML不同的是，XML有DTD，因而也可以像SGML那样作为元语言，来定义其它文件系统或置标语言。如果把置标语言分为元置标语言和实例置标语言的话，SGML和XML都是元置标语言，而HTML和由XML派生的XHTML都是实例置标语言。
渲染模式
在很久以前的网络上，页面通常有两种版本：为网景(Netscape)的Navigator准备的版本以及为微软(Microsoft)的Internet Explorer准备的版本。当W3C创立网络标准后，为了不破坏当时既有的网站，浏览器不能直接起用这些标准。因此，浏览器采用了两种模式，用以把能符合新规范的网站和老旧网站区分开。
浏览器排版引擎有三种模式：怪异模式(Quirks mode)、接近标准模式(Almost standards mode)以及标准模式(Standards mode)。在怪异模式下，排版会模拟Navigator4与Internet Explorer 5的非标准行为。为了支持在网络标准被广泛采用前，就已经建好的网站，这么做是必要的。在标准模式下，行为即由HTML与CSS的规范描述的行为。在接近标准模式下，只有少数的怪异行为被实现
对HTML文档来说，浏览器使用文档开头的DOCTYPE来决定用怪异模式处理或标准模式处理。如果文档中没有DOCTYPE将触发文档的怪异模式。怪异模式最明显的影响是会触发怪异盒模型。在CSS中盒模型被分为两种，第一种是W3C的标准模型，第二种是怪异盒模型。不同之处在于怪异盒模型的宽高定义的是可见元素框的尺寸，而不是元素框的内容区尺寸
HTML文档头部
在声明文档类型之后，HTML文档的下一部分为
<html>标签，告知浏览器应将括在<html>...</html>内的所有内容解析为HTML。然后是HTML文档的两个主要部分：<head>和<body>。<head>将包含有关页面的常规信息和元数据。
概述
<head>大部分不可见，描述了文档的一些基本的属性和信息(可以呈现的是title和icon)。<head>元素下的子元素主要包括<meta>、<title>、<base>、<link>、<style>和<script>这六个元素。
meta
<meta>标签(meta-information)用于提供页面有关的元数据，除了提供文档字符集、使用语言、作者等基本信息外，还涉及对关键词和网页等级的设定。通过设置不同的属性，元数据可以分为以下几种：如果设置了charset，即将对网页使用的字符集作出声明HTML5
如果设置了name，它是一个文档级的元数据，将附着在整个页面上
如果设置了http-equiv，它是一个编译指令，即由服务器提供的来指示页面应如何加载
如果设置了itemprop，将定义一个用户自定义的元数据(未实现)
1、charset
charset声明声明当前文档所使用的字符编码，但该声明可以被任何一个元素的lang特性的值覆盖。文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码
注意：字符编码必须写在<head>元素的最开始，如果位于<title>标签之后，那么<title>标签很可能会乱码
2、name
【关键词】
<meta name="keywords" content="HTML, CSS, XML" />
【描述】
<meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" />
【作者】
<meta name="author" content="littlematch">
【版权】
<meta name="copyright" content="本页版权">
【视口(移动端使用)】
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
【IE浏览器渲染】
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
如果安装了GCF(Google Chrome Frame谷歌内嵌浏览器框架GCF)，则使用GCF来渲染页面，如果没有安装，则使用最高版本的IE内核进行渲染
【双核浏览器渲染】
<meta name="renderer" content="webkit">
如果是双核浏览器，则使用webkit内核渲染
3、http-equiv
【定时跳转】
让网页多少秒刷新，或跳转到其他网页
<meta http-equiv="refresh" content="5">
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">【缓存过期时间】
可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式
<meta http-equiv="Expires" Content="0">
<meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT+0800">【禁止缓存】
用于设定禁止浏览器从本地机的缓存中调阅页面内容，用户无法脱机浏览
<meta http-equiv="Pragma" Content="No-cach">
【独立页面】
强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用
<meta http-equiv="windows-Target" content="_top">
【兼容模式】
Edge模式告诉IE以最高级模式渲染文档，也就是说，什么版本IE就用什么版本的标准模式渲染；chrome模式表示强制IE使用Chrome Frame渲染。Google官方提供了对Google Frame插件安装情况的检测，这里直接调用方法即可，如果检测到IE并未安装Google Frame，则弹出对话框提示安装。使用此插件，用户可以通过IE的用户界面，以Chrome内核的渲染方式浏览网页
下面表示如果当前浏览器版本是小于等于IE8的，则使用chrome，如果不是，则使用IE标准模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8">title
<title>元素定义文档的标题，显示在浏览器的标题栏或标签页上。它只可以包含文本，若是包含有标签，则包含的任何标签都不会被解释
<title>元素详细来说，有以下三个作用：
1、定义浏览器工具栏中的标题；
2、提供页面被添加到收藏夹时显示的标题；
3、显示在搜索引擎结果中的页面标题
注意：在所有HTML文档中，<title>都是必须的
<title>About Me</title>
base
<base>用于指定文档里所有相对URL地址的基础URL，为页面上所有链接规定默认地址和默认打开方式。文档中的基础URL可以使用document.baseURI进行查询
注意：一份文档最多一个<base>元素。如果指定了多个<base>`元素，只会使用第一个href和target值，其余都会被忽略
<base href="http://cnblogs.com" target="_blank">
link
<link>指定了外部资源与当前文档的关系，具有属性href、rel、media、hreflang、type和sizes。其中href和rel是常用的，href指定了链接的资源的地址(url)，而rel指定了资源的类型
【rel属性】
alternate 指示链接到该文档的另一个版本
author 指示链接到当前文档的作者主页
help 指向一个跟网站或页面相关的帮助文档
icon 引入代表当前文档的图标，新的sized属性与这个属性结合使用，指定链接图片的宽高
license 链接到当前的文档的版权声明
next 指示链接到文档是一组文档中的下一份
pingback 处理当前文档被引用情况的服务器地址
prefetch 指明需要缓存的目标资源
prev 标明了上一个文档
search 链接到可以用于搜索当前页面和相关页面的资源
sidebar 链接到可以作为附属上下文的文档
stylesheet 引入样式表
tag 创建应用于当前文档的标签
【media属性】
screen 计算机屏幕
tty 终端
tv 电视
projection 投影仪
handheld 手持设备
print 打印的页面
braille 盲文设备
aural 语音合成器
all 所有
【sizes属性】
sizes属性规定被链接资源的尺寸，且只有当被链接资源是图标时，才可使用该属性
<link rel="icon" href="demo.gif" type="image/gif" sizes="16x16" />
【引入图标】
<link rel="shortcut icon" href="ico.ico"/>
【引入外部样式表】
<link rel="stylesheet" type="text/css" href="mystyle.css" />
style
<style>元素包含了文档的样式化信息或者文档的一部分，常用于引入内部CSS样式
<style>
body{background-color: red;}
</style>
<style>主要包含以下属性
【type】
该属性以MIME类型(不应该指定字符集)定义样式语言。如果该属性未指定，则默认为‘text/css'
【media】
指定哪个媒体应该应用该样式
【title】
指定可选的样式表
【disabled】
如果指定该属性，关闭(不应用)样式规则到文档中的元素。
【scoped】
使用scoped属性，可以在页面任意位置添加CSS样式。但是这样就违背了结构与样式分离的原则，要小心使用。如果该属性存在，则样式应用于其父元素；如果不存在，则应用于整个文档。该属性只有chrome和firefox支持
<article>
<div>The scoped attribute</div>
<p>This text should be black</p>
<section>
<style scoped>
p { color: red; }
</style>
<p>This should be red.</p>
</section>
</article>script
<script>的作用是在HTML或XHTML文档中嵌入或引用可执行的脚本。没有async或defer属性的脚本和内联脚本会在浏览器继续解析剩余文档前被获取并立刻执行
【src】
这个属性定义引用外部脚本的URI，这可以用来代替直接在文档中嵌入脚本。有src属性的script元素标签内不应该再有嵌入的脚本
【type】
该属性定义script元素包含或src引用的脚本语言。属性的值为MIME类型，支持的MIME类型包括text/javascript, text/ecmascript, application/javascript和application/ecmascript。如果没有定义这个属性，脚本会被视作JavaScript。如果MIME类型不是JavaScript类型(上述支持的类型)，则该元素所包含的内容会被当作数据块而不会被浏览器执行
如果type属性为module，代码会被当作JavaScript模块
<!-- HTML4 and (x)HTML -->
<script type="text/javascript" src="javascript.js">
<!-- HTML5 -->
<script src="javascript.js"></script>
【defer】
这个布尔属性定义该脚本是否会延迟到文档解析完毕后才执行
【async】
async属性是HTML5新增的属性，IE9-浏览器不支持。该布尔属性指示浏览器是否在允许的情况下异步执行该脚本。该属性对于内联脚本无作用(即没有src属性的脚本）
javascript加载
正常情况下，当浏览器在解析HTML源文件时如果遇到外部的script，那么解析过程会暂停，并发送请求来下载script文件，只有script完全下载并执行后才会继续执行DOM解析
<script src="myBlockingScript.js"></script>
在下载过程中浏览器是被阻止做其他有用的工作的，包括解析HTML，执行其他脚本，以及展示CSS布局。虽然Webkit预加载扫描程序可以探测性地在下载阶段进行多线程下载，但是某些页面仍然存在很大的网络延迟
当前有很多技术来提升页面显示速度，但都需要额外的代码以及针对特定浏览器的技巧。现在，script可以通过添加async或者defer属性来让脚本不必同步执行
<script async src="myAsyncScript.js" οnlοad="myInit()"></script>
<script defer src="myDeferScript.js" οnlοad="myInit()"></script>
async和defer标注的script都不会暂停HTML解析就立刻被下载，两者都支持onload事件回调来解决需要该脚本来执行的初始化
两者的区别在于执行时的不同：async脚本在script文件下载完成后会立即执行，并且其执行时间一定在window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行；与此相对，浏览器确保多个defer脚本按其在HTML页面中的出现顺序依次执行，且执行时机为DOM解析完成后，document的DOMContentLoaded事件触发之前
HTML骨架结构
一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。而正是它们构成了HTML的骨架结构。
HTML
<html>元素代表HTML文档的根(root)，其他所有元素都是该元素的后代。<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由<head>标签定义，而主体由<body>标签定义
【xmlns】
xmlns属性用于指派文档的XML命名空间。预设值是"http://www.w3.org/1999/xhtml"，这在XHTML中是必要的，而在HTML中则是可选的
<html xmlns="http://www.w3.org/1999/xhtml">
HEAD
<head>标签用于定义文档的头部，它是所有头部元素的容器。<head>大部分不可见，描述了文档的一些基本的属性和信息(可以呈现的是title和icon)。<head>元素下的子元素主要包括<meta>、<title>、<base>、<link>、<style>和<script>这六个元素
<title>定义文档的标题，它是head部分中唯一必需的元素
如果在文档中忽略了<head>标签，则大部分浏览器会自动创建一个<head>元素
关于文档头部的更多信息移步至此
BODY
<body>表示的是HTML文档的主体内容，任何一个HTML文档，只允许存在一个<body>元素
【默认样式】
chrome/firefox/safari/IE8+
margin:8px;
IE7-
margin:15px 10px;
结构
在sublime编辑器中，输入!，再按住Tab键，就可以生成一个基本的HTML结构，结构如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>在实际中，文档的头部结构常常需要承载一些常用的功能，所以HTML结构较复杂，结构如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Document</title>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="5/style.css"/>
<link rel="shortcut icon" href="ico.ico"/>
</head>
<body>
</body>
</html>HTML块级元素
h
标题(Heading)元素有六个不同的级别，<h1>是最高级的，而<h6>则是最低的。一个标题元素能简要描述该节的主题
从<h1>到<h6>，重要性逐渐减小，字体大小也逐渐减小。在使用标题元素时，要注意以下几点
1、不要为了减小标题的字体而使用低级别的标题，而是使用CSS的font-size样式
2、避免跳过某级标题：始终要从<h1>开始，接下来使用<h2> 等等
3、使用<section> 元素时，为了方便起见，避免重复在一个页面上使用<h1>，<h1>应该用来表示页面的标题，其他的标题当从<h2>开始。使用<section>时，应当每个 section都使用一个<h2>
【默认样式】
//从h1到h6
margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0;
font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em;
font-weight: bold;HTML5新增了<hgroup>标签，它表示标题组，用于组合标题，只在区块需要有多个级别的标题时使用
<hgroup>
<h1>水果</h1>
<h2>苹果</h2>
</hgroup>p
<p>元素(paragraph)表示文本的一个段落，该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进
【默认样式】
margin: 16px 0;
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>段落1
段落2
段落3
div
<div>元素(divide)(或HTML文档分区元素)是一个通用型的流内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求(使用class或id特性)或者对具有相同特性的一组元素进行分组(比如lang)，它应该在没有任何其它语义元素可用时才使用(比如<article>或<nav>)
hr
<hr>元素表示段落级元素之间的主题转换(例如，一个故事中的场景的改变，或一个章节的主题的改变)。在HTML的早期版本中，它是一个水平线。现在它仍能在可视化浏览器中表现为水平线，但目前被定义为语义上的，而不是表现层面上
<hr>用于段落级元素之间的分割，区块之间不需要使用<hr>进行分割
<p>段落1</p>
<hr>
<p>段落2</p>段落1
段落2
【默认样式】
margin: 8px 0;
border-style: inset;
border-width: 1px;pre
<pre>元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符(比如空格和换行符)都会显示出来，通常表示已排版的内容，如代码块和字符画等
<pre>
body {
color:red;
}
</pre>【默认样式】
margin: 1em 0;
white-space: pre;
blockquote
<blockquote>元素(或者HTML块级引用元素)，代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。若引文来源于网络，则可以将原内容的出处URL地址设置到cite特性上，若要以文本的形式告知读者引文的出处时，可以通过<cite>元素
[注意]引用的署名必须在引用外部定义
<blockquote cite="http://baike.baidu.com/view/921793.htm">
<p>横眉冷对千夫指,俯首甘为孺子牛</p>
</blockquote>
<p>鲁迅</p>【默认样式】
margin: 1em 40px;
address
<address>元素可以让作者为它最近的<article>或者<body>祖先元素提供联系信息。在后一种情况下，它应用于整个文档
当表示一个和联系信息无关的任意的地址时，使用<p>元素而不是<address>元素。这个元素不能包含除了联系信息之外的任何信息，比如出版日期(这应该包含在<time>元素中)。通常，<address>元素可以放在当前section的<footer>元素中，如果存在的话
【默认样式】
font-style: italic;
其他
除了上面介绍的<div>、<h>、<p>、<hr>、<blockquote>、<address>标签外，还有一些前面已经介绍过的标签属于块级标签
包括骨架类标签(<html>、<body>)，列表类标签(<ul>、<ol>、<dl>、<dd>、<dt>)，表单类标签(form、<fieldset>、<output>、<legend>、<optgroup>、<option>)，HTML5新增的结构标签(<article>、<aside>、<header>、<footer>、<nav>、<section>)，HTML5新增的多媒体标签(<figure>、<figcaption>)，HTML5新增的功能性标签(<summary>、<details>)
最后
可能有人会觉得<br>标签应该是一个块级元素，因为它有换行，与块级元素的特征很相似。但它实际上是一个内联元素，它的用途是在文本中产生一个换行
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
