1.学习HTML5的内容，首先让我们来看一下HTML的元素组成吧，本章内容如下：
1.1 构建基本的文档结构
先从文档元素讲起，这些基础成分确定了HTML文档的轮廓以及浏览器的初始环境。文档元素只有4个，但是任何HTML文档都需要所有这些元素。
1.1.1 DOCTYPE元素
DOCTYPE元素独一无二，而且自成一类。每一个HTML文档都必须以DOCTYPE元素开头。浏览器据此得知自己将要处理的是HTML内容。即使省略DOCTYPE元素，大多数浏览器仍能正确显示文档内容，只不过依赖浏览器的这种表现不是好习惯。
<!DOCTYPE HTML>
这个元素告诉浏览器两件事情：第一，它处理的是HTML文档；第二，用来标记文档内容的HTML所属的版本。版本号不用写。浏览器能自动探测出这里所用的是HTML5。该元素没有结束标签。只需要在文档开头放上它唯一的标签就行。
1.1.2 html元素
html元素更恰当的名称是根元素，它表示文档中HTML部分的开始。
<!DOCTYPE html>
<html>
...此处省略内容和元素...
</html>1.1.3 head元素
head元素包含着文档的元数据。在HTML中，元数据向浏览器提供了有关文档内容和标记的信息，此外还可以包含脚本和对外部资源的引用（比如CSS样式表）。
每个HTML文档都应该包含一个head元素，而后者必须包含一个title元素。
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World!</title>
</head>
</html>1.1.4 body元素
HTML文档的元数据和文档信息包装在head元素中，文档的内容则包装在body元素中。body元素总是紧跟在head元素之后，它是html元素的第二个子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<p>I like apples and oranges.</p>
</body>
</html>1.2 用元数据元素说明文档
元数据元素可以用来提供关于HTML文档的信息。它们本身不是文档内容，但提供了关于后面的文档内容的信息。元数据元素应放在head元素中。
1.2.1 设置文档标题
title元素的作用是设置文档的标题或名称。浏览器通常将该元素的内容显示在其窗口顶部或标签页的标签上。每个HTML文档都应该有且只有一个title元素。
1.2.2 设置相对URL的解析基准
base元素可用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。相对链接省略了URL中的协议、主机和端口部分，需要根据别的URL（要么是base元素中指定的URL，要么是用以加载当前文档的URL）得出其完整形式。base元素还能设定链接在用户点击时的打开方式，以及提交表单时浏览器如何反应。
HTML文档至少应该包含一个base元素。它通常是head元素中位置最靠前的子元素之一，以便随后的元数据元素中的相对URL可以用上其设置的基准URL。
1.使用href属性
href属性指定了解析文档此后部分中的相对URL要用到的基准URL。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example</title>
<base href="http://hclound/listings/" />
<link rel="stylesheet" href="">
</head>
<body>
<p>I like apples and oranges.</p>
<a href="page2.html">page 2</a>
</body>
</html>此例将基准URL设置为http://hclound/listings/。其中hclound是开发服务器的名称，而listings是服务器上包含示例文件的目录。
在文档的后面部分有一个用来生成超链接的a元素，它使用了page2.html这个相对URL。用户点击这个超链接时，浏览器就会把基准URL和相对URL拼接成完整的URL：http://hclound/listings/page2.html
1.2.3 用元数据说明文档
meta元素可以用来定义文档的各种元数据。它有多种不同用法，而且一个HTML文档中可以包含多个meta元素。
1.3 使用脚本元素
与脚本相关的元素有两个。第一个是script，用于定义脚本并控制其执行过程。第二个是noscript，用于规定在浏览器不支持脚本或禁用了脚本的情况下的处理办法。
1.3.1 script元素
script元素可以用来在页面中加入脚本，方式有在文档中定义脚本和引用外部文件中的脚本两种。位于head元素中的script元素属于元数据元素，位于其他元素（如body或section）中的则属于短语元素。
1.定义文档内嵌脚本
定义脚本最简单的方式是内嵌定义，也即将JavaScript语句内嵌在HTML页面中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example</title>
<base href="http://hclound/listings/" />
<link rel="stylesheet" href="">
</head>
<body>
<p>I like apples and oranges.</p>
<a href="page2.html">page 2</a>
<script>
document.write("This is from the script");
</script>
</body>
</html>2.载入外部脚本库
可以把脚本放到单独的文件中，然后用script元素载入HTML文档。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Example</title>
<base href="http://hclound/listings/" />
<link rel="stylesheet" href="">
<script src="simple.js"></script>
</head>
<body>
<p>I like apples and oranges.</p>
<a href="page2.html">page 2</a>
</body>
</html>3.推迟脚本的执行
可以用async和defer属性对脚本的执行方式加以控制。defer属性告诉浏览器要等页面载入和解析完毕之后才能执行脚本。
<script defer src="simple.js"></script>
4.异步执行脚本
浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面。各个script元素依次同步执行。
使用async属性，浏览器将在继续解析HTML文档中其他元素的同时异步加载和执行脚本。
<script async src="simple.js"></script>
1.3.2 noscript元素
noscript元素可以用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。
<noscript>
<h1>Javascript is required!</h1>
<p>You cannot use this page without Javascript</p>
</noscript>除此之外还有一种选择是在浏览器不支持JavaScript时将其引致另一个URL。这需要在noscript元素中加入一个meta元素。
<noscript>
<meta http-equiv="refresh" content="0; http://www.apress.com" />
</noscript>
3779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
