作者：聂常红主编
出版社：高等教育出版分社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Web前端开发技术——HTML、CSS、JavaScript试读：
前言
随着计算机技术和通信技术的迅猛发展和日益普及，以 Internet 为代表的计算机网络已经从最初的军事、科研和教育的专用网络逐步向全球化网络、商业化网络和大众化网络方向发展，逐渐成为人们工作、学习和生活的一个重要部分，并深深地改变着我们的学习、工作和生活方式。时至今日，人们已经很大程度上离不开网络了。目前 Internet 为人们提供了多种服务，其中尤以WWW，即网站的应用最为广泛，它已经成为网民查找信息、网上购物、网上结算、软件下载等活动的好场所。许多个人、企业也纷纷建立自己的网站来宣传和推广自己，各种各样的网站如雨后春笋般涌现。现今，大部分网页制作主要是运用可视化的网页编辑软件，这些软件功能强大，使用也非常便捷，对非专业人员来说只要这种软件就足够了，但对专业的网页制作人员来说，还需熟悉并掌握HTML、CSS、JavaScript等制作网页的各种技术，这样才能更好地设计出符合用户需求和标准的网页。
此外，计算机技术日新月异，HTML已经历了由HTML4向XHTML发展，到近几年来的由HTML4向HTML5的发展历程。HTML5现已得到了Microsoft、Mozilla等多家知名浏览器厂商的支持，同时，HTML5因具有一些优异的新功能，得到越来越多开发人员的青睐。可以说，HTML5就是Web的未来，也是Web开发者的新希望。所以作为专业的网页制作等相关人员有必要了解HTML5，以便在Web技术的发展潮流中立于不败之地。
鉴于上述考虑，本书将内容分为5篇共27章，系统、全面地介绍网页设计与网页制作所涉及的各方面的内容和技巧。主要内容如下。
第1篇 HTML标记语言篇
本篇由第1章～第11章组成，主要讲述了HTML相关概念、HTML文件的基本结构、XHTML基础、文档类型、网站建设与发布流程以及各种基本的HTML标记，包括用于设置页面相关信息、页面主体内容、文字及段落内容和格式、列表、图片、多媒体内容、各种超链接、表格、表单、框架等对象的标记的使用。
第2篇 CSS层叠样式表篇
本篇由第12章～第17章组成，主要讲述了CSS基础知识、CSS的定义、各种CSS选择器、CSS常用属性、在HTML文档中应用CSS的方式、盒子模型以及使用CSS+DIV布局网页等内容。
第3篇 JavaScript脚本语言篇
本篇由第18章～第23章组成，主要讲述了JavaScript基础知识、在HTML网页中嵌入脚本的方式、事件驱动和事件处理、脚本函数、脚本对象和几个经典案例。
第4篇 HTML5基础篇
本篇由第 24 章～第 25 章组成，主要讲述了 HTML 的发展历程、HTML5 的优势、HTML5的语法变化、HTML5的文档结构以及HTML5表单新增属性、新增的input元素类型、新增的表单元素和新增的客户端校验方式等内容。
第5篇 综合实例篇
本篇由第 26 章～第 27 章组成，这两章将理论知识贯穿于实践，其中第 26 章介绍了整合HTML+CSS+JavaScript 来设计与制作网页涉及的各方面的内容和技巧；第 27 章则主要介绍了使用HTML5+CSS来制作网页所涉及的各方面的内容和技巧，并与第26章进行比对相同内容的制作方法和技巧。
本书具有以下几个特点。
• 内容全面、系统。本书详细介绍了网页设计与制作所涉及的各方面内容和技巧，以及HTML5这个未来的新一代Web标准。
• 理论和实践完美结合。每章都配有大量的实用案例，对一些核心知识点，还在章节中引入综合案例，同时在全面、系统介绍各章内容知识的基础上，还提供了两个整合应用所介绍的各种前端技术来制作网页的综合实例。通过各种案例，将理论知识和实践完美地结合起来。
• 图文并茂。本书的每个实例代码都配有相应的运行效果图，效果直观，使读者轻易获得感性认识，提高学习效率。
本书条理清晰、通俗易懂，实用性和可操作性强，可作为大中专院校及培训学校计算机及相关专业的教材，并可供从事网页设计与制作、网站开发及网页编程等行业人员参考。
本书由聂常红主编和统稿，其中第1章～第5章、第7章、第9章～第11章、第24章～第27章由聂常红编写，第12章～第17章由王刚编写，第18章～第23章由潘正军编写，第6章～第8章由唐远强编写。另外，唐远星参与了部分习题的编写，刘志伟、杨艳和赵莲芬也参与了部分工作。由于编者水平有限，书中难免存在错误和不足的地方，敬请读者批评指正。聂常红2013年7月于华软第1篇HTML标记语言篇
HTML基础
页面的头部标记
页面的主体标记
文字与段落标记
列表标记
图片标记
在网页中嵌入多媒体内容
使用框架结构
在网页中创建超链接
在网页中使用表格
在网页中创建表单
第1章 HTML基础
学习目标：
• 掌握HTML概念。
• 理解Internet、WWW、浏览器、网页、网站、静态及动态网站等概念。
• 理解HTML及XHTML标记的语法。
• 掌握HTML文件的基本结构。
• 熟悉HTML文件的编写方式及执行方式。
• 熟悉网站的创建流程。
随着计算机技术和通信技术的迅猛发展和日益普及，以Internet为代表的计算机网络已经从最初的军事、科研和教育的专用网络逐步向全球化网络、商业化网络和大众化网络方向发展，逐渐成为人们工作、学习和生活的一个重要部分，并深深地改变着我们的学习、工作和生活方式。时至今日，人们已经在很大程度上离不开网络了。目前Internet为人们提供了多种服务，如WWW、E-mail、FTP、BBS等，其中WWW是应用最广泛的服务之一，它已经成为查找信息、网上购物、网上结算、软件下载等活动的好场所。若要将网上的信息展现在用户面前，就需要使用一种称为HTML的标记语言。1.1 基本概念
Internet也称为因特网、互联网，指全球最大的、开放的、由众多网络互联而成的计算机网络。
Internet提供的服务主要有：WWW、FTP、E-mail、BBS和 Telnet。其中，WWW用于提供网页浏览服务，是应用最广、发展最快的一种服务。1.1.1 WWW简介
WWW是“World Wide Web”（全球广域网）的缩写，简称为Web，中文又称为“万维网”。它起源于1989年3月，由欧洲量子物理实验室（the European Laboratory for Particle Physics，CERN）所发展出来的超媒体系统。
WWW为使用者提供了一个可以轻松驾驭的图形用户界面，来查阅 Internet上的文档，其允许使用者通过“跳转”或“超级链接”从某一页跳到其他页。一个完整的WWW系统包括WWW服务器、浏览器、HTML文件（Web页面，网页）和网络4部分。
WWW服务器是指能够实现WWW服务功能的计算机，也称为Web站点。服务器上包含了许多称为html文件的资源，这些Web页面采用超级文本（Hypertext）的格式，即可以包含指向其他 Web 页面或其本身内部特定位置的超级链接。服务器信息资源主要是以网页的形式向外提供。访问者要查看Web站点上的信息，需使用Web浏览器软件，如Microsoft的IE或Google的Chrome等，它们能将Web站点上的信息转换成用户显示器上的文本或图形。一旦浏览器连接到了Web站点，就会在电脑上显示出有关的信息。相对于服务器说，浏览器称为WWW的客户端。
一般来讲，一个Web站点由多个网页构成。每个Web站点上都有一个起始页，通常称为主页或首页。这是一个特殊的页面，它是网站的入口页面，其中包含指向其他页面的超链接。通常主页的名称是固定的，一般使用index或default来命名主页，例如，index.html或default.html。
WWW 的运行涉及 3 个重要的概念：URL（Uniform Resource Locator，统一资源定位器）、HTTP（Hypertext Transfer Protocol，超文本传输协议） 和HTML （Hypertext Markup Language，超文本标记语言）。
1．URL
在Internet上查找WWW信息资源需要使用URL。URL提供了在Web上进入资源的统一方法和路径，相当于现实生活中的门牌号，它标识了链接所指向的文件的类型及其准确位置。
2．HTTP
WWW服务器和WWW客户机之间是按照文本传输协议HTTP互传信息的。HTTP协议制订了HTML文档运行的统一规则和标准，它是基于客户端请求、服务器响应的工作模式，主要由4个过程组成：客户端与服务器建立连接；客户端向服务器发出请求；服务器接受请求、发送响应；客户端接收响应，客户端与服务器断开连接。这一过程就好比打电话一样，打电话者一端为客户端，接电话者一端为服务端。
3．HTML
HTML（Hypertext Markup Language，超文本标记语言）是一种文本类、解释执行的标记语言，用于编写要通过WWW显示的超文本文件。在后面会进一步介绍HTML。1.1.2 浏览器
浏览器是专门用于执行HTML文件以及查看HTML源代码的一种软件。比如Microsoft的IE、Google的Chrome以及Mozilla 的Firefox。
浏览器执行HTML文件方式有：鼠标双击HTML文件和通过浏览器地址栏中输入HTML文件的URL来执行这两种方式。1.1.3 静态网页和动态网页
由HTML直接书写，内容不会因人因时变化，并且不能够在客户端与服务器端进行交互的网页称为静态网页。静态网页的扩展名为.html或.htm。
内容能够因人因时变化，且能够在客户端与服务器端进行交互的网页称为动态网页。动态网页的扩展名依据所用的编程语言来定，如.jsp、.aspx等。
全部由静态页面组成的网站称为静态网站；包含有动态网页的网站称为动态网站。1.2 HTML概述1.2.1 HTML定义
HTML是一种文本类、由浏览器解释执行的标记语言, 用于编写要通过WWW显示的超文本文件，具有平台无关性。使用HTML语言编写的文件称为HTML文件，也叫Web页面或网页。1.2.2 HTML的发展历程
HTML诞生于20世纪90年代，由Tim Berners-Lee所设计。最初的HTML被设计得很简单,只包含几个标记，主要用于在网上展现文本。随着Web网络的迅速发展，人们开始希望在网上发布的信息图文并茂，并且动感十足。为满足人们不断增加的需要，HTML被不断地发展，其标记不断被充实，功能也得到了不断增强。至今，HTML 已发展到了 4.0.1 这个最高版本。在这个版本的语言中，规范更加统一，浏览器之间的兼容性也更强了。
虽然 HTML 目前的功能已得到了极大的增强，不同浏览器之间的兼容性也更加好了，但HTML本身存在致命的缺点，就是不能描述数据的具体含义，同时它的标记也是很有限的，这就使得HTML的发展比较有限。另外在HTML的整个发展历程中，各种浏览器厂商对HTML的支持并没有完全严格按规范要求来做，使得HTML显得极其宽松，比如双标记可以没有结束标记，标记和属性的大小写不约束，属性值是否有引号都没关系，标记是否正确嵌套也没关系。而运行在计算机上的各种浏览器对错误的HTML也极其宽容，以至于明显格式不良的HTML文档在浏览器上竟然也能正确显示结果。而随着技术的发展，浏览器不仅能在计算机上运行，而且还能在移动设备和手持设备上运行，而运行在这些设备上的浏览器对 HTML 的错误就没有这么宽容了。为此，W3C建议使用XML（Extensible Markup Language，可扩展标记语言）规范来约束HTML文档。
XML是一套用来定义如何标记文本的规则，没有固定的标记，在XML中，程序员可以根据需要定义不同的标记。XML是区分大小写的，所有元素必须成对出现，所有属性值必须用英文引号引起来。XML的主要用途：一是作为定义各种实例标记语言标准的元标记；二是作为Web数据的标准交换语言，起到描述交换数据的作用。
XML作为Web数据的标准交换语言，具有很强的数据转换功能，完全可以替代HTML。但目前存在成千上万的基于HTML语言设计的网站，马上采用XML还不太合适。为从HTML平滑过渡到 XML，而采用了 XHTML（Extensible Hyper-Text Markup Language，可扩展 HTML）。XHTML是一个过渡技术，它同时结合了HTML的简单性和XML的规范性等优点，是一种增强了的HTML。2000年1月，W3C发布了XHTML1.0版本。
虽然HTML看上去显得很不规范，但事实上，W3C将它以及XHTML作为标准来发布时，都是通过文档类型定义（Document Type Definition，DTD）对它们制定了严格的规范标准，但现在大量存在互联网上的 HTML 文档却很少完全遵守这些规范。出于“存在即是合理”的考虑， WHATWG（Web HypertextApplication Technology Working Group，Web超文本应用技术工作组）组织制订了HTML5这样一个新的HTML标准，这是一种由规范向现实“妥协”的规范。HTML5的规范极其宽松，甚至不用提供DTD。在WHATWG的努力下，W3C在2008年终于认可了HTML5，目前W3C已制订了HTML5草案。尽管目前W3C还没有正式发布HTML5规范，但各大浏览器厂商对HTML5都抱着极大的热情，纷纷在自己的浏览器中对HTML5提供不同程度的支持。在Web开发界,也得到了越来越多开发人员的青睐，事实上，Google在很多地方都开始使用HTML5。
鉴于HTML5强劲的发展势头，我们将在本书中专门用一篇的内容对HTML5作入门性的介绍。1.3 HTML文件
使用HTML语言编写的文件称为HTML文件，扩展名为.html或.htm。HTML文件是一种纯文本文件，可以使用记事本、Editplus 等文本编辑工具，或 frontPage、Dreamweaver 等可视化编辑工具来编写。HTML文件由浏览器解释执行，具有跨平台性，任何一台主机，只要具有浏览器就可以执行HTML文件。通过浏览器中的“查看>>源文件”命令，访问者可以查看网页的HTML代码。
HTML文件的组成包含两部分内容：一是HTML标记；二是HTML标记所设置的内容。1.3.1 HTML标记
HTML标记用于描述网页结构，同时也可对页面对象样式进行简单的设置。
所有标记都是由一对尖括号（“<”和“>” ）和标记名所构成的，并分为开始标记和结束标记。开始标记使用<标记名>表示，结束标记使用表示。在开始标记中使用attributename=“value”这样的格式来设置属性，结束标记不包含任何属性。标记中的标记名用来在网页中描述网页对象，属性和属性值则用来设置对象的样式。
标记语法格式：
<标记名称 属性="属性值"属性="属性值" …> …
例如：您好
通常标记都具有默认属性，当一个标记中只包含标记名时，标记将使用默认属性，例如：段落标记
，其存在一个默认的居左对齐方式。
大多数HTML标记都有一个开始标记和结束标记，有部分标记只有开始标记，没有结束标记，如
。对于同时具有开始标记和结束标记的称为双标记，而只具有开始标记的称为单标记。在HTML标记中，有些标记既可以作单标记使用，也可以作双标记使用，如
、
HTML开始标记后面或标记对之间的内容就是HTML标记所设置的内容，其中的内容可以是普遍的文本，也可是嵌套的标记。
标记属性可以对标记所设置的内容进行一些简单样式的设置，如对文字颜色、字号、字体等样式进行设置。通过给属性设置不同的值，可以获得不同的样式效果。
一个标记中可以包含任意多个属性，不同属性之间使用空格分隔，例如：
。
对于HTML标记，属性值可以使用引号括起来，也可以不使用引号。使用引号时既可以是单引号，也可以是双引号。例如，size="3"及 size='3'都正确。但需注意的是，引号必须配对使用，不能一边使用双引号，另一边却使用单引号；此外，使用引号时必须保证是在英文输入状态下输入。
另外，HTML标记和属性不区分大小写，即标记
、
和
作用是一样的。1.3.2 HTML文件的基本结构
按照实现功能的不同，整个 HTML 文件可分成两层：一层是外层，由和标记对来标识，表示是一个HTML文件；另外一层是内层，用于实现HTML文件的具体功能。根据实现功能的不同，又可以将内层细分为两个区域，即头部区域和主体区域。
头部区域的标识标记是
和，即和之间的内容都属于头部区域中的内容。这个区域主要用来设置一些与网页相关的信息，如网页标题、字符集、网页描述的信息等，设置的信息内容一般不会显示在浏览器窗口中。要在浏览器窗口显示的内容需要放在主体区域。主体区域的标识标记是
和。HTML文件的基本结构如下：1.3.3 HTML文件的编写方法
HTML文件是一个文本文件，我们可以使用任意一种文本编辑工具。在此，我们将介绍两种编写方法，即使用最简单的记事本工具编写和使用可视化的网页制作利器Dreamweaver编写。
1．使用记事本编写HTML文件
打开记事本，在光标处直接输入如图1-1所示的代码，并以“ex1-1.html”为文件名将文件保存为D:\web\code\lesson1目录下。图1-1 使用记事本编写HTML文件
在D:\web\code\lesson1目录找到ex1-1.html文件，并双击该文件，会自动打开浏览器执行该html文件；或者打开浏览器，选择“文件→打开”命令，从弹出的“打开”对话框中找到ex1-1.html文件后，单击“确定”按钮，即可以执行该文件，运行效果如图1-2所示。图1-2 HTML文件在浏览器中的运行效果
2．使用Dreamweaver编写HTML文件
Dreamweaver 是 Macromedia 公司推出的目前最流行、使用最广泛的一款专业的可视化网页制作软件，集网页制作和网站管理于一身。可用于对 Web 站点、Web 页面进行设计和编码。
使用Dreamweaver的文档窗口通常包含多个视图窗口，其中Dreamweaver CS6包含了4个视图窗口，分别如下：
代码视图：用于编写和编辑HTML、CSS、JavaScript等代码的编码环境。
设计视图：用于可视化页面布局、可视化编辑的设计环境。
拆分视图：用于同时显示同一文档的代码视图和设计视图。
实时视图：用于实时展现浏览器浏览效果的窗口。图1-3 使用Dreamweaver新建HTML文件默认打开的代码视图
打开Dreamweaver CS6软件，在打开的界面中选择“新建”栏目下的“HTML”，将会默认打开如图1-3所示的代码视图。在代码视图中可直接编写代码，编写完后将文件保存为html文件，如图1-4所示。如果同时点击拆分视图和实时视图，则可同时查看代码视图及其在浏览器中的显示效果，如图1-5所示。图1-4 在代码视图中进行代码的编写图1-5 同时显示代码视图和实时视图
在代码视图、设计视图和拆分视图中，也可通过单击“在浏览器中预览/调试”按钮，以打开选择的浏览器来浏览网页，如图1-6所示。图1-6 选择浏览器浏览网页1.4 XHTML基础
我们知道XHTML是HTML向XML发展的一种过渡技术，它是使用XML的规则对HTML4.0进行的扩展。
标准的XHTML遵循严格的XML语法规则，这些规则主要如下。（1）文档之首必须使用DOCTYPE声明。（2）文档的根元素必须是html，并且必须为其指定命名空间，例如：
（3）元素必须正确嵌套。即当有标记嵌套使用时，必须先结束里层的标记，再结束外层的标记。
例如：
标记嵌套错误!
标记嵌套正确!（4）标记必须成对使用。
每个元素都必须有结束标记，除非在DTD中将其声明为EMPTY。对于单标记，必须在开始标记的右尖括号前加一反斜线，如
。（5）标记名和属性名必须小写。（6）属性值必须用引号括起来，并且引号必须在英文状态下输入。（7）每个属性都必须有属性值。
HTML标记的属性可以没有值，而XHTML规定所有属性都必须有一个确定的值，没有值的以属性名作为属性值，例如：
（8）使用id作为标记的标识属性。（9）
试读结束[说明：试读内容隐藏了图片]