1、基本的文档结构
文档元素只有4个，但是任何HTML文档都需要这些元素。
1.1 DOCTYPE元素
每个HTML文档都必须以DOCTYPE元素开头，
- 通知浏览器要处理的是HTML内容
- 用来标记文档内容的HTML所属的版本
HTML5中只有一种写法：
<!DOCTYPE HTML>
注意，没版本号不用写，没有结束标签，把它放在开头就好
1.2 html元素
也叫根元素。有个manifest属性。
<!DOCTYPE HTML>
<html>
内容
</html>
1.3 head元素
head元素包含着文档的元数据。在HTML中，元数据向浏览器提供了有关文档内容和标记的信息，此外还可以包含脚本和对外部资源（比如CSS样式表）的引用。
必须有个html父元素，有个title元素，其他元数据可有可无。
每个HTML文档都应该包含一个head元素。
1.4 body元素
HTML文档的元数据和文档信息包装在head元素中，文档的内容则包装在body元素中。
属性alink,background,bgcolor,link,margintop,marginbottom,marginleft,marginright,margwidth,text,vlink属性不在使用，都可以用css效果实现。
2、元数据元素说文档
元数据本身不是文档内容，但提供了关于后面文档内容的信息。放在head元素中。
2.1 设置文档标题，title元素
title元素的作用是设置文档的标题或名称。每个HTML文档都应该有且只有一个title元素。让用户可以区分每个浏览器窗口或浏览器的各个标签页
2.2 设置相对URL的解析基准，base元素
base元素可用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。
相对链接省略了URL中的协议、主机和端口部分，需要根据别的URL(要么是base元素中指定的URL，要么是用以加载当前文档的URL)得出其完整形式。
base元素还能设定链接在用户点击时的打开方式,以及提交表单时浏览器如何反应。
至少应该包含一个base元素，通常是head元素中位置靠前的子元素之一，以便随后的元数据元素中的相对URL可以用上其设置的基准URL。
<base href="http://titan/listings/"/>
<a href="page.html">page</a> <!-- 访问的真实路径为http://titan/listings/page.html-->
如果不用base元素为href设置一个基准URL那么会将当前文档的路径认定为所有相对与URL的解析基准
使用target属性：target属性的作用是告诉浏览器该如何打开URL。这个属性的值代表着一个浏览上下文( browsing context).与a和iframe元素结合使用。
2.3 用元数据说明文档,meta元素
**属性：**name、content、charset和http-equiv
1）指定名/值元数据对：
<meta name="author" content="Adam freeman">
meta元素使用的预定义元数据类型：
| 元数据名称 | 说明 |
|---|---|
| application name | 当前页所属Web应用系统的名称 |
| author | 当前页的作者名 |
| description | 当前页的说明 |
| generator | 用来生成HTML的软件名称(通常用于以Ruby on Rails、ASP.NET等服务器端框架生成HTML页的情况下) |
| keywords | 一批以逗号分开的字符串，用来描述页面的内容 |
除了上面的元数据类型，还可使用元数据扩展，http://wiki.whatwg.org/wiki/MetaExtensions有这些扩展的时常更新的清单。有些用的多，有些不多。比如：robots，告诉搜索引擎该如何对待该文档。
<meta name="robots" content="noindex"/>
noindex:表示告诉浏览器不要索引本页
noarchive:表示不要将本页存档或缓存
nofollow:表示不要顺着本页中的链接继续搜索下去
2）声明字符编码
meta元素的另一种用途是声明HTML文档内容所用的字符编码。
<meta charset="utf-8"/>
utf-8能以最少的字节数表示所有的unicode字符
3）模式HTTP标头字段
meta元素的最后一种用途是改写HTTP(超文本传输协议）标头字段的值。
服务器和浏览器之间传输HTML数据时一般用的就是HTTP。只要知道服务器的每条响应都包含着一组向浏览器说明其内容的字段即可。meta元素可以用来模拟或替换其中三种标头字段。
<meta http-equiv="refresh" content="5"/> #每隔5秒在次载入一下页面
http-equiv属性允许使用的值：
| 属性值 | 说明 |
|---|---|
| refresh | 以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载人当前页面 也可以另行指定一个URL让浏览器载人。如 |
| default-style | 指定页面优先使用的样式表。对应的content属性值应与同一文档中某个style元素或link元素的title属性值相同 |
| content-type | 这是另一种声明HTML页面所用字符编码的方法。如 |
2.4 定义CSS样式，style元素
用来定义 HTML文档内嵌的CSS样式
可以包含元数据的元素：head,div,noscript,section,article,asice
属性：type,media,scoped
<style type="text/css">
a{
color:white;
}
</style>
1)指定样式类型
type属性可以用来将所定义的样式告诉浏览器，但浏览其只有CSS一种，所以值总是text/css
2)指定样式作用范围
scoped属性存在，那么定义的样式只作用于该元素的父元素及兄弟元素，要是不用scoped属性的话，在HTML文档中任何地方用style元素的样式都将作用于整个文档。
3）指定样式使用的媒体
media属性可用来表明文档在什么情况下应该使用该元素中定义的样式。
<style media="screen" type="text/css">
</style>
只有在浏览器在屏幕上显示文档的时候用的是第一个style元素中的样式。
media属性用的规定设备值：
| 设备 | 说明 |
|---|---|
| all | 将样式用于所有设备（默认值) |
| aural | 将样式用于语音合成器 |
| braille | 将样式用于盲文设备 |
| handheld | 将样式用于手持设备 |
| projection | 将样式用于投影机 |
| 将样式用于打印预览和打印页面时 | |
| screen | 将样式用于计算机显示器屏幕 |
| tty | 将样式用于电传打字机之类的等宽设备 |
| tv | 将样式用于电视机 |
media还有一些特性，可以设计更具体的使用条件：
<style media="screen AND (max-width:500)">
<style media="screen AND (min-width:500)">
除了AND 还有OR和NOT和逗号
**media元素使用的特性：**都可以用min-或max-修饰构成阀值，而不是精确值
| 特性 | 说明 | 示例 |
|---|---|---|
| width height | 指定浏览器窗口的宽度和高度。单位为px，代表像素 | width:200px |
| device-width device-height | 指定整个设备(而不仅仅是浏览器窗口)的宽度和高度。单位为px，代表像素 | min-device-height:200px |
| resolution | 指定设备的像素密度。单位为dpi(点/英寸)或dpcm(点/厘米) | max-resolution:600dpi |
| orientation | 指定设备的较长边朝向。支持的值有portrait和landscape。该特性没有限定词 | orientation:portrait |
| aspect-ratio device-aspect-ratio | 指定浏览器窗口或整个设备的像素宽高比。其值表示为像素宽度与像素高度的比值 | min-aspecratio:16/9 |
| color monochrome | 指定彩色或黑白设备上每个像素占用的二进制位数 | min-monochrome:2 |
| color-index | 指定设备所能显示的颜色数目 | max-color-index:256 |
| scan | 指定电视的扫描模式。支持的值有progressive和interlace。该特性没有限定词 | scan:interlace |
| grid | 指定设备的类型。网格型设备使用固定的网格显示内容，例如基于字符的终端和单行显示的寻呼机。支持的值有0和1（ 1代表网格型设备）。该特性没有限定词 | grid:o |
2.5 指定外部资源，link元素
用来在HTML文档和外部资源之间建立联系，一般与CSS样式表建立联系。
允许有的父元素：head,noscript
属性：href,rel,hreflang,media,type,sizes
原来的charset,rev,target都不使用了
| 属性 | 说明 |
|---|---|
| href | 指定link元素指向的资源的URL |
| hreflang | 说明所关联资源使用的语言 |
| media | 说明所关联的内容用于哪种设备。该属性使用的设备和特性值和style的media的一样 |
| rel | 说明文档与所关联资源的关系类型 |
| sizes | 指定图标的大小。本章后面有一个用link元素载入网站标志的例子 |
| type | 指定所关联资源的MIME类型，如text/css、imagelx-icon |
rel属性常用：
| 值 | 说明 |
|---|---|
| alternate | 链接到文档的替代版本，比如另一种语言的译本 |
| author | 链接到文档的作者 |
| help | 链接到当前文档的说明文档 |
| icon | 指定图标资源 |
| license | 链接到当前文档的相关许可证 |
| pingback | 指定一个回探（ pingback)服务器。从其他网站链接到博客的时候它能自动得到通知 |
| prefetch | 预先获取一个资源 |
| stylesheet | 载入外部样式表 |
1）载入样式表
<link rel="stylesheet" type="text/css" href="styles.css"/>
2)为页面定义网站标志
<link rel="shortcut icon" href="fa.ico" type="image/x-icon"/>
3)预先获取资源
可以要求浏览器预先获取预计很快就要用到的资源
<link rel="prefetch" href="/page.html">
读取到这里的时候就载入HTML页面page.html，为后面用户点击某个连接以执行其他的操作做准备
3、使用脚本元素
与脚本相关的元素有两个。第一个是script，用于定义脚本并控制其执行过程。第二个是noscript，用于规定在浏览器不支持脚本或禁用了脚本的情况下的处理办法。
一般放在head中，也可以放在其他元素中，但建议 放在head中。
3.1 script元素
script元素可以用来在页面中加入脚本，方式有在文档中定义脚本和引用外部文件中的脚本两种。最常用的脚本类型是JavaScript，不过浏览器也的确支持一些别的脚本语言，每定义或导入一段脚本需要使用一个script元素。
属性：type,src,defer,async,charset
language属性不在使用
| 属性 | 说明 |
|---|---|
| type | 表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略 |
| src | 指定外部脚本文件的URL |
| defer,async | 设定脚本的执行方式这两个属性只能与src属性一同使用 |
| charset | 说明外部脚本文件所用字符编码，该属性只能与src属性一同使用 |
1)定义文档内嵌脚本
<script>
document.write("this is from the script");
</script>
2)载入外部脚本库
3)推迟脚本的执行
可以用async和defer属性对脚本的执行方式加以控制。
defer属性告诉浏览器要等页面载人和解析完毕之后才能执行脚本。
async 属性规定一旦脚本可用，则会异步执行。
<script defer src="simple.js"></script>
4)异步执行脚本
async属性解决的是另一类问题。前面说过,浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面。各个script元素依次（即按其定义的次序)同步(即在脚本加载和执行进程中不再管别的事情)执行。
作为处理脚本的默认方式，同步顺序执行自有其意义所在。不过有些脚本并不需要这杨处理，对这类脚本可以使用async属性提高其性能。
这方面的一个典型例子是跟踪脚本（ tracking script )。这种脚本可以汇报用户的网站访问记录以便广告公司根据用户的浏览习惯定制和投放广告，或者收集网站访问者的统计数据以供分析，诸如此类。这些脚本自成一体，一般不需要与HTML文档中的元素互相作用。为等待它们加载然后向自己的服器发回报告而推迟显示页面没有任何意义。
使用了async属性后，浏览器将在继续解析HTML文档中其他元素(包括其他script元素)的同时异步加载和执行脚本。
<script async src="simple.js"></script>
3.2 noscript元素
noscript元素可以用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。
尽管现在JavaScript已经得到了广泛支持，但是仍然有一些专门用途的浏览器不支持它。而且就算浏览器支持JavaScript，用户也可能会禁用它——许多大公司都有禁止员工启用JavaScript的规定。noscript元素可以用来应对这些用户，其办法是显示不需要JavaScript功能的内容，再不济也要告诉他们需要启用JavaScript才能使用此网站或页面。
<head>
<script defer src="simple.js"></script>
<noscript>
<p>
you cannot use this page without javascript
</p>
</noscript>
</head>
或者 向不支持 javascript时将其引到另一个URL
<noscript>
<meta http-equiv="refresh" content="0;http://ww.apress.com"/>
</noscript>将禁用了javascript的引到上面这个网站
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
