HTML5从入门到精通（第3版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

第1章　HTML基础

（视频讲解：25分钟）

Internet的飞速发展推动了越来越多网站的创建，当我们浏览这些网站的时候，看到的是丰富的影像、文字、图片，这些内容都是通过一种名为HTML的语言表现出来的。对于网页设计和制作人员，尤其是开发动态网站的编程人员来讲，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。

通过阅读本章，您可以：

　了解HTML的基本概念以及发展史

　掌握HTML的基本结构

　掌握HTML文件的编写方法

　熟悉HTML文件的编写方法

　熟悉如何利用浏览器浏览HTML文件

1.1　HTML的基本概念

视频讲解

WWW（World Wide Web，万维网）是一种建立在Internet上的、全球性的、交互的、多平台的、分布式的信息资源网络。它采用HTML语言描述超文本（Hypertext）文件。这里所说的超文本指的是包含有链接关系的文件，并且包含了多媒体对象的文件。

WWW有3个基本组成部分，分别是URL（统一资源定位器）、HTTP（超文本传输协议）和HTML（超文本标识语言）。

URL（Universal Resource Locators）提供在Web上进入资源的统一方法和路径，使得用户所要访问的站点具有唯一性，这就相当于我们每个人只有一个身份证号一样。它说明了链接所指向的每个文件的类型及其准确位置。

HTTP（Hypertext Transfer Protocol）超文本传输协议是一种网络上传输数据的协议，专门用于传输以“超文本”（Hypertext）或“超媒体”（Hypermedia）的形式提供的信息。

HTML语言（Hypertext Markup Language，中文通常称为超文本置标语言或超文本标记语言）是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。

要把信息发布到全球，就必须要使用能够被大众接受的语言，也就是使用一种大多数计算机能够识别的出版语言。在WWW上，通常使用的发布语言是HTML，即超文本标识语言。

HTML语言是一种简易的文件交换标准，有别于物理的文件结构，它旨在定义文件内的对象和描述文件的逻辑结构，而并不定义文件的显示。由于HTML所描述的文件具有极高的适应性，所以特别适合于WWW的出版环境。

HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器，例如Windows的“记事本”程序打开它，查看其中的HTML源代码，也可以在用浏览器打开网页时，通过相应的“查看/源文件”命令查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行，而无须编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容，正是因为如此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码是十分重要的。

1.2　HTML发展史与HTML5

1.2.1　HTML的发展历史

HTML的历史可以追溯到很久以前。1993年HTML首次以因特网草案的形式发布。20世纪90年代的人见证了HTML的高速发展，从2.0版，到3.2版和4.0版，再到1999年的4.01版。随着HTML的发展，W3C（万维网联盟）掌握了对HTML规范的控制权。

然而，在快速发布了这4个版本之后，业界普遍认为HTML已经“无路可走”了，对Web标准的焦点也开始转移到了XML和XHTML，HTML被放在次要位置。不过在此期间，HTML体现了顽强的生命力，主要的网站内容还是基于HTML的。为能支持新的Web应用，同时克服现有的缺点，HTML迫切需要添加新功能，制定新规范。

致力于将Web平台提升到一个新的高度，一小组人在2004年成立了WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组）。他们创立了HTML5规范，同时开始专门针对Web应用开发新功能——这被WHATWG认为是HTML中最薄弱的环节。Web2.0这个新词也就是在那个时候被发明的。Web2.0实至名归，开创了Web的第二个时代、旧的静态网站逐渐让位于需要更多特性的动态网站和社交网站——这其中的新功能真的是数不胜数。

2006年，W3C又重新介入HTML，并于2008年发布了HTML5的工作草案。2009年，XHTML2工作组停止工作。又过一年，也就到了现在。因为HTML5能解决非常实际的问题，所以在规范还没有具体订下来的情况下，各大浏览器厂家就已经按捺不住了，开始对旗下产品进行升级以支持HTML5的新功能。这样，得益于浏览器的实验性反馈，HTML5规范也得到了持续地完善，HTML5以这种方式迅速融入对Web平台的实质性改进中。

1.2.2　HTML 4.01和XHTML

XHTML（extensible Hyper Text Markup Language，扩展的超文本标记语言），XHTML和HTML 4.01具有很好的兼容性，而且XHTML是更严格、更纯净的HTML代码。

在早期的HTML发展历史中，由于HTML从未执行严格的规范，而且各浏览器对各种错误的HTML极为宽容，这就导致了HTML显得极为混乱。所以W3C组织制订了XHTML，它的目标是逐步取代原有的HTML。简单地说，XHTML就是最新版本的HTML规范。

我们习惯上认为HTML也是一种结构化文档，但实际上HTML的语法非常自由，再加上各浏览器对各种HTML错误的宽容，所以才有如下HTML代码。

上面代码中的<html>、<head>、<body>和<h1>4个标签都没有正确结束，这显然违背了结构化文档的规则，但使用浏览器来浏览这个文档时，依然可以看到浏览效果，这就是HTML不规范的地方。而XHTML致力于消除这种不规范，XHTML要求HTML文档首先必须是一份XML文档。

XML文档是一种结构化文档，它有如下4条基本规则。

  • ☑　整个文档有且仅有一个根元素。
  • ☑　每个元素都由开始标签和结束标签组成（例如<a>和</a>就是开始标签和结束标签），除非使用空元素语法（例如<br/>就是空元素语法）。
  • ☑　元素与元素之间应该合理嵌套。例如<a><b>HTML5从入门到精通</b></a>，可以很明确地看出<b>元素是<a>元素的子元素，这就是合理嵌套；但<a><b>HTML5从入门到精通</a></b>这种写法就比较混乱，也就是所谓的不合理嵌套。
  • ☑　元素的属性必须有属性值，而且属性值应该用引号（单引号或双引号）引起来。

通常，计算机里的浏览器可以应对各种不规范的HTML文档，但现在很多浏览器运行在移动电话和手持设备上，它们就没有能力来处理那些不规范的标记语言。

为此，W3C建议使用XML规范来约束HTML文档，将HTML和XML的长处加以结合，从而得到现在和未来都能使用的标记语言：XHTML。

XHTML可以被所有的支持XML的设备读取，在其余的浏览器升级至支持XML之前，XHTML强制HTML文档具有更加良好的结构，保证这些文档可以被所有的浏览器解释。

1.2.3　从XHTML到HTML5

虽然W3C努力为HTML制订规范，但由于绝大部分编写HTML页面的人并没有接受过专业训练，他们对HTML规范、XHTML规范也不是很了解，所以他们制作的HTML网页绝大部分都没有遵守HTML规范。大量调查表明，即使在一些比较正规的网站中，也很少有网站能通过验证。例如2008年，一项Alexa关于全球500强网站的调查表明，仅有6.57%的网站能通过HTML规范验证。如果把那些名不见经传的小网站考虑在内，整个互联网上就几乎都是不符合规范的HTML页面。

虽然互联网上绝大部分HTML页面都是不符合规范的，但各种浏览器却可以正常解析并显示这些页面，在这样的情况下，HTML页面的设计制作者甚至感觉不到遵守HTML规范的意义。于是出现了一种非常尴尬的局面：一方面，W3C组织极力地呼吁大家应该制作遵守规范的HTML页面；另一方面，HTML页面制作者却根本不太理会这种呼吁。

现有的HTML页面大量存在如下4种不符合规范的内容。

  • ☑　元素的标签名大小写混杂的情况。比如<p>HTML5</P>，这个<p>元素的开始标签和结束标签采用了大小写不匹配的字符。
  • ☑　元素没有合理结束的情况。比如只有<p>标签，没有</p>结束标签。
  • ☑　元素中使用了属性，但没有指定属性值的情况。比如<input type="text" disabled>。
  • ☑　为元素的属性指定属性值时没有使用引号的情况。比如<input type=text>。

可能是出于“存在即是合理”的考虑，WHATWG组织开始制订一种“妥协式”的规范：HTML5。既然互联网上大量存在上面4种不符合规范的内容，而且制作者从来也不打算改进这些页面，因此HTML5干脆承认它们是符合规范的。

由于HTML5规范不严格，因此HTML5甚至不再提供文档类型定义（DTD）。到2008年，WHATWG的努力终于被W3C认可，W3C已经制订了HTML5草案。

虽然到目前为止，W3C依然没有正式发布HTML5规范，但大量浏览器厂商和市场都已经开始承认HTML5，谷歌（Google）在很多地方都开始使用HTML5。

1.3　迎接新的Web时代

自从2010年HTML5正式推出以来，它就以一种惊人的速度被迅速地推广，就连微软也因此为下一代IE9浏览器做了标准上的改进，使其能够支持HTML5。关于各主流浏览器对于HTML5所表现出来的欢迎和支持情况，以及为什么HTML5会如此受欢迎，我们将在后面几节中做详细介绍。目前业界全体都在朝着HTML5的方向迈进，HTML5的时代马上就要到来了。

1.3.1　部分代替了原来的JavaScript

HTML5增加了一些非常实用的功能，这些功能可以部分代替JavaScript，而这些功能只要通过为标签增加一些属性即可。

例如，打开一个页面后立即让某个单行文本框获得输入焦点，在HTML5之前，可能需要通过JavaScript来实现。代码如下。

上面的代码片段通过JavaScript来完成这个功能，但在HTML5中则只需要设置一个属性即可。如果使用HTML5，则可以把上面的代码改为如下形式。

在这个示例中，我们可以看到，在HTML4中使用了一段JavaScript代码，在HTML5中并没有使用，取而代之的是一个在HTML5中新出现的属性。

把两个代码片段放在一起进行对比，不难发现使用HTML5之后简洁多了。除了这里示范的autofocus可用于自动获得焦点之外，HTML5还支持其他一些属性，比如一些输入校验的属性，以前都必须通过JavaScript来完成，但现在都只要一个HTML5属性即可。

1.3.2　更明确的语义支持

在HTML5之前，如果要表达一个文档结构，可能只能通过<div>元素来实现。例如，我们来看一个在HTML4中的一种页面结构，代码如下。

在上面的页面结构中，所有的页面元素都采用<div>元素来实现，不同<div>元素的id不同，不同id的<div>元素代表不同含义，但这种采用<div>布局的方式导致缺乏明确的语义，因为所有内容都是<div>元素。

HTML5则为上面的页面布局提供了更明确的语义元素，此时可以将上面的代码片段改为如下形式。

在这个示例中，我们可以看到，在HTML4中常见的用div来划分页面结构的方法，到了HTML5中也被一种新出现的标签替代了。这些标签可以提供更加清晰的语义。

除此之外，以前的HTML可能会通过<em>这样的元素来表示“被强调”的内容，但到底是哪一种强调，HTML却无法表达；HTML5则提供了更多支持语义的强调元素，例如：

上面的第一个<time>元素用于强调被标记的内容是日期或时间，而<mark>元素则用于强调被标记的文本。HTML5新增的这两个元素比<em>元素提供了更丰富的语义。

1.3.3　增强了Web应用程序功能

一直以来，HTML页面的功能被严格地限制着：客户端从服务器下载HTML页面数据，浏览器负责呈现这些HTML页面数据。出于对客户机安全性的考虑，以前的HTML在安全性方面确实做得足够安全。

当HTML页面做得太安全之后，我们就需要通过JavaScript等其他方式来增加HTML的功能。换句话来说，HTML对Web程序而言功能太单一了，比如上传文件时想同时选择多个文件都不行，前端开发者不得不通过Flash、JavaScript等各种技术来克服这个困难。为了弥补这种不足，HTML5规范增加了不少新的API，而各种浏览器正在努力实现这些API功能，在未来的日子里，使用HTML5开发Web应用将会更加轻松。

1.3.4　HTML5的目标

HTML5的目标主要是为了能够创建更简单的程序，书写出更简洁的代码。例如，为了使Web应用程序的开发变得更加容易，HTML5中提供了很多API。为了使HTML代码变得更简洁，在HTML5中开发出了新的属性、新的元素等。总体来说，HTML5为下一代Web平台提供了许许多多新的功能。

先来了解一下在HTML5中究竟提供了哪些革命性的新功能。

首先，在HTML5之前，有很多功能必须要使用JavaScript等脚本语言才能实现，比如前面例子中提到，在运行页面时经常使用的让文本框获得光标焦点的功能。如果使用HTML5，同样的功能只要使用元素的属性标签就可以实现了。这样的话，整个页面就变得非常清楚直观，容易理解。因此，Web设计者可以放心大胆地使用这些HTML5中新增的属性标签。由于HTML5中提供了大量的这种可以替代脚本的属性标签，使得开发出来的界面语言也变得更加简洁易懂。

不但如此，HTML5使页面的结构也变得更加清楚。之前使用的div标签也不再使用了，而是使用前面第二个示例中所提到的更加语义化的结构标签。这样，书写出来的界面结构就会显得非常清晰，页面中的各个部分要展示什么内容也会让人一目了然。

虽然HTML5宣称的立场是“非革命性的发展”，但是它所带来的功能是让人渴望的，使用它所进行的设计也是很简单的，因此，它深受Web设计者与开发者的欢迎。

1.4　各浏览器对HTML5的支持

HTML5被说成是划时代也好，具有革命性也好，如果不能被业界承认并且大面积地推广使用，这些都是没有意义的。事实上，今后HTML5被正式地、大规模地投入应用的可能性是相当高的。

通过对IE、谷歌、Firefox、Safari、Opera等主流浏览器的发展策略的调査，发现它们都在支持HTML5上采取了一定的措施。

  • ☑　微软

2010年3月16日，微软公司在拉斯维加斯举行的MIX10技术大会上宣布已推出IE9浏览器开发者预览版。微软称，IE9开发完成后，将会更好地支持CSS3、SVG和HTML5等互联网浏览通用标准。

  • ☑　谷歌

2010年2月19日，谷歌Gears项目经理伊安-费特通过博客宣布，谷歌将放弃对Gears浏览器插件项目的支持，以此重点开发HTML5项目。据费特表示，目前，在谷歌看来，Gears面临的主要问题是，该应用与HTML5的诸多创新非常相似，而且谷歌一直积极发展HTML5项目。因此，只要谷歌不断以加强新网络标准的应用功能为工作重点，那么为Gears增加新功能就无太大意义了。目前，多种浏览器将会越来越多地为GMail及其他服务提供更多脱机功能方面的支持，因此Gears面临的需求也在日益下降，这是谷歌做出上述调整的重要原因。

  • ☑　Mozilla

2010年7月，Mozilla基金会发布了即将推出的Firefox4浏览器的第一个早期测试版。在该版本中的Firefox浏览器中进行了大幅改进，包括新的HTML5语法分析器，以及支持更多HTML5形式的控制等。从官方文档来看，Firefox 4对HTML5是完全级别的支持，包括在线视频、在线音频等多种应用。

  • ☑　苹果

2010年6月7日，苹果公司在开发者大会的会后发布了Safari5，这款浏览器至少支持10个以上的HTML5新技术，包括全屏幕播放、HTML5视频、HTML5地理位置、HTML5切片元素、HTML5的可拖动属性、HTML5的形式验证、HTML5的Ruby、HTML5的Ajax历史和WebSocket字幕。

  • ☑　Opera

2010年5月5日，Opera软件公司首席技术官Hȧkon Wium Lie先生在访华之际，接受了中国软件资讯网等少数几家媒体的采访。号称“CSS之父”的Hȧkon Wium Lie认为，HTML5与CSS3将是全球互联网发展的未来趋势，目前包括Opera在内的诸多浏览器厂商，纷纷在研发HTML5相关产品，Web的未来属于HTML5。从Opera 10开始，Opera对HTML5的支持就十分出色。

以上证据表明，目前这些浏览器都纷纷地朝着支持HTML5、结合HTML5的方向迈进着，因此HTML5已经被广泛地推行开来了。

在HTML5以前，各浏览器对HTML和JavaScript的支持很不统一，这样就造成了同一个页面在不同浏览器中的表现不同。HTML5的目标是详细分析各浏览器所具有的功能，并以此为基础制订一个通用规范，要求各浏览器能支持这个通用标准。

就目前的形势来看，各浏览器厂商对HTML5都抱着极大的热情，尤其是微软因为对HTML5的支持不够积极，导致IE（Internet Explorer）市场份额下滑的事实，更成为各浏览器厂商的前车之鉴。如果各浏览器都能统一地遵守HTML5规范，以后前端程序员开发HTML+CSS+JavaScript页面时将会变得更加轻松。

1.5　HTML5要解决的3个问题

HTML5的出现，对于Web来说意义是非常重大的。因为它的意图是想要把目前存在的各种问题一并解决掉，它是一个企图心比较强的HTML版本。那么，到底Web上存在哪些问题，HTML5又打算怎么解决呢？

  • ☑　浏览器之间的兼容性很低

首先要提到的就是，Web浏览器之间的兼容性是非常低的。在某个Web浏览器上可以正常运行的HTML/CSS/JavaScript等Web程序，在另一个Web浏览器上就不正常了的事情是非常常见的。

如果用一句话来描述这个问题的原因，可以说是“规范不统一”。规范不统一，没有被标准化，是出现这个问题的主要原因。

在HTML5中，这个问题将得到解决。HTML5的使命是详细分析各浏览器所具有的功能，然后以此为基础，要求这些浏览器所有内部功能都要符合一个通用标准。

如果各浏览器都符合通用标准，然后以该标准为基础来编写程序，那么程序在各Web浏览器都能正常运行的可能性就大大提高了，这对于Web开发者和设计者都是一件令人可喜的事情。而且，今后开发者开发出来的Web功能只要符合通用标准，Web浏览器也都是很愿意封装该功能的。

  • ☑　文档结构不够明确

第二个问题是，在之前的HTML版本中，文档的结构不够清晰和明确。例如，为了要表示“标题”“正文”，之前一般都是用div元素。但是，严格说来，div不是一个能把文档结构表达得很清楚的元素，使用了过多的div元素的文章，阅读时不仔细研究，是很难看出文档结构的。而且，对于搜索引擎或屏幕阅读器等程序来说，过多使用了div元素，那么这些程序就连“从哪到哪算是重要的正文”，“这个ul元素是表示导航菜单，还是表示项目列表”等对于结构分析来说最基本的问题的答案也都不知道。

在HTML5中，为了解决这个问题，追加了很多与结构相关的元素。不仅如此，还结合了包括微格式、无障碍应用在内的各种各样的周边技术。

  • ☑　Web应用程序的功能受到了限制

最后一个问题是，HTML与Web应用程序的关系十分薄弱。Web应用程序的特征是先从网络下载，然后忠实运行，因此应该对会威胁到用户安全的功能进行限制。

目前安全性的保障方面已做到了，但对于Web应用程序来说，一直以来HTML真正所做出的贡献是很少的，比如就连上传文件时想同时选择一个以上的文件都做不到。

为了弥补这方面的不足，HTML5已经开始提供各种各样Web应用上的新API，各浏览器也在快速地封装着这些API，HTML5已经使丰富Web应用的实现变成了可能。

1.6　HTML的基本结构

1.6.1　HTML文件的编写方法

  • ☑　HTML标签

一个HTML文件是由一系列的元素和标签组成的。元素是HTML文件的重要组成部分，例如title（文件标题）、img（图像）及table（表格）等。元素名不区分大小写。HTML用标签来规定元素的属性和它在文件中的位置。

HTML的标签分单独出现的标签和成对出现的标签两种。

大多数标签成对出现，是由首标签和尾标签组成的。首标签的格式为<元素名称>，尾标签的格式为</元素名称>。其完整语法如下。

成对标签仅对包含在其中的文件部分发生作用，例如<title>和</title>标签用于界定标题元素的范围，也就是说，<title>和</title>标签之间的部分是此HTML文件的标题。

单独标签的格式为<元素名称>，其作用是在相应的位置插入元素，例如<br>标签便是在该标签所在位置插入一个换行符。

说明

在每个HTML标签，大写、小写和混写均可。例如<HTML>、<html>和<Html>，其结果都是一样的。

在每个HTML标签中，还可以设置一些属性，控制HTML标签所建立的元素。这些属性将位于所建立元素的首标签，因此，首标签的基本语法如下。

而尾标签的建立方式则为：

因此，在HTML文件中某个元素的完整定义语法如下。

说明

语法中，设置各属性所使用的“"”可省略。

  • ☑　元素的概念

当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称之为一个元素。

由于在HTML语法中，每个由HTML标签与文字所形成的元素内，还可以包含另一个元素。因此，整个HTML文件就像是一个大元素，包含了许多小元素。

在所有HTML文件，最外层的元素是由<html>标签建立的。在<html>标签所建立的元素中，包含了两个主要的子元素，这两个子元素是由<head>标签与<body>标签所建立的。<head>标签所建立的元素的内容为文件标题，而<body>标签所建立的元素内容为文件主体。

  • ☑　HTML文件结构

在介绍HTML文件结构之前，先来看一个简单的HTML文件及其在浏览器上的显示结果。

下面开始编写一个HTML文件，使用文件编辑器，例如Windows自带的记事本。

运行效果如图1.1所示。

从上述代码中可以看出HTML文件的基本结构如图1.2所示

图1.1　HTML示例

图1.2　HTML文件的基本结构

其中，<head>与</head>之间的部分是HTML文件的文件头部分，用以说明文件的标题和整个文件的一些公共属性。<body>与</body>之间的部分是HTML文件的主体部分，下面介绍的标签，如果不加特别说明，均是嵌套在这一对标签中使用的。

1.6.2　文件开始标签<html>

在任何的一个HTML文件里，最先出现的HTML标签就是<html>，它用于表示该文件是以超文本标识语言（HTML）编写的。<html>是成对出现的，首标签<html>和尾标签</html>分别位于文件的最前面和最后面，文件中的所有文件和HTML标签都包含在其中。例如：

该标签不带任何属性。

事实上，现在常用的Web浏览器（例如IE）都可以自动识别HTML文件，并不要求有<html>标签，也不对该标签进行任何操作。但是，为了提高文件的适用性，使编写的HTML文件能适应不断变化的Web浏览器，还是应该养成使用这个标签的习惯。

1.6.3　文件头部标签<head>

习惯上，把HTML文件分为文件头和文件主体两个部分。文件主体部分就是在Web浏览器窗口的用户区内看到的内容，而文件头部分用来规定该文件的标题（出现在Web浏览器窗口的标题栏中）和文件的一些属性。

<head>是一个表示网页头部的标签。在由<head>标签所定义的元素中，并不放置网页的任何内容，而是放置关于HTML文件的信息，也就是说它并不属于HTML文件的主体。它包含文件的标题、编码方式及URL等信息。这些信息大部分是用于提供索引、辨认或其他方面的应用。

写在<head>与</head>中间的文本，如果又写在<title>标签中，表示该网页的名称，并作为窗口的名称显示在这个网页窗口的最上方。

如果HTML文件并不需要提供相关信息时，可以省略<head>标签。

1.6.4　文件标题标签<title>

每个HTML文件都需要有一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的最上方。这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己很有用，今后想经常阅读，可以选择IE浏览器“收藏”菜单中的“添加到收藏夹”命令将它保存起来，供以后调用。网页的名称要写在<title>和</title>之间，并且<title>标签应包含在<head>与</head>标签之中。

HTML文件的标签是可以嵌套的，即在一对标签中可以嵌入另一对子标签，用来规定母标签所含范围的属性或其中某一部分内容，嵌套在<head>标签中使用的主要有<title>标签。

1.6.5　文件主体标签<body>

<body>标签是成对出现的。网页中的主体内容应该写在<body>和</body>之间，而<body>标签包含在<html>标签里面。

1.6.6　编写文件的注意事项

在编写文件时，要注意以下事项。

（1）“<”和“>”是任何标记的开始和结束。元素的标记要用这对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。

（2）标记与标记之间可以嵌套，如：

（3）在源代码中不区分大小写，如以下几种写法都是正确并且相同的标记。

（4）任何回车和空格在源代码中不起作用。为了代码清晰，建议不同的标记之间回车编写。

（5）HTML标记中可以放置各种属性，如：

其中align为属性，center为属性值，元素属性出现元素的< >内，并且和元素名之间有一个空格分割，属性值可以直接书写，也可以使用""括起来。如下面的两种写法都是正确的。

（6）如果希望在源代码中添加注释，便于阅读，可以以“<!--”开始，以“--!>”结束。如下代码。

注释语句只出现在源代码中，而不会在浏览器中显示。

1.7　编写第一个HTML文件

视频讲解

1.7.1　HTML文件的编写方法

编写HTML文件主要有如下3种方法。

  • ☑　手工直接编写

由于HTML语言编写的文件是标准的ASCII文本文件，所以我们可以使用任何的文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。

  • ☑　使用可视化软件

Microsoft公司的Frontpage、Macromedia公司的Dreamweaver、Adobe公司的Golive等软件均可以可视化的方式进行网页的编辑制作。

  • ☑　由Web服务器一方实时动态生成

这需要进行后端的网页编程来实现，如ASP、PHP等，一般情况下都需要数据库的配合。

1.7.2　手工编写页面

下面先使用记事本来编写第一个HTML文件。步骤如下。

（1）选择“开始/程序/附件/记事本”命令，打开记事本程序，如图1.3所示。

（2）在记事本中直接输入下面的HTML代码。

图1.3　记事本

（3）输入代码后，记事本中显示出代码的内容，如图1.4所示。

（4）选择记事本菜单中的“文件/保存”命令，弹出如图1.5所示的“另存为”对话框。

图1.4　显示了代码的记事本

图1.5　“另存为”对话框

（5）在对话框中选择存盘的文件夹，然后在“保存类型”中选择“所有文件”，在“编码”中选择ANSI，这里将“文件名”设置为1-2.htm，然后单击“保存”按钮。

（6）最后关闭记事本，回到存盘的文件夹，双击如图1.6所示的1-2.htm文件，可以在IE浏览器中看到最终页面效果，如图1.7所示。

图1.6　保存出的htm文件

图1.7　页面效果

1.7.3　使用Dreamwaver制作页面

Adobe Dreamweaver CS5.5是一个全面的专业工具集，可用于设计并部署极具吸引力的网站和Web应用程度并提供强大的编辑环境以及功能强大且基于标准的WYSIWYG设计表面。Adobe Dreamweaver CS5.5新版本使用了最新的技术加入了多屏幕预览、jQuery集成、CSS3/HTML5支持、尖端的实时视图渲染、移动UI构件、FTPS支持、智能编码协助集成FLV内容等全新功能。下面以Adobe Dreamweaver CS5.5中文版为例，说明使用可视化网页编辑软件制作页面的方法。步骤如下。

（1）选择“开始/所有程序/Adobe Dreamweaver CS5.5”命令，启动软件的主程序，其主界面如图1.8所示。

（2）Dreamweaver工作区使读者可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中，使读者可以快速更改文档。Dreamweaver CS5.5工作区布局如图1.9所示。

图1.8　Adobe Dreamweaver CS5.5主界面

图1.9　Dreamweaver CS5.5工作区布局

  • ☑　A——应用程序栏：应用程序窗口顶部包含一个工作区切换器、几个菜单（仅限Windows）以及其他应用程序控件。
  • ☑　B——文档工具栏：包含一些按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。
  • ☑　C——文档窗口：显示用户当前创建和编辑的文档。
  • ☑　D——工作区切换器：通过下拉列表可以选择不同的工作区，如编辑器。
  • ☑　E——面板组：帮助用户监控和修改工作。例如，“插入”面板、“CSS样式”面板和“文件”面板。若要展开某个面板，可双击其选项卡。
  • ☑　F——CS Live：Adobe Dreamweaver CS5.5相关服务。
  • ☑　G——标签选择器：位于“文档”窗口底部的状态栏中。显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签可以选择该标签及其全部内容。
  • ☑　H——属性检查器：用于查看和更改所选对象或文本的各种属性。每个对象具有不同的属性。在“编码器”工作区布局中，“属性”检查器默认是不展开的。
  • ☑　I——文件面板：用于管理文件和文件夹，无论它们是Dreamweaver站点的一部分还是位于远程服务器上。“文件”面板还使用户可以访问本地磁盘上的全部文件，非常类似于Windows资源管理器（Windows）或Finder（Macintosh）。

（3）如图1.10所示，单击文档工具栏中的“拆分”按钮，在这种视图下，编辑窗口被分割成左右两部分，左侧显示的是源代码视图，右侧是可视化视图，这样可以在选择和编辑源代码的时候及时地在可视化视图中看到效果。这两部分是互相联系，密不可分的，在代码视图中所做的任何修改都会影响设计视图，反之亦然。

图1.10　代码视图和设计视图

（4）在如图1.11所示的位置输入“让我们一起体验超炫的HTML旅程吧”作为页面的正文。

图1.11　输入正文

（5）在如图1.12所示的位置输入“HTML初露端倪”作为页面的标题。

图1.12　输入标题

（6）选择“文件/保存”命令，在如图1.13所示的对话框中选择存储位置，将文件命名成1-1.html，然后单击“保存”按钮。

图1.13　保存页面

（7）双击1-1.html文件，可以在浏览器中直接看到效果，如图1.14所示。

图1.14　1-1.html页面效果

1.7.4　使用WebStorm制作页面

WebStorm是Jetbrains公司旗下的一款JavaScript开发工具，软件支持不同浏览器的提示，还包括所有用户自定义的函数。代码补全包含了所有流行的库，如jQuery、YUI、Dojo等，并且使用WebStorm不止可以编辑JavaScript代码，还可以编写和修改HTML以及CSS代码。正因如此，WebStorm受到广大JavaScript开发者的喜爱。下面介绍WebStorm的下载和使用。

1．下载与安装

（1）首先打开浏览器，在浏览器地址栏中输入网址https://www.jetbrains.com/webstorm/进入WebStorm官方下载页面，如图1.15所示。在该页面中，选择符合自己电脑系统的WebStorm，然后单击DOWNLOAD按钮即可开始下载。

图1.15　WebStorm官方下载页面

（2）下载完成以后，页面中会弹出对话框，询问是否保留所下载的WebStorm，单击“保留”按钮即可将WebStorm安装包保留至本地，如图1.16所示。

（3）双击打开本地的WebStorm的安装包，开始安装WebStorm，如图1.17所示，单击Next按钮进行下一步，进入如图1.18所示的页面，在该页面中单击Browse按钮选择安装路径，选择完成以后，再次单击Next按钮进入下一项。

（4）如图1.19所示为安装选项页面，为了方便以后打开WebStorm，可以在电脑桌面中新建快捷方式，新建时，只需在第一项中选择符合自己电脑系统类型的快捷方式，然后单击Next按钮进行进入下一步，选择开始菜单文件夹页面，如图1.20所示，选择默认的JetBrains即可，单击Install按钮进行下一步。

图1.16　保存WebStorm安装包至本地

图1.17　开始安装WebStorm

图1.18　选择安装路径

图1.19　添加快捷方式

图1.20　选择开始菜单文件夹

（5）选择完开始菜单文件夹以后，进入WebStorm安装页面，如图1.21所示。安装完成以后，Next按钮会变成可单击的状态，单击该按钮，进入如图1.22所示的提示用户安装完成的页面，单击Finish按钮即可。

图1.21　安装WebStorm

图1.22　安装完成

2．WebStorm的使用

（1）双击打开WebStorm，打开页面如图1.23所示，打开后的页面如图1.24所示，单击第一项Create New Project按钮可以新建一个项目。

图1.23　打开WebStorm

图1.24　创建新的项目文件

（2）如图1.25所示为选择新建项目文件的路径的页面，读者也可以单击右侧文件夹的图标选择已有的文件夹，然后单击Create按钮即可成功创建一个项目，如图1.26所示，接下来需要创建HTML文件，创建方法是，右击项目名称，然后在弹出的快捷菜单中选择New/HTML File命令进入为HTML文件命名页面。

（3）如图1.27所示为新建的HTML5文件命名页面，为文件命名时，其扩展名可以省略，输入名称以后，单击OK按钮，进入如图1.28所示的页面，在该页面中，读者可以在<title>标签中修改网页的标题，在<body>标签中添加网页的正文，例如本实例中，修改网页的标题为“我的第一个HTML5页面”，并且添加网页正文内容为“明天你好”，代码编写完成以后，单击右侧Google chrome浏览器的图标，即可在谷歌浏览器中运行本实例。

图1.25　选择新建项目文件路径

图1.26　创建HTML文件

图1.27　为HTML文件命名

图1.28　代码编写页面

1.7.5　使用浏览器浏览HTML文件

不同公司有不同的浏览器，最著名的是微软公司的IE浏览器。使用浏览器最核心的功能就是查看我们编写的HTML文件效果，并可以查看其他网站页面的源代码。下面我们将以IE浏览器为例来讲解使用IE浏览器浏览HTML的过程。

（1）启动IE浏览器后，打开刚才所建立的HTML文件。

（2）选择“文件/打开”命令，然后在弹出的“打开”对话框中单击“浏览”按钮，如图1.29所示，找到硬盘中存放的网页文件，然后单击“打开”按钮，如图1.30所示。这样，浏览器就能够显示编写网页的页面效果了。

图1.29　“打开”对话框

图1.30　选择要打开的文件

1.7.6　HTML开发的明日图书网

明日图书网的前台网页制作就是应用HTML编写完成的。下面我们来具体看一下明日图书网的前台网页实现的源文件。查看源文件的步骤如下。

（1）打开浏览器，在地址栏输入http://www.mingribook.com，然后按Enter键。

（2）页面显示了明日图书网的首页面。

（3）选择浏览器主菜单中的“查看/源文件”命令，如图1.31所示

图1.31　选择“查看/源文件”命令

（4）这样，就会自动打开记事本来显示页面的源文件，如图1.32所示。

图1.32　页面的源文件

1.8　小结

本章主要介绍了HTML的基本概念以及其发展史，重点介绍了HTML的基本结构并详细介绍了如何编写HTML的代码。

希望读者能好好学习本章，有一个扎实的基础，为以后的学习做一个好的铺垫。

1.9　习题

选择题

1．HTML文档的树状结构中，（　　）标签为文档的根节点，位于结构中的最顶层。

A．<HTML>

B．<HEAD>

C．<BODY>

D．<TITLE>

2．下面关于设计网站的结构的说法错误的是（　　）。

A．按照模块功能的不同分别创建网页，将相关的网页放在一个文件夹中

B．必要时应建立子文件夹

C．尽量将图像和动画文件放在一个大文件夹中

D．当地网站和远程网站最好不要使用相同的结构

3．下列关于CSS样式和HTML样式的不同之处说法正确的是（　　）。

A．HTML样式只影响应用它的文本和使用所选HTML样式创建的文本

B．CSS样式只可以设置文字字体样式

C．HTML样式可以设置背景样式

D．HTML样式和CSS样式相同，没有区别

4．为了标识一个HTML文件应该使用的HTML标记是（　　）。

A．<p><／p>

B．<boby><／body>

C．<html><／html>

D．<table><／table>

5．如果站点服务器支持安全套接层（SSL），那么连接到安全站点上的所有URL开头是（　　）。

A．HTTP

B．HTTPS

C．SHTTP

D．SSL

判断题

6．HTML是HyperText Markup Language（超文本标记语言）的缩写。超文本使网页之间具有跳转的能力，是一种信息组织的方式，使浏览者可以选择阅读的路径，从而可以不需要顺序阅读。（　　）

7．在源代码窗口可以看到html文件是标准的ASCII文件，它是包含了许多被称为标签（tag）的特殊字符串的普通文本文件。（　　）

填空题

8．HTML网页文件的标记是<html></html>，网页文件的主体标记是<body></body>，标记页面标题的标记是______。

9．创建一个HTML文档的开始标记符是________；结束标记符是_________。

10．严格来说，________并不是一种编程语言，而只是一些能让浏览器看懂的标记。

上一章目录下一章