第4章 HTML与HTML5

1、对于设计人员来讲，在制作网页的时候，不涉及HTML语言是不可能的，无论你是一个初学者，还是一个高级的制作人员，都需要或多或少地接触HTML语言，虽然Dreamweaver CC提供可视化的方法来创建和编辑HTML文件，但是对于一个深入掌握网页制作、对代码严格控制的用户来讲，直接书写HTML源代码是必需掌握的操作。4.1.1什么是什么是HTML语言语言在介绍HTML语言之前，不得不介绍万维网（World Wide Web）。万维网是一种建立在因特网上的、全球性的、交互的、多平台的、分布式的信息资源网络。它采用HTML语法描述超文本（Hypertext）文件。Hypertext有两个含意：一个是链

2、接相关联的文件；另一个是内含多媒体对象的文件。超文本标记语言（Hyper Text Markup Language，HTML）是一种文本类、解释执行的标记语言，是在标准一般化的标记语言（SGML）的基础上建立的。SGML仅定义一套标记语言的方法，而没有定义一套实际的标记语言。而HTML就是根据SGML制定的特殊应用。 4.1.2HTML语言的基本结构语言的基本结构编写HTML 文件的时候，必须遵循HTML 的语法规则。一个完整的HTML 文件由标题、段落、列表、表格、单词和嵌入的各种对象所组成。这些逻辑上统一的对象统称为元素，HTML 使用标签来分割并描述这些元素。实际上HTML 文件就是由元

3、素与标签组成的。HTML文件基本结构如下。 4.1.3HTML中的普通标签和空标签中的普通标签和空标签绝大多数元素都有起始标签和结束标签，在起始和结束之间的部分是元素体，例如。第一个元素都有名称和可选择的属性，元素的名称和属性都在起始标签内标明。4.1.4HTML的主要功能的主要功能HTML语言作为一种网页编辑语言，易学易懂，能制作出精美的网页效果，其主要功能如下。(1) 利用HTML 语言格式化文本。例如设置标题、字体、字号、颜色，设置文本的段落、对齐方式等。(2) 利用HTML 语言可以在页面中插入图像。使网页图文并茂，还可以设置图像的属性。例如大小、边框、布局等。(3) HTML 语言可

4、以创建列表，把信息用一种易读的方式表现出来。(4) 利用HTML 语言可以建立表格。表格为浏览者提供了快速找到需要信息的显示方式。(5) 利用HTML 语言在页面中加入多媒体。可以在网页中加入音频、视频、动画，还能设定播放的时间和次数。(6) HTML 语言可以建立超链接。通过超链接检索在线的信息，用鼠标单击，就可以链接到任何一处。(7) 利用HTML语言还可以实现交互式表单、计数器等。4.1.5HTML的重要标签的重要标签标签是HTML 语言最基本的单位，每一个标签都是由 结束，标签通过指定信息为段落或标题等来标识文档中的内容。本节就向读者介绍在HTML 语言中常用的一些标签。1基本标签通过

5、前面的学习，我们已经知道HTML文件是由、和3个标签组成的，它们都属于基本标签。2文本标签文本标签主要用来设置网页中的文字效果，例如文字的大小、文字的加粗等显示方式。文本标签也是写在标签内部的，3图像标签图像是网页中不可缺少的元素之一，在HTML中使用标签对图像处理。在标签中，src属性是不可缺少的，该属性用于设置图像的路径，设置路径后，在网页中就能够显示出路径所链接的图像。4格式标签格式标签主要用于对网页中的各种元素进行排版布局，格式标签放置在HTML文档中的与标签之间，通过格式标签可以定义文字段落、对齐方式等。5表格标签在HTML中表格标签是开发人员常用的标签，尤其是在Div+CSS布局还

6、没有被广泛应用的时候，它是表格网页布局的主要方法。表格的标签是，在表格中可以放入任何元素。6超链接标签超链接可以说是HTML超文本文件的命脉，HTML通过超链接标签来整合分散在世界各地的图像、文字、影像和音乐等信息，此类标签的主要用途为标示超文本文件链接。是超链接标签。7分区标签在HTML文档中常用的分区标签有两个，分别是标签和标签。其中，标签称为区域标签（又称为容器标签），用来作为多种HTML标签组合的容器，对该区域进行操作和设置，就完成对区域中元素的操作和设置。在Dreamweaver CC的编辑环境中，主要有3种编辑视图的方式，分别为代码视图、拆分视图和设计视图。代码视图主要用于编辑页面

7、的HTML代码；拆分视图则可以一边对页面进行可视化编辑制作，一边查看相应的HTML代码；设计视图用于在Dreamweaver中进行可视化的页面编辑制作。4.2.1在代码视图中编写在代码视图中编写HTML页面页面前面已经向读者介绍了有关HTML的相关知识，认识了HTML中的主要标签，接下来我们就一起通过Dreamweaver的代码视图编写一个HTML页面。动手实践动手实践在代码视图中编写在代码视图中编写HTML页面页面最终文件：光盘最终文件第4章4-2-1.html 视频：光盘视频第4章4-2-1.swf4.2.2在设计视图中制作在设计视图中制作HTML页面页面在代码视图中通过编写HTML代码的

8、方式制作纯文本的网页还是比较简单的，如果涉及图像、表单、多媒体等内容，那就需要设计者具有很强的HTML代码编辑能力了，但如果通过Dreamweaver CC中的设计视图，则可以轻松制作复杂的HTML页面。动手实践动手实践在设计视图中制作在设计视图中制作HTML页面页面最终文件：光盘最终文件第4章4-2-2.html 视频：光盘视频第4章4-2-2.swf4.2.3认识认识Dreamweaver CC的代码视图的代码视图Dreamweaver使用了Roundtrip HTML技术，使得用户在修改HTML代码的同时，也可以在设计视图中修改网页，并且在设计视图中的操作结果会立刻以源代码的形式，显示在

9、代码视图中。同样，在代码视图中可以直接编辑HTML源代码，当用鼠标单击设计视图中的任意位置时，会立刻看到相应的编辑结果。Dreamweaver CC的代码工具栏沿编码区域一侧的直栏中包含了常用编辑操作。快速标签编辑器的作用是让用户在文档窗口中直接对HTML 标签进行编写。它无需使用代码视图，就可以编辑单独的HTML 标签，使网页制作人员从可视化的工作环境进一步向HTML 代码靠近。4.3.1使用插入模式的快速标签编辑器使用插入模式的快速标签编辑器如果在文档中没有选择任何对象，就直接启动快速标签编辑器，快速标签编辑器会以插入模式启动。这时编辑器中只显示一对尖括号，提示用户输入新的标签及标签中的其

10、他内容。4.3.2使用编辑模式的快速标签编辑器使用编辑模式的快速标签编辑器当用户在文档窗口中选择了完整的HTML标签，包括起始标签、结束标签、标签间的内容，启动快速标签编辑器时，就会自动进入编辑模式。 4.3.3使用环绕模式的快速标签编辑器使用环绕模式的快速标签编辑器当用户在文档窗口中只选择了标签间的内容，而未选择任何的标签，那么打开快速标签编辑器时会自动进入环绕模式。环绕模式与插入模式有着明显的区别，在环绕模式中只能够输入单个的起始标签，并且在关闭快速标签编辑器后，Dreamweaver会自动将与其匹配的结束标签加入用户在文档窗口所选择内容的后面，所选内容的前面则是起始标签。4.3.4设置标

11、签编辑器的属性设置标签编辑器的属性执行“编辑首选参数”命令，弹出“首选参数”对话框，在该对话框左侧的“分类”列表中选择“代码提示”选项。利用“代码片断”面板可以减小代码编写的工作量。在该面板里可以存储HTML、JavaScript、CFML、ASP、JSP的代码片断，这样当需要重复使用这些代码时，就可以很方便地重用这些代码，或者创建并储存新的代码片断。4.4.1插入代码片断插入代码片断执行“窗口代码片断”命令，打开“代码片断”面板，选择希望插入的代码片断，单击面板上的“插入”按钮，即可将代码片断插入到页面中。4.4.2创建代码片断创建代码片断如是自己编写了一段代码，希望在其他页面中重复使用，这

12、时就可以使用“代码片断”面板创建自己的代码片断，轻松实现代码的重用。由于经常需要复制一些其他格式的文件，在这些文件里可能会带有垃圾代码和一些Dreamweaver不可识别的错误代码，它们不仅增加文档的大小，延长下载时间，在用浏览器浏览时也会变得很慢，还可能发生错误，所以要对HTML源代码进行优化处理，用以清除空标签、合并嵌套的标签等，从而提高HTML代码的可读性。4.5.1优化优化HTML代码代码在Dreamweaver CC中打开需要进行代码优化的HTML页面，执行“命令清理HTML”命令，弹出“清理HTML/XHTML”对话框，在其中可以选择优化方式。4.5.2清理清理Word生成的生成的

13、HTML代码代码由于Word生成的HTML文件中有许多无用的HTML代码，因此Dreamweaver CC提供了一个“清理Word生成的HTML”命令，用来清理那些只有Word才使用的，而Dreamweaver并不使用的代码。HTML 5是近十年来Web标准最巨大的飞跃。和以前的版本不同，HTML 5并非仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画，以及同计算机的交互都被标准化了。尽管HTML 5的实现还有很长的路要走，但HTML 5正在改变Web。在Dreamweaver CC中已经开始全面支持HTML 5，默认新建的HTML页面就是基

14、于HTML 5规范的。4.6.1初识初识HTML 5W3C在2010年1月22日发布了最新的HTML 5工作草案。HTML 5的工作组包括AOL、Apple、Google、IBM、Microsoft、Mozilla、Nokia、Opera以及数百家其他的开发商。制定HTML 5的目的是取代1999年W3C所制定的HTML 4.01和XHTML 1.0标准，希望能够在网络应用迅速发展的同时，网页语言能够符合网络发展的需求。4.6.2HTML 5标签标签通过制作如何处理所有HTML元素以及如何从错误中恢复的精确规则，HTML 5改进了互操作性，并减少了开发成本。4.6.3HTML 5标准属性标准属

15、性在HTML中标签拥有属性，在HTML 5中新增的属性有contenteditable、contextmenu、draggable、irrelevant、ref、registrationmark、template。不再支持HTML4.01中的accesskey属性。4.6.4HTML 5事件属性事件属性HTML元素可以拥有事件属性，这些属性在浏览器中具有触发行为，比如当用户单击一个HTML元素时启动一段JavaScript脚本。HTML 5中的新事件有onabort、onbeforeunload、oncontextmenu、ondrag、ondragend、ondragenter、ondragleave、ondragover、ondr