




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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可将网页要展示的内容与其样式可将网页要展示的内容与其样式定义
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 应急棉衣采购方案(3篇)
- 数字经济视角下商贸流通业生产力发展的探讨
- 2025年病假期间如何申请解除劳动合同
- 2025至2030汽车用3D磁传感器行业市场占有率及投资前景评估规划报告
- 2025年广西壮族自治区教师资格证考试小学综合素质理论考试试题及答案
- 2025劳动合同附加协议范本
- 2025品牌加盟店合同模板示例
- 2025年中国氧化铁黄420行业市场发展前景及发展趋势与投资战略研究报告
- 中国境外通信设备市场调查研究及行业投资潜力预测报告
- 成人朗诵兴趣班教学计划
- 卒中中心应知应会
- 山西省代县金升铁矿有限公司铁矿资源开发利用、地质环境保护与土地复垦方案
- 2021年新高考全国Ⅱ卷语文真题(含答案)
- 《天黑前的夏天》中水意象解析
- 院感知识PPT完整版
- JJF 1910-2021电化学工作站校准规范
- ks-s3002腔全自动刻蚀机规格书
- DB37-T 2401-2022危险化学品岗位安全生产操作规程编写导则
- 2023年小学科学教师招聘考试真题练习试题卷及参考答案
- 劳资专管员任命文件(样本)
- 电子教案与课件:制药过程安全与环保-第5章-制药过程“三废”防治技术
评论
0/150
提交评论