HTML5和CSS课程(4)
导语
从今日起计划推出系列课程《HTML5和CSS课程》。内容来源于《HTML5与CSS3基础教程（第8版）》。如果你喜欢看书，请购买正版书籍。以下内容均来源于对该本书的解读。
开始编写网页
每个 HTML 文档都应该包含以下基本成分。
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <title></title></head>
<body>
</body>
</html>
上面代码是每个 HTML 页面的基础。缩进并不重要，但结构很重要。在这个例子中，默认语言（由lang 属性指定）被设为代表英语的 en。字符编码被设为 UTF-8。
说明
html 元素（包含 lang 属性，该属性不是必需的，但推荐加上）
head 元素
说明字符编码的 meta 元素
title 元素
body 元素
上面的代码呈现再页面上就等同于一张空白的纸，因为body 里面没有任何内容，如图 下图：
01
编写 HTML5 页面开头的步骤
1、输入 <!DOCTYPE html>，声明页面为HTML5 文档。
2、输入 <html>，开始文档的实际 HTML 部分。其中， languagecode 是页面内容默认语言的代码。例如，<html> 表示西班牙， <html>表示法语。还可以写得更详细些，如 <html> 表示美国英语，而 <html> 则表示英国英语 。
3、输入 <head>，开始网页文档的头部。
4、输入 <meta charset="utf-8"/>（或 <meta charset="UTF-8"/>）， 将 文 档 的 字 符 编 码声明为 UTF-8。空格和斜杠是可选的，因此<meta charset="utf-8"> 跟其他表达式形式都是有效的。（ UTF-8 以外的其他字符编码也是有效的，不过 UTF-8 的适用面最广，很少有需要用其他编码的情况。）
5、输入 <title></title>。这里将包含页面的标题。
6、输入 </head>，结束页面文档的头部。
7、输入 <body>，开始页面的主体。这里是放置页面内容的地方。
8、为页面内容预留一些空行。
9、输入 </body>，结束主体。
10、输入 </html>，结束页面。
我们会发现上面的步骤似乎比较多，不过，由于所有的页面都是这样开始编写的，可以使用一个单独的 HTML 页面作为创建每个页面的模板，以节省输入的时间。实际上，很多代码编辑器都可以为新页面指定初始的代码，这样就更简单了。
01
网页的两个部分
HTML页面分为两个部分： head 和 body，DOCTYPE 出现在每个页面的开头，
在文档 head 部分，通常要指明页面标题，提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载 JavaScript 文件（不过，出于性能考虑，多数时候在页面底部 </body>标签结束前加载 JavaScript 是更好的选择）。除了 title，其他 head 里的内容对页面访问者来说都是不可见的。body 元素包住页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容，也就是访问者看见的东西。
提 示
使 用 HTML5 DOCTYPE 可 以 确 保浏览器以可靠的模式呈现页面，同时告诉HTML 验证器根据 HTML5 允许的元素和语法检查代码。
提 示
HTML5的DOCTYPE不区分大小写。有的人可能输入 <!doctype html>，不过，使用 <!DOCTYPE html> 是更常规的做法。
提 示
搜索引擎可能会根据 lang 属性指定的语言区分搜索结果，从而仅显示与搜索词语言相同的页面。屏幕阅读器也可能通过指定的语言调整其发音。
提 示
要 确 保 将 你 的 代 码 编 辑 器 配 置 为以 UTF-8 保 存 文 件， 与 代 码 中 通 过 <metacharset="utf-8" /> 语句指定的编码相同。要注意的是并非所有的编辑器都默认以 UTF-8 保存文件。如果页面没有设置为 UTF-8，有的字母（如带重音符的 i、带波形符（～）的 n）就会变成一些奇怪的字符。
提 示
嵌套在 head 元素里的代码不一定要缩进。不过，缩进可以让你一眼看出 head 从哪里开始，包含什么内容，以及在哪里结束。在有些页面中， head 变得很长并不少见。
有了 HTML5 以后，编写代码的开头部分变得容易多了。特别是跟从前的 DOCTYPE 相比，HTML5 的 DOCTYPE 短得让人惊讶。在 HTML 4 和 XHTML 1.0 时代，有好几种可供选择的DOCTYPE，每一种都会指明HTML 的版本，以及使用的是过渡型还是严格型模式。幸好，所有的浏览器，无论新旧，都理解HTML5 的 DOCTYPE，因此你可以坚持在所有页面中使用它，忘掉过去的那些 DOCTYPE。
好，今天的课程就到这里！！！
