Web程序设计(第三版)_第3章
网页与web程序设计第3章
图像
图像在网页中具有提供信息，展示作品， 图像在网页中具有提供信息，展示作品， 装饰网页，表达个人情调和风格的作用。 装饰网页，表达个人情调和风格的作用。 用户可以在网页中使用GIF, JPEG(JPG), 用户可以在网页中使用 PNG三种图象格式，其中使用最广泛的是 三种图象格式， 三种图象格式 GIF和JPEG两种格式。当用户使用所见 两种格式。 和 两种格式 即所得的网页设计软件在网页上添加其他 非GIF, JPEG, 或PNG格式的图片并保存 格式的图片并保存 这些软件通常会自动将少于8位颜色 时，这些软件通常会自动将少于 位颜色 的图片转化为GIF格式，或将多于 位颜 格式， 的图片转化为 格式 或将多于8位颜 色的图片转化为JPEG。 色的图片转化为 。
起始页
在打开的文档窗口中，可以看到起始页对 在打开的文档窗口中， 话框，该对话框由三个栏目组成。 话框，该对话框由三个栏目组成。 1 3 2
窗口布局
标题栏 菜单栏 插入工具栏 文档工具栏
文档窗口
面板组
属性面板
获取帮助
帮助文档 选择“帮助”菜单中的“帮助” 选择“帮助”菜单中的“帮助”可以打开帮助文 在文档中包含有“目录” 索引” 档，在文档中包含有“目录”、“索引”、 搜索” 书签” 个标签 “搜索”、“书签”4个标签 参考” 参考”面板 “参考”面板为用户提供了标记语言、编程语言 参考”面板为用户提供了标记语言、 样式的快速参考工具。 和 CSS 样式的快速参考工具。它提供了有关用 户在“标签、对象和样式的信息。 参考” 特定标签、对象和样式的信息。“参考”面板 还提供了可粘贴到文档中的示例代码。 还提供了可粘贴到文档中的示例代码。
Dreamweaver8的界面元素介绍 的界面元素介绍
网页设计与制作基础教程 第3版 第03章-使用表格布局页面
::::::::::
::::::::::
3.2.8 导入与导出表格式数据
使用Dreamweaver CC，用户不仅可以将另一个应用程序，例如Excel中 创建并以分隔文本格式(其中的项以制表符、逗号、冒号、分号或其他分隔 符隔开)保存的表格式数据导入到网页文档中并设置为表格的格式，而且还 可以将Dreamweaver CC中的表格导出。
::::::::::
3.2.6 复制与粘贴单元格
用户在Dreamweaver CC中插入表格并选中表格中一个单元格后，选择 “编辑”命令，在弹出的的菜单中可以对表格执行“剪切”、“拷贝”、“ 粘贴”等操作。
::::::::::以根据单个列的内容对表格中的行进行 排序或者根据两个列的内容执行更加复杂的表格排序。
《 网页设计与制作基础教程(第3版)》
第三章
使用表格布局页面
学习目标
在网页中插入的文本和图像会随着浏览器窗口的放大与缩 小发生变化，这使得网页处于不稳定的显示状态。要解决这种 状态，最简单的方法就是使用表格，表格不仅能够控制网页在 浏览器窗口中的位置，还可以控制网页元素在网页中的显示位 置。
::::::::::
本章重点
创建基本表格 插入表格元素 调整表格大小 导入与导出表格数据 使用表格制作网页
::::::::::
3.1 使用表格
网页能够向访问者提供的信息是多样化的，包括文字、图像、动画和视 频等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得不 仅美观而且有条理，是网页设计者在着手设计网页之前必须要考虑的问题。 表格的作用就是帮助用户高效、准确地定位各种网页数据，并直观、鲜明地 表达设计者的思想。
网页中表格的用途 创建表格 插入表格元素 设置表格属性
web应用程序设计第3章.pptx
事件关联的方法的一般格式： protected void 事件函数名(object sender, EventArgs e) { //事件函数代码 }
其中，sender表示引发事件的对象，其数据类型只能是 object型。e封装事件发布者的参数信息，其数据类型为 EventArgs型或其派生类型。
LinkButton控件的动态超链接：
<asp:LinkButton id=”btnGo” runat=”server” onClick=”btnGo_Click” Text=”Go…”/>
protected void btnGo_Click(object sender, EventArgs e)
掌握Web窗体之间的超链接跳转的实现方法和两 种跨页传值方法。
HtmlAnchor控件实现超链接：
◦ <a id=”…” runat=”server” href=”目标页URL”>链接文本 <a>
LinkButton控件的静态超链接：
◦ <asp:LinkButton id=”…” runat=”server” PostBackUrl=” 目标页URL”>链接文本</ asp:LinkButton>
1. Web窗体的编程模型 2. 基于事件驱动的编程方法 3. Web窗体的动态生成 4. Web窗体与页面提交
3.1.1 Web窗体与Page对象 3.1.2 Page对象的生命周期 3.1.3 Page对象的常用属性与事件
Web窗体
从操作界面角度：是一个网页，由页面元素组成的 从源代码来看：是一个封装用户数据及其操作方法的Page类。
可以装载其他数据（例如，加载XML文档、执行数据库的查询等）。 5. Page_PreRender：表示页呈现之前的事件，此时可对页的内容进行最
ch06-Java Web程序设计(第3版)-微课视频版-郭克华-清华大学出版社
stat.close(); conn.close();
添加数据
具体添加案例见课本 在这里，重点介绍下面一句代码：
int i = stat.executeUpdate(sql);
它返回一个整型，意思为这条 sql 语句执行受影响的 行数，即成功添加的条数
JDBC 简介
ODBC 驱动连接数据库
建立 ODBC 数据源
在使用 ODBC 之前，需要配置 ODBC 的数据 源，让 ODBC 知道连接的具体数据库
ODBC 支持连接到各种数据库。如 Oracle、 MySQL、MSSQLServer 等，具体的设置详 见课本图解过程
建立 ODBC 数据源
建立 ODBC 数据源
操作如下：
✓ 首先在控制面板中选择"管理工具"，双击"数据源(ODBC)图标"
建立 ODBC 数据源
操作如下：
✓ 在"ODBC 数据源管理器"的"系统 DSN"选项卡中单击"添加"按 钮
建立 ODBC 数据源
操作如下：
✓ 从弹出的"创建新数据源"窗口的数据源名称列表中选择 "Microsoft Acces Driver(*.mdb)" 并单击"完成"按钮
JDBC 简介
JDBC中以下类或接口
✓ java.sql.Connection：负责连接数据库
✓ java.sql.Statement：负责执行数据库 SQL 语句
✓ java.sql.ResultSet：负责存放查询结果
JDBC 简介
针对不同类型的数据库，JDBC 机制中提供了"驱动程序"的 的概念。对于不同的数据库，程序只需要使用不同的驱动
ch05-Java Web程序设计(第3版)-微课视频版-郭克华-清华大学出版社
✓ 表单中一般都有一个按钮负责提交 ✓ 点击提交按钮，表单元素中的内容会提交给服务器
端 ✓ 表单元素放在<form></form>之间
表单开发
表单是提交给服务器的，如何确定到底提交给 哪一个界面？
✓ 用<form>中的action属性确定。如：
%>
注意：如果表单中没有name=account的表单元素，str 为null；如果在表单元素account中没有输入任何内容就 提交，str为""。
表单开发
<input type="submit" value="登录">表示提 交按钮，可以写普通按钮吗？
✓ 不行，如果将该按钮改为：<input type="button" value="登录">，显示效果一样，但是点击，没有提交 功能。不过可以用JavaScript进行提交。
✓ 方法如下：变量（字符串 ）= new String(变量 （字符串 ）.getBytes("ISO-8859-1"),"gb2312")
中文乱码问题
直接修改 request 的编码
✓ 可以将 request 的编码修改为支持中文的编码， 这样，整个页面中的请求，都可以自动转为中文
✓ request.setCharacterEncoding("gb2312")
<form action="page.jsp"> 请您输入账号：<input name="account" type="text"><BR> 请您输入密码：<input name="password" type="password"><BR> <input type="submit" value="登录">
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)课时授课计划
教学组织形式
讲解、示范、边讲边练
作业
备注
第7章使用CSS布局页面
7.1 Div+CSS布局技术概述144
7.1.1认识Div+CSS布局144
7.1.2正确理解Web标准145
7.2 Div的嵌套布局145
7.2.1将页面用Div分块145
7.2.2案例——制作爱心包装活动发布页面146
7.3常见的CSS布局样式149
1.掌握Div嵌套布局的方法；
2.掌握常见的CSS布局样式；
3.掌握使用CSS布局制作综合案例页面的技术。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.使用Div嵌套布局制作基本的页面。
2.使用CSS布局制作综合案例页面。
教学方法、手段
3.2.1 details元素和summary元素46
3.2.2 progress元素47
3.3表格48
3.3.1表格的结构48
3.3.2表格的基本语法48
3.3.3表格的属性49
3.3.4不规范表格51
3.3.5表格数据的分组52
3.3.6案例——使用表格布局爱心包装产品展示页面54
3.4表单55
7.3.1两列布局样式149
7.3.2三列布局样式149
7.4综合案例——制作爱心社区页面150
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程（学习领域）名称
章节
第8章JavaScript语言基础
单元主要教学内容
数据类型、表达式、程序结构、函数、对象
Web程序设计ASP.NET实用网站开发第三版教学设计 (3)
Web程序设计实用网站开发第三版教学设计一、教学目标本教学设计旨在使学生掌握平台的基本原理及相关技术，能够独立完成网站的开发和部署。
二、教学内容第一部分 平台基础简介开发环境搭建 MVC基础 WebForm基础第二部分数据库设计1.数据库基础知识2.SQL Server数据库基础3.数据库设计规范和范式第三部分网站开发实例1.制作一个博客网站2.制作一个在线商城网站3.制作一个素材下载网站三、教学方法本教学设计采用“理论教学与实践结合”的教学方法，即在讲解相关理论知识的同时，引导学生亲自实践，提高学生的动手能力和实际操作能力。
四、教学评价本教学设计采用多种形式进行教学评价，包括课堂作业、实验报告、小组项目设计和演示等形式。
评价将综合考虑学生对平台的理解和应用能力。
五、参考教材1.《 MVC5实战》2.《中文版教程》3.《 Web程序设计》以上教材均可作为本课程的参考教材，学生可以根据自己的需求选择学习。
同时，教师也可以根据教学需要进行课外阅读推荐，在教材后期对相关知识进行深入讲解。
六、教学资源本课程需要使用到相关的开发软件和服务器资源，教师应提前准备好相应的教学资源，并在课程前向学生进行讲解和指导。
同时，学生也应自行下载并安装相关的软件和开发工具。
七、教学进度安排1.第一周：平台简介，开发环境搭建2.第二周： MVC基础，实例演示3.第三周： WebForm基础，实例演示4.第四周：数据库基础知识，SQL Server数据库基础5.第五周：数据库设计规范和范式，实例演示6.第六周：制作一个博客网站，实例演示7.第七周：制作一个在线商城网站，实例演示8.第八周：制作一个素材下载网站，实例演示9.第九周：小组项目设计和演示10.第十周：课程总结和学习体会分享。
Java Web程序设计任务教程第3章 Servlet基础
掌握
了解Servlet的
熟悉使用Eclipse 工具开发Servlet
3
生命周期
2
目录
Servlet概述
Servlet开发入门
☞点击查看本小节知识架构
Servlet应用
☞点击查看本小节知识架构
ServletConfig和ServletContext
☞点击查看本小节知识架构
Servlet基础
随着Web应用业务需求的增多，动态Web资源的开发变得越来越重要。
3.2 Servlet开发入门
Servlet的生命周期
在Java中，任何对象都有生命周期，Servlet也不例外，接下来，通过一张图来 描述Servlet的生命周期，如图所示。
右图描述了Servlet的生命周期。按 照功能的不同，大致可以将Servlet 的生命周期分为三个阶段，分别是 初始化阶段、运行阶段和销毁阶段。
除了上述几点外，Servlet还具有功能强大、能够在各个程序之间共享数据、安 Servlet开发入门
Servlet接口及其实现类
针对Servlet技术的开发，SUN公司提供了一系列接口和类，其中最重要的接口 是javax.servlet.Servlet。在Servlet接口中定义了5个抽象方法，具体如表所示。
Servlet技术具有如下特点：
• 方便：Servlet提供了大量的实用工具例程，如处理很难完成的HTML表单数据、读取 和设置HTTP头，以及处理Cookie和跟踪会话等。 • 跨平台：Servlet用Java类编写，可以在不同操作系统平台和不同应用服务器平台下 运行。 • 灵活性和可扩展性：采用Servlet开发的Web应用程序，由于Java类的继承性及构造 函数等特点，使得应用灵活，可随意扩展。
网页制作实用教程(第3版)第3章
单击 按钮，则 选择的“方正宋一 简体”出现在对话 框左下侧的“选择 的字体”区域中。 同时在“字体列表 ”区域中出现了新 添加的字体，如图 3-17所示。
重复2、3步骤， 再将“隶书”和 “黑体”添加到 字体列表中，这 样就得到由3种 字体组成的有先 后顺序的一组字 体组合。
图3-15 “字体”弹出菜单
图3-16 “编辑字体列表”对话框 话框
图3-17 “编辑字体列表”对
3.2 添加图像
5 创建鼠标经过图像
3.2.1 Web图像格式
GIF JPEG PNG
图形交换格式： 最多只能显示256 种颜色，可以制 作网络动画及透 明图像。适合于 色彩要求较低的 导航条、按钮、 图标和项目符号 等。
联合图像专家组标准： 是24位的图像文件格 式，图片压缩率可调 节，可显示大约1 670多万种颜色。适 合于对色彩要求较高， 但对存储空间或网络 传输速度要求也较高 的风景画、照片等。
5
在出现的“插入 日期”对话框中， 选择星期格式、 日期格式和时间 格式，如图3-14 所示。
图3-13 “插入”面板 话框
图3-14 “插入日期”对
6
如果希望在每次 保存文档时都更 新插入的日期， 请勾选“储存时 自动更新”选项。
7
单击“确定”按 钮，日期便以选 定的格式出现在 指定位置。
8
将文件另存为 “3-2 .html”， 存于原文件夹d3 中。
第3章网页元素的添加
知 识 技 能 目 标
会正确地使用相对路径 能够在网页中添加文字、图片和超链接
理解超链接的作用
理解网页中URL的含义
了解在网页中添加文字几种方法
3.1 编辑文字
本章内容
3.2 添加图像
Web程序设计第3章课后题
Web程序设计第3章课后题注：课后题共7题（除第一题和第九题），其中5和8由于还有些问题没有解决，就没有将答案附上。
这里的答案仅供参考，希望在上机之前能自己练习一下。
程序有很多地方可以改，不要照搬。
（2）设计一个网页，其中包含TextBox和Button控件各一个。
当在TextBox中输入一个成绩，再单击Button控件时在网页上输出相应的等级信息。
【.aspx】<%@Page Language="C#"AutoEventWireup="true"CodeBehind="question2.aspx.cs"Inherits="homework_chap3.question2" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title></title></head><body><form id="form1"runat="server"><div><asp:TextBox ID="TextBox1"runat="server">请输入一个成绩</asp:TextBox><asp:Label ID="Label1"runat="server"Text="Label">待显示</asp:Label><br/><asp:Button ID="Button1"runat="server"OnClick="btmSubmit_Click"Text="检测"/></div></form></body></html>【.aspx.cs】using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace homework_chap3{public partial class question2 : System.Web.UI.Page{protected void btmSubmit_Click(object sender, EventArgs e){int iInput = int.Parse(TextBox1.Text);if (iInput > 100)Label1.Text = "请输入正确的分数";else if(iInput >= 90)Label1.Text = "优秀";else if (iInput >= 80)Label1.Text = "良好";else if (iInput >= 60)Label1.Text = "及格";else if (iInput >= 0)Label1.Text = "不及格";elseLabel1.Text = "请输入正确的分数";}}}【效果】（3）在网页上输出九九乘法表【.aspx.cs】（.aspx源文件可以不作处理）using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace homework_chap3{public partial class question3 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){for (int i=1; i<= 9; i++){for (int j = 1; j <= i; j++){Response.Write(i + "*" + j + "=" + (i * j) + " ");}Response.Write("</br>");}}}}【效果】（4）在网页上输出如下形状：ABBBCCCCCDDDE【.aspx.cs】（.aspx源文件可以不作处理）using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace homework_chap3.questions{public partial class question4 : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){String[] s = { "A", "B", "C", "D", "E" };for (int i = 1; i <= 3; i++){for (int j = 1; j <= 3 - i; j++){Response.Write(" ");}for(int k = 1; k <= 2*i-1; k++){Response.Write(s[i-1]);}Response.Write("</br>");}for (int i = 1; i < 3; i++){for (int j = 1; j <= i; j++){Response.Write(" ");}for (int k = 1; k <= 5 - 2*i; k++){Response.Write(s[i + 2]);}Response.Write("</br>");}}}}【效果】（6）设计一个网页，其中包含两个TextBox和一个Button控件。
Web应用程序设计案例教程第3章
10
3.3.3 RangeValidator控件
1. RangeValidator控件的功能 ☺RangeValidator控件是指用户在Web窗体页上输入数据时，检查 输入的值是否在指定的上下限范围之内的一种验证。 2. RangeValidator控件的主要属性 ☺MinimumValue属性：用来指定范围的下限值。 ☺MaximumValue属性：用来指定范围的上限值。 3. RangeValidator控件的应用 ☺通过在Web页面中添加RangeValidator控件，并将其链接到要做 的范围验证的输入控件，并且指定要验证的值的数据类型，就可 以验证该控件输入的值是否在指定范围内。 应用RangeValidator控件进行范围验证的操作步骤如下。 ☺(1)将RangeValidator控件添加到页中。 ☺(2)使用MaximumValue和MaximumValue属性来设置范围的上、 下限值。 ☺(3)设置Type属性，指定范围设置的数据类型，可以使用string、 integer、double或currency类型名。 ☺(4)如果是编程验证，可在Web窗体代码中添加测试代码，以检查 有效性。
添加TextBox控件的方法与添加Label控件相同。
2. DropDownList控件 ☺DropDownList控件就是我们经常见到的下拉列表，是在众
多的列表项中选择一项。此控件的选择项的数据可以是静态 绑定，也可以是通过程序动态绑定，这种列表项较少的直接 使用静态绑定比较方便，但是出生日期中的年月日列表项比 较多，使用静态绑定就显得比较麻烦，这种情况下就应采用 动态绑定。
网页设计与制作基础教程 第3版 配套课件
:::::
1.3.1 切换“文档”视图
Dreamweaver CC文档窗口显示栏当前文档，选择“查看”命令，在文 档视图下拉菜单中，用户可以“设计”、“代码”、“拆分”、“实时视图 ”等视图模式，其各自的功能如下。
设计视图 代码视图 代码视图 实时视图 实时代码模式 检查模式
::::::::::
3.2.1 选择表格元素
在表格中输入文本 在表格中插入图像
::::::::::
3.1.4 设置表格属性
表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表 格与单元格的属性完全不同，选择不同的对象（表格或单元格），“属性” 检查器将会显示相应的选项参数。
表格属性 单元格属性
::::::::::
3.2 编辑表格
第一章
网页设计基础知识
学习目标
随着因特网（Internet）的不断发展，越来越多的人都想要 学习设计与制作网页，但是要实现较好的网页效果，设计者首 先要了解网页的相关基础知识，例如网页与网站的关系，网页 设计的构思与布局方式，常用的网页制作工具，以及与网页相 关的概念等。
本章重点
网页制作的基础知识 网页设计构思与布局 常见的网页制作工具 与网页相关的概念
Dreamweaver CC的工作界面 Dreamweaver CC的基本操作
:::::
2.1.1 Dreamweaver CC的工作界面
Dreamweaver CC的工作界面效果秉承栏Dreamweaver系列软件产品一 贯简洁、高效和易用的特点，软件的多数功能都能在功能界面中非常方便地 找到，如图2-1所示。
表格是用于在HTML页面上显示表格式数据以及对文本和图形进行布局 的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《Web程序设计》
3.1 超文本标记语言HTML
3.1.1 HTML文档结构
• HTML文档的基本构成 ： <html> <head> 文档头部分 </head> <body > 文档的主体部分 </body > </html>
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
2）体部标记 •基本的体部标记包括： –Body
–文字显示和段落控制标记
–设置图像和超链接 –列表和预定义格式标记等
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
（1）<body>和</body>标记 表明HTML文件体部的开始和结束，body标记属性及含义：
属 性 名 bgcolor text link alink vlink background topmargin 取 值 颜色值 颜色值 颜色值 颜色值 颜色值 图像文件 名 整数 页面背景颜色 文字的颜色 待链接的超链接对象的颜色 链接中的超链接对象的颜色 已链接的超链接对象的颜色 页面的背景图像 页面显示区距窗口上边框的距离，以像 素点为单位 页面显示区距窗口左边框的距离，以像 素点为单位 无 0 含 义 默 认 值 #FFFFFF #000000
《Web程序设计》
第 3 章 HTML与XML
3.1 超文本标记语言HTML
3.2 可扩展标记语言XML
《Web程序设计》
3.1 超文本标记（Hypertext Markup Language） 是在万维网上建立超文本文件的语言，它是万维网的核心 计算机语言。 •创建 Web 站点页面时，可使用 HTML 语言向组成 Web 站 点的各个Web页面放置文本、图形、图像、动画、音频、 视频信息等内容，以及按钮和超链接等可以进行交互的内 容。
分段标记，属性有align：left—左对齐；center—居中对齐；right—右对齐 块容器标记，其中的内容是一个独立段落 分隔线，属性有：width（线的宽度） 、color（线的颜色） 居中显示
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
【例3-2】一个包含文字显示和段落控制标记的HTML文件示例。
<U>,</U>
<sub>,</sub> <sup>,</sup> <big></big> <small>,</small>
加下划线
下标 上标 大字体 小字体
<h1>—<h6>
<p>,</p> <div>,</div> <hr> <center>,</center>
标题格式，数字越大，显示的标题字越小
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
（4）超链接标记
【例3-3】三种URL应用示例。 <html> <head><title>超链接URL</title></head> <body> 单击<a href="xp.htm" target=_blank><b>这里</b></a>可以 见我的照片<br> 单击<a href=""><b>这里</b></a>可以进 入网易<br> 单击<a href="mailto:test@"><b>这里</b></a>可以 给我发信<br> 单击<a href="example3.htm#aaa"><b>这里</b></a>可以转 到我的简历<br> <a name="aaa">我的简历：</a></body></html>
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
（4）列表标记和预定格式标记
• 有三种类型的列表： ① 无序列表（unordered list）： <ul>列表项</ul> ② 有序列表（ordered list）： <ol>列表项</ol> ③ 定义列表（definition list）： <dl>列表项</dl> • 预定格式（preformatted）标记： 可以使信息完全按照HTML文件中编排的格式原样显示 于浏览器中，该标记的格式为： <pre>预定格式的信息</pre> 只要将信息按照所需要的格式编排好，放在<pre>、</pre>标 记对中，就不必担心信息在浏览器中的显示会出现偏差。
leftmargin
整数
0
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
HTML中两种颜色值的表示方法： ① RGB值表示。 用颜色的十六进制RGB值表示，形如"#RRGGBB"。 如"#ff0000"，表示红色，"#0000ff"表示蓝色。 ② 英文单词表示。 如"red"表示红色，"blue"表示蓝色。
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
（4）超链接标记
• 一个超链接可指向另一个Web页，它由两部分组成： – 一部分是显示在本页面中的可被触发的超链接文本 或图像 – 另一部分是用来描述当超链接被触发后要链接到的 URL信息。
• 超链接标记的格式如下：
<a href="URL信息">超链接文本或图像</a>
• 基本的HTML标记分为 ：
1）头部标记
2）体部标记
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
1）头部标记
• <head>，</head> • <title>，</title> 标题栏的字符串。 HTML文件头部起始和结束标记。 HTML文件的标题，是显示于浏览器
<html> <head><title>文字显示和段落控制</title></head> <body background="images/back057.gif" text="#ff2222"> <center><h1>一级标题</h1></center><hr width=90% color=green> <font face="黑体" size=7 color="0000ff">这是黑体，大小为 7号字，蓝色</font><br> <p>这是一个段落<br> <I>这是斜体</I><B>这是粗体</B><U>这是下划线字体</U> <big>这是大字体</big><small>这是小字体</small> 这是下标字体<sub>1</sub>这是上标字体 <sup>2</sup><br> <font face="楷体" size=6 color="cc8888"> <I><B><U>这些标记还可以混合使用 </U></B></I></font></p> <p align=center>这是另一个段落<br> <B> 以下是转义序列</B><br> < 小于号；> 大于号；& 与号；"双引号；例 如:a>b</p> </body></html>
《Web程序设计》
3.1 超文本标记语言HTML
3.1.2 HTML基本标记
（4）超链接标记
超链接标记的属性target指明目标页面显示的窗口。其含义 如下：
– target=_blank 目标页面显示于一个新的浏览器窗口。 – target=_top 通常在框架中的超链接才设置该值，表示 目标页面显示于整个浏览器窗口，而不是显示在框架所在 窗口中。 – target=框架名 目标页面显示于指定框架所在的窗口。 target的默认值是本页面所在的浏览器窗口。
•HTML是一种文本标记语言，而非编程语言。HTML文件 是普通文本文件，与平台无关，可用任何文本编辑器进行 编辑，文件扩展名为.htm或.html。
《Web程序设计》
3.1 超文本标记语言HTML
3.1.1 HTML文档结构
【例3-1】“《Web程序设计》课程网站”主页面 。 • 该网页以表格作为页 面的总布局方式 • 页面设计中使用了常 用的HTML标记 • 包括：表格、表单、 文字显示控制、加入图 片、超链接、水平线、 换行、分段、设置页面 背景图片等。