作者：任平红,陈矗

出版社：清华大学出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Web编程基础——HTML5、CSS3、JavaScript(第2版)试读：

内容简介

本书详细介绍了Web编程基础中的相关知识点和技能，主要内容包括HTML5概述、HTML5表单、HTML5画布、音频视频和Web存储、离线应用和Web Workers、地理位置、CSS3、CSS3样式属性、CSS3页面布局、JavaScript基础、JavaScript对象、DOM编程、AJAX、jQuery。本书对与Web编程相关的理论知识进行了详细的讲解与分析，文字通俗易懂，实例丰富，可以使读者更深入地理解相关的知识点。

本书可以作为计算机科学与技术、软件工程、软件外包、高职高专计算机软件、计算机信息管理、电子商务等专业的与Web编程相关的课程的教材，也可以作为Web编程人员的参考书。

出版说明

随着我国改革开放的进一步深化，高等教育也得到了快速发展，各地高校紧密结合地方经济建设发展需要，科学运用市场调节机制，加大了使用信息科学等现代科学技术提升、改造传统学科专业的投入力度，通过教育改革合理调整和配置了教育资源，优化了传统学科专业，积极为地方经济建设输送人才，为我国经济社会的快速、健康和可持续发展以及高等教育自身的改革发展做出了巨大贡献。但是，高等教育质量还需要进一步提高以适应经济社会发展的需要，不少高校的专业设置和结构不尽合理，教师队伍整体素质亟待提高，人才培养模式、教学内容和方法需要进一步转变，学生的实践能力和创新精神亟待加强。

教育部一直十分重视高等教育质量工作。2007年1月，教育部下发了《关于实施高等学校本科教学质量与教学改革工程的意见》，计划实施“高等学校本科教学质量与教学改革工程（简称‘质量工程’）”，通过专业结构调整、课程教材建设、实践教学改革、教学团队建设等多项内容，进一步深化高等学校教学改革，提高人才培养的能力和水平，更好地满足经济社会发展对高素质人才的需要。在贯彻和落实教育部“质量工程”的过程中，各地高校发挥师资力量强、办学经验丰富、教学资源充裕等优势，对其特色专业及特色课程（群）加以规划、整理和总结，更新教学内容、改革课程体系，建设了一大批内容新、体系新、方法新、手段新的特色课程。在此基础上，经教育部相关教学指导委员会专家的指导和建议，清华大学出版社在多个领域精选各高校的特色课程，分别规划出版系列教材，以配合“质量工程”的实施，满足各高校教学质量和教学改革的需要。

为了深入贯彻落实教育部《关于加强高等学校本科教学工作，提高教学质量的若干意见》精神，紧密配合教育部已经启动的“高等学校教学质量与教学改革工程精品课程建设工作”，在有关专家、教授的倡议和有关部门的大力支持下，我们组织并成立了“清华大学出版社教材编审委员会”（以下简称“编委会”），旨在配合教育部制定精品课程教材的出版规划，讨论并实施精品课程教材的编写与出版工作。“编委会”成员皆来自全国各类高等学校教学与科研第一线的骨干教师，其中许多教师为各校相关院、系主管教学的院长或系主任。

按照教育部的要求，“编委会”一致认为，精品课程的建设工作从开始就要坚持高标准、严要求，处于一个比较高的起点上；精品课程教材应该能够反映各高校教学改革与课程建设的需要，要有特色风格、有创新性（新体系、新内容、新手段、新思路，教材的内容体系有较高的科学创新、技术创新和理念创新的含量）、先进性（对原有的学科体系有实质性的改革和发展，顺应并符合21世纪教学发展的规律，代表并引领课程发展的趋势和方向）、示范性（教材所体现的课程体系具有较广泛的辐射性和示范性）和一定的前瞻性。教材由个人申报或各校推荐（通过所在高校的“编委会”成员推荐），经“编委会”认真评审，最后由清华大学出版社审定出版。

目前，针对计算机类和电子信息类相关专业成立了两个“编委会”，即“清华大学出版社计算机教材编审委员会”和“清华大学出版社电子信息教材编审委员会”。推出的特色精品教材包括：（1）21世纪高等学校规划教材·计算机应用——高等学校各类专业，特别是非计算机专业的计算机应用类教材。（2）21世纪高等学校规划教材·计算机科学与技术——高等学校计算机相关专业的教材。（3）21世纪高等学校规划教材·电子信息——高等学校电子信息相关专业的教材。（4）21世纪高等学校规划教材·软件工程——高等学校软件工程相关专业的教材。（5）21世纪高等学校规划教材·信息管理与信息系统。（6）21世纪高等学校规划教材·财经管理与应用。（7）21世纪高等学校规划教材·电子商务。（8）21世纪高等学校规划教材·物联网。

清华大学出版社经过三十年的努力，在教材尤其是计算机和电子信息类专业教材出版方面树立了权威品牌，为我国的高等教育事业做出了重要贡献。清华版教材形成了技术准确、内容严谨的独特风格，这种风格将延续并反映在特色精品教材的建设中。清华大学出版社教材编审委员会联系人：魏江江E-mail:weijj@tup.tsinghua.edu.cn

再版前言

随着网络技术的发展，Web应用越来越广泛。要开发具有实际应用价值的Web应用程序，必须熟练掌握相关的Web编程基础知识。国内许多高等院校的计算机相关专业，纷纷开设了Web编程技术的相关课程。作者针对计算机科学与技术、信息管理、电子商务、软件工程等专业对Web编程能力的需求等问题，根据教学的实际需要，结合多年来在Web教学和Web开发中的经验，编写了这本教材。

Web编程基础是进行Web应用程序开发的前提，在HTML5、CSS3、JavaScript基础之上，才能结合动态的网页开发技术，开发出具有动态交互、功能强大、界面友好的Web应用程序。本书在第1版的基础上增加了部分新章节，并且对部分原有的过时内容进行了删减。

全书共14章：

第1章　HTML5概述，介绍了HTML5的新特性、语法、文档结构、常用标签；

第2章　HTML5表单，介绍了HTML5表单新增的表单控件；

第3章　HTML5画布，介绍了canvas元素绘制简单图形、文字、图形变换等；

第4章　音频视频和Web存储，介绍了HTML5中引入音频视频的方法，Web Storage以及Web SQL；

第5章　离线应用和Web Workers，介绍了HTML5中离线缓存的方法以及使用Web Workers在后台线程中处理事务或逻辑的方法；

第6章　地理位置，介绍了Geolocation API及其获取当前地理位置、监视当前地理位置、取消监视当前地理位置的方法；

第7章　CSS3，介绍了CSS3的使用方法、继承、各类选择符；

第8章　CSS3样式属性，介绍了CSS3的各种样式属性的使用；

第9章　CSS3页面布局，介绍了使用表格、框架、DIV+CSS进行页面布局的方法；

第10章　JavaScript基础，介绍了JavaScript的语法、结构和函数等；

第11章　JavaScript对象，介绍了JavaScript中的Array、Date、String等对象；

第12章　DOM编程，介绍了事件、window对象、document对象、history对象以及自定义对象等；

第13章　AJAX，介绍了AJAX的原理及其与JSP、XML、数据库的交互；

第14章　jQuery，介绍了jQuery的选择器、事件处理、特效和操作DOM等。

本书是作者多年来教学和软件开发经验的总结。书中内容按照由浅入深、循序渐进的原则进行组织，注重理论与实践相结合，力求内容全面、结构清晰。书中程序实例简短实用，易于教师教学使用和读者学习。书中所有代码均经过调试，并给出了运行结果的截图。大部分案例来源于网络教学平台的开发实践，具有较高的实际应用价值。每章均配有与内容紧密相关的课件、习题及参考答案、源代码。习题部分来源于与知识点相关的面试题，切合实际需求。

本书第1~8章由任平红编写，第9~14章由陈矗编写。

本书既可作为高等院校Web程序设计和Web编程技术的教材，也可作为广大自学者和软件开发人员的参考用书。

由于水平有限，书中不当之处在所难免，恳求读者批评指正。编　者2018年6月第1章　HTML5概述1.1　互联网概述

WWW是World Wide Web的缩写，简称为Web。1989年Web诞生于欧洲原子能研究中心（European Organization for Nuclear Research，简称为CERN），CERN的物理学家Tim Berners-Lee提出了一个新的Internet协议，命名为Web，其目的是为了使科学家们可以利用网络共享文档。1990年11月，第一个Web服务器nxoc01.cern.ch开始运行，由Tim Berners-Lee编写的图形化Web浏览器第一次出现在人们面前。1991年，CERN正式发布了Web技术标准。1993年，第一个图形界面的浏览器Mosaic开发成功。1994年，著名的Netscape Navigator浏览器问世。1995年，由Mosaic衍生而来的IE浏览器诞生。目前，与Web相关的标准都由W3C组织（World Wide Web Consortium，万维网联盟）管理和维护。

Web是运行在Internet之上所有的HTTP服务器软件和对象的集合，是一个分布式的超媒体信息系统，Web可以使人们利用网络实现信息资源的共享。从技术层面上分析，Web主要包括超文本传输协议（HTTP）、统一资源定位符（URL）以及超文本标记语言（HTML）。1.1.1　超文本传输协议

超文本传输协议（HyperText Transfer Protocol，HTTP）基于客户端浏览器或其他程序与Web服务器之间的面向对象的应用层，可用于实现客户端和服务器端的信息传输。HTTP由于其简洁、快速等特点，适用于分布式超媒体信息系统。它允许将超文本标记语言文档从Web服务器传送到客户端浏览器，HTTP工作在TCP/IP协议体系中。客户端和服务器端必须都支持HTTP，才能实现客户端和服务器端之间的交互。

HTTP协议具有如下特点。（1）支持客户端／服务器端模式。（2）简单快速。客户端向服务器提交请求时，只需要发送请求方法和路径。请求方法有GET、HEAD、POST。请求方法不同，客户端和服务器联系的类型也不同。由于HTTP协议简单，服务器的程序规模较小，所以通信速度较快。（3）灵活。HTTP允许传输任意类型的数据对象，被传输的数据对象的类型由Content-Type标识。（4）无连接。无连接指的是每次连接只处理一个请求，各个连接之间是相互独立的。服务器处理完客户端的请求，并接收到客户端的应答后即断开连接。无连接方式可以节省传输成本。（5）无状态。HTTP协议是无状态协议，无状态指的是事务处理没有记忆能力，这意味着如果后续的处理需要使用前面的信息，则必须重新传输。无状态可能会导致每次连接传输的数据量较大，但是当后续连接不需要前面的信息时，应答会比较快。1.1.2　统一资源定位符

统一资源定位符（Uniform Resource Locator，URL）是用于完整地描述Internet上网页和其他资源地址的一种标识方法。Internet上的每一个资源都有一个唯一的名称标识，通常称之为URL地址或者网址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的某个站点。URL可以使客户端使用统一的方法访问资源。

URL一般由协议类型、存放资源的域名或主机IP地址，以及资源文件的路径3部分组成。其语法格式如下： protocol://hostname[:port]/path/[;parameters][?query]#fragment其中：● protocol指定传输所使用的协议类型，最常用的传输协议是HTTP，另外，还有文件传输协议FTP、访问本地计算机上的文件的协议file、简单邮件传输协议SMTP等。● hostname指定存放资源的服务器名称或者主机的IP地址。● port指定端口号，可选，省略时采用传输协议默认的端口号。例如，HTTP协议默认的端口号是80。● path指的是资源的存放路径，一般用来表示一个目录或者文件的地址。● parameters为可选项，可以用于指定特殊参数。● query为可选项，当请求动态网页时，可以向动态网页传递字符串类型的参数，多个参数之间用“&”符号隔开，每个参数名和值之间用“=”连接。

例如，http://localhost:8080/ch01/index.jsp?name=wangmingming&pwd=123456，此地址访问index.jsp文件，并且向其传递参数name和pwd。1.1.3　超文本标记语言

超文本标记语言（HyperText Markup Language，HTML）即HTML语言。HTML是一种用于描述网页文档的标记语言，使用HTML可以构建网页文档，可以将Internet上的资源组合在一起。它是目前网络上应用最为广泛的语言。HTML是标准通用标记语言（Standard Generalized Markup Language，SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以定义内容的显示样式。HTML语言虽然简单，但是功能强大，支持不同数据格式的文件嵌入，其特点主要包括：● 简单性。采用超集方式可以升级HTML语言，使用起来灵活方便。HTML文件是文本文件，可以采用任何文本编辑工具编写。● 可扩展性。HTML的广泛应用会带来加强功能、增加标签符的需求，HTML采用扩展子类元素的方法，使系统扩展成为可能。● 平台无关性。使用HTML编写的文件只需要浏览器即可解释运行，与操作系统无关。目前几乎所有的Web浏览器都支持HTML。1.1.4　XML和XHTML

可扩展标记语言（Extensible Markup Language，XML）是SGML的子集，是一种定义电子文档结构和描述其内容的国际标准语言；XML是由W3C发布的，用于创建通用的信息格式。它的语法是基于文本的，用于描述、传递与交换结构化信息。XML并不是为了取代HTML，而是要把数据与表达区分开。开发人员可以利用XML创建任意的标签来描述信息。

XHTML（Extensible Hypertext Markup Language）是可扩展超文本标记语言，表现方式与HTML类似，不过语法上更为严格。2000年底，W3C发行了XHTML1.0，这是一种在HTML4.01基础上优化和改进的新语言，目的是基于XML应用。XHMTL是一种增强了的HTML，相比于HTML来说，XHTML更严谨、更纯净，它的可扩展性和灵活性可以适应未来网络更加复杂多变的需求。1.2　HTML5的改变

HTML5草案的前身名为Web Application 1.0，于2004年被WHATWG（Web Hypertext Application Technology Working Group）提出，于2007年被W3C接纳。HTML5是HTML、XHTML以及HTML DOM的新标准， HTML5之前的HTML4.01以及XHTML1.0/2.0主要把HTML限定为一种页面标记语言，而HTML5则是第一个将Web作为开发平台的HTML语言。

目前主流的浏览器一般都提供了对HTML5的支持，例如最新版本的Safari3.1+、Chrome3+、Firefox3.5+以及Opera9.5+都部分支持HTML5的新特性，Internet Explorer 9+也部分支持HTML5的新特性。1.2.1　HTML5新增元素

HTML5中引入了很多新的标记元素。根据内容类型的不同，这些元素可以分为内嵌、流、标题、交互、元数据、短语等。1. 新增的结构元素

HTML5定义了一组新的语义化标记来描述元素的内容，可以简化HTML页面设计，并且在搜索引擎抓取和索引网页时，也可以利用这些元素。新增的语义化标记元素如表1-1所示。表1-1　HTML5新增的语义化标记元素

以上元素本身并没有特殊的功能，使用div也可以实现以上功能，但是由新的语义化元素组成的网页结构对于搜索引擎更加友好，能够更好地被搜索引擎搜索和抓取。

1）article元素的使用示例可参照article.html

article.html

article.html的显示结果如图1-1所示。图1-1　article.html的显示结果

2）aside元素的使用示例可参照aside.html

aside.html

aside.html的显示结果如图1-2所示。图1-2　aside.html的显示结果2. 新增的功能元素

HTML5中新增的功能元素包括：● hgroup元素——用于对整个页面或页面中一个内容区块的标题进行组合。● figure元素——表示一段独立的流内容，一般表示文档主题流内容中的一个独立单元。● video元素——定义视频，例如电影片段或其他视频流。● audio元素——定义音频，例如音乐或其他音频流。● embed元素——用来插入各种多媒体，格式可以是MIDI、WAV、AIFF、AU、MP3等。● mark元素——主要用来在视觉上向用户呈现需要突出显示或高亮显示的文字。● time元素——表示日期或时间，也可以同时表示两者。● canvas元素——表示图形，如图表和其他图像。● output元素——表示不同类型的输出，例如脚本的输出。● source元素——为媒介元素定义媒介资源。● menu元素——表示菜单列表，当需要列出表单控件时使用该标签。● ruby元素——表示ruby注释。● rt元素——表示字符的解释或发音。● rp元素——在ruby解释中使用，以定义不支持ruby元素的浏览器所显示的内容。● wbr元素——表示软换行。● command元素——表示命令按钮，如单选按钮、复选框或普通按钮。● details元素——表示用户要求得到并且可以得到的细节信息，可与summary元素配合使用。● datalist元素——可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。● datagrid元素——表示可选数据的列表，它以树形列表的形式来显示。● keygen元素——表示生成密钥。● progress元素——表示运行中的进程，可以使用progress来显示JavaScript中耗费时间的函数的进程。● email——表示必须输入E-mail地址的文本输入框。● url——表示必须输入URL地址的文本输入框。● number——表示必须输入数值的文本输入框。● range——表示必须输入一定范围内数字值的文本输入框。● Date Pickers——可供选取日期和时间的新型的文本输入框。1.2.2　HTML5废除的元素

在HTML5中废除了HTML4.01中过时的元素。1. 能够使用CSS替代的元素

basefont、big、center、font、s、strike、tt和u这些元素都是用来表现文本效果的，而HTML5提倡把呈现效果的功能放到CSS样式表中统一处理。其中，font元素允许由编辑器插入，s、strike可以由del元素代替，tt元素可以由CSS的font-family属性代替。2. 不再使用frame框架

对于frameset、frame、noframes元素，由于frame框架对网页的可用性存在负面影响，因此在HTML5中已不支持frame框架，只保留了内联框架iframe。3. 只有部分浏览器支持的元素

对于applet、bgsound、blink和marquee等元素，由于只有部分浏览器支持，所以在HTML5中废除。其中，applet元素可以由embed元素或者object元素代替，bgsound元素可以由audio元素代替，marquee可以由JavaScript脚本代替。4. 其他被废除的元素

HTML5中其他被废除的元素还包括：● 使用ruby元素代替的rb元素。● 使用abbr元素代替的acronym元素。● 使用ul元素代替的dir元素。● 使用form元素与input元素相结合代替的isindex元素。● 使用pre元素代替的listing元素。● 使用code元素代替的xmp元素。● 使用GUIDS代替的nextid元素。● 使用“text/plain”MIME类型代替的plaintext元素。1.2.3　HTML5新增的属性

HTML5中新增的属性包括表单属性、链接属性以及其他属性。1. 表单属性

1）autofocus属性

对input元素的所有类型以及由select、textarea与button元素指定的autofocus属性，则在页面加载后元素会自动获得焦点，正常情况下，一个页面只有一个元素有autofocus属性，如果设置多个，则第一个有效。

2）placeholder属性

对input元素的text、search、url、telephone、email以及password类型，以及textarea元素指定placeholder属性，可以对用户的输入进行提示。该提示会在输入字段为空时显示，并会在输入框获取焦点时显示。

3）form属性

对input元素的所有类型以及由output、select、textarea、button与fieldset指定的form属性，声明元素属于哪个表单，则不论元素位于页面的什么位置，都在表单之内。一个输入元素可以属于一个或多个表单，多个表单使用空格隔开。输入元素的form属性值必须是所属表单的id值。form属性可以为页面布局带来一定的便利。

4）required属性

为input元素的text、search、url、telephone、email、password、Date pickers、number、checkbox、radio、file类型指定required属性，则表示用户提交时该元素的输入值不能为空。

5）autocomplete属性

为form元素和input元素的text、search、url、telephone、email、password、Date pickers、range、color类型指定autocomplete属性的值为"on"，允许浏览器预测对输入域的输入，当用户在输入域内开始输入时，浏览器基于之前输入的值显示出推荐选项。如果autocomplete属性值为"off"，则不允许元素启用自动完成功能。

6）重置表单默认行为的新属性

在HTML4.01中一个表单内的所有元素通过表单的action属性统一提交到动态处理程序，HTML5中可以通过formaction属性实现单击不同的提交按钮，将表单提交到不同的动态处理程序。另外，在HTML4.01中一个表单只有一个method属性指定统一的提交方法，在HTML5中可以通过formmethod实现单击不同的按钮使用不同的提交方法。

HTML5中的表单非常灵活，因为HTML5中input元素的submit和image类型，以及button元素增加了formaction、formenctype、formmethod、formnovalidate及formtarget属性，分别用来重写所在表单的相应属性，例如formaction重写表单的action属性，formmethod重写表单的method属性。

7）image提交按钮新增width和height属性

width和height属性可以用来设置input元素的image类型的图像的宽度和高度。

8）list属性

list属性与

9）max、min和step属性

max属性规定输入域所允许的最大值，min属性规定输入域允许的最小值，step属性为输入域合法的数字间隔。

10）pattern属性

pattern属性用于验证输入字段的模式，即正则表达式。在HTML4.01中如果使用正则表达式验证还需要结合JavaScript脚本，在HTML5中直接指定pattern属性值即可。pattern属性适用于input元素的text、search、url、telephone、email、password等类型。

11）multiple属性

multiple属性允许输入域中可选择多个值，适用于input元素的email和file类型。

12）fieldset增加disabled属性

HTML5为fieldset元素增加了disabled属性，可以把它的子元素设成disabled状态，但是不包括legend里的元素。

13）label增加control属性

HTML5为label新增加了control属性，在label内部放置一个表单元素，可以通过的control属性访问该表单元素。

14）selectionDirection属性

用户在input元素或者textarea元素中选取部分文字时，可以使用该属性获取选取方向。当用户正向选择文字时，该属性值为"forward"；当反向选取时值为"backward"；当用户没有选择任何文字时，该属性值为"forward"。

以上新增表单的属性的使用方法在后面会进行详细描述。2. 链接属性

1）media属性

为a和area增加了media属性，规定目标URL是为哪种类型的媒介或设备进行优化的。

2）area新增hreflang、media、rel、type属性

为了保证a元素和link元素的一致性，hreflang规定在被链接的文档中的文本语言，media指定对何种设备优化，rel规定当前文档与被链接的资源之间的关系，type规定目标URL的MIME类型。

3）link新增sizes属性

sizes属性规定被链接资源的尺寸。

4）base新增target属性

为base元素增加target属性是为了与a元素保持一致。3. 其他属性

1）ol新增reverse属性

reverse属性规定有序表倒序。

2）meta新增charset属性

charset属性指定网页的编码集。

3）menu新增type和label属性

label为menu定义标注，type使menu可以以上下文菜单、工具条、列表右键快捷菜单3种形式出现，但此属性大部分浏览器并不支持。

4）style新增scoped属性

scoped属性允许样式只应用到style元素的父元素及其子元素，在CSS中并不推荐使用。

5）script新增async属性

async属性指定脚本是否异步执行，但仅适用于外部脚本。

6）html新增manifest属性

HTML5为html元素增加了manifest属性，指向一个用于结合离线Web应用API的应用程序缓存清单。当开发离线Web应用程序时此属性与API结合使用，定义一个URL，在URL上描述文档的缓存信息。

7）iframe新增sandbox、seamless、srcdoc属性

以上属性用于提高页面的安全性，防止执行不信任的操作。1.2.4　HTML5的新特性和新规则

HTML5的新特性包括：● 用于绘画的canvas元素；● 用于媒介播放的video元素；● 对本地离线存储更好的支持；● 新的特殊内容，例如article、footer、header、nav、section等；● 新的表单控件，例如calendar、date、time、email、url、search等。

HTML5的新规则包括：● 新特性应该基于HTML、CSS、DOM以及JavaScript；● 减少对外部插件的需求，例如Flash；● 更优秀的错误处理；● 更多取代脚本的标记；● HTML5应该独立于设备；● 开发进程透明。1.2.5　HTML5开发工具

任何一款文本编辑工具都可以用来开发HTML5，以下列举几种常用的HTML5开发工具。1. Dreamweaver CS6

Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面，用于制作并编辑网站和移动应用的网页设计软件。它支持代码拆分、设计、实时视图等多种方式来创建、编辑修改网页。它使用了自适应网格版面创建页面，在发布前使用多屏幕预览审阅，可以大大提高工作效率。2. Nodepad++

Nodepad++是程序员必备的文本编辑器，它小巧高效，支持27种编程语言或脚本语言，例如C、C++、Java、C#、JavaScript、PHP等，Nodepad++可以完美地代替记事本。3. HBuilder

HBuilder是DCloud（数学天堂）推出的一款支持HTML5的Web开发的集成开发工具，它速度较快，由于是基于Eclipse的，因此兼容了Eclipse的插件。HBuilder最大的优势就是通过完整的语法提示和代码输入法、代码块等，大幅提升了HTML、JavaScript、CSS的开发效率。4. Sublime Text

Sublime Text是一个代码编辑器（Sublime Text 2是收费软件，但可以无限期试用）。Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图、Python插件、代码段等。Sublime Text具有自定义键绑定、菜单和工具栏，它的主要功能包括拼写检查、书签、完整的Python API、Goto功能、即时切换项目、多选择、多窗口等。另外，Sublime Text是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。5. WebStorm

WebStorm是Jetbrains公司旗下的一款JavaScript开发工具，目前已经被为数众多的中国JavaScript开发者誉为“Web前端开发神器”“最强大的HTML5编辑器”“最智能的JavaScript IDE”等。6. Visual Studio Code

Visual Studio Code是一个轻量级且功能强大的源代码编辑器，它运行在桌面上，支持Windows、Mac OS和Linux系统。它提供了对JavaScript、TypeScript和Node.js的内置支持，并为其他语言（例如C、C#、Java、Python、PHP、GO）提供了一个丰富的扩展生态系统和运行平台（如.NET和Unity）。1.3　HTML5文档基本结构

HTML5构建文档的方式与旧版的HTML类似，使用纯HTML5编写的文件扩展名为.html或者.htm。一个基本的HTML5文档是由一系列的标签元素组成的，标签元素不区分大小写。HTML5用标签来限定元素在文档中的位置。一个HTML5文件包含在一对标签内。HTML5分为文档头和文档体两部分。文档头通过一对标签定义，用于指定HTML5文件的属性。文档体由一对标签指定，用于指定文档要显示的内容，是文档的主体部分。例如第一个HTML5文档hello.html。

hello.html：

上述代码中， 代表文档类型，声明非常简洁，不再使用很长的DTD和URL。在所有的现代浏览器中，DOCTYPE会强制使用标准模式，这意味着对于目前还不支持HTML5的浏览器会解析那些HTML5中兼容的旧的HTML的标签部分，而忽略它们不支持的HTML5的新特性。对于含有中文的网页，需要在标签中指明字符集为UTF-8，否则会显示乱码。HTML5限制了可用的字符集，目的是为了加强安全，防止某些类型的攻击。如无特殊说明，本书的例子都使用Chrome浏览器显示结果。使用Chrome打开hello.html文件，显示结果如图1-3所示。图1-3　hello.html的显示结果1.4　HTML5语法

HTML5文档由HTML5标签和用户自定义的内容组成。HTML5标签是已定义好的标记，可用来控制页面显示的内容，例如标题、列表、段落、图像以及动画等。标签可以看作是HTML5的命令，通过指定标签可以定义网页的内容，通过指定标签的属性可以定义网页的内容的样式。

标签可以分为单标签和成对标签两种。单标签单独使用，例如；成对标签成对使用，例如和。有的标签既可以单独使用，也可以成对使用。成对标签由起始标签“<标签名>”和结束标签“”组成。成对标签的作用仅限于这对标签内部的内容。

标签内部可包括标签属性，用于指定标签内容的显示样式，例如

但是用于设置标签样式的属性一般不推荐使用，应使用CSS设置标签的显示样式。

虽然HTML5标签不区分大小写，属性值是否使用引号也并不影响使用，但是考虑到文档的可读性和一致性，一般推荐标签全部使用小写，属性值使用双引号括起来。1.5　HTML5常用标签1.5.1　

标签是标签的子标签，位于文档的头部，不包含任何内容。标签可以定义HTML文档的相关信息，用来描述文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。搜索引擎可以通过机器人自动查找网页中的meta值来给网站分类，只有完善了meta，一个HTML页面才能算是完整的网页。标签可以分为两部分：HTTP标签信息（http-equiv）和页面描述信息（name）。标签可以提供有关页面的元信息，例如针对搜索引擎和更新频度的描述和关键词。1. http-equiv属性

http-equiv类似于HTTP的头部协议，可以利用其设定浏览器的一些信息，以正确地显示网页。http-equiv属性指定协议头类型，content属性指定协议头类型的值。其中，常用的http-equiv类型有：● content-type——用于定义用户的浏览器或相关设备以何种方式加载数据，或者以何种应用程序打开资源，例如，，其中，content值指定以普通网页打开资源，网页的编码方式为utf-8。● refresh——指定页面的刷新或跳转的间隔时间和跳转的资源。例如，，指定当前页面3秒后跳转到target.html页面。例如，，没有指定url值，则3秒后刷新当前页面。● expires——用于指定网页缓存的过期时间。缓存一旦过期，当有客户端请求网页时，必须从服务器上重新下载网页。● set-cookie——用于设置Cookie，浏览器访问某个页面时会将Cookie保存在客户端的缓存中，下次访问时可以从缓存中读取，以提高访问速度。必须使用GMT格式指定Cookie的过期时间。例如，2. name属性

页面描述信息由name属性和content属性指定。name属性指定要描述的页面信息的类型，content用来描述页面信息的值。常见的页面信息的类型有：● keywords——为搜索引擎提供的关键字列表，例如， 。● description——为搜索引擎提供网页主要内容的描述，例如，。● author——标明网页的制作者。● robots——用以提示搜索机器人哪些页面需要索引，哪些页面不需要索引。content的参数有all、none、index等值，默认值为index。各参数值的含义如表1-2所示。表1-2　搜索参数值1.5.2　标题

标题可用来分隔大段文字，概括大段文字的内容，从而吸引读者的注意，起到提示的作用。HTML5中提供了6级标题，分别为

~

。其中，

字体最大，

字体最小。标题属于块级元素，浏览器会自动在标题前后加上空行。使用标题标签不仅可以使文字突出显示，更重要的是搜索引擎可以使用标题为网页的结构和内容编制索引。用户可以通过标题来快速地浏览网页。例如，heading.html。

heading.html：

heading.html的显示结果如图1-4所示。图1-4　heading.html的显示结果1.5.3　换行元素

换行标签是
。
标签是空标签，没有闭合标签。注意使用
标签来输入空行，而不是分隔段落。例如，br.html。

br.html：

br.html的显示结果如图1-5所示。图1-5　br.html的显示结果1.5.4　分隔线

分隔线标签

hr.html：

hr.html的显示结果如图1-6所示。图1-6　hr.html的显示结果1.5.5　段落

段落标签

可以使文字排列更加整齐、清晰。

标签既可以成对使用，也可以单独使用。

标签是块级元素，浏览器会自动在

标签的前后加上一定的空白。

标签的属性align用来指定文本显示时的对齐方式，可取center、left、right 3个值。但不推荐使用属性设置

标签的显示样式，推荐使用样式表，读者可参照本书后面的内容。

标签的使用示例如p.html。

p.html：

p.html的显示结果如图1-7所示。图1-7　p.html的显示结果1.5.6　特殊字符

在HTML中，有些符号是有特殊含义的，例如“<”和“>”用于表示标签，“&”用于表示转义符号，如果要在网页上显示以上特殊符号，不可以直接使用，必须使用转义字符。在HTML中定义转义字符有两个原因：第一是某些符号有特殊含义，例如前面提到的“<”等，第二是某些符号在ASCII字符集中没有定义，需要使用转义字符来表示。

转义字符由3部分组成，第一部分是“&”符号；第二部分是实体名字或者是“#”加上实体编号；第三部分是分号，表示转义字符结束。同一个符号，既可以使用实体名称，例如“<”，也可以使用实体编号，例如“<”，这两种方式都表示符号“<”。实体名称比较好理解，但是某些浏览器对最新的实体名称的支持可能并不是特别好。实体编号虽然可读性差，但是各种浏览器都可以识别。常见的转义字符如表1-3所示。表1-3　常用的转义字符

注意：● 转义字符各字符间不能出现空格；● 转义字符必须以“;”结束；● 单独的“&”不被认为是转义字符的开始；● 转义字符区分大小写。

例如，specialChar.html。

specialChar.html：

specialChar.html的显示结果如图1-8所示。图1-8　specialChar.html的显示结果1.5.7　列表

HTML5代码支持将若干列表项组织成无序列表、有序列表以及定义列表。1. 无序列表

无序列表仅仅用于表示列表项之间存在并列关系，也就是分为多个子项，但是子项之前没有相应的编号，只是使用圆点或者其他的符号进行标记。无序列表使用标签

定义，列表项使用
• 标签定义，列表项的内容位于一对
• 标签之内。
• 标签的type属性可以定义列表项的标记符。主要的取值有：● disc是默认值，为实心圆；● circle为空心圆；● square为实心方块。

在HTML4.01中一般不推荐直接在

ul.html：

ul.html的显示结果如图1-9所示。图1-9　ul.html的显示结果2. 有序列表

如果要对列表中的列表项进行排序，则使用有序列表标签

。
标签的type属性可以指定有序列表的项目符号的类型，type属性各个取值的含义如表1-4所示。表1-4　type各值的含义

与无序列表类似，在HTML5中不再反对使用

标签的type属性。另外，还可以通过指定标签的start属性值来指定排列的初始值，start属性的默认值为1。有序列表和无序列表都可以嵌套使用。例如，ol.html。

ol.html：

ol.html的显示结果如图1-10所示。3. 定义列表

定义列表使用

标签设置，也称为描述性列表。

标签通常与

标签和

标签配套使用。

标签定义列表项，

标签用于描述列表项。例如，dl.html。图1-10　ol.html的显示结果

dl.html：

dl.html的显示结果如图1-11所示。图1-11　dl.html的显示结果1.5.8　锚元素

超级链接也是网页的重要元素之一，本质上是属于网页的一部分。文本、图像、超级链接是网页的3种基本元素。通过超级链接可以从一个网页跳转到其他的目标资源。目标资源可以是图片、电子邮件地址、应用程序等。可以链接到当前Web站点的其他资源，也可以是其他Web站点的资源，甚至可以是网页上的不同位置。而在网页上用来完成超级链接的，既可以是一段文字，一个图片，也可以是图片的一部分（一般称为热区）。互联网上的各个资源正是通过超级链接相互连接起来的。

根据创建链接的对象的不同，超级链接分为文本链接、图像链接、表单链接等。● 文本链接：指的是在文本上创建的超级链接，是最常用的超级链接。默认的文本超级链接下方会出现下画线。● 图像链接：指的是在图像、Flash对象或者图像热区上创建的链接。图像链接比较美观。● 表单链接：通过表单的action属性指定目标页面，一般目标页面是动态处理程序，例如JSP、PHP、ASP、Java Servlet等。当用户单击表单中的提交按钮时，会跳转到目标页面。

根据目标文件的类型和位置的不同，可以将超级链接分为外部链接、内部链接、锚链接、电子邮件链接以及其他链接等。● 外部链接：链接的目标资源是当前Web站点之外的资源。● 内部链接：链接的目标资源是当前Web站点内的资源，一般使用相对路径来表示。● 锚链接：链接的目标是网页的某一个特定的位置。● 电子邮件链接：当单击电子邮件链接后，系统会自动启动电子邮件程序，并将电子邮件的接收人设置成电子邮件链接中指定的信息。1. 文本链接

创建文本链接使用一对标签，其格式如下： 文本

其中，href指文本链接的目标资源的地址，target指在何处打开目标资源。target的可取值及其含义如表1-5所示。表1-5　target的取值

注意：由于在HTML5中不再支持frame和frameset，但保留了内联框架iframe，因此不允许把框架名称设定为目标，_self、_parent以及_top这3个值大多数与iframe一起使用。超级链接的使用示例可参照href.html。

href.html：

href.html的显示结果如图1-12所示，单击链接，会打开相应的网站。图1-12　href.html的显示结果2. 锚链接

当网页的内容比较长时，有时需要链接到网页的某一个位置上，此时需要使用锚链接。使用锚链接需要先定义锚点，将希望链接到的网页的位置定义为锚点，并为其取名。然后将锚点前加“#”作为超级链接的href值即可，使用定义锚点。例如，anchor.html。

anchor.html：

试读结束[说明：试读内容隐藏了图片]

下载完整电子书