1 / 31

第 2 章 HTML 基础

第 2 章 HTML 基础. 2.1 Frontpage 工具简介 2.2 HTML 元素 2.3 框架结构. 一个完整的 JSP 程序包含 JSP 代码和 HTML 两部分，其中 JSP 代码嵌入在 HTML 中间。因此在学习 JSP 之前有必要了解有关 HTML 方面的知识。 Frontpage 是一个简单的 HTML 编辑工具，利用它可以直接生成 HTML 代码而不用手工输入，非常简单和方便。当然也可以在 Frontpage 中直接输入 JSP 代码，只需采用 <% 和 %> 来标记就可以了。. 2.1 Frontpage 工具简介.

jakeem-barlow
Download Presentation

第 2 章 HTML 基础

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第 2 章 HTML基础 • 2.1 Frontpage工具简介 • 2.2 HTML元素 • 2.3 框架结构

  2. 一个完整的JSP程序包含JSP代码和HTML两部分，其中JSP代码嵌入在HTML中间。因此在学习JSP之前有必要了解有关HTML方面的知识。 一个完整的JSP程序包含JSP代码和HTML两部分，其中JSP代码嵌入在HTML中间。因此在学习JSP之前有必要了解有关HTML方面的知识。 • Frontpage是一个简单的HTML编辑工具，利用它可以直接生成HTML代码而不用手工输入，非常简单和方便。当然也可以在Frontpage中直接输入JSP代码，只需采用<%和%>来标记就可以了。

  3. 2.1 Frontpage 工具简介 • Frontpage软件是一个网页制作工具软件，支持“所见即所得”的编辑方式。 • Frontpage软件可分为3部分：编辑网页的Frontpage Editor、管理网站的Frontpage Explorer 和提供网站功能的Frontpage PWS。

  4. Frontpage Editor编辑时有3个窗口：普通窗口，用来编辑网页内容；HTML窗口，用来观看Frontpage自动生成的HTML代码，也可在该窗口中输入HTML代码；预览窗口，演示网页效果。 • 上述3个窗口之间可以任意切换。

  5. 2.2 HTML元素 • HTML不是编程语言，而是一种根据需要把相关信息链接起来的信息管理技术，是一种用于编写超文本的标记语言。

  6. 2.2.1 HTML文件的基本格式 • 格式如下： • <HTML> • <HEAD> • <Title> 标题部分</Title> • </HEAD> • <BODY> • 正文部分 • </BODY> • </HTML>

  7. 各标记含义如下： • <HTML> </HTML> • <HTML>标签位于HTML文件最开头，告诉浏览器，这个文件是HTML文件，在文件尾，用</HTML>结束，提醒HTML文件结束。 • <HEAD> </HEAD> • <HEAD>标签一般放在<HTML>标签后，用来标明文件的题目或定义部分。 • <Title> </Title> • 这对标签用来定义文件的标题，浏览器通常会将文件标题显示在浏览器窗口的左上角。 • <BODY> </BODY> • 这对标签一般用来指明HTML文档里主要内容，如：标题、段落、列表等。也可定义主页背景颜色。

  8. 2.2.2 文本标记 • 1．标题元素 • HTML中的标题元素使用格式： • <H#> · · · · · · </H#> • #代表1、2、3、4、5、6中一个。它支持ALIGN属性，用它可以指定排版格式，其属性值有：LEFT、RIGHT和CENTER。如果不给出ALIGN的属性值，缺省值为LEFT。

  9. 图2-2 标题元素显示效果

  10. 2．FONT元素 • FONT元素用来设置文档的字体，通过改变其属性可以对字体进行不同的设置。其常用的属性包括：SIZE、COLOR和FACE。其中SIZE用来指定字符的大小，COLOR用来指定字符的颜色，FACE用来指定一种字体名或一种字体列表。

  11. 3．字符修饰元素 • HTML中规定了大量的字符修饰处理元素，它们能够在不改变字体、字号的基础上对字形进行改变。具体介绍如下。

  12. （1）物理样式 • B元素： • I元素： • U元素： • TT元素： • SUP元素： • SUB元素： • S元素： • STRIKE元素：

  13. （2）逻辑样式 • EM元素： • STRONG元素： • CODE元素： • SAMP元素： • KBD元素： • VAR元素： • DFN元素： • CITE元素： • SMALL元素： • BIG元素：

  14. 4．分行控制 • （1）分段元素P • （2）换行元素BR • 5．分隔线HR元素

  15. 2.2.3 超链接 • 超链接主要通过锚点元素A来实现。A元素可以支持较多的属性，其中最重要的是HREF和NAME属性。 • 1．HREF属性 • 2．NAME属性

  16. 2.2.4 图片标记 • 1．基本用法 • 2．图像对齐与布局

  17. 2.2.5 Table 表格 • 主要标记： • <table>……</table> 定义表格； • <tr> 定义表行； • <th> 定义表头； • <td> 定义表元； • <caption> 用来给表格提供一个标题。

  18. 例2-3 • <table border> • <tr><th>食物</th><th>饮料</th><th>甜点</th>/*定义表头*/ • <tr><td>A</td><td>B</td><td>C</td> /*定义表元*/ • </table>

  19. 例2-4 列合并。 • <table border> • <tr><th colspan=3>早餐菜单</th> • <tr><th> 食物 </th><th> 饮料 </th><th>甜点</th> • <tr><td>A</td><td>B</td><td>C</td> • </table>

  20. 例2-5 行合并。 • <table border> • <tr><th rowspan=3>早餐菜单</th> <th> 食物 </th> <td>A</td> • <tr><th> 饮料 </th> <td>B</td> • <tr><th>甜点</th><td>C</td> • </table>

  21. 图2-4 表格应用

  22. 图2-5 表格元素应用

  23. 图2-6 表格元素应用

  24. 2.2.6 表单的概念 • 1．表单的结构 • 在HTML中，Form 的标记有开始标记<form>和结束标记</from>，在开始标记中一般包含属性：ACTION、METHOD和ENCTYPE。 • ACTION： • 语法格式： • METHOD： • 语法格式： • ENCTYPE：

  25. 2．表单中常用的标记 • 表单中使用的主要元素包括以下3个。 • INPUT： • SELECT： • TEXTAREA：

  26. （1）INPUT • ① TEXT类型 • NAME： • SIZE： • VALUE： • MAXLENGTH：

  27. ② PASSWORD类型 • ③ RADIO类型 • NAME： • VALUE： • CHECKED：

  28. ④ CHECKBOX类型 • NAME： • VALUE： • CHECKED： • ⑤ SUBMIT类型 • NAME： • VALUE：

  29. ⑥ RESET 类型 • ⑦ HIDDEN 类型 • （2）SELECT • （3）TEXTAREA

  30. 3．表单的处理

  31. 2.3 框 架 结 构 • FRAMESET标记有两个属性ROW、COLS，分别用来说明将把浏览器窗口分成小窗口的数量和各个小窗口的大小。 • COLS属性：纵向将窗口划分为若干窗框。 • ROWS属性：横向将窗口划分为若干窗框。

More Related