HTML网页的计

1、第第2 2章章 htmlhtml网页设计网页设计n 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概述n2.1.1 什么是什么是htmln html是一种颇为结构化的网页内容标记是一种颇为结构化的网页内容标记语言，使用各种

2、不同的标记符号来分别标识和语言，使用各种不同的标记符号来分别标识和设定不同的网页元素。每一个网页元素通常由设定不同的网页元素。每一个网页元素通常由开始标记（开始标记（start tag）、结束标记（）、结束标记（end tag），），以及夹在这两个标记中的内容所组成。许多元以及夹在这两个标记中的内容所组成。许多元素的开始标记中还允许加入若干个相关的属性，素的开始标记中还允许加入若干个相关的属性，用以进一步对该元素的特征进行说明或限定。用以进一步对该元素的特征进行说明或限定。通常用通常用“属性名称属性名称 = 属性值属性值”的方式来设定元的方式来设定元素的属性。素的属性。n一个一个html元素的

3、形式可表示为：元素的形式可表示为：n 内容内容 n2.1.2 html文档基本架构文档基本架构nn n n 网页标题网页标题n n n n n 这是正文部分！这是正文部分！n nn n说明：说明：nl l 元素是元素是html文档的最高层元素，文档的最高层元素，原则上用它来指出原则上用它来指出html文档的开始与结束。文档的开始与结束。nl l 元素用来标识网页的头部，元素用来标识网页的头部，nl l 元素用来指定浏览器所要显示的元素用来指定浏览器所要显示的标题文字。标题文字。nl l 元素用来标识元素用来标识html文档的主体文档的主体部分。部分。n n2.1.3 一个简单一个简单html文

4、档文档n1创建一个简单的创建一个简单的html文档文档2简单的简单的html文档的执行结果文档的执行结果2.2 html常用标记n2.2.1 头部标记头部标记n 和和是是html的头部标的头部标记，其中主要包括对当前网页的一些基本描述记，其中主要包括对当前网页的一些基本描述信息，例如网页标题、一些说明信息和搜索关信息，例如网页标题、一些说明信息和搜索关键字等。键字等。n1网页标题标记网页标题标记n格式：格式：n 标题文字标题文字 n示例：示例：n访客留言簿访客留言簿n2元信息标记元信息标记n 标记是标记是html头部标记中常见的头部标记中常见的元信息标记，可重复出现在头部标记中，用来元信息标记

5、，可重复出现在头部标记中，用来指明本网页的作者、网页制作工具、所包含的指明本网页的作者、网页制作工具、所包含的的关键字，以及其他一些描述网页信息。的关键字，以及其他一些描述网页信息。标记的另一个作用是创建标记的另一个作用是创建http响应响应头，以便让浏览器知道如何去处理这个网页，头，以便让浏览器知道如何去处理这个网页，例如这个网页什么时候过期，隔多少时间自动例如这个网页什么时候过期，隔多少时间自动刷新等。刷新等。2.2.2 主体标记n 和和标记是标记是html文档的主体标记，其内包括了将在网页文档的主体标记，其内包括了将在网页中显示的文字、图片、表格、链接、表中显示的文字、图片、表格、链接、

6、表单等所有内容。单等所有内容。1标记的属性及其说明标记的属性及其说明属属 性性描描 述述text设定页面文字的颜色bgcolor设定页面背景的颜色background设定页面背景的图像bgproperties设定页面背景图像是否随页面的滚动而动link设定默认的链接颜色alink设定鼠标靠近时的链接颜色vlink设定已访问过的链接颜色topmargin设定页面上边与浏览器窗口顶端的距离leftmargin设定页面左边与浏览器窗口左端的距离n2标记应用示例标记应用示例nnnn2.2.3 段落标记n1标题文字标记标题文字标记n格式：格式：n 标题文字标题文字 n2分段标记分段标记n格式：格式：n

7、文字文字 n说明：分段标记不仅使得后面的文字换行输出，还将说明：分段标记不仅使得后面的文字换行输出，还将在两个段落之间产生一个空行。分段结束标志在两个段落之间产生一个空行。分段结束标志 可可以省略。以省略。n3换行标记换行标记n格式：格式：n文字文字 n说明：可以连续使用多个说明：可以连续使用多个 标记来产生多个空行标记来产生多个空行 n4横线标记横线标记n格式：格式：nn5文本缩排标记文本缩排标记n格式：格式：n 文字文字 n各种段落标记的用法示例：各种段落标记的用法示例：n1. 段落标记范例段落标记范例n2. n3. 欢迎光临欢迎光临n4. n5. 本站备有各种图书和音像制品，本站备有各种

8、图书和音像制品，n6. 价格公道，童叟无欺，欢迎选购！价格公道，童叟无欺，欢迎选购！n7. n8. 商品信息：商品信息：n9. 本站图书品种繁多，适合各界读者，每本站图书品种繁多，适合各界读者，每天都有特价图书，天都有特价图书，n10. 并有各种精美礼品相送。请大家告诉大家！并有各种精美礼品相送。请大家告诉大家！n11. n12. 2.2.4 文字格式标记n1字体标记字体标记n格式：格式：n文字文字n2文字修饰标记文字修饰标记标标 记记描描 述述将文字设置为粗体字将文字设置为斜体字设置为带有下划线的文字设置为位于右上角的上标文字设置为位于右下角的下标文字设置为带有删除线的文字标明其间的文字为地

9、址内容强调其间的文字（通常为斜体）强调其间的文字（通常为黑体）2.2.5 特殊字符标记特殊字符标记字字 符符对应字符标记对应字符标记对应十进制编码标记对应十进制编码标记说说 明明>>大于符号&&and符号""双引号   空格··中点§§分节符号©©版权符号®®注册符号2.2.6 列表标记n1有序列表标记有序列表标记n格式

10、：格式：n 列表项列表项1 列表项列表项2 列表项列表项nn2无序列表标记无序列表标记n格式：格式：n 列表项列表项1 列表项列表项2 列表项列表项nn 2.2.7 图像标记n格式：格式：n2.2.8 超链接标记n格式：格式：n用作链接的文字或图像用作链接的文字或图像2.3 html表格标记n1网页中的表格网页中的表格n 网页中经常需要使用各种表格元素，网页中经常需要使用各种表格元素，设计者不仅可以通过表格来输出诸如设计者不仅可以通过表格来输出诸如“商品表商品表”或或“员工表员工表”中的各行信息，中的各行信息，更重要的是可以利用表格来方便地控制更重要的是可以利用表格来方便地控制网页中各种元素的

11、布局，以便整齐地安网页中各种元素的布局，以便整齐地安排网页中众多的文字和图片等。排网页中众多的文字和图片等。n2表格定义格式表格定义格式n n3表格应用示例表格应用示例2.4 html框架标记框架标记n1网页中的框架网页中的框架n框架元素用来将整个浏览器窗口划分为多个不框架元素用来将整个浏览器窗口划分为多个不同的矩形区域，在一个区域内可以独立显示与同的矩形区域，在一个区域内可以独立显示与区域之外不同的区域之外不同的html文档内容。框架元素的文档内容。框架元素的定义需要用到框架集标记和框架标记，框架集定义需要用到框架集标记和框架标记，框架集标记标记用来定义一个窗口内的框用来定义一个窗口内的框架

12、数、各框架的尺寸等，框架标记架数、各框架的尺寸等，框架标记则用来具体定义某个框架的名称、在该框架中则用来具体定义某个框架的名称、在该框架中显示的显示的html文档等。文档等。n2框架定义格式框架定义格式n n3框架应用示例框架应用示例2.5 html表单标记n2.5.1 表单简介表单简介n1网页中的表单网页中的表单n 表单的英文名称为表单的英文名称为form ，用于在网页中为，用于在网页中为浏览者提供一个输入各种信息的界面，以便浏览者提供一个输入各种信息的界面，以便web应用程序和应用程序和web数据库获取这些信息。大数据库获取这些信息。大多数网站的网页设计都需要使用表单元素，例多数网站的网页

13、设计都需要使用表单元素，例如通过表单来完成用户注册信息的输入或者商如通过表单来完成用户注册信息的输入或者商品订购信息的输入等。品订购信息的输入等。n2表单定义格式表单定义格式n 2.5.2 常用表单域标记n1 标记标记n格式：格式：nn说明：说明：标记中可以有标记中可以有6个属性，分别个属性，分别为：为：type、name、value、size、maxlength和和checked。其中。其中type属性用来指定表单域的类型，属性用来指定表单域的类型，其值允许有：其值允许有：text（文本框）、（文本框）、password（密（密码框）、码框）、button（普通按钮）、（普通按钮）、imag

14、e（图片（图片按钮）、按钮）、file（文件框）、（文件框）、raido（单选按钮）、（单选按钮）、checkbox（复选框）、（复选框）、submit（提交按钮）、（提交按钮）、reset（重置按钮）、（重置按钮）、hidden（隐藏）等多种表（隐藏）等多种表单域类型。单域类型。n2 标记标记n格式：格式：n 文字文字 文字文字 n3 标记标记n格式：格式：nn2.5.3 表单定义示例表单定义示例2.6 html其他标记n2.6.1 动态文字标记动态文字标记n格式：格式：n2.6.2 层标记n格式：格式：n html元素序列元素序列2.6.3 嵌入多媒体信息标记n格式：格式：nn 2.7 h

15、tml文档样式n 在在html文档中除了可用各种标记对文字文档中除了可用各种标记对文字或段落等元素分别设置格式外，还可应用样式或段落等元素分别设置格式外，还可应用样式来进行格式设置。在设计来进行格式设置。在设计html网页时，可采网页时，可采用下列方式定义和应用样式：用下列方式定义和应用样式：nl l 在文档头部定义样式块。在文档头部定义样式块。nl l 在文档主体部分对个别元素（如段落、表在文档主体部分对个别元素（如段落、表格单元等）单独定义样式。格单元等）单独定义样式。nl l 使用外部样式表或称层叠样式表使用外部样式表或称层叠样式表css（cascading style sheets）。

16、）。2.7.1 在文档头部定义样式n1格式：格式：n html标记标记属性名称：属性值；属性名称：属性名称：属性值；属性名称：属性值属性值 html标记标记属性名称：属性值；属性名称：属性名称：属性值；属性名称：属性值属性值 n2样式块中的各种属性样式块中的各种属性属属 性性说说 明明取取 值值font-size字体大小points、 inches、 pixels、 centimeterfont-family字体fontnamefont-weight字体粗细lighter、 medium、 boldfont-style斜体normal、 italicline-height行距points、 i

17、nches、 pixels、 centimetercolor文本颜色colorname、 rgb triplettext-decoration文本修饰效果none、 underline、 italic、 line-throughtext-aligh文本对齐left、 right、 centertext-indent文本缩进points、 inches、 pixels、 centimetermargin-left页面左边界points、 inches、 pixels、 centimetermargin-right页面右边界points、 inches、 pixels、 centimeterbac

18、kground背景图片或颜色url、 color-name、 rgb triplet2.7.2 为单个元素定义样式n对一些元素单独设置对一些元素单独设置style属性示例：属性示例：n 这是一段红色粗体文字这是一段红色粗体文字n这是一个棕色宋体字标题这是一个棕色宋体字标题n163网站网站 n姓名姓名 n 2.7.3 使用级联样式表cssn 级联样式表级联样式表css实际上是用来规范实际上是用来规范html文档格式的样式定义文件，可统一定义网站中文档格式的样式定义文件，可统一定义网站中多个网页内容的显示格式。此种定义方式不仅多个网页内容的显示格式。此种定义方式不仅能够大大减少能够大大减少thml文档中各种重复标记的数文档中各种重复标记的数目，而且有利于整个网站页面风格的统一。此目，而且有利于整个网站页面风格的统一。此外，使用外，使用css可将网页要展示的内容与其样式可将网页要展示的内容与其样式定义