第一章 HTML标记与文档结构 （HTML标记基础）

1.1HTML标记语言

对于每一个包含内容的元素（比如标题、图片、段落），根据它包含的内容是不是文本，有两种不同的方式给它们加标记，一种是使用闭合标签，另一种是使用非闭合标签。

1.1文本用闭合标签

1.闭合标签的基本格式如下：

<标签名>文本内容</标签名>

可以给这些标签添加一些属性，比如：

<标签名 属性_1="属性值" 属性_2="属性值">文本内容</标签名>

2.标题，段落等文本元素都要求闭合标签，也就是要由一个开标签和一个闭合标签，比如：

<h1>words by dog</h1>

<p>wangted longely as a dog</p>

3.可见，每一个标签都由一对包含标签名的尖括号组成，标签名通常是一个（表示内容的类型）英文单词和简写或者其中的一个字母。闭标签和开标签的

不同之处是标签前面多一个斜杠。

4.开标签和闭标签明确标识出了标题和段落的起始位置。注意，前面的标题签名中有一个数字1，那是因为HTML有6级标签，<h1>表示最高级别的标题。

1.1.2 引用内容用自闭合标签

1.<标签名 属性_1="属性值" 属性_n="属性值" />

非文本内容是通过自闭合标签显示的。

2.闭合标签与自闭合标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在 HTML 页面加载的时候，额外向服务器发送请求，以取得自闭合标签引用的内容。

下面就是使用自闭合标签标记的一张图片。

<img src="images/cisco.jpg" alt="My dog Cisco">

3.【关闭标签】

XHTML 标准严格规定所有标签都必须关闭，但 HTML5 标准在这方面则要宽松得多。换句话说，在 HTML5 网页里，某些闭标签是可以省略不写的。

要了解 HTML5 语法，可以参考这个链接

http://dev.w3.org/html5/html-author/#syntactic-overview。

而在 HTML5 中，可以省略最后那个表示关闭的斜杠，写成：

<img src="images/cisco.jpg" alt="My dog Cisco" >

不过，我还是习惯于给自闭合标签的末尾也加上一个空格和斜杠。HTML5 会忽略这个斜杠，而我在检查代码结构时，通过它一眼就能知道这个标签已经关闭了，所以它不包含后面的标签。

1.1.3 属性

1.属性负责为浏览器提供有关标签的额外信息。比如说，前面例子中的<img>标签有两个属性。一个属性是
src（source，来源），属性值为
cisco.jpg。这个属性定义了图片的来源是一个名为 cisco.jpg 的文件。另一个属性是
alt（alternative，替代内容），定义的是在图片因故未能加载成功时在屏幕上显示的文本。

每个 HTML 标签都可以添加属性。在稍后的例子中我们会看到，class 和
id 等属性，几乎可以适用于任何标签。而另一些属性，比如 src，则只适用于类似<img>这样的引用源文件的标签。

2.要想了解所有 HTML 标签和属性，可以参考 HTML Dog 网站：http://htmldog.com/ reference/htmltags。

3.【本章使用了哪些HTML标签】

以下是本章使用的块级（block）和行内（inline）标签。至于什么是块级标签，什么是行内标签，本章稍后再作介绍。

块级标签

<h1>-<h6> ：6 级标签，<h1>表示最重要

<p>：段落

<ol>：有序列表

<li>：列表项

<blockquote>：独立引用

行内标签

<a>：链接（anchor，锚）

<img>：图片

<em>：斜体

<strong>：重要

<abbr>：简写

<cite>：引证

<q>：文本内引用

1.1.4标题和段落

1.简述：到现在为止，我们用得最多的还是标题和段落标签。一般来说，网页都会以一个<h1>标签开头，其中的文本用于告诉读者这个网页是干什么的。然后用<h2>标记下一级内容，或许是一个副标题，然后才是<h3>，依此类推。

2.<h1>不仅是最大最突出的标题（除非你用 CSS 缩小它的字号），搜索引擎也会将其视为仅次于<title>标签的另一个搜索关键词的来源。

段落用于标记主要的文本内容，是所有文本元素中出场率最高的一个。简言之，只要有不适合放在其他文本标签中的文本，都可以把它放一个段落里面。

3.接下来，我们会谈一谈文档流（document flow）、行内元素和块级元素的概念，介绍一下每个元素在页面中怎么形成一个方盒子（box）。HTML 中的这些基本概念，对于使用 CSS 快速有效地为文档添加样式，使其变成你期望的布局和外观具有重大意义。

1.1.5 复合元素

1.定义：HTML 不仅规定了标题、图片和段落等基本的内容标记，还规定了用于创建列表、表格和表单等复杂用户界面组件的标记，这些就是所谓的复合元素，即它们是由多个标签共同构成的。

比如，<li>是一个列表项，它只在<ol>（ordered list，有序列表）和<ul>（unordered list，

无序列表）这两种列表标签中才有效，在<dl>（definition list，定义列表）中则无效。下面是一个包含三个列表项<li>的有序列表<ol>的例子：

<ol>

<li>Save HTML file</li>

<li>Move file to Web server via FTP</li> <li>Preview in browser</li>

</ol>

见图1.

这个例子告诉了我们两个基本知识点。首先，某些标签（如这里的<ol>）要求其他标签（即这里的<li>）与之共同出现。其次，我们说这里的列表项<li>“被嵌套”在有序列表<ol>中，因为有序列表的开标签位于所有列表项之前，闭标签位于所有列表项之后。标签嵌套是我们必须要理解的一个至关重要的概念。

1.1.6 嵌套标签

在上面的例子中，基于<li>标签与<ol>标签的嵌套关系，我们还可以说<li>标签是
<ol> 标签的子 标签 （或子 元素），或 者说 <ol>
标 签是 <li> 标 签的 父标签 （父元素）。

下面是使用<em>（emphasis，强调）标签来强调段落中一个单词的例子。遗憾的是，其中的<em>子标签嵌套在<p>标签里的方式是错误的。

<p>That car is <em>fast</p>.</em>

正确的写法应该是下面这样的。

<p>That car is <em>fast</em>.</p>

请记住，要在一个标签里嵌套另一个标签（也就是前者的开标签写在后者的开标签之前），必须要先关闭后一个标签再关闭前面那个标签。上面第一个例子搞错了，第二个例子没有问题。

HTML 文档的结构正是通过类似这样的标签嵌套，以及就此建立起来标签间的“父－子”关系形成的。下面，我们就通过分析一个 HTML 文档的结构，来实际地演练一番。

以上摘选自《CSS设计指南》，内容为学习笔记。