作者：刘欣,王雨竹
出版社：机械工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5入门经典试读：
前言
HTML5是下一代的HTML，它将会取代HTML4.0和XHTML1.1，成为新一代的Web语言。HTML5自2010年正式推出以来，就以一种惊人的速度被迅速推广，全球各知名浏览器厂商也对HTML 5提供了很好的支持。
目前，有关HTML5的书籍很多，但是能真正从初学者的角度出发，把技术及应用讲解透彻的并不是很多。本书从初学者的角度出发，为想要学习HTML5网页制作及使用HTML5从事网页开发的初中级开发人员、网页爱好者、大学师生精心策划，所讲内容从技术应用的角度出发，结合实际应用进行讲解，以便让想要学习HTML5网页开发的人员能够学会网页制作，并能够根据自己的意愿开发出实用的网页。
本书内容
本书按照学习HTML5的最佳结构来分配章节，共分为4篇20章，其中，前3篇学习HTML5的网页知识，第4篇学习实际项目的开发过程。本书知识结构如下图所示。
本书特点
❑循序渐进，简单易学
本书以初中级程序员为对象，先了解HTML5语言和属性的使用，再学习HTML5网页开发的基础技术，然后学习HTML5网页开发的高级内容，最后学习开发一个完整项目。讲解过程中步骤详尽，版式新颖，让读者在阅读时一目了然，从而能快速掌握书中内容。
❑学练结合，注释详尽
本书在讲解知识时提供了丰富的实例，帮助读者进行随学随练，真正能够学有所用。另外，为了便于读者更好地学习和使用本书，书中所有的代码都提供了详尽的注释。
❑上机实践，巩固知识
要充分理解和掌握一项技术，最佳的方式就是多练习、多实践。本书中在每章内容介绍完后，提供多个上机实践题目供读者自己完成，以此来检验读者对本章内容的掌握情况。每个实例任务分为“题目描述”和“技术指导”两部分。其中，“题目描述”给出了实例功能的详细描述和效果图，“技术指导”给出了实现实例的思路和关键代码。
❑视频学习，讲解详尽
为了更方便读者学习书中的内容，在本书光盘中提供了11个小时以上的多媒体视频讲座，其讲解细腻、层次清楚、互动性强。在加深对内容理解的同时，切实解决“是什么”、“为什么”、“怎么办”、“应注意些什么”等问题。
❑海量资源，超值奉送
本书光盘中提供了明日科技近十年积累的程序开发资源库，包括海量实例资源库、模块资源库、项目案例资源库、测试题库系统、面试资源库等内容。
读者对象
本书是一部零基础HTML语言的开发图书，非常适合以下人员阅读：
❑零基础的初学编程的人员。
❑初中级程序开发人员。
❑编程爱好者。
❑想学编程的各企事业单位在职人员。
❑大中专院校的老师和学生。
❑相关培训机构的老师和学员。
本书作者
本书由明日科技组织编写，参加编写的有刘欣、王雨竹、王小科、王国辉、陈丹丹、隋光宇、杨丽、顾彦玲、陈英、宋禹蒙、高春艳、刘莉莉、赛奎春等。由于作者水平有限，疏漏和不足之处在所难免，欢迎广大读者提出宝贵意见。
非学无以广才，非志无以成学。祝大家读书快乐！明日科技2013年3月第一篇 基础知识篇
本篇主要内容：
❑第1章 HTML5开发前奏
❑第2章 HTML5带来的标记变化
❑第3章 HTML5网页的基本要素
❑第4章 让珍珠串起来——列表
❑第5章 在迷宫中寻找出口——超链接
❑第6章 如何显示图像
❑第7章 让程序听话——表格的应用第1章 HTML5开发前奏
视频讲解：21分
Internet的飞速发展促进了越来越多的网站的创建，在我们浏览这些网站的时候，看到的是丰富的影像、文字、图片，这些内容都是通过一种名为HTML的语言表现出来的。对于网页设计和制作人员，尤其是开发动态网站的编程人员来讲，制作网页的时候，如果不涉及HTML语言，几乎是不可能的。
通过学习本章，读者可以达到以下学习目的：
❑了解HTML的基本概念及其发展史；
❑掌握HTML的基本结构；
❑掌握编写HTML文件的编写方法；
❑掌握数据的装箱及拆箱操作原理；
❑熟悉如何利用浏览器浏览HTML文件。1.1 为什么选择HTML5语言
World Wide Web（万维网WWW）是一种建立在Internet上的、全球性的、交互的、多平台的、分布式的信息资源网络。它采用HTML语言描述超文本（Hypertext）文件。这里所说的超文本指的是包含有链接元素的文件，并且包含了多媒体对象的文件。
WWW万维网有3个基本组成部分，分别是URL（统一资源定位器）、HTTP（超文本传输协议）和HTML（超文本标记语言）。
URL（Universal Resource Locators）提供在Web上进入资源的统一方法和路径，使得用户所要访问的站点具有唯一性，这就相当于我们每个人只有一个身份证号一样。它说明了链接所指向的每个文件的类型及其准确位置。
HTTP（Hypertext Transfer Protocol）超文本传输协议是一种网络上传输数据的协议，是用于从Web服务器传输超文本到本地浏览器的传递协议。它可以使浏览器更加高效。
HTML（Hypertext Markup Language，中文通常称为超文本置标语言或超文本标记语言）是一种文本类、解释执行的标记语言，它是Internet上用于编写网页的主要语言。而HTML5是下一代的HTML，它将会取代HTML4.0和XHTML1.1，成为新一代的Web语言。HTML5自从2010年正式推出以来，就以一种惊人的速度被迅速推广，全球各知名浏览器厂商也对HTML5提供了很好的支持。例如，微软就对下一代IE 9做了标准上的改进，使其能够支持HTML5。而且HTML5还有一个特点，就是在老版本的浏览器上也可以正常运行。
要把信息发布到全球，就必须要使用能够被大众接受的语言，也就是使用一种大多数计算机能够识别的发布语言。在WWW上，通常使用的发布语言是HTML，即超文本标记语言。
HTML是一种简易的文件交换标准，用于物理的文件结构，它旨在定义文件内的对象和描述文件的逻辑结构，而并不定义文件的显示。由于HTML所描述的文件具有极高的适应性，所以特别适合于WWW的发布环境。
HTML是纯文本类型的语言，使用HTML编写的网页文件也是标准的纯文本文件。我们可以用任何文本编辑器例如Windows的“记事本”程序打开它，查看其中的HTML源代码，也可以在用浏览器打开网页时通过相应的“查看/源文件”命令查看网页中的HTML代码。HTML文件可以直接由浏览器解释执行，而无需编译。当用浏览器打开网页时，浏览器读取网页中的HTML代码，分析其语法结构，然后根据解释的结果显示网页内容。正是因为如此，网页显示的速度同网页代码的质量有很大的关系，保持精简和高效的HTML源代码是十分重要的。1.2 HTML发展历程
HTML的历史可以追溯到很久以前。1993年HTML首次以因特网草案的形式发布。20世纪90年代的人见证了HTML的高速发展，从2.0版，到3.2版和4.0版，再到1999年的4.01版，一直到现在正逐步普及的HTML5。随着HTML的发展，W3C（万维网联盟）掌握了对HTML规范的控制权。
在快速发布了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.3 谁在开发HTML5
我们都知道开发HTML5需要成立相应的组织，并且肯定需要有人来负责。这正是下面这3个重要组织的工作。
❑WHATWG：由来自Apple、Mozilla、Google、Opera等浏览器厂商的人组成，成立于2004年。WHATWG开发HTML和Web应用API，同时为各浏览器厂商以及其他有意向的组织提供开放式合作。
❑W3C：W3C下辖的HTML工作组目前负责发布HTML5规范。
❑IETF（Internet Engineering Task Force，因特网工程任务组）：这个任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API（WebSocket API）依赖于新的WebSocket协议，IETF工作组正在开发这个协议。1.4 HTML5的新认识
任何新鲜事物的出现，都会带给人们惊喜，同时也会存在很多争议。虽然Web开发者普遍认为有了HTML5是比较好的，但是还是会很担心，例如：新的HTML5在老的浏览器上能否正常运行，会不会产生错误等。HTML5是基于各种各样的理念进行设计的，这些设计理念体现了对可能性和可行性的新认识。
❑兼容性。
❑实用性。
❑互通性。
1.4.1 兼容性
虽然到了HTML5时代，但并不代表现在用HTML4创建出来的网站必须全部重建。HTML5并不是颠覆性的革新。相反，实际上HTML5的一个核心理念就是保持一切新特性平滑过渡。
尽管HTML5标准的一些特性非常具有革命性，但是HTML5旨在进化而非革命。这一点正是通过兼容性体现出来的。正是因为保障了兼容性才能让人们毫不犹豫地选择用HTML5开发网站。
1.4.2 实用性和用户优先
HTML5规范是基于用户优先准则编写的，其宗旨是“用户即上帝”，这意味着在遇到无法解决的冲突时，规范会把用户放到第一位，其次是页面的作者，再次是实现者（或浏览器），接着是规范制定者，最后才考虑理论的纯粹实现。因此，HTML5的绝大部分功能是实用的，只是在有些情况下还不够完美。实用性是指要能够解决实际问题。HTML5内只封装了切实有用的功能，不封装复杂而没有实际意义的功能。
1.4.3 化繁为简
HTML5要的就是简单，避免不必要的复杂性。HTML5的口号是“简单至上，尽可能简化”。因此，HTML5做了以下改进：
❑以浏览器原生能力替代复杂的JavaScript代码。
❑新的简化的DOCTYPE。
❑新的简化的字符集声明。
❑简单而强大的HTML5 API。1.5 无插件范式
过去，很多功能只能通过插件或者复杂的hack（本地绘图API、本地socket等）来实现，但在HTML5中提供了对这些功能的原生支持。插件的方式存在如下问题：
❑插件安装可能失败。
❑插件可能被禁用或者是屏蔽。
❑插件自身会成为被攻击的对象。
❑插件不容易与HTML文档的其他部分集成（因为插件边界、剪裁和透明度等问题）。
虽然一些插件的安装率很高，但在控制严格的公司内部网络环境中经常会被封锁。此外，由于插件经常还会给用户带来烦人的广告，一些用户也会选择屏蔽此类插件。一旦用户禁用了插件，就意味着依赖该插件显示的内容也无法表现出来了。
在已经设计好的页面中，要想把插件显示的内容与页面上其他元素集成也比较困难，因为会引起剪裁和透明度等问题。插件使用的是自带的模式，与普通Web页面所使用的不一样，所以当弹出的菜单或者其他可视化元素与插件重叠时，会特别麻烦。这时，需要HTML5应用原生功能来解决，它可以直接用CSS和JavaScript的方式控制页面布局。实际上这也是HTML5的最大亮点，显示了以前任何HTML版本都不具备的强大能力。HTML5不仅提供新元素支持新功能，更重要的是添加了对脚本和布局之间的原生交互能力，使我们可以实现以前不能实现的效果。
以HTML5中的canvas元素为例，有很多非常底层的事情以前是没办法做到的（如在HTML4的页面中很难画出对角线），而有了canvas就可以很容易地实现了。更为重要的是新API释放出来的潜能，以及仅需寥寥几行CSS代码就能完成布局的能力。基于HTML5的各类API的优秀设计，我们可以轻松地对它们进行组合应用。HTML5的不同功能组合应用为Web开发注入了一股强大的新生力量。1.6 探秘——HTML5新特性
HTML5给人们带来了众多惊喜，一些优点和新的特性如下：
❑新特性应该基于HTML、CSS、DOM和JavaScript。
❑减少了对外部插件的需求（比如Flash）。
❑更优秀的错误处理。
❑更多取代脚本的标记。
❑HTML5应该独立于设备。
❑用于绘画的canvas元素。
❑用于媒介回放的video和audio元素。
❑对本地离线存储的更好的支持。
❑新元素和表单控件。
而这些新特性，正在如今的浏览器最新版本中得到越来越普遍的实现，越来越多的开发者开始学习和使用这些新特性。1.7 HTML的标记构成
1.7.1 HTML标记的使用技巧
1.HTML标记
一个HTML文件是由一系列的元素和标记组成的。元素是HTML文件的重要组成部分，如title（文件标题）、img（图像）及table（表格）等。元素名不区分大小写。HTML用标记来规定元素的属性和它在文件中的位置。
HTML的标记分单独出现的标记和成对出现的标记两种。
大多数标记成对出现，由首标记和尾标记组成。首标记的格式为＜元素名称＞，尾标记的格式为＜/元素名称＞。其语法如下：
＜元素名称＞要控制的元素＜/元素名称＞
成对标记仅对包含在其中的文件部分发生作用，例如＜title＞和＜/title＞标记用于界定标题元素的范围，也就是说，＜title＞和＜/title＞标记之间的部分是此HTML文件的标题。
单独标记的格式为＜元素名称＞，其作用是在相应的位置插入元素，如＜br/＞标记便是在该标记所在位置插入一个换行符。
说明 在每个HTML标记中，大、小写混写均可。例如＜HTML＞、＜html＞和＜Html＞，其结果都是一样的。
在每个HTML标记中，还可以设置一些属性，控制HTML标记所建立的元素。这些属性将位于所建立元素的首标记。首标记的基本语法如下：
＜元素名称属性1="值1" 属性2="值2"……＞
而尾标记的建立方式则为：
＜/元素名称＞
因此，在HTML文件中某个元素的完整定义语法如下：
＜元素名称属性1="值1" 属性2="值2"……＞元素资料＜/元素名称＞
说明 语法中，设置各属性所使用的""可省略。
2.元素的概念
当用一组HTML标记将一段文字包含在中间时，这段文字与包含文字的HTML标记被称为一个元素。
由于在HTML语法中，每个由HTML标记与文字所形成的元素内，还可以包含另一个元素，因此，整个HTML文件就像是一个大元素，其中包含了许多小元素。
在所有HTML文件中，最外层的元素是由＜html＞标记建立的。在＜html＞标记所建立的元素中，包含了两个主要的子元素，这两个子元素是由＜head＞标记与＜body＞标记所建立的。＜head＞标记所建立的元素的内容为文件头，而＜body＞标记所建立的元素的内容为文件主体。
3.HTML文件结构
在介绍HTML文件结构之前，先来看一个简单的HTML文件及其在浏览器上的显示结果。
下面开始编写一个HTML文件，使用任一文件编辑器，例如Windows自带的记事本。
＜html＞
＜head＞
＜title＞文件标题＜/title＞
＜/head＞
＜body＞
文件正文
＜/body＞
＜/html＞
运行效果如图1.1所示。图 1.1 HTML示例
从上述代码中可以看出，HTML文件的基本结构如图1.2所示。图 1.2 HTML文件的基本结构
其中，＜head＞与＜/head＞之间的部分是HTML文件的文件头部分，用以说明文件的标题和整个文件的一些公共属性；＜body＞与＜/body＞之间的部分是HTML文件的主体部分。下面介绍的标记，如果不加特别说明，均是嵌套在这一对标记中使用的。
1.7.2 开始标记＜html＞
在任何一个HTML文件里，最先出现的HTML标记就是＜html＞，它用于表示该文件是以超文本标记语言（HTML）编写的。＜html＞是成对出现的，首标记＜html＞和尾标记＜/html＞分别位于文件的最前面和最后面，文件中的所有内容和其他HTML标记都包含在其中。例如：
＜html＞
文件的全部内容
＜/html＞
该标记不带任何属性。
事实上，现在常用的Web浏览器（例如IE）都可以自动识别HTML文件，并不要求有＜html＞标记，也不对该标记进行任何操作。但是，为了提高文件的适用性，使编写的HTML文件能适应不断变化的Web浏览器，还是应该养成使用这个标记的习惯。
1.7.3 头部标记＜head＞
习惯上，把HTML文件分为文件头和文件主体两个部分。文件主体部分就是在Web浏览器窗口的用户区内看到的内容，而文件头部分用来规定该文件的标题（出现在Web浏览器窗口的标题栏中）和文件的一些属性。
＜head＞是一个表示网页头部的标记。在由＜head＞标记所定义的元素中，并不放置网页的任何内容，而是放置关于HTML文件的信息，也就是说它并不属于HTML文件的主体。它包含文件的标题、编码方式及URL等信息。这些信息大部分是用于提供索引、辨认或其他方面的用途。
写在＜head＞与＜/head＞中间的文本，如果又写在＜title＞标记中，表示该网页的名称，并作为窗口的名称显示在这个网页窗口的最上方。
如果HTML文件并不需要提供相关信息，则可以省略＜head＞标记。
1.7.4 标题标记＜title＞
每个HTML文件都需要有一个文件名称。在浏览器中，文件名称作为窗口名称显示在该窗口的最上方，这对浏览器的收藏功能很有用。如果浏览者认为某个网页对自己很有用，今后想经常阅读，可以选择IE浏览器“收藏”菜单中的“添加到收藏夹”命令将它保存起来，供以后调用。网页的名称要写在＜title＞和＜/title＞之间，并且＜title＞标记应包含在＜head＞与＜/head＞标记之内。
HTML文件的标记是可以嵌套的，即在一对标记中可以嵌入另一对子标记，用来规定母标记所含范围的属性或其中某一部分内容。嵌套在＜head＞标记中使用的主要就是＜title＞标记。
1.7.5 主体标记＜body＞
＜body＞标记是成对出现的。网页中的主体内容应该写在＜body＞和＜/body＞之间，而＜body＞标记包含在＜html＞标记里面。
1.7.6 编写文件时的注意事项
在编写文件的时候，要注意以下事项：
1）“＜”和“＞”是任何标记的开始和结束。元素的标记要用这对尖括号括起来，并且结束的标记总是由在开始的标记前加一个斜杠构成。
2）标记与标记之间可以嵌套，如：
＜H3＞＜CENTER＞HTML文件＜/CENTER＞＜/H3＞
3）在源代码中不区分大小写，如以下几种写法都是正确并且相同的标记：
＜HEAD＞
＜head＞
＜Head＞
4）任何回车和空格在源代码中不起作用。为了使代码清晰，建议在不同的标记之间加入回车。
5）HTML标记中可以放置各种属性，如：
＜h3 align="center"＞HTML你好＜/h3＞
其中align为属性，center为属性值，元素属性出现元素的＜＞内，并且和元素名之间由一个空格分隔，属性值可以直接书写，也可以使用""扩起来。如下面的两种写法都是正确的：
＜h3 align="center"＞HTML你好＜/h3＞
＜h3 align=center＞HTML你好＜/h3＞
6）如果希望在源代码中添加注释，可以以“＜!--”开始，编写注释内容，以“--!＞”结束。如下代码：
＜!------------------------------------------------!＞
＜!--文件范例：1.2.htm--!＞
＜!--文件说明：第一个HTML文件--!＞
＜!--------------------------------------------!＞
注释语句只出现在源代码中，而不会在浏览器中显示。1.8 编写第一个HTML文件
1.8.1 HTML文件的编写方法
编写HTML文件主要有如下3种方法:
❑手工直接编写。由于HTML编写的文件是标准的ASCII文本文件，所以我们可以使用任何文本编辑器来打开并编写HTML文件，如Windows系统中自带的记事本。
❑使用可视化软件。Microsoft公司的Frontpage、Macromedia公司的Dreamweaver、Adobe公司的Golive等软件均可以可视化的方式进行网页的编辑制作。
❑由Web服务器一方实时动态生成。这需要通过后端的网页编程来实现，如ASP、PHP等。一般情况下都需要数据库的配合。
1.8.2 手工编写页面
下面先使用记事本来编写我们的第一个HTML文件。步骤如下：
Step 1 选择“开始/程序/附件/记事本”命令，打开“记事本”程序，如图1.3所示。图 1.3 “记事本”界面
Step 2 在“记事本”中直接键入下面的HTML代码：
＜html＞
＜head＞
＜title＞简单的HTML文件＜/title＞
＜/head＞
＜body text="blue"＞
＜h2 align="center"＞HTML你好＜/h2＞
＜hr＞
＜p＞让我们认识HTML吧＜/p＞
＜/body＞
＜/html＞
Step 3 输入代码后，记事本中显示出代码的内容，如图1.4所示。图 1.4 显示了代码的“记事本”
Step 4 选择“记事本”菜单中的“文件/保存”命令，弹出如图1.5所示的“另存为”对话框。图 1.5 “另存为”对话框
Step 5 在对话框中选择存盘的文件夹，然后在“保存类型”中选择“所有文件”，在“编码”中选择ANSI。这里将“文件名”设置为1-2.html，然后单击“保存”按钮。
Step 6 关闭“记事本”，回到存盘的文件夹，双击如图1.6所示1-2.html文件，可以在IE浏览器中看到最终执行效果，如图1.7所示。图 1.6 保存的html文件图 1.7 执行效果
1.8.3 使用可视化软件制作页面
Adobe Dreamweaver CS5.5是一个全面的专业工具集，可用于设计并部署极具吸引力的网站和Web应用程序，并提供强大的编辑环境以及功能强大且基于标准的WYSIWYG设计界面。Adobe Dreamweaver CS5.5新版本使用了最新的技术，加入了多屏幕预览、jQuery集成、CSS3/HTML5支持、尖端的实时视图渲染、移动UI构件、FTPS支持、智能编码协助集成FLV内容等全新功能。下面以Adobe Dreamweaver CS5.5中文版为例，说明使用可视化网页编辑软件制作页面的方法。步骤如下：
Step 1 单击“开始/所有程序/Adobe Dreamweaver CS5.5”，启动软件的主程序，其主界面如图1.8所示。图 1.8 Adobe Dreamweaver CS5.5主界面
Dreamweaver工作区使您可以查看文档和对象属性。工作区还将许多常用操作放置于工具栏中，使您可以快速更改文档。Dreamweaver CS5.5工作区布局如图1.9所示。图 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）。
Step 2 如图1.10所示，单击文档工具栏中的“拆分”按钮，在这种视图下，编辑窗口被分割成左右两部分，左侧显示的是源代码视图，右侧是可视化视图，这样可以在选择和编辑源代码的时候及时地在可视化视图中看到效果。这两部分是互相联系、密不可分的，在代码视图中所做的任何修改都会影响设计视图，反之亦然。图 1.10 代码视图和设计视图
Step 3 在如图1.11所示的位置输入“让我们一起体验超炫的HTML旅程吧”作为页面的正文。图 1.11 输入正文
Step 4 在如图1.12所示的位置输入“HTML初露端倪”作为页面的标题。图 1.12 输入标题
Step 5 选择“文件/保存”命令，在如图1.13所示的“另存为”对话框中选择存储位置，将文件命名成1-1.html，然后单击“保存”按钮。图 1.13 保存页面
Step 6 双击1-1.html文件，可以在浏览器中直接看到执行效果，如图1.14所示。图 1.14 1-1.html执行效果
1.8.4 使用浏览器浏览HTML文件
不同公司有不同的浏览器，最著名的浏览器之一是微软公司的Internet Explorer。使用浏览器最核心的功能就是查看我们编写的HTML文件效果，并可以查看其他网站页面的源代码。下面我们将以Internet Explorer为例来讲解一下使用Internet Explorer浏览器浏览HTML的过程。
启动Internet Explorer浏览器后，打开我们刚才所建立的HTML文件。
选择“文件/打开”命令，然后单击“浏览”按钮，如图1.15所示。找到硬盘中存放的网页文件，如图1.16所示，然后单击“打开”按钮。这样，浏览器就能够显示编写的网页文件的页面效果了。图 1.15 打开图 1.16 选择要打开的文件
1.8.5 明日图书网使用HTML开发
明日图书网的前台网页制作就是应用HTML编写完成的。下面我们来具体看一下明日图书网的前台网页实现的源文件。查看源文件的步骤如下：
Step 1 打开浏览器，在地址栏输入http://www.mingribook.com，然后回车。
Step 2 页面显示了明日图书网的首页面。
Step 3 选择浏览器主菜单中的“查看/源文件”命令，如图1.17所示。图 1.17 查看/源文件
Step 4 这样就会自动打开记事本显示页面的源文件，如图1.18所示。图 1.18 页面的源文件1.9 小结
本章主要介绍了HTML的基本概念及其发展史，重点介绍了HTML的基本结构，并详细介绍了如何编写HTML的软件以及如何使用标记。
希望读者通过学习本章，能为学习HTML打下一个扎实的基础，为以后的学习做一个良好的铺垫。1.10 习题
选择题
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＞
填空题
1.HTML网页文件的标记是＜html＞＜/html＞，网页文件的主体标记是＜body＞＜/body＞，标记页面标题的标记是________。
2.创建一个HTML文档的开始标记________；结束标记是________。
3.严格来说，________并不是一种编程语言，而只是一些能让浏览器看懂的标记。第2章 HTML5带来的标记变化
视频讲解：43分
本章介绍HTML的各种基本标记，这些都是一个完整的网页必不可少的。通过它们可以了解网页的基本结构及其工作原理。
通过学习本章，读者可以达到以下学习目的：
❑掌握HTML头部标记；
❑掌握标题标记＜title＞；
❑掌握基底网址标记＜base＞；
❑掌握元信息标记＜meta＞；
❑掌握页面的主题标记；
❑熟悉各种标记的应用。2.1 重中之重——头部标记
在HTML语言的头元素中，一般需要包括标题、基底信息、元信息等。HTML的头元素是以＜head＞为开始标记、以＜/head＞为结束标记的。一般情况下，CSS和JavaScript都定义在头元素中的，而定义在HTML语言头部的内容往往不会在网页上直接显示。它用于包含当前文档的相关信息。
常用的头部标记内容如表2.1所示。
＜head＞与＜/head＞之间的内容不会在浏览器的文档窗口显示，但是，其中的元素有特殊重要的意义。下面就来分别介绍这些标记的作用。2.2 名称所在——标题＜title＞
HTML文件的标题显示在浏览器的标题栏，用以说明文件的用途。每个HTML文档都应该有标题，在HTML文档中，标题文字位于＜title＞和＜/title＞标记之间。＜title＞和＜/title＞标记位于HTML文档的头部，即位于＜head＞和＜/head＞标记之间。
语法：
＜title＞...＜/title＞
标记内部就是标题的内容。
实例代码：
＜html＞
＜head＞
＜title＞简单的HTML文件＜/title＞
＜/head＞
＜body text="blue"＞
＜h2 align="center"＞HTML你好＜/h2＞
＜hr＞
＜p＞让我们认识HTML吧＜/p＞
＜/body＞
＜/html＞
上面的代码中的粗体显示的就是页面的标题。保存页面后在IE中打开，可以看到浏览器的标题栏中显示了刚才设置的标题“简单的HTML文件”，效果如图2.1所示。图 2.1 HTML页面的标题2.3 隐藏很深——元信息标记＜meta＞
＜meta＞元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。在HTML中，meta标记不需要设置结束标记，在一个尖括号内就是一个meta内容，而在一个HTML头页面中可以有多个meta元素。meta元素的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎机器人查找、分类。下面根据功能的不同分别介绍元信息标记的使用方法。
2.3.1 页面关键字
关键字是为搜索引擎提供的，例如一个音乐网站，为了提高在搜索引擎中被搜索到的几率，可以设定多个和音乐主题相关的关键字以便搜索。这些关键字不会出现在浏览器的显示中。需要注意的是，大多数搜索引擎检索时会限制关键字的数量，有时关键字过多，该网页会在检索中被忽略。所以关键字的输入不宜过多，应以切中要害为准。另外，关键字之间要用逗号分隔。
语法：
＜meta name="keywords" content="具体的关键字"＞
在该语法中，name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义了具体的关键字内容。
实例代码：
＜html＞
＜head＞
＜title＞设置页面关键字＜/title＞
＜meta name="keywords" content="音乐,html，流行"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在该实例中设定了“音乐”、"html"和“流行”这3个词语作为该页面的关键字。
2.3.2 页面描述
对于一个网站的页面，可以在源代码中添加说明语句，将网站的主题描述清晰，这就是描述语句的作用。这个描述语句内容也不会出现在浏览器的显示中。说明文字可供搜索引擎寻找网页，可存储在搜索引擎的服务器中，在浏览者搜索时随时调用，还可以在检索到网页时作为检索结果返回给浏览者。搜索引擎同样限制说明文字的字数，所以内容要尽量简明扼要。
语法：
＜meta name="description" content="对页面的描述语言"＞
在该语法中，name为属性名称，这里设置为description，也就是将元信息属性设置为页面描述，在content中定义具体的描述语言。
实例代码：
＜html＞
＜head＞
＜title＞设置页面描述＜/title＞
＜meta name="keyword" content="html,元信息，关键字"＞
＜meta name="description" content="关于HTML使用的网站"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在该实例中，设置“关于HTML使用的网站”为页面的描述。
2.3.3 编辑工具
现在有很多编辑软件都可以制作网页，在源代码的头页面中可以设置网页编辑工具的名称。与其他meta元素相同，编辑工具也只是在页面的源代码中可以看到，而不会显示在浏览器中。
语法：
＜meta name="generator" content="编辑软件的名称"＞
在该语法中，name为属性名，设置为generator，也就是设置编辑工具，在content中定义具体的编辑器名称。
实例代码：
＜html＞
＜head＞
＜title＞设置编辑工具＜/title＞
＜meta name="keyword" content="html,元信息，关键字"＞
＜meta name="description" content="关于HTML使用的网站"＞
＜meta name="generator" content="Adobe Dreamweaver CS5.5"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在这一实例中，设置Adobe Dreamweaver CS5.5作为网页的编辑工具。
2.3.4 作者信息设置
在页面的源代码中，可以显示页面制作者的姓名及个人信息。这使得可以在源代码中保留作者希望保留的信息。
语法：
＜meta name="author" content="作者的姓名"＞
在该语法中，name为属性名，设置为author，也就是设置作者信息，在content中定义具体的信息。
实例代码：
＜html＞
＜head＞
＜title＞设定作者信息＜/title＞
＜meta name="keyword" content="html,元信息，关键字"＞
＜meta name="description" content="关于HTML使用的网站"＞
＜meta name="generator" content="Adobe Dreamweaver CS5.5"＞
＜meta name="author" content="李小米"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在这一实例中，将作者的姓名“李小米”添加到了网页的源代码中。
2.3.5 限制搜索方式
网页可以通过在meta中的设置来限制搜索引擎对页面的搜索方式。
语法：
＜meta name="robots" content="搜索方式"＞
在该语法中，搜索方式的值和其所对应的含义如表2.2所示。
实例代码：
＜html＞
＜head＞
＜title＞限制搜索方式＜/title＞
＜meta name="robots" content="index"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
2.3.6 网页文字及语言
在网页中还可以通过语句来设定语言的编码方式，这样，浏览器就可以自动地选择语言，而不需要手动选择。
语法：
第一种方法：＜meta http-equiv="Content-Type" content="text/html;charset=字符集类型"＞
第二种方法：＜meta http-equiv="Content-Language" content="语言"＞
在该语法中，http-equiv用于传送HTTP通信协议的标头，也就是设定标头属性的名称，而在content中才设置具体的属性值。其中charset设置了网页的内码语系，也就是字符集的类型，charset往往设置为gb_2312，即简体中文。英文是ISO-8859-1字符集，此外还有BIG5、utf-8、shift-Jis、Euc、Koi8等字符集。如果采用第二种方法，则简体中文的设置为：
＜meta http-equiv="Content-Language" content="zh_CN"＞
2.3.7 定时跳转页面
在浏览网页时经常会看到一些欢迎信息的界面，在经过一段时间后，这一页面会自动转到其他页面中，这就是网页的跳转。使用HTTP代码就可以很轻松地实现这一功能。
语法：
＜meta http-equiv="refresh" content="跳转时间;url=链接地址"＞
在该语法中，refresh表示网页的刷新，而在content中设定刷新的时间和刷新后的地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间是以秒为单位的。
实例代码：
＜html＞
＜head＞
＜title＞设置网页的定时跳转＜/title＞
＜meta http-equiv="refresh" content="3;url=http://www.mingribook.com"＞
＜/head＞
＜body＞
您好，本页在3秒之后将自动跳转到明日图书网
＜/body＞
＜/html＞
运行程序，效果如图2.2所示。在3秒之后，网页自动跳转到了明日图书网站，如图2.3所示。图 2.2 运行自动跳转的页面图 2.3 跳转后的页面
2.3.8 有效期的设置
在某些网站上会设置网页的到期时间，一旦过期则必须到服务器上重新调用。
语法：
＜meta http-equiv="expires" content="到期的时间"＞
在该语法中，到期的时间必须是GMT时间格式，即“星期日月年时分秒”，这些时间都使用英文和数字进行设定。
实例代码：
＜html＞
＜head＞
＜title＞设置有效期限＜/title＞
＜meta http-equiv="expires" content="Web,14 september 2012 16:20:00 GMT"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在实例中设置了网页的到期时间为2012年9月14日16:20。
2.3.9 禁止从缓存中调用
使用网页缓存可以加快浏览网页的速度，因为缓存将曾经浏览过的页面暂存在计算机中，当用户下次打开同一个网页时，即可快速浏览该网页，省去读取同一网页的时间。但是如果网页的内容频繁更新，网页制作者希望用户随时都能查看到最新的网页内容，则可以通过meta语句禁用页面缓存。
语法：
＜meta http-equiv="cache-control" content="no-cache"＞
＜meta http-equiv="pragma" content="no-cache"＞
在该语法中，cache-control和pragma都可以用来设定缓存的属性，而在content中则是真正禁止调用缓存的语句。
实例代码：
＜html＞
＜head＞
＜title＞禁止从缓存中调用＜/title＞
＜meta http-equiv="cache-control" content="no-cache"＞
＜meta http-equiv="pragma" content="no-cache"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
2.3.10 删除过期的cookie
如果网页过期，则应删除存盘的cookie。
语法：
＜meta http-equiv="set-cookie" content="到期的时间"＞
在该语法中，到期的时间同样是GMT时间格式。
实例代码：
＜html＞
＜head＞
＜title＞删除过期的cookie＜/title＞
＜meta http-equiv="set-cookie" content="Web,14 september 2012 16:20:00 GMT"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
在实例中，设置了网页的到期时间为2012年9月14日16:20，也就是在这个时候删除存盘的cookie。
2.3.11 强制打开新窗口
强制网页在当前窗口中以独立的页面显示，可以防止自己的网页被别人当作一个frame页调用。
语法：
＜meta http-equiv="windows-target" content="_top"＞
在该语法中，windows-target表示新网页的打开方式，而content中设置_top则代表打开的是一个独立页面。
实例代码：
＜html＞
＜head＞
＜title＞强制打开新窗口＜/title＞
＜meta http-equiv="windows-target" content="_top"＞
＜/head＞
＜body＞
＜/body＞
＜/html＞
2.3.12 网页的过渡效果设置
在浏览某些网站时，常常会在进入或退出某个网页时看到一些过渡效果，这将使得网页更加生动。这些效果在meta属性中就可以实现。
语法：
＜meta http-equiv="过渡事件" content="revealtrans(duration=过渡效果持续时间,
transition=过渡方式)"＞
在该语法中，过渡事件可以进入页面或者离开页面。进入页面的http-equiv值为page-enter，离开页面的http-equiv值为page-exist。过渡效果的持续时间默认情况下以秒为单位，过渡方式的编号如表2.3所示。【例2.1】利用下面的实例来演示进入和离开网页的过渡效果，其中以水平线效果进入页面2-enter.html，而以垂直百叶窗效果展开页面2-exit.html。
实例位置：光盘\MR\源码\第2章\2.1
其实现的过程如下：
Step 1 建立一个2-gd.html页面，在该页面中设置页面的背景颜色为橘色，在该页面中插入一张图片，以便观察页面切换转场的效果。在该页面中插入两个连接文字，分别是“进入网页”和“离开网页”。其实现的代码如下：
＜html＞
＜head＞
＜title＞页面的过渡效果＜/title＞
＜/head＞
＜body bgcolor="#FFCC00"＞
＜center＞＜h2＞页面的过渡效果＜/h2＞
＜img src="images/1.jpg" width="498" height="349"/＞＜br/＞＜br/＞＜br/＞
＜a href="2-enter.html"＞进入网页＜/a＞＜br/＞＜br/＞＜br/＞
＜a href="2-exit.html"＞离开网页＜/a＞
＜/center＞
＜/body＞
＜/html＞
运行效果如图2.4所示。图 2.4 页面的过渡效果
Step 2 当点击图2.4中的“进入网页”链接后，将在浏览器中显示水平线的转场效果，如图2.5所示。3秒钟过后，进入如图2.6所示的页面，单击“返回”链接后回到2-gd.html。图 2.5 进入页面的水平线效果图 2.6 页面的进入页
其实现的代码如下：
＜html＞
＜head＞
＜title＞页面的进入效果＜/title＞
＜meta http-equiv="page-enter" content="revealtrans(duration=3,transition=21)"/＞
＜/head＞
＜body bgcolor="#FFCC99"＞
＜center＞＜h2＞显示页面的进入效果＜/h2＞
＜img src="images/2.jpg" width="498" height="462"/＞＜br/＞＜br/＞
＜a href="2-gd.html"＞返回＜/a＞
＜/center＞
＜/body＞
＜/html＞
Step 3 当点击图2.4中的“离开网页”链接后，进入如图2.7所示的网页的离开页面，单击“返回”链接后，回到如图2.8所示的页面，经过5秒钟，显示离开页面时的垂直百叶窗转场效果。图 2.7 页面的退出页
试读结束[说明：试读内容隐藏了图片]