《HTML与网页制作》由会员分享，可在线阅读，更多相关《HTML与网页制作（79页珍藏版）》请在金锄头文库上搜索。
1、第8章 HTML与网页制作本章主要内容8.1 HTML与网页简介 8.2 基本标记 8.3 链接与地址 8.4 图象 8.5 表格设计 8.6 表单设计 8.7 简单框架应用 8.8 多媒体应用 8.9 样式表8.1 HTML与网页简介1、HTML与网页概述 2、HTML文档结构 3、标记（元素） 4、标记 5、标记 6、标记1、HTML与网页概述浏览器W E B 服 务 器中间件数 据 库 服 务 器数据用 户请求返回访问网页：基于B/S的系统架构 。2、HTML文档结构My 1st HTML program!This is My 1st HTML program!例8-1：第一个HTML（
2、网页）文档。HTML文档编程说明1. 网页文档以开始，以结束。2. 一个完整的网页文档由文档头和文档体组成 。3. 文档头，又称Head区。和 4. 文档体，又称Body区。和 5. 浏览器在解析HTML文档时，忽略空格与换行 。6. 对标记名称的大小写不敏感。7. 注释行为“”所包含的部分 。3、标记（元素）Click me!属性属性受影响内 容起始标记结束标记标记名称属性名称属性值4、标记一个HTML文档必须以开始，以结束。文档头文档体格式一：文档头文档体（框架定义）格式二：6、标记vhead区：提供元信息。v元信息：描述信息的信息。v一个网页文档，只能有一个标 记。v常用的在head区中
3、使用的标记有： 标记 标记 标记 标记7、标记v标记的常用属性：bgcolor = “color_name | #RRGGBB“background = “图象URL“vbgcolor：设置背景颜色。使用red、green、blue、white、black 等。另一种方法是给出一个RGB值。如： vBackground：设置背景图片。最常见的图片格式为“.gif”和“.jpg”。如： v可以用标记来替代标记 。8.2 基本标记1、核心属性 2、标题、段落和换行 3、文字修饰标记 4、字符实体 5、列表1、核心属性v一个标记往往会定义若干个属性，来 扩展标记功能与应用。v主要介绍id、class
4、和title等3个属性。id属性v用来标识文档中的某个标记，设置一个独一 无二的名字。通过id应用样式表。在文档头定义：This is a paragraph of text.在文档体中应用：class属性v用来定义一个类，所谓类就是可以为若干个 标记所共有。class属性也是应用样式表。在文档头定义：This is a paragraph of text.在文档体中应用：title属性v用来为相关标记提供文字的提示信息。This is a paragraph of text.2、标题、段落和换行 标题标记 分段标记 换行标记 居中标记 预格式化标记 水平标尺线标记 标题标记 v标题（Head
5、ing）标记用来在HTML文 档中创建标题文字。v标题分6级，分别有6个标记来表示， 它们是、 和。v其中一级标题最大、最突出， 为最小，但其用法完全一样。v如：Heading 1。定义了一 个一级标题，标题内容为“Heading 1” 。 分段标记v分段标记的常用属性：align，class， id和title等。 align = “center | justify | left | right“class = “在样式表中定义的类名“id = “在样式表中定义的标式名“title = “提示信息“v属性align：段落的对齐方式，分别定义了居 中、两边对齐、左对齐和右对齐4中方式。v浏览器
6、在显示HTML文档时，会自动忽略空 格、Tab键和回车键，如多个空格被压缩成 一个。要保留原文中的段落，需要引入分段 标记。 换行标记浏览器在显示HTML文档时，会自动忽略 回车键。在需要换行的地方可以插入换行标记 。换行标记的用法最为简单，换行标 记没有属性，也没有结束标记。 居中标记居中标记的作用是将处在和 之间的对象显示在浏览器的 中间，对象可以是文字、图片或表格 等。 预格式化标记预格式化标记可以完全保留在 和之间的所有格式，包括 所有的空格、Tab键、回车键和字体字 号等。通过预格式化标记显示的文本，当 调整浏览器大小时，其显示的文本不 会随之调整。用分段标记显示的文本，当调整浏览
7、器大小时，其显示的文本会自动随之 调整。 水平标尺线标记将HTML文档在视觉上分成几个独立的区域。水平标尺线标记的3个常用属性：valign = “center | justify | left | right“vwidth = “百分比 | 像素“vsize = “像素“如：例8-2：标题、段落和换行等应用举例。 8-2.html 结果 ：3、文字修饰标记 和 （Bold，加粗） （Italic，斜体） （Underline，下划线） 上标标记 下标标记 和例8-3：一些文字修饰标记的应用。 8-3.html 结果 ：4、字符实体符号描述字符实体 名称值字符实体 数字值 “双引号大于号空格不
8、可忽略空格版权符号注册商标例8-4：字符实体应用。 8-4.html 结果 ：5、列表在HTML中有3种形式的列表：v 有序列表 Ordered Listv 无序列表 Unordered Listv 定义列表 Definitions List这里只介绍有序列表和无序列表 。的应用List Item 1List Item 2List Item n的4个常用属性：vtype = “a | A | i | I |1“vstart = “起始编号“vclass = “在样式表中定义的类名“vid = “在样式表中定义的标式名“的应用List Item 1List Item 2List Item n的属
9、性的常用属性：id、class和type。vtype = “circle | disc | square“circle” 空心小圆圈“disc” 实心小圆圈“square” 实心小方块例8-5：有序列表示例。 8-5.html 结果 ：8.3 链接与地址1、URL 2 、锚标记1、URLURL用来表示互联网上的资源。一个基本的URL结构：protocal:/site_address/directory/filena me如：http:/192.0.0.1/demo/index.html192.0.0.1/demo/index.htmldemo/index.htmlindex.html2、锚标记
10、锚标记（Anchor）：定义超链接。 锚标记的主要属性：vhref = “URL“vtarget = “_blank | _self | 框架名 | _top | _parent“vclass = “在样式表中定义的类名“vid = “在样式表中定义的标式名“vtitle = “提示信息“例8-6：锚标记应用示例。 8-6.html 结果 ：8.4 图象1、标记 2、图象与锚1、标记HTML文档图片格式：Gif、Jpg和Png。标记的主要属性：vSrc = “图象URL“valign = “center | justify | left | right“vWidth = “像数“vHeight
11、 = “像数“vBorder = “像数“vAlt = “文字信息“vTitle = “提示信息”2、图象与锚例8.7 图象与锚应用示 例。8.5 表格设计1、表格简介 2、标记 3、标记（Table Row） 4、标记（Table Data） 5、标记（Table Head） 6、表格嵌套1、表格简介表标题1表标题2表标题n单元格数据1单元格数据2单元格数据n2、 标记标记用于定义一个表格。常用属性：valign = “center | justify | left | right“vbgcolor = “color_name | #RRGGBB“vWidth = “百分比 | 像数“vBo
12、rder = “像数“vclass = “在样式表中定义的类名“vid = “在样式表中定义的标式名“vcellpadding = “像数“vcellspacing = “像数“2、 标记用于定义表格中的一行。常用属性 ：valign = “center | justify | left | right“vvalign = “baseline | bottom | middle | top“vbgcolor = “color_name | #RRGGBB“vclass = “在样式表中定义的类名“vid = “在样式表中定义的标式名“vTitle = “提示信息“2、 标记标记用于定义一个单元
13、个数据。常用属性 ：valign = “center | justify | left | right“vvalign = “baseline | bottom | middle | top“vbgcolor = “color_name | #RRGGBB“vWidth = “百分比 | 像数“vheight = “百分比 | 像数“vcolspan = “数字“vrowspan = “数字“vclass = “在样式表中定义的类名“vTitle = “提示信息“2、 标记标记的属性同标记。例8-8：设计一个如下所示的表格。物品编号物品名销售额1 Apple 4000.00 2 Orange
14、5000.00 3 Banana 6000.00 合计11000.00 3、表格嵌套表格内容一表格内容三表格内容二表格内容一表格内容二表格内容三8.6 表单设计1、表单简介 2、 标记 3、表单输入控件 4、多行文本输入 5、选择列表1、表单简介网页与用户的交互通过表单实现。表单的基本结构：输入数据项定义2、标记标记主要属性：vname = “名字“vaction = “URL“vmethod = “post | get“vtarget = “_blank | _self | 框架名 | _top | _parent“venctype = “application/x-www-form- ur
15、lencoded | multipart/form-data | text/plain“vclass = “在样式表中定义的类名“vid = “在样式表中定义的标式名“3、表单输入控件标记主要有如下几个属性：vtype = “ text | password | radio | checkbox | file | hidden | submit | reset “vname = “域名“vsize = “数字“vcheckedvvalue = “域名的取值“valign = “center | justify | left | right“n定义一个文本框，用于输入文本信息。n基本用法：n定义
16、一个文本框，用于输入密码。n基本用法：n用户输入的字符以“*”作为屏蔽字。n实现多选一。n基本用法：AppleOrangeBananan用于多选多。n基本用法： Apple Orange Bananan用于上传一个文件。n标记的enctype属性必须设置成 “multipart/form-data”n基本用法：n用于传递一个隐藏数据。n隐藏数据是指预先定义好的、用户在表 单中看不到的数据。n基本用法：n用户填完表单后，必须使用“提交”按钮 将表单数据发送出去。或者点击“重置” 按钮将表单初始化。n提交按钮在表单中是必需的。n用法：nn用户填完表单后，必须使用“提交”按钮 将表单数据发送出去。或者点击“重置” 按钮将表单初始化。n重置按钮不是必需的。n用法：例8-9：表单应用。8-9.html 结果 ：4、多行文本输入标记：在表单中输入多行文 本。 放在和之间。 常用属性：vname = “域名“vrows = “数字“vcols =
