- 动态网页设计与制作（HTML5+CSS3+JavaScript）（第3版）
- 吴以欣 陈小宁
- 3279字
- 2021-01-08 20:53:08
1.1 HTML简介
1.1.1 网页与HTML
当通过浏览器浏览网页时，用户会看到文字信息、超链接、图表、图片等各种内容，如图1-1所示。浏览器是如何显示这些网页内容的呢？通过浏览器查看这些网页的源代码，如图1-2所示，可以发现这些源代码就是浏览器可以“理解”的一种计算机语言—HTML。
图1-1 网页内容
图1-2 查看网页源代码
HTML是Hyper Text Markup Language的缩写，中文翻译为“超文本标记语言”，是制作网页的最基本语言，它的特点正如它的名称，具体如下。
Hyper（超）:“超（Hyper）”是相对于“线性（Linear）”而言的，HTML 之前的计算机程序大多是线性的，即必须由上至下顺序运行，而用HTML制作的网页可以通过其中的超链接从一个网页“跳转”至另一个网页。
Text（文本）：不同于一些编译性的程序语言，如C、C++或Java等，HTML是一种文本解释性的程序语言，即它的源代码不经过编译，在浏览器中运行时直接被“翻译”。
Markup（标记）:HTML 的基本规则就是用“标记语言”——成对尖括号组成的标签元素来描述网页内容的，进而在浏览器中显示。
HTML最早作为一种标准的网页制作语言是在20世纪80年代末由科学家蒂姆·伯纳斯李（Tim Berners-Lee）提出的，当时他定义了22种标签元素。发展至1999年12月，由万维网联盟（W3C）出版的HTML 4.01规范中还保留着其中的13种标签元素。2000年5月，HTML已成为一项国际标准（ISO/IEC 15445:2000）。2014年10月，万维网联盟正式发布了HTML5规范的推荐版，包含大约107种标签元素，以满足现代网络发展的需要。目前，大多数最新版本的浏览器都已经支持HTML5规范。
早期的HTML版本不仅用标签元素描述网页的内容结构，而且还用标签元素描述网页的排版布局。在网页设计中，网页的内容结构一般变化较小，但是网页的排版布局可能千变万化，当需要改变网页的布局时，就必须大量地修改HTML文档，这给网页的设计开发工作带来了很多不便。从HTML 4.0开始，为了简化程序的开发，HTML已经尽量将“网页的内容结构”与“网页的排版布局”分开，它的主要原则如下。
（1）用标签元素描述网页的内容结构。
（2）用CSS描述网页的排版布局。
（3）用JavaScript描述网页的事件处理，即通过鼠标或键盘在网页元素上进行动作（如单击、双击、输入）后执行的程序。
本书将以HTML5规范为标准进行讲解，因此，本章将主要讲述原则（1）的内容，原则（2）的内容将在第2章和第3章中讲述，原则（3）的内容将在第4～9章中讲述。
1.1.2 编写及显示HTML文件
在计算机中，用HTML语言编写程序，并保存为文件，然后在浏览器“地址栏”中输入该文件名，包括文件所在的文件夹名，例如C:/project/ch1_01.html，如图1-3所示，浏览器就会显示出“翻译”后的网页效果。
图1-3 在浏览器中查看计算机中的HTML文件
如果将该文件放在一个网页服务器上，并在浏览器“地址”栏中输入该服务器的地址或指向该服务器的域名及该文件名，如图1-4所示，就可以通过Internet浏览这个网页的内容。这也就是当初科学家蒂姆·伯纳斯李发明HTML的目的—大家共享文件内容。
图1-4 在浏览器中查看网页服务器上的HTML文件
HTML文件具有以下特点。
HTML文件是一种包含成对标签元素的普通文本文件。因此，可以用任意一种文本编辑器来编写，如Windows中的记事本、写字板等应用软件；也可以使用任何一种工具软件编辑HTML文件，如Macromedia的Dreamweaver和Microsoft的FrontPage等。
HTML文件必须以.htm或.html作为扩展名，两者并没有太大的区别。本书示例中统一使用.html作为扩展名。
HTML文件可以在大多数流行的浏览器上显示，例如Microsoft的Internet Explorer （以下简称IE）以及Google的Chrome（以下简称Chrome）等。本书将在Windows操作系统中使用Chrome浏览器显示示例。如果计算机中没有Chrome浏览器软件，可以到Google网站下载。
示例1-1是一个最简单的HTML程序，首先在文本编辑器中输入该程序（注意，其中的行号用于本书的讲解之便，程序中不要输入行号），然后保存文件名为ch1_01.html。
示例1-1 第一个HTML程序。
目的：初步了解HTML程序。
程序文件名：ch1_01.html。
说明
（1）编写HTML程序时，格式上没有要求，例如，示例中的11行程序也可以写成一行，这是因为浏览器“翻译”HTML程序时是通过其中的标签内容进行识别的，与程序的格式无关。但是，为了便于程序的阅读和维护，编程时应该根据标签的结构适时换行。
（2）HTML的文件名最好不要有空格，为了能符合大多数网页服务器的要求，HTML的文件名最好只包含英文小写字母和有效的字符，例如a～z、0～9以及下画线（_）和减号（−），并且文件名的长度不要超过31个字符（包括扩展名）。
（3）按下述方法进行操作，就可以通过浏览器查看示例1-1所编写的HTML程序效果。
① 打开浏览器Chrome，按【Ctrl+O】组合键。
② 在打开的对话框中单击“浏览”按钮，然后在打开的对话框中选择示例1-1中保存的文件ch1_01.html。
③ 单击“确定”按钮，就会得到图1-3右图所示的效果。
（4）按下述方法进行操作，可以调试HTML程序。
① 在计算机中同时打开文本编辑器和浏览器 Chrome，并且在文本编辑器中打开HTML程序，如ch1_01.html，然后按（3）介绍的内容进行操作，在浏览器中显示该网页内容。
② 在文本编辑器中修改程序内容，例如，将示例1-1中的“第一个”修改为“第二个”，并保存该文件，然后反复按【Alt+Tab】组合键直到切换到浏览器窗口，再按【F5】键或【Ctrl+R】组合键刷新浏览器窗口。
③ 不断重复步骤②直到调试结束。
1.1.3 标签、元素和属性
从示例1-1中可以看出，HTML文档是由各种HTML元素组成的，如html（HTML文档）元素、head（头）元素、body（主体）元素、title（题目）元素和p（段落）元素等，这些元素都采用了尖括号组成的标签形式。实际上，HTML程序的内容就是标签、元素和属性。
1.标签
HTML标签是由一对尖括号< >及标签名称组成的。标签分为“起始标签”和“结束标签”两种，两者的标签名称是相同的，只是结束标签多了一个斜杠“/”。如图1-5所示，<b>为起始标签，</b>为结束标签，它是英文bold（粗体）的缩写。标签名称对大小写是不敏感的，即<html>…</html>和<HTML>…</HTML>的效果是一样的，但是为了便于程序的阅读和维护，万维网联盟推荐使用小写字母书写标签。
图1-5 HTML标签
2.元素
HTML元素是组成HTML文档的最基本的部件，它是用标签来表现的，一般情况下，“起始标签”表示元素的开始，“结束标签”表示元素的结束。
HTML元素分为“有内容的元素”和“空元素”两种。“有内容的元素”是由起始标签、结束标签以及两者之间的元素内容组成的，其中，元素内容既可以是需要显示在网页中的文字内容，也可以是其他元素。例如，示例1-1中起始标签<b>与结束标签</b>组成的元素的内容是文字“第一个”；而起始标签<head>与结束标签</head>组成的元素的内容是另外一个元素—title元素。“空元素”则只有起始标签，而没有结束标签和元素内容，如示例1-1中的hr（分隔线）元素就是空元素。
HTML元素还可以分为“块元素”和“行元素”。“块元素”在网页中的效果是该元素中的内容相对于其前后元素的内容另起一行，图1-6左侧所示的p元素就是块元素，图1-6右侧所示为p元素的网页显示效果。而“行元素”的网页效果则是，行元素中的内容与其前后元素的内容在同一行中，图1-7左侧所示的 a 元素就是行元素，图1-7右侧所示为 a元素的网页显示效果。
图1-6 块元素程序及其网页显示效果
图1-7 行元素程序及其网页显示效果
3.属性
在元素的起始标签中，还可以包含“属性”，用来表示元素的其他特性，它的格式如下。
<标签名称 属性名="属性值">
例如，下述代码中 img（图像）元素中的 src="my_picture.jpg"就是 img 元素的属性，表示“该图像元素的图像源文件是my_picture.jpg”。
<img src="my_picture.jpg">
像标签名称一样，属性名对大小写也是不敏感的，但是为了便于程序的阅读和维护，编程时建议使用小写字母。另外值得注意的是，虽然 HTML5并没有要求属性值一定要有双引号，但是，为了养成良好的编程习惯，还是应该统一地在属性值外面加上双引号（英文输入模式下的双引号）。
4.元素的嵌套性
除了HTML文档元素html外，其他HTML元素都是被嵌套在另一个元素之内的。例如示例1-1中，head元素和body元素是嵌套在html元素中的，而title元素是嵌套在head元素中的。值得注意的是，HTML中的元素可以多级嵌套，但是不可以互相交叉。
如下代码为不正确的写法，因为p元素的起始标签在b元素的外层，而它的结束标签却放在了b元素结束标签的里面。
<p>这是我的<b>第一个</p>网页。</b>
如下代码为正确的写法。
<p>这是我的<b>第一个</b>网页。</p>
由于元素的嵌套性，编写HTML程序时一般先写外层的一对标签，然后逐渐往里写，这样既不容易忘记结束标签，也可以减少交叉标签的错误。例如，示例1-1应该按下列步骤完成。
① 编写最外层标签，示例如下。
<html>
</html>
② 添加内层标签，示例如下。
<html>
<head>
</head>
<body>
</body>
</html>
③ 继续添加内层标签，示例如下。
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
④ 添加元素内容，示例如下。
<html>
<head>
<title>我的网页</title>
</head>
<body>
</body>
</html>
…
以此类推。