（三）文档结构（上）

一、基本文档结构

1.1 文档元素有4种，任何HTML文档都需要这些元素。

1.1.1 DOCTYPE元素

　　每个HTML文档都必须以DOCTYPE元素开头。浏览器据此得知自己将要处理的是HTML内容。但是即使省略这个元素，大多数浏览器仍能正确地显示文档内容，但是在编写文档的时候还是最好不要省略。

<!DOCTYPE html>

解析：上述语句告诉浏览器： 1. 处理的是HTML文档。 2.用来标记文档内容的HTML所属的版本。该元素没有结束标签，放于文档开头即可。

　　　　1.1.2 html元素

html元素表示文档中的html部分的开始。

<!DOCTYPE html>
<html>
        ...此处省略内容和元素...
</html>

　　　　1.1.3 head元素

head元素包含文档的元数据。元数据向浏览器提供了有关文档内容和标记的信息，此外还包含脚本和对外部资源（比如CSS）的引用。
每个文档都应该有一个head元素，而每个head元素都必须有title元素。

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
</html>

　　　　1.1.4 body元素

HTML文档的元数据和文档信息包装在head元素中，文档的内容则包装在body元素中。 body元素总是紧跟在head元素之后，他是html元素的第二个子元素。

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
	</head>
	<body>
		<p>我是第一个文档</p>
	</body>
</html>

二、用元数据元素说明文档

元数据元素可以用来提供关于HTML文档的信息，它们本身不是文档内容，元数据元素应该被放于head元素中。

2.1 元数据之title元素：设置文档标题

<!DOCTYPE html>
<html>
	<head>
		<title>test</title>
	</head>
	<body>
		
	</body>
</html>

2.2 元数据之：base元素：设置相对URL的解析基准

base元素可用来设置一个基准URL，让html文档中的相对链接在此基础上进行解析。相对链接省略了URL中的协议、主机和端口部分，需要根据别的URL（要么是base元素中指定的url 要么是用以加载当前文档的url）得出其完整形式。 base元素还能设定链接在用户点击时的打开方式，以及提交表单时浏览器如何反应。
局部属性：href、target

<!DOCTYPE html>
<html>
	<head>
		<title>第一个文档</title>
		<base href="http://">
	</head>
	<body>
		<a href="www.baidu.com">百度</a>
		<a href="http://sina.com">新浪</a>
	</body>
</html>

解析：第一个a元素链接的目的地址是“www.baidu.com”，为相对URL，浏览器会吧相对URL与基准URL（这里是base元素中的URL）拼凑成完整的URL，即“http://www.baidu.com” 。第二个a标签的URL是完整的URL，浏览器就不会把这个URL与基准URL拼接。

　　注意：如果不用base元素，或不用其href属性设置一个基准URL,那么浏览器会将当前文档的URL认定为所有相对URL的解析基准。例子如下：

<!DOCTYPE html>
<html>
	<head>
		<title>第一个文档</title>
	</head>
	<body>
		<a href="www.baidu.com">百度</a>
	</body>
</html>

点击“百度”：

解析：如图可知，上诉例子的文档URl为“localhost：8080/test/index.html”，在这里文档中的a元素的url为相对URL，故访问的时候会以当前文档URL作为基准URL，故相对URL和基准URL拼凑为“localhost：8080/test/www.baidu.com” 自然无法访问。

2.3 元数据之meta元素

meta元素有多种用法，而且一个HTML文档中可以有多个meta元素。

　　用法1：搜索引擎优化（SEO）

　　　　name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

　　　　meta标签的name属性语法格式是：

　　　　　　<meta name="参数"content="具体的参数值">。

　　　　其name的参数有：　　

A、Keywords(关键字)　

说明：keywords用来告诉搜索引擎你网页的关键字是什么。

举例：<metaname="keywords"content="science,education,culture,politics,ecnomics，relationships,entertaiment,human">

B、description(网站内容描述)

说明：description用来告诉搜索引擎你的网站主要内容。

举例：<metaname="description"content="Thispageisaboutthemeaningofscience,education,culture.">

C、robots(机器人向导)

说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。

举例：<metaname="robots"content="none">

D、author(作者)

说明：标注网页的作者

举例：<metaname="author"content="root,root@xxxx.com">

　　用法2：声明字符编码。

<!DOCTYPE html>
<html>
	<head>
		<title>第一个文档</title>
		<base href="http://">
		<meta charset="ISO">
	</head>
	<body>
		<a href="www.baidu.com">百度</a>
	</body>
</html>

用法3：改写HTTP桥头字段的值。

　　　服务器和浏览器之间传输HTML数据时一般用的是HTTP，服务器每条响应都包含着一组向浏览器说明其内容的字段。

<!DOCTYPE HTML>
<html>
	<head>
		<title>测试文档</title>
		<meta http-equiv="refresh" content="5">
		<meta http-equiv="content-type" content="text/html;charset=iso">
	</head>
	<body>
		<p>	本页面5秒刷新一次</p>
	</body>
</html>

解析： http-equiv属性还有一个参数， <meta http-equiv="default-style" content=" "/> 指定页面优先使用的样式表，对应的content属性值应与同一文档中某个style元素或link元素title属性值相同。

2.4 元数据之style元素

局部属性： type、media、scoped

<!DOCTYPE html>
<html>
	<head>
		<title>测试元数据中的style属性</title>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8">
		<style type="text/css">
			p{background-color: grey;
			color:white;
			padding:0px;
			}
		</style>
		
	</head>
	<body>
		<p>我是一个段落</p>
	</body>
</html>

解析： style元素可以出现在HTML文档中的各个部分，一个文档可以包含多个style元素，目前为止type属性的值总是“text/css”

<!doctype html>
<html>
	<head>
		<title>测试style标签中的media属性</title>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8">
		<style type="text/css" media="print">
			p{background-color: grey;
			color:white;
			padding:0px;
			}
		</style>
		<style type="text/css" media="screen">
			p{background-color: white;
			color:red;
			padding:0px;
			}
		</style>
	</head>
	<body>
		<p>我是段落</p>
	</body>
</html>

缩小页面（width<400px）

解析：使用media属性可用来表明文档在什么情况下应该使用该元素中的定义的哪些样式。上述例子，media="print" 表示将样式用于打印页面预览和打印页面时， media的属性还有如下：

media属性中的(min-500px)指定特性，包括：
1）width height：指定浏览器窗口的宽度和高度，单位px，例如：200px
2）device-width device-height：指定整个设备（而不仅仅是浏览器窗口）的宽度和高度，单位px，例如：min-device-height:200px
3）resolution：指定设备的像素密度，单位dpi（点/英寸）或dpcm（点/厘米），例如：max-resolution:600dpi
4）orientation：指定设备的较长边朝向，可选值为portrait和landscape
5）aspect-ratio device-aspect-ratio：指定浏览器窗口或整个设备的像素宽高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白设备上每个像素占用的二进制位数，例如：min-monochrome:2
7）color-index：指定设备所能显示的颜色数目，例如：max-color-index:256
8）scan：指定电视的扫描模式，包括值progressive和interlace
9）grid：指定设备的类型，支持的值为0和1（1代表网格型设备，使用固定的网格显示内容）

<!doctype html>
<html>
	<head>
		<title>测试style标签中的media属性</title>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8">
		<style type="text/css" media="screen AND (max-400px)">
			p{background-color: grey;
			color:white;
			padding:0px;
			}
		</style>
		<style type="text/css" media="screen AND (min-400px)">
			p{background-color: white;
			color:red;
			padding:0px;
			}
		</style>
	</head>
	<body>
		<p>我是段落</p>
	</body>
</html>

全屏时（width大于400px）

解析：本例中使用了AND来组合设备和特性条件，除了AND,还可以使用NOT和表示OR的逗号（，）。

width等特定通常会跟限定词min和max配合使用，若非特别指明，上述的特性都可以用min- 或 max- 修饰。值得注意的是min-width：400px 指的是最小长度400px即大于400px才会应用此样式。