宝石风暴

書名： Practical Web Development
作者名： Paul Wellens
本章字數： 798字
更新時間： 2021-07-16 13:14:06

The structure and syntax of an HTML document

An HTML document is a text file with a name ending in .html, for example, hello.html. A modern, minimal HTML document looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Hello, world</title>
</head>
<body>
<h1>Hello, World</h1>
</body>
<html>

Doctype

The first line specifies the document type (<!DOCTYPE html>). Today, this can be as simple as the word html telling a browser that this file is to be interpreted as an HTML5 document. Documents written to the older specifications contain the name of that spec followed by a path to a Document Type Definition (DTD) file that can be used to examine the document for conformance. Things are a lot more flexible these days.

<html>

This is the root of the document. Everything in the remainder of the document will be inside this html tag. What is inside the html tag consists of two sections, the head and the body.

<head>

The head section contains one or more <meta> tags. The one in our earlier example specifies that the encoding of the text part of the document has to be in UTF-8.

This section is also where the <title> tag lives. The text inside this element is the text that will be displayed at the top of the browser window and is looked at heavily by search engines. So it is important to always include a title tag and for its contents to be correct and meaningful.

Furthermore, the <head> section is used to include more information that the browser will have to read before the body part of the document is loaded. Your most typical example will be the paths to the CSS stylesheets that are used for the document. We will have many examples in this book.

<body>

Inside the body tag is the core content of our document. As a consequence, if there are certain style elements that you want to be used in the entire document, you will be able to do that by simply styling the <body> tag. We will remind you about that later. Of course, we first have to learn what we can put inside the body.

Syntax for tags or elements inside the document

The syntax of an HTML tag is very simple:

<tag attribute1="value1" attribute2="value2">text</tag>,

This is followed by the next tag. You can place everything on a single line or every pair of tags on a separate line for readability as new lines and spaces in between tag pairs are ignored.

Inside the text portion, spaces are not ignored, but multiple spaces in a row are reduced to one. So if you want to insert more spaces, you will have to use a different method (See HTML entities later in this chapter).

For elements that have no content, there is a shorthand notation. We can use:

<tag/>

We use that instead of:

<tag></tag>

In our example, the shorthand notation is used for:

<meta charset="utf-8"/>

The class attribute can have multiple values, in which case it would be written like:

<tag class="value1 value2">text<?tag>

It is not written like this:

<tag class="value1" class="value2">text<tag>

This last line demonstrates a common oversight when a class attribute is added without realizing that a class attribute was already present. In this case, the second one will be ignored. The browser will also ignore all elements and attributes that are not recognized as HTML tags.

Unlike compilers for old school programming languages, you will never see an error message when you mistype something. Things will simply not look right or you may even get a blank screen. This is why it is extremely productive to use an HTML editor or other tool that recognizes tags and attributes as valid HTML ones, preferably tools that display them in color.

HTML comments

Anywhere inside HTML code, you can insert a comment: a reminder to yourself , for posterity, or (probably more important) for others in your team who need to share your code. The syntax is very simple. Anything that is inside an HTML block can be commented by putting  after it:

We recommend strongly inserting more comments rather than less. Applying comments is also useful when someone asks you to remove something from the website and you have this feeling that it might come back. Because if you remove it: gone is gone!

On the other hand, every line of HTML comment adds a line to your file and also makes it visible to the world, as every browser has an option to look at the source code. So once you start using a server-side language such as PHP, which you will learn in a few chapters, it is better to place your comments inside that code. You will discover that the syntax for comments in CSS and PHP is different.

As promised, we will now describe the most important HTML tags and attributes, pided in functionality groups. We will start with what started it all: links.

官术网_书友最值得收藏!

Practical Web Development