TOC

This article has been localized into Chinese by the community.

HTML语言介绍:

第一个Web页面

以下是一个最简单的HTML5文件示例。最开始是HTML5 doctype,接下来是页面标题,再往后是内容,本例中内容部分是一个段落。

<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>

可以想象页面在浏览器中的样子——页面标题"Your first HTML5 Document",页面左上方显示文字 "Okay, now we’re going somewhere!" 。

doctype 声明告知所有阅读文档者,接下来是HTML内容。

<!DOCTYPE html>

如果你之前看过HTML文档的标记符号,那你可能见过这种类似的文档类型声明:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

甚至专业的网页开发者都需要从一个文档复制粘贴这个长DOCTYPE声明到另一个文档-这个新的而且简单的DOCTYPE是很容易记住的而且不必声明版本,所有新的未来的特性都会自动地应用在你的网页上

DOCTYPE有什么作用?

但是到底为什么会有DOCTYPE?所有的浏览器都有两种不同阅读你文档的模式-标准模式和怪异模式。如果在浏览器处理的时候你不告诉他们这个文档的类型,它将会进入怪异模式。思考一下以前阅读文档的方式-可能有一些漏洞而且你可以确定不是所有的浏览器都用同样的方式阅读你的文档。声明一个DOCTYPE会强制浏览器进入标准模式-这个“新”方式来阅读你的文档。用标准模式,大部分浏览器会用同样的方式阅读你的文档并且准确的读出你写的内容。

为了让你自己能更容易理解HTML5文档,你会利用到<head> 和 <body>这两个分段元素。利用这些分段你可以清晰的将你页面中的页面信息(head)和主体内容部分(body)分开。利用上了他们,你的页面就会看起来像这样:

<!DOCTYPE html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>

缩进怎么变成这样了?你也许会这么想。用不用缩进是你自己的选择,但是缩进会使得你代码更容易一目了然。

最后加上<html>元素,它就紧挨在文件类型声明的后面。

<!DOCTYPE html>
<html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>
</html>

恭喜,你刚刚创建了你的第一个HTML5网页!你注意到了<p> 是怎么被包含在<body>元素里的了吗?这个叫做嵌套元素,这是一个在HTML结构中非常重要的部分。我暂时不详细介绍这个,但我想想你介绍嵌套元素这个概念。

你刚刚学了:

  • 一定要声明文件类型-<!DOCTYPE html>
  • 利用<head>元素来区分开网页信息。
  • 利用<body>元素来区分你网页的实质内容。
  • 利用<html>, <head>, 和<body>这些元素只是你使用HTML5时的一种风格,但他们会让你的页面结构能够一目了然。
  • 缩进你的标记符号会让他们更加容易理解。
  • 你可以将一个元素嵌套在另一个元素之中

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!
adplus-dvertising