作者：赵峰
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
HTML5+CSS3任务驱动教程试读：
前言
随着Internet的迅猛发展，网页制作、网站建设越来越流行，HTML5和CSS技术已成为网页制作学习的重要内容之一。本书从应用型本科和高职高专技术技能人才培养的角度出发，立足于最新的 HTML5、CSS3 网页前端开发的基础内容，打破传统的知识型结构，以完整的实例贯穿于各个模块，使每个模块具有明确的知识目标和能力目标，并结合两大目标划分具体任务。本书采用任务驱动的模式，按照“任务描述”→“
知识准备
”→“任务实现
”→“任务小结
”的思路编写，任务明确，重点突出，简明实用。同时，本书按照学生能力形成与学习动机发展规律进行教材目标结构、内容结构和过程结构的设计，使学生可以在较短的时间内快速掌握最实用的网页设计与制作知识。本书共分为11个模块，29个任务，主要内容包括Web基础知识、HTML5标记与网页制作、网页中多媒体的应用、表格与表单、列表与超链接、CSS3基础、CSS美化网站元素、DIV+CSS网页布局等内容。书中配置了丰富的任务实例，强调实践操作，注重实践能力的培养。以“任务讲解与实践”为主线，将知识内容贯穿于各个任务中，达到让学生“学中做、做中学”的目的，通过任务的演示与分析，让学生更加直观地了解每个模块要解决的问题和要达到的学习效果，这也解决了一些同类教材仅仅系统地讲解知识点而缺乏对知识点应用的讲解的问题。
本书由广东创新科技职业学院赵峰和汤怀担任主编，负责整书思路、主要框架、大纲的编写和统稿；杨启芳、刘闯、周春学担任副主编。全书编写分工如下：模块一由赵峰、刘闯编写；模块二、模块六由杨启芳编写；模块三由刘闯编写；模块四由赵峰、杨启芳编写；模块五、模块七由周春学编写；模块八、模块九由汤怀编写；模块十由汤怀、廖志超编写；模块十一由刘闯、廖志超编写。广东创新科技职业学院信息工程学院院长冯天亮教授担任主审，审阅了全部书稿并提出了宝贵的修改意见。广东朝阳企讯通科技有限公司技术研发部经理廖志超担任技术顾问，除参与编写部分模块内容外，在本书的模块设计、任务编排等方面，从企业实际工作过程和工作内容的角度给予了有益的指导。
本书提供配套资源，包括 PPT、源代码、课后习题答案，读者和任课教师可登录华信教育资源网（www.hxedu.com.cn）下载。
由于时间仓促，书稿内容多，要将各个知识点融入到各个项目任务中，是一项难度很大的工作，书中难免有疏漏之处，欢迎广大读者批评指正。
编者
模块一 网页设计基础知识
依靠不计其数、丰富多彩的网站，网络迅速普及。随着网络的普及，网站成为人们获取信息的重要途径。网站是由网页按照一定的链接顺序组成的，现在越来越多的用户希望能在网络上拥有自己的个人主页或个人网站，以此来展示自己的特点和想法。同时也有越来越多的企业通过网络为用户提供更多的相关信息，宣传推广自己的产品，以这种较廉价的方式获取最大的宣传效果。本模块主要介绍与网页设计相关的基础知识。
知识目标
● 网站的相关知识
● 网页的基本构成元素
● Web标准
● Dreamweaver CC 2017的安装和使用
能力目标
● 掌握建立网站的相关知识
● 掌握网页的基本构成元素
● 掌握Dreamweaver CC 2017的安装和使用
具体任务
●
任务1 Dreamweaver CC 2017的安装
●
任务2 网站的建立
●
任务3 网页的基本知识
任务1 Dreamweaver CC 2017的安装任务描述
在对一个网站进行设计时，首先一般会选用一个较为合适和方便的开发工具，Dreamweaver CC 2017是目前比较常用的也是比较适合初学者的一款开发软件，其操作界面如图1-1所示。图1-1 Dreamweaver CC 2017操作界面知识准备
1.1 Dreamweaver CC 2017的新增功能
1.全新的代码编辑器
Dreamweaver CC 2017借助全新的编码引擎，使用户可以更快、更灵活地编写代码。代码提示可帮助新用户了解HTML、CSS和其他Web标准，自动缩进、代码着色和可调整大小的字体等视觉辅助功能，可帮助用户减少错误，使代码更易于阅读。
2.开发人员工作区
专为开发人员设计的全新工作区使软件性能得到提升，使软件能够快速加载和打开文件，并加快项目完成速度。
3.CSS预处理器支持
Dreamweaver CC 2017支持SASS、LESS和SCSS等常用的CSS预处理器，同时具备完整的代码着色和编译功能，可以节省时间并生成更简洁的代码。
4.实时浏览器预览
Dreamweaver CC 2017支持实时查看页面编辑效果，无须手动刷新浏览器。
5.HTML文档中的快速CSS编辑
Dreamweaver CC 2017新增的“快速编辑”功能为HTML文档中的相关CSS提供内联编辑器，使用户可以快速进行代码更改。
6.快速CSS文档
Dreamweaver CC 2017新增的“快速文档”功能可直接在代码视图中显示CSS属性的相关Web Platform Docs参考信息，从而节省时间。
7.用于重复任务的多个光标
Dreamweaver CC 2017支持一次编写多行代码，从而快速完成创建项目符号列表、更新字符串序列，以及同时进行多项编辑等任务。
8.新式UI（User Interface，用户界面）
根据数千位测试版测试人员的反馈，Dreamweaver CC 2017经过重新设计，具备更直观的自定义界面，更易于访问的菜单和面板，以及仅显示所需工具的可配置的上下文工具栏。
9.UI颜色主题
Dreamweaver CC 2017的界面可提供从浅色到深色的四级对比度，更便于阅读和代码行编辑。任务实现
1.具体任务
下载并安装Adobe Dreamweaver CC 2017。
2.实现步骤（1）下载Adobe Dreamweaver CC 2017安装文件压缩包，进行解压，双击里面的Set-up.exe文件，如图1-2所示。图1-2 下载安装文件（2）双击后，开始安装，如图1-3所示。图1-3 安装等待（3）安装后，打开Dreamweaver CC 2017软件，出现其操作界面，执行“文件”→“新建”命令，创建一个HTML5模板，如图1-4所示。图1-4 创建HTML5模板（4）单击“创建”按钮，即可创建成功，如图1-5所示。图1-5 成功创建HTML5模板任务小结
通过本任务的学习，我们掌握了Dreamweaver CC 2017软件的下载、安装以及简单的使用，并了解了Dreamweaver CC 2017的新增功能，从而可以使用下载、安装好的Dreamweaver CC 2017创建网站、设计网页。任务2 网站的建立任务描述
在通过网址登录到网站上，对相关网页信息进行浏览时，会涉及很多关于网站和网页的相关知识，了解了这些相关知识，我们才能更清晰地对信息进行获取。一个简单的网站如图 1-6所示。
本任务主要使用Dreamweaver CC 2017建立一个网站，完成效果图如图1-7所示。图1-6 网站实际效果图1-7 任务2的完成效果图知识准备
1.2 网页、网站、首页
1.网页
网页（Web Page）是一种网络信息传递的载体，是构成网站的基本元素，同时是承载各种网站应用的平台，可以简单地认为：网站就是由网页组成的。用户需要通过浏览器来浏览网页，从网页中获得相关信息。网页本身就是一个文件，网页中可以有文字、图像、音频及视频等信息，它存放在世界某个角落的某台计算机中，如果想访问或者浏览它，这台计算机必须与互联网相连。
2.网站
网站（Web Site）由网页组成，因此，网站就是一个存放网络服务器上的完整信息的集合体。它是由单个或者多个网页组成的集合，如 Google、新浪，以及一些政府机关、企事业单位和个人网站等。
3.首页
首页（Home Page）是一个特殊的网页，它作为一个单独的网页时，和一般网页一样，可以存放一些相关信息，同时，它也可以作为整个网站的起始点和汇总点。
首页和主页的区别在于：在建立网站时，通常会将信息分类并建立一个网页，放置网站相关信息的目录，也就是主页。但是，不是所有的网站都会将主页设置为首页，一些网站还会将动画放在首页上，并将主页链接放在首页上，用户需要单击链接进而进入主页。
1.3 静态网页和动态网页
1.静态网页
静态网页也称平面页，其文件名通常以.htm、.html、.shtml、.xml（可扩展标记语言）等为后缀。用户只能被动地浏览网页设计者提供的网页内容，网页内容不会发生变化（除非网页设计者修改了网页的内容）。静态网页不能实现和浏览网页的用户之间的交互，其信息流向是单向的。
静态网页的特点如下：（1）静态网页的每个页面都有一个固定的URL（Uniform Resource Locator，统一资源定位符），且网页的URL以.htm、.html、.shtml等常见的形式为后缀；（2）静态网页内容一经发布到网站服务器上，无论是否有用户访问，都是保存在网站服务器上的，也就是说，静态网页是保存在服务器上的文件，每个静态网页都是一个独立的文件；（3）静态网页的内容相对稳定，因此容易被搜索引擎检索；（4）静态网页没有数据库的支持，在网站维护方面比较麻烦，因此当网站信息量很大时，完全依靠静态网页的网站制作方式比较困难；（5）静态网页的交互性较差，在功能方面有很大的限制；（6）静态网页页面浏览速度很快，整个过程无须链接数据库，开启页面的速度快于动态页面；（7）静态网页减轻了服务器的负担，工作量较少，降低了数据库的成本。
2.动态网页
动态网页，是指与静态网页相对应的一种网页编程技术。动态网页显示的内容是可以随着时间、环境或者数据库操作的结果而发生改变的。从某种意义上来讲，凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程生成的网页都是动态网页。动态网页能与后台数据库进行交互和数据传递，动态网页的URL的后缀不是.htm、.html、.shtml、.xml等静态网页的常见格式，而是.aspx、.asp、.jsp、.php、.perl、.cgi等形式。在动态网页网址中有一个标志性的符号——“？”。
动态网页一般由服务器端和客户端实现交互。
服务器端是一个在Web服务器上运行的程序（服务器端脚本），用来改变不同网页上的网页内容，或调节序列，或重新加载网页。服务器端的响应用来确定各种情况，例如，超文本标记语言表单里面的数据，URL中的参数，所使用的浏览器类型，数据库、服务器的状态等。
客户端就是浏览器端，客户端脚本完全在浏览器中运行，并控制着用户与浏览器之间的交互，同时，客户端的源代码一般都可以看到，其对最终访问用户相对公开。
动态网页的特点如下：（1）动态网页一般以数据库技术为基础，可以大大降低维护网站的工作量；（2）采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理等；（3）动态网页实际上并不是独立存在于服务器的网页文件，只有当用户请求时，服务器才返回一个完整的网页；（4）动态网页中的“？”，在搜索引擎检索时存在一定问题。搜索引擎一般不可能从一个网站的数据库中访问全部网页，出于技术方面的考虑，搜索时其不会抓取网址中“？”后面的内容，因此采用动态网页的网站在进行搜索引擎推广时，需要进行一定的技术处理才能适应搜索引擎的要求。
1.4 IP地址、域名和URL
1.IP地址
每个连接到互联网上的主机都会被分配一个IP地址，IP地址是用来唯一标识互联网上计算机的逻辑地址，机器之间的访问就是通过IP地址来进行的。目前IPv4版本的IP地址采用32位二进制数的形式表示。为了便于使用，IP地址经常被写成十进制数的形式，每8位二进制数用“.”分开，称为“点分十进制表示法”，如192.168.0.1。
2.域名
IP地址毕竟是数字标识，使用时不好记忆和书写，因此在IP地址的基础上又发展出一种符号化的地址方案，来代替数字型的IP地址。域名是由一串用点分隔的名字组成的互联网上某一台计算机或计算机组的名称，用于在数据传输时标识计算机的电子方位（有时也指地理位置）。网域名称系统（Domain Name System，DNS）简称域名系统，是互联网中的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使用户更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串，如www.baidu.com。
3.URL
统一资源定位符（URL），俗称网址。网址格式为：＜协议＞：//＜域名或IP＞：＜端口＞/＜路径＞。其中，＜协议＞：//＜域名或IP＞是必需的，＜端口＞/＜路径＞有时可省略。如https：//www.baidu.com/。
1.5 HTTP和FTP
1.HTTP
HTTP（HyperText Transfer Protocol）即超文本传输协议，它是Web的核心。HTTP是一种为了将位于全球各个地方的Web服务器中的内容发送给不特定的多数用户而制定的协议。HTTP用于从服务器端读取Web页面内容，从Web浏览器下载Web服务器中的HTML文档及图像文件等，并临时保存在个人计算机硬盘及内存中以供显示。
2.FTP
FTP（File Transfer Protocol）即文件传输协议，它是互联网上使用非常广泛的一种通信协议，是为了互联网上的用户进行文件传输（包括文件的上传和下载）而制定的。任务实现
1.具体任务
使用Dreamweaver CC 2017建立一个网站。
2.实现步骤（1）打开Dreamweaver CC 2017，执行“站点”→“新建站点”命令，如图1-8所示。图1-8 新建站点（2）在弹出的“站点设置对象test”对话框中，根据个人喜好设置站点名称和本地站点文件夹的路径，然后单击“保存”按钮，新建本地站点文件夹，如图1-9所示。图1-9 设置站点名称和本地站点文件夹（3）新建站点后，若没有显示面板，可以执行“窗口”→“显示面板”命令，如图 1-10所示。打开“文件”选项卡，可以看到新建的本地站点文件夹。图1-10 显示面板（4）成功创建一个站点，效果如图1-11所示。图1-11 成功创建站点任务小结
通过本任务，我们了解了网站和网页的基础知识，理解了静态网页和动态网页的区别，掌握了简单网站创建站点的基本流程和方法。任务3 网页的基本知识任务描述
网页结构即网页内容的布局，创建网页实际上就是对网页内容的布局进行规划。网页结构会直接影响用户体验，所以了解网页的基本结构是建立一个好的网页的基础。下面以广东创新科技职业学院信息工程学院主页为例，介绍网页的基本结构，如图1-12所示。图1-12 网页的基本结构实际效果知识准备
1.6 网页的基本结构
从页面结构的角度上看，网页主要由导航栏、栏目及正文内容三大要素组成。网页结构的创建、网页内容布局的规划实际上也是围绕这三大要素展开的。
1.导航栏
导航栏是构成网页的重要元素之一，是网站频道入口的集合区域，相当于网站的菜单。导航栏设计的目的是将站点内的信息分类处理，然后放在网页中以帮助用户快速查找站内信息。同时，导航栏的形式多种多样，包括文本导航栏、图像导航栏及动画导航栏等。
2.栏目
栏目是指网页中存放相同性质内容的区域。在对网页内容进行布局时，把性质相同的内容安排在网页的相同区域，可以帮助用户快速获取所需信息，对网站内容起到非常好的导航作用。
3.正文内容
正文内容是指网页中的主体内容。例如，对于文章类的网页，正文内容就是文章本身；而对于展示产品的网页，正文内容就是产品信息。
1.7 网页的基本内容
1.网站logo
通常，网站为体现其特色与内涵，都会设计并制作一个 logo 图像放置在其网站主页的左上角或其他醒目的位置。企业网站常常使用企业的标志或者注册商标作为网站logo。一个设计优秀的 logo 可以给用户留下深刻的印象，对网站和企业形象的宣传起到十分重要的作用。
2.Banner
Banner就是横幅，Banner中的内容通常为网页中的广告。
3.内容模块
网页的内容模块是整个页面的组成部分。设计人员可以通过该页面的栏目要求来设计不同模块，每个模块可以有一个标题内容，并且每个内容模块主要用来显示不同的文本信息。
4.版尾或版权模块
版尾是页面最底端的模块，这个位置通常用来放置网页的版权信息，以及网页所有者、设计者的联系方式等。有的网站也将网站的友情链接及一些附属的导航栏放置在这里。
5.文本
网页中的信息以文本为主。与图片相比，文本虽然不如图片那样能够很快引起用户的注意，但却能准确地表达信息的内容和含义。
6.图片
用户在网页中使用的图片格式主要包括GIF、JPEG和PNG等，其中使用最广泛的是GIF和JPEG两种格式。
7.超链接
超链接在本质上属于网页的一部分，是一种允许用户同其他网页或站点之间进行连接的元素。它是指从一个网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一张图片、一个电子邮件地址、一个文件，甚至是一个应用程序。
8.动画
在网页中，为了更有效地吸引用户的注意，许多网站的广告都做成了动画形式。网页中的动画主要有两种：GIF动画和Flash动画。其中，GIF动画只能有256种颜色，主要用于简单动画或作为图标使用。
9.声音
声音是多媒体网页的一个重要组成部分。用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等。很多浏览器不需要插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。
10.表格
在网页中，表格用来控制信息的布局方式，其包括两个方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是使用表格来精确控制各种网页元素在网页中出现的位置。
11.表单
网页中的表单通常用来接收用户在浏览器端的输入，然后将这些信息发送到网页设计者设置的目标端。这个目标端可以是文本文件、Web 网页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息、接收用户要求、获得反馈意见、让用户注册为会员并以会员的身份登录站点等。
1.8 网页的表现
网页的表现是指网页对信息在显示上的控制，如版式、颜色、大小等样式上的控制。好的表现会使用户在浏览页面时更加舒适。
1.9 网页的行为
网页的行为也就是网页的交互操作，既可以从网页上获得所需的信息，也可以把自己的一些观念信息、见解和意见传递出去与其他人交流。
1.10 网页的Web标准
网页的Web标准不是某一个标准，而是一系列标准的集合。Web标准由万维网联盟（W3C）制定，分为结构标准、表现标准、行为标准和代码标准。
1.结构标准（1）可扩展标记语言（Extensible Markup Language，XML）
和HTML一样，XML同样来源于标准通用标记语言，可扩展标记语言和标准通用标记语言都是能定义其他语言的语言。XML设计的最初目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。（2）可扩展超文本标记语言（Extensible HyperText Markup Language，XHTML）
虽然XML的数据转换能力强大，大多数情况下完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单地说，建立XHTML的目的就是实现HTML向XML的过渡。
2.表现标准
层叠样式表（CSS）：W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现语言。纯CSS布局与结构式XHTML相结合能帮助网页设计者分离外观与结构，使站点的访问及维护更加容易。
3.行为标准
文档对象模型（Document Object Model，DOM）：根据 W3C 的 DOM 规范（http：//www.w3.org/DOM/），DOM 是一种与浏览器、平台、语言的接口，使用户可以访问页面上其他的标准组件。简单地说，DOM解决了Netscape的JavaScript和Microsoft的JScript之间的冲突，给予Web设计师和开发者一个标准的方法，让他们能访问他们站点中的数据、脚本和表现层对象。
4.代码标准
代码标准包括结束标记、大小写元素、嵌套、属性、特殊符号、属性赋值以及注释等。任务小结
通过对一个成熟的网站的观察和学习，我们了解了建立网站时要使用的组成元素及结构和标准等，从而为以后建立一个性能良好的网站打下基础。
思考与练习
一、填空题
1.用户与服务器之间可通过________网页进行交互。
2.一个网站可以通过________将很多的网页链接在一起。
3.可以不用发布就能在本地计算机上浏览的页面编写语言是________。
4.对远程服务器上的文件进行维护时，通常采用的手段是________。
5.超文本标记语言的英文简称是________。
6.目前，在Internet上应用最广泛的服务是________。
7.Dreamweaver CC是________软件。
8.构成Web站点最基本的单位是________。
9.HTTP的中文含义是________。
10.通常，网页的首页称为________。
二、简答题
1.简述动态网页的特点。
2.HTTP和FTP的区别是什么？
3.网页的基本结构包含哪些？
三、操作训练题
1.下载并安装Dreamweaver CC 2017，创建一个站点。
2.利用Dreamweaver CC 2017创建一个HTML5模板。
模块二 HTML5开发基础
文本、图像、表格、样式、视频等基本元素或对象的建立都是以HTML为基础的。可以说，HTML是搭建网站的基本“材料”。HTML用于编写网页，是一切网页实现的基础。在网络中，我们浏览的网页都是一个个由HTML标记构成的文档。本模块将讲解HTML5语言的基础知识，为后面各模块的学习打下基础。
知识目标
● HTML的基本定义、发展历史与特性
● HTML的语法结构
● HTML的文档结构
● HTML的语法规范
● 设置网页文件头部信息的方法
能力目标
● 掌握常见的HTML标记
● 能读懂HTML基本的文档结构
● 掌握编写基本的HTML5文档
● 掌握对网页页面的头部部分进行基本设置
具体任务
●
任务1 编写一个简单的HTML5页面
●
任务2 设置“在线学习网”的首页文件头部信息
任务1 编写一个简单的HTML5页面任务描述
网络新技术层出不穷，但是不管技术如何变化，HTML都是网页设计的基础之一。对于网页设计者来说，代码知识是必须掌握的。在学习制作网页之前，了解相关HTML语言知识是非常必要的。
本任务用HTML标准结构编写一个简单的HTML5页面，页面效果如图2-1所示。图2-1 编写一个简单的HTML5页面知识准备
2.1 HTML简介
HTML是网页实现的基础，在网络中，我们浏览的网页都是一个个由HTML标记构成的文档。浏览器只要读取HTML源代码，就能将其解析成网页。HTML文档本身是一种纯文本文件，因此，我们可以使用任意一种文本编辑工具来编写HTML文档，如最简单的记事本工具，或者EditPlus、HBuilder、Sublime、IntelliJ IDEA等文本编辑工具，以及Dreamweaver CC等可视化编辑工具等。目前，最新的HTML文档是HTML5。
1.HTML的定义
HTML（HyperText Markup Language，超文本标记语言）是由 W3C（World Wide Web Consortium，万维网联盟）提出的，用于描述网页文档的一种标记语言。用 HTML 编写的超文本文档称为HTML文档，也称网页，它能独立于各种操作系统平台。
HTML 是一种规范和标准，它通过标记符号来标记要显示的网页中的各个部分。一个HTML文档包含很多HTML标记，这些标记用来告诉浏览器如何显示出文字、图像、动画并播放声音等，这些标记均由“＜”和“＞”符号以及一个字符串组成。
HTML文档制作简单，但功能强大，支持不同数据格式的文件嵌入，其主要特点如下。（1）简化性：HTML的版本升级采用超集方式，更加灵活方便。（2）可扩展性：HTML采取子类元素的方式，为系统扩展带来保证。（3）平台无关性：HTML可以广泛使用在各种操作系统平台上。（4）通用性：HTML 是一种简单、通用的全置标记语言，它允许网页开发者建立文本与图片相结合的复杂页面，这些页面可以被网络上任何人浏览。
2.HTML的发展历史
HTML（第一版）：1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。
HTML2.0：1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时。
HTML3.2：1996年1月14日发布，W3C推荐标准。
HTML4.0：1997年12月18日发布，W3C推荐标准。
HTML4.01（微小改进）：1999年12月24日发布，W3C推荐标准。
HTML5：2014年10月28日发布，W3C推荐标准。
在HTML5发展的过程中，2008年，HTML5的工作草案发布。由于HTML5能解决实际问题，所以在规范还没定稿的情况下，各大浏览器厂家已经开始对旗下产品进行升级以支持HTML5的新功能。这样，得益于浏览器的实验性反馈，HTML规范也得到了持续完善，并以这种方式迅速进入对Web平台的实质性改进中。
HTML5是用于取代1999年发布的HTML4.01和XHTML1.0标准的HTML标准版本，现在仍处于发展阶段。HTML5具有以下几种新特性，如表2-1所示。表2-1 HTML5新特性
2.2 HTML的基本结构
HTML文档包含标记和纯文本，它被Web浏览器读取并解析后以网页的形式显示出来。每个网页都有其基本的结构，包括HTML的语法格式、HTML的文档结构、HTML的语法规范等。
1.HTML的语法格式
HTML主要由标记、属性和元素组成，其基本语法格式如下：（1）标记（tag）
HTML文档的元素由HTML标记组成，每个标记描述一个功能。HTML标记两端有两个包括字符：“＜”和“＞”，这两个包括字符称为尖括号。HTML标记一般成对出现，如＜table＞和＜/table＞。无斜杠的标记称为开始标记，有斜杠的标记称为结束标记，在开始标记和结束标记之间的对象是元素内容。例如，＜table＞表示一个表格的开始，＜/table＞表示一个表格的结束。HTML标记是大小写无关的，但习惯使用小写。
HTML标记分为单标记和双标记两种。
① 单标记：只需单独使用就能完整地表达意思，这类标记的基本语法格式如下：
例如，最常用的换行标记＜br＞，代码如下：
② 双标记：它由“开始标记”和“结束标记”两部分构成，必须成对使用。其中，开始标记告诉Web浏览器从此处开始执行该标记所表示的功能，而结束标记告诉Web浏览器在这里结束该功能。开始标记前加一个斜杠（/）即成为结束标记，这类标记的基本语法格式如下：
其中，“内容”部分就是要被这对标记施加作用的部分。
例如，段落标记＜p＞，代码如下：（2）属性（attribute）
使用HTML制作网页时，如果想让HTML标记提供更多的信息，可以使用HTML标记的属性来实现，许多单标记和双标记的开始标记内可以包含一些属性。在HTML中，属性要在开始标记中指定，用来表示该标记的性质和特性。
设置属性的基本语法格式如下：
任何标记的属性都有默认值，省略该属性则取默认值。用空格隔开后可以指定多个属性，各属性之间无先后次序。
例如，表格标记＜table＞有width（表格的宽度）、align（表格相对周围元素的对齐方式）等属性，下面设置一个宽度为1060像素、居中对齐的表格，代码如下：
属性值应该被包含在引号中，常用双引号，但是在有些情况下，单引号也可以使用，比如属性值本身包含引号时就要使用单引号，代码如下：
注意：中文引号和英文引号是不一样的，上面所指的引号都是英文状态下的引号。（3）元素（element）
HTML 元素是由标记和属性组成的，是指从开始标记到结束标记之间的所有代码。没有内容的HTML元素称为空元素，空元素是在开始标记中关闭的。
例如：
2.HTML的文档结构
HTML5文档主要包含文档开始标记和结束标记＜html＞…＜/html＞、文档头部标记＜head＞…＜/head＞以及文档主体标记＜body＞…＜/body＞三部分。
HTML5文档的基本结构如下：（1）＜！doctype＞文档类型声明
＜！doctype＞用来声明文档类型，主要用于说明所使用的 HTML 的版本以及用于浏览器进行页面解析时使用的DTD（文档类型定义）文件。它必须写在HTML文档的第一行，位于＜html＞标记之前。＜！doctype＞声明不是HTML标记。
在HTML4.01及XHTML1.0时代，有很多种可供选择的doctype，每一种都会指明HTML的版本，以及其使用的是过渡型模式还是严格型模式，既难理解又难记忆。例如，XHTML1.0过渡型文档的声明如下：
相比于HTML4.01和XHTML1.0，HTML5在语法上发生了许多变化。HTML5对标记的书写格式要求得很宽松，可以不用规定标记必须遵循的DTD文件。HTML5对文档类型声明进行了简化，代码如下：
在HTML5中，一个文档适用于所有版本的HTML。所有浏览器（无论版本）都理解HTML5的doctype，因此可以在所有页面中使用它。必须在HTML文档中添加＜！doctype＞声明，这样浏览器才能获知文档类型。（2）＜html＞…＜/html＞文档标记
这个标记是全部文档内容的容器，＜html＞是开始标记，＜/html＞是结束标记，它们分别是网页的第一个和最后一个标记，其他代码都位于这两个标记之间。（3）＜head＞…＜/head＞文档头部标记
文档头部标记＜head＞…＜/head＞用于提供与Web页面有关的各种信息，它并不放置网页的任何内容，主要用来包含 HTML 文档的说明信息，也可以在该标记之间放置 JavaScript、VBScript、CSS等类型的脚本。（4）＜title＞…＜/title＞网页标题标记
网页标题标记＜title＞…＜/title＞，必须放在＜head＞…＜/head＞标记对之间。每个页面的标题都应该是简短的、描述性的，并且是唯一的。＜title＞…＜/title＞标记的作用主要有以下两个。
一是设置网页的标题，告诉用户网页的主题是什么，设置的标题将出现在浏览器中的标记栏中，如图2-2所示。图2-2 网页标题的显示效果
二是用于百度、谷歌等搜索引擎的索引，作为搜索关键字及搜索结果的标题使用。搜索引擎会根据＜title＞标记设置的标题明确页面内容，将网页或者文章合理归类，所以标题对一个网页或者文章来说特别重要。此外，到目前为止，标题标记是搜索引擎优化（SEO）中最关键的优化项目之一，一个合适的标题可以使网站在搜索引擎中获得更好的排名。实践证明，对标题提示设置关键词时也可以使网站在搜索引擎中获得更靠前的排名。有关标题对搜索的影响，请参见本模块任务2中的图2-7。（5）＜body＞…＜/body＞文档主体标记
文档主体标记包含了文档的正文内容，文字、图像、动画、超链接及其他HTML元素均位于该标记中。只有在＜body＞…＜/body＞标记中编辑的网页对象才可以在浏览器窗口中显示。（6）代码的注释
像很多计算机语言一样，HTML文档也提供注释功能。用户在浏览器中是看不到这些注释的，注释只有在文本编辑器中打开文档源代码时才可见。一般使用注释的目的是在文档中不同部分加上说明，方便以后阅读、维护和修改。
注释的语法格式如下：
3.HTML的常用标记
HTML5文档核心是HTML5标记，标记是用来实现网页元素的最小单位。学习HTML语言时，除了要知道HTML语言的结构，更多的是学习掌握这些标记的使用方法。
HTML语言的常用标记包括标题标记、段落标记、超链接标记、表格标记、表单标记等，如表2-2所示。表2-2 常用的HTML标记
4.HTML的语法规范
在编写HTML代码时，正确的书写规范是网页设计者编写良好结构文档的基础。这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。HTML的语法规范包括：
试读结束[说明：试读内容隐藏了图片]