TOC

This article is currently in the process of being translated into Chinese (~6% done).

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>

If you have looked at the markup of HTML documents before, you might have seen a doctype declaration that looked a lot like this:

<!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会强制浏览器进入标准模式-这个“新”方式来阅读你的文档。用标准模式,大部分浏览器会用同样的方式阅读你的文档并且准确的读出你写的内容。

To make the HTML5 document easier for yourself to understand, you would want to use the two section-elements <head> and <body>. Using these sections you clearly separate the information about your page (the head) from the actual content (body). Using these, you webpage would look like this:

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

What just happened with the indenting, you might think? Whether or not you want to use indenting is your own choice but it visualizes the structure of your page and makes it easier to see at a glance.

The last thing you would want to add is the <html> element and it is placed right after the doctype-declaration.

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

Congratulations you’ve just created your first HTML5 webpage! Did you notice how the <p> element is inside the <body> element? That is called nesting elements and it is a very essential part of the HTML structure. I will leave it at this for now, but I just wanted to introduce to you the idea of nesting elements.

What you have learned

  • Always declare the doctye - <!DOCTYPE html>
  • Use the element <head> to separate the information about your page
  • Use the element <body> to separate the actual content of your webpage
  • Using <html>, <head>, and <body> is a matter of style when you use HTML5, but it makes the structure of the page clearer to you.
  • Indenting your markup makes it easier to comprehend
  • You can nest one element inside another element
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!