1.1 HTML简介

1.1.1 什么是HTML

HTML的全称为Hyper Text Markup Language，表示超文本标记语言。所谓超文本，是指HTML可以加入图片、声音、动画、影视等内容，并可以从一个文件跳转到另一个文件。通常在访问一个网页时，网页所在的服务器将用户请求的网页以HTML标签的形式发送到用户端，用户端的浏览器接收HTML代码，使用自带的解释器解释并执行HTML标签，然后将执行结果以网页的形式展示给用户。

HTML标签是被客户端的浏览器解读并显示的，所以是完全公开的。在浏览器中右击，在弹出的菜单中选择“查看网页源代码”命令，如图1-1所示，在文件中即可看到当前网页的HTML代码，如图1-2所示。

1.1.2 如何创建HTML文件

HTML文件其实可以用一个简单的文本编辑器来创建。在Windows操作系统下，创建一个HTML文件的步骤如下。

步骤01 单击“开始”按钮，在开始菜单中执行“程序＞附件＞记事本”命令，如图1-3所示，打开“记事本”文件。

步骤02 在“记事本”中输入以下HTML代码，如图1-4所示。

步骤03 在“记事本”文件中执行“文件＞另存为”命令，打开“另存为”对话框，在“保存类型”下拉列表中选择“所有文件”选项，然后在“文件名”文本框中输入文件名及扩展名（如创建HTML代码．html），最后设置保存路径，如图1-5所示。

步骤04 打开该文件所在的目录，可以看到文件的图标已经变成了一个HTML文件，如图1-6所示。

步骤05 双击该文件，该文件将在浏览器中显示。标题栏显示“网页标题”，文档中出现文字“网页设计从这里起步”，如图1-7所示。

另一个创建HTML文档的简单方法是使用Dreamweaver CC。这种方法不需要在纯文本中编写代码。打开Dreamweaver CC，切换到代码视图，可以看到Dreamweaver CC在新文档中已经自动创建了HTML文档，如图1-8所示。

1.1.3 网页的基本概念

网页是一个包含HTML标签的纯文本文件，它是构成网站的基本元素。网页一般分为静态网页和动态网页。

静态网页是标准的HTML文件，它是通过HTTP（超文本传输协议）在服务端和客户端之间传输的纯文本文件，扩展名为．html或．htm。

动态网页在许多方面与静态网页是一致的，它们都是无格式的ASCII码文件，都包含HTML代码，都可以包含用脚本语言（如JavaScript或VBScript）编写的程序代码，都存放在网站服务器上，收到客户请求后都会把响应信息发送给网页浏览器。由于采用的技术不同，动态网页文件的扩展名会不同。例如，文件中使用ASP（Active Server Pages）技术，动态网页的扩展名是．asp；若使用JSP （Java Server Pages）技术，动态网页扩展名是．jsp。

将设计好的静态网页放置到网站服务器上，即可访问它，若不修改更新，这种网页将保持不变，因此我们称之为静态网页。实际上，静态网页在呈现形式上可能不是静态的，它可以包含GIF图片等，如图1-9所示。此处所说的静态是指在发送给浏览器之前不再进行修改。

对于客户而言，不管是访问静态网页还是动态网页，都需要使用网页浏览器（如Chrome浏览器、Edge浏览器、360安全浏览器、QQ浏览器、UC浏览器等），在地址栏中输入要访问网页的URL（统一资源定位系统，即通常所说的网址）并发出访问请求，然后才能看到浏览器所呈现的网页内容。

URL用来标明访问对象，由协议类型、主机名、文件路径及文件名组成，格式为“协议类型：//主机名/目录/…/文件名”。更多时候，网站的URL中并不包含文件路径及文件名。例如，访问网易网站时，只需输入http://www.163.com即可，如图1-10所示。这是由于主机在解释URL时若发现没有指明具体文件，则认为要访问默认的页面，那么http://www.163.com实际上就被解释为http://www.163.com/index.html。

网页和主页（Home Page）是两个不同的概念。一个网站中主页只有1个，而网页可能成千上万，通常所说的主页是指访问网站时看到的第1页，即首页。首页的名称是特定的，一般为index.htm、index.html、default. htm、default.html、default.asp、index.asp等，当然这个名称是由网站建设者所指定的。图1-11与图1-12分别为某动物园网站的静态首页和一个儿童网站的动态首页。

1.1.4 网页和网站的关系

一个完整的网站是由多个网页构成的，这些网页是分别独立的，这些独立的网页通过超链接联系起来。超链接的目标可以是另外一个网页，也可以是同一网页的不同位置。网站可以看作许多网页的家，用户通过浏览器访问网站的地址，读取这个网站内的网页。

网页是网站的基本信息单位，一个网站通常由众多的网页有机地组织起来，用来为网站用户提供各种各样的信息和服务。网页的设计必须考虑到它们与网站的内在联系，符合网络技术的特点，体现网站的功能；网页设计师必须深入理解网络技术的特点，了解网站与网页的关系，才能发挥专业优势，设计出精彩的网页。

1.1.5 HTML的基本结构

HTML文档是由HTML元素组成的文本文件，HTML元素由HTML标签组成。HTML标签两端有两个包括字符＜和＞，这两个包括字符被称为角括号。标签通常是成对出现，比如＜body＞和＜/body＞，前面一个是开始标签，后面的是结束标签，开始标签和结束标签之间的文本是元素内容。HTML标签并不区分字母的大小写，比如＜title＞与＜TITLE＞所表示的含义是一致的。

HTML主要由头部信息和主体信息两部分构成，如图1-13所示。头部信息是文档的开头部分，以＜head＞标签开始，＜/head＞标签结束。在标签对之间可包含文档总标题＜title＞…＜/title＞、脚本操作＜script＞…＜/script＞等，如不需要也可以省略。＜body＞标签是文档主体部分的开始，以＜/body＞标签结束，其标签对包含众多的标签。＜html＞…＜/html＞标签在最外层，表示这对标签之间的内容是HTML文档，标签对之间包含所有HTML标签。

下面是一个最基本的HTML文档的源代码。

HTML中的标签丰富多样，通过它们可以展现出丰富多彩的设计风格，下面就介绍标签的几种类型。

1. 单标签

单标签即单独使用就能完整地表达意思，这类标签的语法如下。

最常用的单标签是＜br＞，它表示换行。

2. 双标签

双标签由“开始标签”和“结束标签”两部分构成，必须成对使用。其中“开始标签”使浏览器从此处开始执行该标签所表示的功能，而“结束标签”告知浏览器在这里结束该功能。开始标签前加一个斜杠（/）即成为结束标签，它的语法如下。

其中“内容”就是这对标签要施加作用的部分。例如，想突出某段文字的显示，就可以将该段文字放在＜em＞…＜/em＞标签中，具体如下。

3. 标签属性

在单标签和双标签的开始标签内可以包含一些属性，其语法如下。

各属性之间无先后次序，属性也可省略（取默认值）。例如，单标签＜hr＞表示在文档当前位置绘制一条水平线，默认是从窗口中当前行的最左端一直到最右端，属性为＜hr size=3 align=left width="75%"＞，各属性的含义如下。

● size：定义线的粗细，属性值取整数（表示屏幕像素点个数），缺省值为1。

● align：表示对齐方式，可取left（左对齐）、center（居中）、right（右对齐），缺省值为“left（左对齐）”。

● width：定义线的长度，可取相对值（由一对英文双引号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如width=300），默认值是"100%"。 aBFFCqK5XVT3k9MVmfbPxvzocKHKgn20PQk4rF9mc7FoBOveE4amWfDZ7lfSxVG1