ASP动态网页设计2课件.ppt

《ASP动态网页设计2课件.ppt》由会员分享，可在线阅读，更多相关《ASP动态网页设计2课件.ppt（48页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、1第第 2 章章 HTML语言语言2q熟悉熟悉HTML文档的基本结构文档的基本结构q掌握基本的掌握基本的 HTML 标记标记q掌握列表标记的使用掌握列表标记的使用q掌握超级链接标记的使用掌握超级链接标记的使用3超文本超文本HTML 简介提供链接到其他页面或同一页面的其他位置的文本标记用来控制页面的内容及显示格式控制页面的内容及显示格式 语言HTML 可用于可用于：控制页面和内容的外观发布和检索联机文档创建联机表单插入诸如音频剪辑和视频剪辑等对象4HTML 文档结构Web页的标题 欢迎来到 HTML 世界HTML 文档头部部分主体部分标签标记 HTML 文档的开始和结束这部分包括标题和其他说明信

2、息。包括在 标签内这部分包含文本、图像和链接。它包括在 标签内5 BODY标记的属性标记的属性 设置网页的背景色为设置网页的背景色为黄绿色黄绿色,设置网页的文本颜色属性为设置网页的文本颜色属性为蓝色蓝色 主体标记主体标记属性属性提供有关元素的附加信息值 属性之间无先后次序，属性也可省略（即取默认值），标记的属性之间无先后次序，属性也可省略（即取默认值），标记的属性值需要用双引号或单引号括起来属性值需要用双引号或单引号括起来 。分配给属性的内容分配给属性的内容6META 标记vMETA 标记是一个特殊的 HTML 标记，提供有关网页的信息，如作者姓名、公司名称和联系信息等v许多搜索引擎都使用 M

3、ETA 标记信息v例如，要将 Graham Browne 指定为作者，则使用以下 META 标记： 7vhttp-equiv 属性可用来代替 META 标记中的 name 属性 属性值：具体的过期时间属性名称：网页过期 表示每隔2秒，自动刷新网页 演示：自动刷新的例子8设置文本格式 v标题 v段落v换行符v字体v字符格式化v特殊字符v水平线9设置标题第1级标题（H1）第1级标题（H2）第1级标题（H3）第1级标题（居左）第1级标题（居中）第1级标题（居右）H1 到到 H6 标记用于指定不同级别的标题标记用于指定不同级别的标题标题标记标题标记Hn10换行、分段标记的使用换行、分段标记的使用输入第

4、一行文本。输入第一行文本。输入第二行文本。输入第二行文本。输入第三行文本。输入第三行文本。输入第四行文本。输入第四行文本。 标签用于标记段落标签用于标记段落分段与换行标记分段与换行标记只要在文本中放入只要在文本中放入 标记，标记，就会强制换行就会强制换行11设置字体、字号和颜色标记设置字体、字号和颜色标记设置字体、字号和颜色设置字体、字号和颜色设置文字的属性设置文字的属性1号字青色号字青色2号字绿色号字绿色3号幼圆桔黄色号幼圆桔黄色4号隶书深红色号隶书深红色5号黑体棕色号黑体棕色6号方正舒体水蓝色号方正舒体水蓝色7号华文彩云蓝色号华文彩云蓝色 可以按名称或十六进制值指定颜色可以为字体指定的大小

5、范围为从 1 到 7可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本 元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示 12学习学习 HTML这很有趣这很有趣足球是最令人喜爱的运动之一足球是最令人喜爱的运动之一。信息技术是发展的关键信息技术是发展的关键。 水的分子式是水的分子式是 H 2 O。 3 2 等于等于 9。 字符格式化标记字符格式化标记此标记用于对文本应用各种格式，如粗体、斜体、下划线、下标、上标等13插入特殊字符插入特殊字符v某些字符在 HTML 中具有特殊意义，如小于号 ( 空格 ；14特殊字符特殊字符字符实体字符实体大于号

6、 () > 小于号 () < 引号 (“) " ® ©& 号& 常用特殊符号的实体名称常用特殊符号的实体名称15使用水平线使用水平线 水平线段标记的应水平线段标记的应插入水平线插入水平线 标记属性标记属性 alignSizeWidthColorNoshade 标记用于在页面上插入水平线 16列表标记列表标记v列表用于按逻辑方式对数据分组 玫瑰花向日葵兰花苹果桔子水仙芒果水果 苹果 芒果 桔子花卉 水仙 兰花 向日葵 玫瑰花17列表类型：无序列表列表类型：无序列表星期中的每一天星期中的每一天星期日星期日星期一星期一星期二星期二星期三星期三星期四星期

7、四星期五星期五星期六星期六无序列表也称为“项目列表”无序列表的属性无序列表的属性n=discn=circlen=squere18星期中的每一天星期日星期一星期二星期三星期四星期五星期六 列表类型：有序列表 有序列表的属性有序列表的属性TYPE =1TYPE = ITYPE = iTYPE = ATYPE = a有序列表是在各列表项前面显示数字或字母的缩排列表 19 标记用于在 HTML 文档中插入图像。 标记的两个常用属性是 SRC 和 ALIGN。SRC 属性用于指定要插入的图像位置。ALIGN 属性用于指定图像相对于文本的对齐方式。插入图像插入图像20插入图像插入图像动物世界让我们看看这些

8、可爱的动物底部对齐顶部对齐居中对齐 21创建超级链接创建超级链接目标端点可以是任意类型的网络资源，例如可以是一个网页、一幅图像、一首歌曲、一段动画或一个应用程序等 超链接是由源端点到目标端点的一种跳转源端点可以是网页中的一段文本或一幅图像等按照目标端点的不同，网页中的超链接可以分为文件链接、锚点链接、E-mail链接和空链接。22要链接到另一目录 (D:example) 下的页面，可编写 或 要链接到同一目录 (D:html) 下的页面，可编写 或 D:html 目录目录D:example目录目录绝对和相对路径名Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名绝对路径

9、名相对路径名相对路径名23创建文件链接 v文件链接的目标端点是网页中的一个文件 vHTML 的 A标记标记用于创建文件链接 文本或图像必选项，用于指定目标端点的URL地址。 可选项，用于指定指向超链接时所显示的标题文字 用于设定目标资源所要显示的窗口。可选值为：_blank，_parent，_self，_top，框架名称。 24创建锚点链接创建锚点链接r链接到同一文档的某个部分|锚点标记用于使用户“跳”到文档的某个部分 |HTML 的 NAME 属性用于创建锚标记 |为达到这种跳转效果，请在 HREF 参数中使用该标记主题名称主题名称主题名称主题名称25. . .狮子斑马印度豹狮子狮子的吼声从

10、八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。斑马没有任何两匹斑马的斑纹完全一样，因此每匹斑马都是独一无二的。斑马也称为黑白条纹相间的马.演示:锚链接例子26r链接到其他文档的特定位置让我们深入了解一些动物狮子斑马印度豹Animals.htm狮子狮子的吼声从八公里之外就能听到！雄狮（很容易从鬃毛识别出雌雄）的重量达 250 公斤。而雌狮则要轻得多，只有 180 公斤。Animaldetails.htm27创建电子邮件链接创建电子邮件链接海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 David

11、 Fernandezv通过邮件链接可以启动电子邮件客户端程序（如OutLook或FoxMail等），并允许访问者向指定的地址发送邮件。28本章小结本章小结r HTML 标记一般配对使用，不区分大小写r 标记都具有属性。属性提供关于网页上 HTML 元素的附加信息r META 标记放置在网页的标题处以提供关于页面的信息。搜索引擎常会用到这些标签r 标题级标记使用r 段落标记使用r 无序列表使用标记,有序列表使用标记r 字体标记r 超链接标记超链接文本29第第2章章 HTML语言30回顾v自动刷新功能应使用哪个HTML标记？vHTML标记区分大小写吗？ v段落标记和换行标记有什么区别？v字符标记有

12、哪些常用属性？v使用图片标记显示图片q.jpg，如何写HTML代码? v写HTML代码时，空格用什么表示？v显示如下所示的列表，如何写HTML代码： 您认为乔丹的血型是？ A. A型 B. B型 C 以上都不对v显示如下所示的超链接，如何写HTML代码： 请查看Microsoft微软中国31r 用用 HTML HTML 代码创建表格代码创建表格r 用用 HTML HTML 代码代码创建表单创建表单 r 用用 HTML HTML 代码代码创建框架创建框架学习目标32表格行行列列列标题在在 HTML 文档中，广泛使用表格来存放网页上的文本和图像文档中，广泛使用表格来存放网页上的文本和图像单元格单元

13、格表格标题33使用表格 姓名 性别 分数 Robert M 80 .创建表格 代表表格的开始，border=2表示边框尺寸为2表示行，这是表格的第一行，有三列数据，代表列 表格的第二行，有三列数据表格的第三行，也有三列数据34学员档案信息 姓名 性别 分数 Robert M 80 .表格的标题表示表格标题表示行或列标题，粗体显示 表格的第二行，有三列数据表格的第三行，有三列数据35 学员档案信息 姓名 性别 分数 Robert M 80 .表格的对齐方式整个表格居中姓名列默认左对齐 性别列居中 分数列右对齐 36 学员档案信息 姓名 性别 分数 Robert M 80 Mary F 18 表格

14、的背景色和尺寸设置 表格的颜色设置：表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000, 或是一些预定义色彩名称：red ，blue，yellow等。表格的尺寸设置：例如：表示一个长为200像素，宽为100像素的表格。表示一个宽为窗口的20%，高为窗口的10%的表格。1880分数FM性别MaryRobert姓名学员档案信息学员档案信息37METHOD =“post或或get”ACTIONMETHOD指定提交后由服务器上哪个处理程序处理指定向服务器提交的方法:一般为post或get方法, post方法比较安全 A

15、CTION = “URL” 创建表单v表单是用来收集站点访问者信息的域集。表单是用来收集站点访问者信息的域集。vHTML 的的 FORM标记标记用于创建表单用于创建表单 38添加输入型表单控件添加输入型表单控件Type此属性指定元素的类型。元素类型可以有多种选择：TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默认选择为 TEXT。Name此属性指定控件的名称。例如，如果表单中有几个文本框，则可以用名称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用域是在 FORM 元素内。Value此属性

16、是可选属性，它指定控件的初始值。但是，如果 TYPE 为 RADIO，则必须指定一个值。Size此属性指定控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD，则控件的大小以字符为单位。对于其他输入类型，宽度以像素为单位。 Maxlength 此属性用于指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。Checked此属性是 Boolean 属性，指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时，使用此属性。文本框、按钮、单选按钮、复选框等都是输入型元素。39身份证号 TEXT（文本）（文本）密 码： 请填写您的工作经历40性别：男性女性

17、单选按钮和复选框单选按钮和复选框 你喜欢以下哪些明星： 酒井法子 郑秀文 BonJovi41 BUTTON（按钮）（按钮）Type 属性：属性：submit：提交按钮reset：重置按钮button：普通按钮422004 年欧锦赛预测“最佳球员”RonaldoBeckhamZidane预测大赛亚军巴西法国阿根廷预测谁将成为 2004 年欧锦赛冠军？阅读代码，请问网页中的显示结果？阅读代码，请问网页中的显示结果？43 下拉菜单 谁是 2002 年世界杯冠军？西班牙法国巴西德国列表选项44框架 广告栏顶部框架(top.htm)内容详细介绍右侧框架(main.htm)目录导航左侧框架(left.htm)45创建框架演示如何做上述框架？46小结小结 表格标题 数据1 数据2 . 数据11 数据22 v表格的一般语法：47 文本框文本框 密码框密码框 文本域文本域 单选按钮单选按钮男性 复选框复选框酒井法子选项1选项2. v表单的一般语法：48v框架 顶部窗口显示广告 top.htm显示详细内容main.htm左侧窗口显示导航链接left.htm