css3等网页 html5 html5 css3网页设计基础教程

转载

mob6454cc782a8c 2023-07-21 15:23:48

文章标签 css3等网页 html5 css3 html5 学习 HTML 文章分类 HTML5 移动开发

第一章网页的构造

前言
1.1HTML 思想
1.2基本的 HTML 页面
1.3标签：元素、属性、值及其他
1.4网页的文本内容
1.5链接、图像和其他非文本内容
1.6文件名和文件夹名
1.7 URL
1.8浏览器对网页的默认显示效果
总结

前言

尽管现在网页变得越来越复杂，但是其底层结构依然相当简单。创建网页是离不开 HTML 的。一个网页主要包括以下三个部分。文本内容（text content）、对其他文件的引用（references to other files）、标记（markup）。

css3等网页 html5 html5 css3网页设计基础教程_css3

1.1HTML 思想

设想这样一种场景：你在厨房里，一只手上拿着便利贴，上面的每一页都写着一个单词。有的贴纸上写的是“汤”，有的写着“燕麦片”、“盘子”、“酱汁”等。
你打开一个橱柜，为里面的每一样物品都贴上最能描述它的便利贴。一只黄色的装燕麦片的盒子贴上了写有“燕麦片”的贴纸。还有一个红色的盒子也是装燕麦片的，也为它贴上写有“燕麦片”的贴纸。其他的物品也采用类似的做法。
编写 HTML 与这个过程是很相似的。不同的是，编写 HTML 并非向食物和餐具上贴标签，而是为网页内容打上能够描述它们的标签。你无需自己创建标签名称，HTML 已经完成了这一工作，它有一套预先定义好的元素。p 元素用于段落，abbr 元素用于缩略词，li 元素用于列表项目。

1.2基本的 HTML 页面

每个网页都由下图中所示的结构开始构建。这个 HTML 相当于一张白纸，因为访问者看到的内容位于主体（body）部分（即和之间的部分），而这一部分现在是空着的。我们马上就会给它填上内容。

css3等网页 html5 html5 css3网页设计基础教程_HTML_02

每个网页都包含 DOCTYPE、html、head 和body 元素，它们是网页的基础。在这个页面中，可以定制的内容包括两项，一是赋予 lang 属性的语言代码，二是

和之间的文字。

首先，简单说明一下，HTML 使用 < 和 > 包围 HTML 标签。开始标签（如）用于标记元素的开始，结束标签（如）用于标记元素的结
束。有的元素没有结束标签，如 meta。

1. 网页的顶部和头部

前面提到，页面内容位于主体部分，那么其他的代码有什么作用呢？实际上，开始标签以上的内容都是为浏览器和搜索引擎准备的。部分（称为DOCTYPE）告诉浏览器这是一个 HTML5 页面。DOCTYPE 应该始终位于页面的第一行。接下来是 html 元素，它包着页面的其余部分，即和结束标签（表示页面的结尾）之间的内容。再接下来是文档的头部，即和之间的区域。会之后讲解。主体前面的代码中，有一部分是用户可见的，即和之间的文本。这些文本会出现在浏览器标签页中，对于某些浏览器，这些文本还会出现在浏览器窗口的顶部，作为网页的标题。

2.网页的主体：你的内容

接下来为页面添加一些内容

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Blue Flax (Linum lewisii)</title>
</head>
<body>
<article>
<h1>The Ephemeral Blue Flax</h1>
<img src="blueflax.jpg" width="300" height="175" alt="Blue Flax" />
<p>I am continually <em>amazed</em> at the beautiful, delicate <a href="http://en.wikipedia.
➝ org/wiki/Linum_lewisii" rel="external" title="Learn more about Blue Flax">Blue Flax</a> 
➝ that somehow took hold in my garden. They are awash in color every morning, yet not a single 
➝ flower remains by the afternoon. They are the very definition of ephemeral.</p>
</article>
</body>
</html

下面图片显示了桌面浏览器呈现这段HTML 的效果

css3等网页 html5 html5 css3网页设计基础教程_HTML_03

HTML 提供了很多的元素。上面所示的例子演示了六种最为常见的元素：a、
article、em、h1、img 和 p。每个元素都有各自的含义，例如，h1 是标题，a 是链接，img是图像。

1.3标签：元素、属性、值及其他

见识了一些 HTML 之后，我们来仔细看看标签的组成：元素（element）、属性（attribute）和值（value）。

1. 元素

我们在便利贴的例子中讲到，元素就像描述网页不同部分的小标签一样：这是一个标题，那是一个段落，而那一组链接是一个导航。有的元素有一个或多个属性，属性用来进一步描述元素。大多数元素既包含文本，也包含其他元素（就像基本页面中的 p 元素）。如前面提到的，这些元素由开始标签、内容和结束标签组成。开始标签是放在一对尖括号中的元素的名称及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素的名称。

css3等网页 html5 html5 css3网页设计基础教程_css3_04

2. 属性和值

属性包含了元素的额外信息。在 HTML5 中，属性值两边的引号是可选的，但习惯上大家还是会写上，因此建议始终这样做。跟元素的名称一样，尽量使用小写字母编写属性的名称。

3. 父元素和子元素

如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代。这种类似家谱的结构是 HTML 代码的关键特性，它有助于在元素上添加样式和应用 JavaScript 行为。

值得注意的是，当元素中包含其他元素时，每个元素都必须嵌套正确，也就是

子元素必须完全地包含在父元素中。使用结束标签时，前面必须有跟它成对的开始标签。换句话说，先开始元素 1，再开始元素2，就要先结束元素 2，再结束元素 1。

<article>
<h1>The Ephemeral Blue Flax</h1>
<img src="blueflax.jpg"... />
<p>... continually <em>amazed</em> ... delicate <a ...>Blue Flax</a> ...</p>
</article>

在这段 HTML 代码中，article 元素是 h1、img 和 p 元素的父元素。反过来，h1、img 和 p 元素是 article 元素的子元素（也是后代）。p 元素是 em 和 a 元素的父元素。em 和 a 元素是 p 元素的子元素，也是 article 元素的后代（但不是子元素）。反过来，article 元素是它们的祖先。

1.4网页的文本内容

元素中包含的文本可能是网页上最基本的成分。如果你用过文字处理软件，那么你一定输入过文本。不过，HTML 页面中的文本有一些重要的差异。
首先，浏览器呈现 HTML 时，会把文本中的多个空格或制表符压缩成单个空格，把回车符和换行符转换成单个空格，或者将它们一起忽略。

...
<body> <p>I am continually <em>amazed</em> at 
➝ the beautiful, delicate Blue Flax 
➝ that somehow took hold in my garden.
They are awash in color every 
➝ morning, yet not a single flower 
➝ remains by the afternoon.
They are the very definition of 
➝ ephemeral.</p> <p><small>© Blue Flax Society.</small> 
➝ </p>
</body>
</html>

页面的文本内容几乎就是标签以外的所有东西。在这个例子中，注意每个句子都至少包含一个回车符，有的词之间隔了好几个空格（在此只是为了说明 HTML 如何处理回车符和空格）。另外，第二段还包含一个表示版权符号的特殊字符引用（©）
Unicode 极大缓解了特殊字符问题。用UTF-8 对页面进行编码，并用同样的编码保存 HTML 文件已成为一种标准做法。推荐你也这样做。将 charset 值指定为 UTF-8 和 utf-8的结果是一样的。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
 <title>Blue Flax (Linum lewisii)</title>
</head>
<body>
..
</body>
</html>

直接在 head 开始标签后面指明文档的字符编码。charset 属性用来设置编码类
型（通常为UTF-8）。

1.5链接、图像和其他非文本内容

显然，万维网充满生机的部分原因是页面之间的链接，以及图像、视频、音乐
等。外部文件（如图像）实际上并没有放在HTML 文件中，而是单独保存的，页面只是简单地引用了这些文件。

<body>
<article>
 <h1>The Ephemeral Blue Flax</h1> <img src="blueflax.jpg" width="300" 
➝ height="175" alt="Blue Flax" />
 <p>I am continually <em>amazed</em> at 
➝ the beautiful, delicate <a href=
➝ "http://en.wikipedia.org/wiki/Linum_
➝ lewisii" rel="external" title=
➝ "Learn more about the Blue Flax">
➝ Blue Flax</a> that somehow took 
➝ hold in my garden. They are awash 
➝ in color every morning, yet not a 
➝ single flower remains by the 
➝ afternoon. They are the very 
➝ definition of ephemeral.</p>
</article>
</body>
</html>

在我们的基本 HTML 文档中，有一个对图像文件 blueflax.jpg 的引用（位于 img 标签的 src属性），浏览器在加载页面其他部分的同时，会请求、加载和显示这个图像。该页还包括一个指向关于 Blue Flax 的维基百科页面的链接（位于 a 标签的 href 属性）。
浏览器可以轻而易举地处理链接和图像。然而，它们无法处理其他任何文件类型。例如，对有的浏览器来说，要查看 PDF 就需要在系统中预先装好 Adobe
Reader，要查看电子表格就需要预先装好OpenOffice 这样的软件。
过去，HTML 没有内置的方法播放视频和音频文件。结果，各个厂商都开发出了相应的软件，用户可以下载并安装这些软件，从而弥补缺失的功能。这样的软件称为插件（plugin）。在这些插件中，使用最为广泛的当数Flash。多年以来，Flash 驱动了无数万维网上的视频。不过，这个插件也有一些问题，其中最为突出的就是它会耗费较多的计算资源。幸好，HTML5 已经为缓解这一问题迈出了一大步。HTML5提供了audio和video元素，这样，无需使用插件就可以播放音频和视频。不过，现代浏览器也提供了内置的媒体播放器，你仍然可以使用 Flash 播放器作为旧浏览器的备用工具。HTML5 的音频和视频还不完美，但至少开始向着无插件的目标前进了，而且还在继续前进。

1.6文件名和文件夹名

同其他文本文件一样，网页也有文件名。对网页文件命名时要记住几点，这些要点有助于对文件进行组织，使访问者更容易找到并访问你的页面，确保他们的浏览器能正确地处理页面，以及增强搜索引擎优化（SEO）。
1. 文件名采用小写字母
网页的文件名决定了访问者在访问你的页面时需要输入的文本，因此，文件名和文件夹名只用小写字母可以最大程度地避免访问者的输入错误。这样做对创建页面之间的链接也有很大的帮助。如果所有的文件名都用小写字母，你就少了一件需要操心的事情。
2. 使用正确的扩展名
浏览器主要通过查看文件的扩展名得知需要读取的文本文档是一个网页。尽管也可以使用 .htm 作为网页的扩展名，但通常使用的是 .html。如果页面使用其他的扩展名（如.txt），浏览器会将其当做文本处理，相当于将你的代码直接呈现给访问者。
3. 用短横线分隔单词
不要在文件名和文件夹名中使用空格分隔单词。应该使用短横线，例如 companyhistory.html 和 my-favorite-movies.html。有的网站使用下划线（_），我们不推荐这种做法，因为短横线是搜索引擎更容易接受的方式。

1.7 URL

URL（Uniform Resource Locator，统一资源定位符）是地址的别名。它包含关于文件存储位置和浏览器应如何处理它的信息。互联网上的每个文件都有唯一的 URL。URL 的第一个部分称为模式（scheme）。模式告诉浏览器如何处理需要打开的文件。最常见的模式是 HTTP（Hypertext Transfer Protocol，超文本传输协议）。根据你上网的经验，你应该可以猜到，HTTP 是用于访问网页的（参见图 1.7.1）。HTTPS 是从 HTTP 衍生来的，用于电子商务网站等安全网页。它的格式同 HTTP 一样，只是用 https 替代了 http。

基本的 URL 包含模式、主机名称和路径。路径包含一个或多个目录（文件夹），最后是一个文件名。

URL 的第二个部分是文件所在的主机的名称，紧接着是路径，路径包含到达这个文件的文件夹以及文件自身的名称（这些都是可选的）。如果 A 中的路径是 tofu/soft/index.html，就表示 index.html 位于 soft 目录，而soft 目录则位于 tofu 目录，就像你在自己的电脑上组织文件和文件夹那样。

有时，URL 路径不以文件名结尾，而以一个目录结尾（可以包含一个结尾的斜杠，也可以不包含），如图所示。在这种情况下，URL 指的是路径中最后一个目录中的默认文件，通常为 index.html。

css3等网页 html5 html5 css3网页设计基础教程_html5_05

以一个斜杠而非文件名结尾的 URL 指向最后一个目录（在这个例子中是 tofu 目录）中的默认文件。其他常见的模式有用于下载文件的 ftp（File Transfer Protocol，文件传输协议），如下图，用于发送电子邮件的 mailto。

css3等网页 html5 html5 css3网页设计基础教程_css3_06

当用户点击这个 URL 时，浏览器会开始按 FTP 模式传输文件 proposal.pdf。

css3等网页 html5 html5 css3网页设计基础教程_学习_07

用于电子邮件地址的 URL 包括 mailto 模式，紧接着是一个冒号（没有斜杠），然后是电子邮箱地址本身模式后面通常紧跟一个冒号和两个斜杠。mailto 是个例外，它后面只有一个冒号。在上述模式中，最常用到的是 http（也包括 https），其次是 mailto，再次是 ftp。

1. 绝对 URL

URL 可以是绝对的，也可以是相对的。绝对 URL（absolute URL）包含了指向目录或文件的完整信息，包括模式、主机名和路径（图 1.7.1 和图 1.7.2）。绝对 URL 就像是完整的通信地址，包括国家、州、城市、邮政编码、街道和姓名。无论邮件来自哪里，邮局都能找到收件人。就 URL 来说，这意味着绝对 URL 本身与被引用文件的实际位置无关，无论是在哪个主机上的网页中，某一文件的

绝对 URL 都是完全一样的。

2. 相对 URL

当我告诉你我邻居家的位置时，我一般不会说完整地址，而是说：“她家在右边第三个门。”这就是相对地址，它指出的位置是以信息提供者的位置为参照的。如果在别的城市按照同样的信息找我的邻居，你永远也找不到。（实际情况是，她出门很长一段时间了，因此恐怕你还是找不到她。）同样，相对 URL 以包含 URL 本身的文件的位置为参照点，描述目标文件的位置。因此，相对 URL 可以表达像“指向本页面同一目录下的 xyz 页面”这样的意思。

1.8浏览器对网页的默认显示效果

既然控制页面样式的是 CSS 而非 HTML，为什么在浏览器中查看我们的基本页面时，某些文字的字号会比其他文字的字号大呢，为什么有的文字是粗体或

斜体呢？原因就是每个 Web 浏览器都有一个内置 CSS 文件（一张样式表），它决定了每个HTML 元素的默认样式。你自己创建的 CSS可以覆盖这些样式。

块级元素、行内元素以及 HTML5容易看出，有些 HTML 元素（如article、h1 和 p）从新的一行开始显示，就像纸质书中的各个段落一样，而另外一些元素（如 a 和 em）则与其他内容显示在同一行。需要强调的是，这是浏览器的默认样式，而不是 HTML 元素自身的样式，也不是由代码中两个元素之间的空行引起的。

在 HTML5 之前，大多数元素都可以划入块级（block-level，从新行开始显示）或行内（inline，与其他内容在同一行显示）两种类别。HTML5 废弃了这些术语，因为这些术语把元素与表现关联起来，而 HTML 并不负责表现。

尽管如此，浏览器不需要也不应该为这些元素改变默认显示规则。毕竟，你不想看到两个段落（p 元素）连到一起，或者强调的字句（em 元素包含的 amazed）

将句子打断，单独成行。因此，通常标题、段落和 article 这样的元素从新行开始显示，而短语内容（如 em、a和 small）则与外围内容在同一行显示。

css3等网页 html5 html5 css3网页设计基础教程_HTML_08

浏览器的默认样式表将标题（h1 ～ h6）与普通文本区别开来，对 em 文本加上斜体样式，对链接加上颜色和下划线。此外，有的元素从单独的一行开始（如 h1 和 p），而其他一些元素显示在外围内容的里面（如 a、em 和 small）。用你自己的样式表覆盖这些显示规则很简单。样式表与 HTML 一样是纯文本，因此可以用编辑 HTML 的文本编辑器创建样式表。