第一章 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设计指南》，内容为学习笔记。