JSP应用开发与实践 教学课件 刘乃琦 王冲 第2章 客户端应用技术基础.pdfVIP

第2章 客户端应用技术基础 本章要求 ：  HTML 5文档结构  HTML的文字排版、图片、超链接和表格标记  HTML 5新增的语义元素  如何在HTML 5文档中实现音频和视频的播放  如何添加HTML的表单标记  如何使用CSS样式表  JavaScript脚本语言的基本语法  JavaScript脚本语言提供的常用对象  DOM技术 第2章 客户端应用技术基础 主要内容 1. HTML 5标记语言 2. CSS样式表 3. JavaScript脚本语言 4. 综合实例——应用DIV+CSS布局许愿墙主界面 2.1 HTML 5标记语言 2.1.1 HTML 5文档结构 2.1.2 HTML文字排版标记 2.1.3 图片与超链接标记 2.1.4 HTML 5新增的语义元素 2.1.5 制作表格 2.1.6 播放音频和视频 2.1.7 表单标记 2.1.1 HTML 5文档结构 在介绍HTML 5文档结构以前，我们先来看一个基本的HTML 5文档，具体代码如图2-1所示。 文档类型 根元素 头元素 主体元素 图2-1 一个基本的HTML 5文档 在图2-1所示的代码中，第一行代码用于指定的是文档的类型；第二行和第11行，为HTML 5文档 的根元素，也就是html标记；第3行和第6行为头元素，也就是head标记；第8行和第10行为主体 元素，也就是body标记。 图2-1所示代码的运行结果如图2-2所示。 文档的标题 文档的主 体内容 图2-2 一个基本的HTML 5文档的运行结果 在对HTML 5文档有了一个基本的了解以后，我们再来看一看，组成HTML 5文档的各元素。 1．文档类型 一个标准的HTML文档，它的起始元素为指定文档类型的标记。在HTML 5以前的HTML文档中，用 于指定文档类型的标记代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1- transitional.dtd 而在HTML 5的文档中，指定文档类型的代码则更加简短和美观，仅仅使用下面的15个字符就可 以实现了。 !DOCTYPE HTML 说明： 在HTML 5文档中，如果您喜欢使用以前版本中提供的指定文档类型的代码，也是可以的。 2．根元素 HTML文档的根元素是html标记。所有HTML文件都是以html标记开头，以/html标记结束 。HTML页面的所有标记都要放置在html与/html标记中，虽然html标记并没有实质性的功能 。但却是HTML文件不可缺少的内容。 说明： HTML标记是不区分大小写的。 3．头元素 HTML文件的头元素是head标记，作用是放置HTML文档的信息。在head标记中，可以使用 title标记来指定文档的标题，也可以使用meta标记来指定字符编码。例如，在HTML 5的文档中 ，我们可以在head标记中使