《ASP网络应用程序设计 教学课件 ppt 作者 高怡新 第2章 HTML网页设计》由会员分享，可在线阅读，更多相关《ASP网络应用程序设计 教学课件 ppt 作者 高怡新 第2章 HTML网页设计（41页珍藏版）》请在金锄头文库上搜索。
1、第2章 HTML网页设计,HTML（HyperText Markup Lanquage）即超文本标记语言，是构成网页最基本的要素，也是编写ASP文档和开发各种Web应用程序的基础。,2.1 HTML概述 2.2 HTML常用标记 2.3 HTML表格标记 2.4 HTML框架标记 2.5 HTML表单标记 2.6 HTML其他标记 2.7 HTML文档样式,2.1 HTML概述,2.1.1 什么是HTML HTML是一种颇为结构化的网页内容标记语言，使用各种不同的标记符号来分别标识和设定不同的网页元素。每一个网页元素通常由开始标记（start tag）、结束标记（end tag），以及夹在这两
2、个标记中的内容所组成。许多元素的开始标记中还允许加入若干个相关的属性，用以进一步对该元素的特征进行说明或限定。通常用“属性名称 = 属性值”的方式来设定元素的属性。 一个HTML元素的形式可表示为： 内容 ,2.1.2 HTML文档基本架构 网页标题 这是正文部分！ ,说明： l 元素是HTML文档的最高层元素，原则上用它来指出HTML文档的开始与结束。 l 元素用来标识网页的头部， l 元素用来指定浏览器所要显示的标题文字。 l 元素用来标识HTML文档的主体部分。,2.1.3 一个简单HTML文档 1创建一个简单的HTML文档,2简单的HTML文档的执行结果,2.2 HTML常用标记,2.
3、2.1 头部标记 和是HTML的头部标记，其中主要包括对当前网页的一些基本描述信息，例如网页标题、一些说明信息和搜索关键字等。 1网页标题标记 格式： 标题文字 示例： 访客留言簿,2元信息标记 标记是HTML头部标记中常见的元信息标记，可重复出现在头部标记中，用来指明本网页的作者、网页制作工具、所包含的的关键字，以及其他一些描述网页信息。标记的另一个作用是创建HTTP响应头，以便让浏览器知道如何去处理这个网页，例如这个网页什么时候过期，隔多少时间自动刷新等。,2.2.2 主体标记,和标记是HTML文档的主体标记，其内包括了将在网页中显示的文字、图片、表格、链接、表单等所有内容。,1标记的属性
4、及其说明,2标记应用示例 ,2.2.3 段落标记,1标题文字标记 格式： 标题文字 2分段标记 格式： 文字 说明：分段标记不仅使得后面的文字换行输出，还将在两个段落之间产生一个空行。分段结束标志 可以省略。 3换行标记 格式： 文字 说明：可以连续使用多个 标记来产生多个空行,4横线标记 格式： 5文本缩排标记 格式： 文字 ,各种段落标记的用法示例： 1. 段落标记范例 2. 3. 欢迎光临 4. 5. 本站备有各种图书和音像制品， 6. 价格公道，童叟无欺，欢迎选购！ 7. 8. 商品信息： 9. 本站图书品种繁多，适合各界读者，每天都有特价图书， 10. 并有各种精美礼品相送。请大家告
5、诉大家！ 11. 12. ,2.2.4 文字格式标记,1字体标记 格式： 文字 2文字修饰标记,2.2.5 特殊字符标记,2.2.6 列表标记,1有序列表标记 格式： 列表项1 列表项2 列表项n 2无序列表标记 格式： 列表项1 列表项2 列表项n ,2.2.7 图像标记,格式： ,2.2.8 超链接标记,格式： 用作链接的文字或图像,2.3 HTML表格标记,1网页中的表格 网页中经常需要使用各种表格元素，设计者不仅可以通过表格来输出诸如“商品表”或“员工表”中的各行信息，更重要的是可以利用表格来方便地控制网页中各种元素的布局，以便整齐地安排网页中众多的文字和图片等。,2表格定义格式 3表
6、格应用示例,2.4 HTML框架标记,1网页中的框架 框架元素用来将整个浏览器窗口划分为多个不同的矩形区域，在一个区域内可以独立显示与区域之外不同的HTML文档内容。框架元素的定义需要用到框架集标记和框架标记，框架集标记用来定义一个窗口内的框架数、各框架的尺寸等，框架标记则用来具体定义某个框架的名称、在该框架中显示的HTML文档等。,2框架定义格式 3框架应用示例,2.5 HTML表单标记,2.5.1 表单简介 1网页中的表单 表单的英文名称为form ，用于在网页中为浏览者提供一个输入各种信息的界面，以便Web应用程序和Web数据库获取这些信息。大多数网站的网页设计都需要使用表单元素，例如通
7、过表单来完成用户注册信息的输入或者商品订购信息的输入等。,2表单定义格式 ,2.5.2 常用表单域标记,1 标记 格式： 说明：标记中可以有6个属性，分别为：type、name、value、size、maxlength和checked。其中type属性用来指定表单域的类型，其值允许有：text（文本框）、password（密码框）、button（普通按钮）、image（图片按钮）、file（文件框）、raido（单选按钮）、checkbox（复选框）、submit（提交按钮）、reset（重置按钮）、hidden（隐藏）等多种表单域类型。,2 标记 格式： 文字 文字 3 标记 格式： ,2.
8、5.3 表单定义示例,2.6 HTML其他标记,2.6.1 动态文字标记 格式： ,2.6.2 层标记,格式： HTML元素序列 ,2.6.3 嵌入多媒体信息标记,格式： ,2.7 HTML文档样式,在HTML文档中除了可用各种标记对文字或段落等元素分别设置格式外，还可应用样式来进行格式设置。在设计HTML网页时，可采用下列方式定义和应用样式： l 在文档头部定义样式块。 l 在文档主体部分对个别元素（如段落、表格单元等）单独定义样式。 l 使用外部样式表或称层叠样式表CSS（Cascading Style Sheets）。,2.7.1 在文档头部定义样式,1格式： HTML标记属性名称：属性
9、值；属性名称：属性值 HTML标记属性名称：属性值；属性名称：属性值 2样式块中的各种属性,2.7.2 为单个元素定义样式,对一些元素单独设置style属性示例： 这是一段红色粗体文字 这是一个棕色宋体字标题 163网站 姓名,2.7.3 使用级联样式表CSS,级联样式表CSS实际上是用来规范HTML文档格式的样式定义文件，可统一定义网站中多个网页内容的显示格式。此种定义方式不仅能够大大减少THML文档中各种重复标记的数目，而且有利于整个网站页面风格的统一。此外，使用CSS可将网页要展示的内容与其样式定义分开，即把网页的外观设计从网页内容中独立出来集中管理。这样，当需要改变网页外观时，只需更改对应的样式表文件即可。,使用级联样式表的具体方法是：在一个或多个级联样式表中定义样式，并将它们保存为扩展名为.CSS的文件，然后将它们链接到需要使用这些样式的所有网页，从而实现这些网页外观的一致性。,
