《网页设计新》PPT课件.ppt
ASP网络应用程序设计(第2版)人民邮电出版社,第2章 HTML 网页设计,2.1 HTML概述,2.1.1 什么是 HTML HTML(HyperText Markup Language)即超文本标记语言,是构成网页最基本的要素,使用各种不同的标记符号来分别标识和设定不同的网页元素。每个网页元素通常由开始标记和结束标记,以及夹在这两个标记中的内容所组成。在HTML元素的开始标记中一般还允许加入相关的若干个属性,以进一步对该元素的特征进行限定或说明。总之,一个HTML元素的形式可表示为:内容,2.1 HTML概述,2.1.2 HTML文档基本架构 网页标题 这是主体部分!,2.2 HTML 常用标记,2.2.1 头部标记 和 是HTML的头部标记,其中主要包括对当前网页的一些基本描述信息,可包含下列各种标记。网页标题标记 元信息标记 样式标记 连接外部文档标记 脚本代码标记,2.2 HTML 常用标记,2.2.2 主体标记 和标记是HTML文档的主体标记,其内可包括将在网页中显示的文字、图片、表格、链接、表单等所有标记和内容。2.2.3 文字段落标记 1标题文字标记、等2分段标记3换行标记4横线标记,2.2 HTML 常用标记,2.2.4 文字格式标记1字体标记 文字 2文字修饰标记、2.2.5 特殊字符标记 在HTML文档中,、&、空格等特殊字符需要用特定字符串来表示。,2.2 HTML 常用标记,2.2.6 列表标记 1有序列表标记 列表项1 列表项2 2无序列表标记 列表项1,2.2 HTML 常用标记,2.2.7 图像标记 注意:标记没有对应的结束标记。2.2.8 超链接标记用作链接的文字或图像说明:href属性指定此锚点被触发后所链接到的URL。,2.3 HTML 表格标记,2.3.1 表格定义格式,2.3 HTML 表格标记,2.3.2 表格应用举例 商品名称单位单价 平板电视机台$12,699,2.4 HTML 框架标记,2.4.1 框架定义格式,2.4 HTML 框架标记,2.4.2 框架应用举例 框架范例1 2.4.3 框架嵌套举例,2.5 HTML 表单标记,2.5.1 表单定义格式 其中,action:指定提交后用来处理此表单的程序;method:信息提交方式,可为POST 或 GET。说明:标记中可以包含多种表单域,如:文本框、单选按钮、命令按钮、复选框、列表框等。,2.5 HTML 表单标记,2.5.2 常用表单域标记1 标记 其中 Type 属性值可以是:text(文本框)password(密码框)button(普通按钮)image(图片按钮)file(文件框)radio(单选按钮)checkbox(复选框)submit(提交按钮)reset(重置按钮)hidden(隐藏),2.5 HTML 表单标记,2 标记 文字 文字 3 标记 文本,2.5 HTML 表单标记,2.5.3 表单应用举例,2.6 HTML 其他标记,2.6.1 动态文字标记2.6.2 层标记,2.7 HTML 文档样式,2.7.1 CSS 简介“样式”是预先定义的一组格式。在HTML文档中除了可用各种标记对网页元素分别设置格式外,还可采用CSS技术对网页元素设置丰富的格式。CSS样式表由一系列格式设置语句组成,每一条这样的语句都用来告诉浏览器如何显示HTML文档中的某种元素。CSS语句的基本格式:选择器 属性1:属性值1;属性2:属性值2,2.7 HTML 文档样式,2.7.2 在文档头部定义样式h2 font-size:18pt;color:#008080;font-style:italictd color:#000080;font-size:14px;line-height:18pxA:link color:#cc0000;text-decoration:underlineA:visited color:#ccff00;text-decoration:noneA:hover color:#ff6600;text-decoration:none,2.7 HTML 文档样式,2.7.3 为单个元素定义样式在网页主体(标记)中,可通过在个别元素的开始标记中设置style属性来对该元素单独定义专门样式。例如:这是一段红色粗体文字 这是一个棕色宋体字标题 163网站,2.7 HTML 文档样式,2.7.4 定义与引用外部样式表 外部CSS样式表是专门的样式定义文件,可被连接到所需的多个网页中加以应用。此种样式定义方式能够大大减少THML文档中各种重复标记的数目,并有利于整个网站风格的统一。当需要统一改变多个网页的外观时,只需更改对应的样式表文件即可。定义与引用外部样式表的具体方法是:定义一个或多个CSS样式表,并将它们保存为扩展名为.CSS的文件,然后使用 标记将它们连接到需要使用这些样式的所有网页中,从而使得这些网页具有统一的外观风格。,