JSP Web应用开发-CH03-HTML.ppt

JSP Web应用开发 本章要点： HTML的基本概念及其发展历程。 HTML的标记及其属性。 HTML文件的基本结构。 HTML的语法规则。 使用HTML标记制作网页。 合理选用多媒体技术，使页面图、文、声音、色彩齐茂，具有表现力。 制作表单，供客户提交信息。 恰当使用表格标记和窗口框架标记合理布局页面，使页面逻辑清晰。 3.1 HTML概述 HTML是英文 HyperText Markup Language（超文本标记语言）的缩写，是一种建立网页文件的语言 。 网页可由任何文本编辑器如记事本、写字板或网页专用编辑器（如FrontPage Editor或者Dreamweaver等工具软件）编辑，完成后以.htm 或.html为扩展名将文件保存为网页文件，该网页文件可以由浏览器打开显示。 HTML是制作网页最基本的语言，尽管不懂HTML也能够借助于网页制作工具制作出漂亮的网页，但掌握它可以更方便灵活地控制网页。很多网页制作专家都喜欢用记事本之类的编辑工具编写HTML文件，因为采用这种方式编写的网页有如下优点： (1)浏览器解释效率高、速度快。 (2)格式可以随意控制，可以把网页设计的更漂亮。 (3)不会产生垃圾代码，使网页的传输速度更快。 3.1.1 HTML入门——一个简单的HTML案例 【例3-1】 制作具有链接功能的两个简单网页。网页文件名为example3_1_1.html和example3_1_2.html。将两个网页文件保存在同一文件夹下，然后用鼠标双击网页文件example3_1_1.html，浏览器将自动打开并显示网页example3_1_1.html的内容。在该页面单击“古诗欣赏-望庐山瀑布”超链接，页面将跳转到example3_1_2.html页面，这是网页最基本的功能。 操作步骤如下： 1．编写网页代码 使用文本编辑器Notepad(记事本)或者WordPad(书写板)，输入以下两个HTML文件的代码。并保存在同一文件夹下。 2．页面测试 找到保存上面两个网页文件的文件夹，双击网页文件example3_1_1.html，浏览器中显示页面文件example3_1_1.html的运行结果，如图3—1所示。 在图3-1的页面中单击“古诗欣赏-望庐山瀑布”，页面将转跳至代码example3_1_2.html网页的页面，如图3-2所示。 3.1.2 HTML标记的基本概念 1.HTML标记及其作用 HTML是互联网计算机上安装的浏览器软件能够识别的语言，更确切地说，浏览器软件识别的是构成HTML语言的标记。HTML语言中用于描述功能的符号称为“标记”，它主要用来告诉浏览器如何显示HTML网页文件中的文字、图形、图像和链接等信息。 1)单标记 “单标记”是指只需单独使用就能完成功能表达的标记。 2)双标记 双标记由“初始标记”和“结束标记”两部分构成，在网页文件中必须成对出现。 2．标记属性 一些单标记和双标记的始标记内可以包含一些属性 ，其语法如下： 标记名称 属性1=属性1的值 属性2=属性2的值 属性3…内容 /标记名称 标记各属性之间没有先后次序区别，属性可以省略，省略时属性取其默认值。 3．注释语句 HTML和其他计算机语言一样也提供了注释语句。注释语句的格式为： !—解释释文-- 3.1.3 HTML文件基本架构 HTML网页文件基本结构如图3-3所示，以网页文件初始标记HTML开始，网页文件结束标记/HTML结束。用文件头标记对head、/head和文件体标记对body、/ body 把文件分成文档头部和文档正文两部分。 1.网页文件标记HTML HTML处于网页文档的开始一行，标记着网页文件的开始。 /HTML处于网页文档的结束行，标记着网页文件的结束，中间嵌套其它标记和内容。 2.文件头标记head head标记文件头区开始，/head标记文件头区结束。它一般包含下列标记及内容。 (1) 网页标题标记 语法：title网页标题/title。 网页标题出现在浏览器的标题栏中。标明网页内容和网页功能，一个网页只有一个标题，并且只能出现在文件的头部。 (2) 基地址标记 语法：base href= ” URL”。 用来指定网页中超链接的基准路径，该标记主要用于简化页面中超链接的地址，只需要把超链接的地址设为基于基准路径的相对路径。 (3) 文档相关资料标记 语法：meta name= ”作者” content= ”李××” charset= gb2312。 meta标记的属性主要用来提供文档的相关信息，如上面一行就指明了“李××是作者”这一信息。其charset属性用来设置网页使用的字符集。下面一行列出了网页常用字符集的设置情况： 繁体中文chars