HTML网页设计基础知识学习.ppt

1 1 HTML概述 1 1简介HTML即超文本标记语言 所谓标记语言是指用标记进行编辑作业的语言 通过标记指定文本或其他对象 如图像 声音等 的表示格式 从而制作成超文本文件 标记是描述HTML文件结构的标识符 它规定了HTML文件的逻辑结构 并且控制网页的显示方式 HTML的标记不区分大小写 例如和等价 1 标记的功能HTML标记的功能是 标记文件结构 设定文字 图像 表格 表单等在浏览器上的显示风格和位置 嵌入脚本 实现动态网页及多媒体等 2 1 HTML概述 2 标记的构成标记是由符号 和括在其中的命令字符串组成 标记有双标记和单标记两种 双标记包括开始标记和结束标记 必须成对出现 例如 是文件的开始标记和结束标记 是网页内容的开始和结束标记 单标记只有开始标记而没有结束标记 例如 标尺线标记只有开始标记而没有结束标记 另外 有的标记例如 分段标记 可以写为双标记 也可以写为单标记 3 1 HTML概述 3 标记的表示方法HTML的标记有下列3种表示方法 a 文本b 文本c 仅用于一些特殊的标记 例如 表示强制换行 它没有与之对应的 4 标记的属性属性是用来修饰说明标记的 放在开始标记内 例如颜色 对齐方式 高度和宽度等 各属性间以空格分隔 4 1 HTML概述 标记的常用属性如下 a 对齐属性 align left左对齐 默认 center居中对齐 right右对齐 justify两端对齐 b 范围属性 width 像素值或百分比对象宽度 height 像素值或百分比对象高度 c 色彩属性 color RRGGBB前景色bgcolor RRGGBB背景色 其中 颜色值可以是英文颜色名或十六进制的颜色值 5 6 1 HTML概述 1 2HTML文件结构 7 1 HTML概述 标记中可以有以下常用属性 background 设置网页背景图案 bgcolor 设置网页背景色 默认为白色 text 设置文本颜色 默认为黑色 link 设置尚未被访问过的超文本链接的颜色 默认为蓝色 vlink 设置已被访问过的超文本链接的颜色 默认为紫色 例如 将背景图像设为photo6 gif 背景色设为绿色 8 2 网页的基本元素 2 1网页中的文本使用一般而言 Web网页是由图像 表格及环绕它们的文本组成 网页中文本的文字风格和布局设计在网页设计中非常重要 例如 标题字的大小 是否居中及各级标题的设置 文字字体及颜色的设定 文章分段及段落的风格 页面的整体布局等 都是在网页设计中必须考虑的问题 1 标题标题标记中的n值可取1 6的整数 取1时文字最大 取6时最小 默认为 9 2 网页的基本元素 例2 1 标记的应用 软件学院教授简介定义一条标尺线张光明教授张光明教授 男 1940年10月诞生于河北省石家庄市 张光明教授研究方向张光明教授研究成果 10 2 网页的基本元素 2 文字大小和颜色1 使用标记使用标记的size属性可以设定一段文章 一个语句 一个单词的文字大小 格式为 一段文章 一个语句 一个单词标记的color属性设定一段文章 一个语句 一个单词的文字颜色 格式为 一段文章 一个语句 一个单词例如 文字段颜色为白色或文字段颜色为红色 11 2 网页的基本元素 2 使用标记的text属性标记中的text属性可以设定整个网页文字的颜色 格式为 例如 3 换行和分段1 强制改行强制改行使用标记 位于行的末尾 无结束标记 2 段落段落标记用于分段 位于前段的末尾 并使前段与后段之间加一行空白 段落标记可以省略结束标记 12 2 网页的基本元素 3 标尺线标尺线标记在前 后两个段落之间定义一条标尺线 标记中的width属性用来控制标尺线的长度 例如 线长为50像素宽线长为屏幕宽度的50 标记的size属性控制标尺线的粗细 noshade属性将标尺线设置为黑色 align属性指定标尺线的位置 例如 右对齐左对齐居中 默认 的color属性控制标尺线的颜色 如 13 2 网页的基本元素 文本 或图像 布局1 对齐方式文本或图像或文本或图像 n 1 2 3 4 5 6 或文本或图像 center居中 right右对齐 left左对齐 2 标记当要在许多段落中设置对齐方式时 常使用 层 标记 文本或图像居中 center居中 right右对齐 left左对齐 14 2 网页的基本元素 2 2网页中的图像使用1 网页中加入图像使用标记格式为 其中 图像文件名 可以用绝对路径也可以用相对路径 文件可以是gif jpg或png类型 图像文本性说明 用在不能显示图像的浏览器 或浏览器显示图像时间太长时先显示此文字内容 xxx htm 指明关于图的详细说明以补充alt属性的简单说明 15 2 网页的基本元素 2 图像的尺寸设定使用标记的width和height属性设定图像的宽和高格式为 其中 x和y可以是像素值 也可以取百分数 例如 16 2 网页的基本元素 3 图像和文本布局图像和文本混排时 图像和文本在垂直方向的对齐及相互间的左右位置关系使用align属性 格式为 文本文本其中 位置参数可以是 top 顶对齐 middle 中央对齐 bottom 底边对齐 left 图像在文本左边 和right 图像在文本右边 17 2 网页的基本元素 2 3网页中的列表使用在网页中使用列表 可以清楚地看到定义顺序 信息排序及信息的相对重要性 HTML提供了丰富的列表元素 用于在HTML文档中建立列表 列表中并列的信息 数据 称为项 项前可以添加符号或序号 也可以各项并列而不加任何记号 带序号的列表称为有序列表 带符号的列表称为无序列表 各项并列而不加任何记号的列表称为定义列表 18 2 网页的基本元素 1 无序列表建立无序列表可以使用标记和项目标记 格式为 项目项目 WWWBrowserHTMLHomePage注 无序列表可以嵌套 19 2 网页的基本元素 2 有序列表1 创建有序列表在实现应用中 人们更多地使用带序号的列表 以便清楚地表达并列信息的顺序 使用标记 可以实现有序列表 格式为 项目项目 20 2 网页的基本元素 2 有序列表序号的种类有序列表序号可以设定 在或标记内使用type属性可以设定5种序号 即阿拉伯数字 1 大小写英文字母 A 和 a 大小写罗马数字 I 和 i 格式为 或说明 省略type属性时自动设定为阿拉伯数字 的作用范围为整个标记范围 的作用范围是当前项 行 21 2 网页的基本元素 3 设定起始序号有序列表的序号可以从任意数字开始 方法是 在标记内使用start属性或在标记内加入value属性 格式为 其中 x为任意整数 注意 的作用域为当前标记 的作用域为从当前项开始直到当前的标记为止的各项 22 2 网页的基本元素 例2 2 设定序号的种类 大字HTML入门WWWBrowserHTML网页HTML案例教程斜体WWW网页网页文本的布局在网页中插入图像列表表格 23 2 网页的基本元素 2 4超文本链接浏览Web页时 我们能够快捷地从一个Web网页跳到另一个相关的Web网页 就是在这些文件之间建立了超文本链接 1 创建网页间的链接建立超文本链接语法格式为 文本或图像注意 必须使用结束标记 href意为超文本引用 URL是一个有效的链接资源的地址 文本或图像 是在浏览器上显示的热点信息 标记的常用属性 Href 定义一个URL 作为有效的链接资源的地址 Name 指定当前文档内的一个字符串作为链接时的位置名称 Type 指定特定内容的类型 24 2 网页的基本元素 注意 依链接资源存放位置不同 链接可分为全局链接和局部链接 如果资源文件存放在服务器自己的目录中 称为局部链接 与本服务器以外文件的链接称全局链接 在全局链接中 http写入的URL称为绝对路径 例如 热点文本文件之间的局部链接有下面 种情况 1 链接同一目录内的文件 2 链接下一级目录内的文件 3 链接上一级目录内的文件 4 链接同级目录内的文件 25 2 网页的基本元素 标记用来控制文字的移动 例如 文字在移动标记的主要属性有 direction 控制移动方向 可取 left right up down 四个值 behavior 移动方式 可取 scroll 循环移动 slide 只走一圈 alternate 来回移动 loop 循环次数 不输入表示无限次循环 scrollamount 移动快慢 数值越大越快 scrolldelay 每移动一步之后的延时 单位是毫秒 height width 移动区域的高和宽 单位像素 bgcolor 移动区域的背景色实例 滚动文字 26 2 网页的基本元素 2 图像链接图像链接是将图像设定为热区 单击图像则转移到被链接的文本或其他文件 链接同一目录中的文件的格式为 例如 边框距离20 27 2 网页的基本元素 2 5表格将文本或图像按一定的行 列规则进行排列称为表格 在网页中使用表格 可以使一些数据信息更容易浏览 HTML有极强的表格能力 可以把文字 图像 声音甚至视频组织在表格中 也可以使用表格实现对文本 图像或其他对象的页面布局 1 创建表格网页中建立一个表格的基本格式为 表项1 表项n 28 2 网页的基本元素 1 标记border n 定义表格边框的粗细 n取整数 单位为像素 bordercolor 颜色值 定义表格边框的颜色 summary 简要说明 对表格的格式和内容简要说明 bgcolor 设定表格的背景色 background 设定表格的背景图像 width n n 设定表格的宽度 height n 设定表格的高度 align left right center 定义表格的水平对齐方式 29 2 网页的基本元素 cellpadding 调节表单元线和数据之间的距离 cellspacing 调节表单元与边框间的空白 rules 参数 设定有无表格线 align left right all 设定表格与文本的相互位置 2 标记表示表格的一行开始 可以是单标记 也可以是双标记 标记的属性主要如下 bgcolor 设定表格一行的背景色 align left right center 定义表格一行的表数据项的水平对齐方式 30 2 网页的基本元素 3 标记为列定义标记 表格的数据写在列和之间 标记的属性主要如下 bgcolor 设定背景色 align left right center 定义表数据项水平对齐方式 bodercolordark 颜色值 定义表格单元边框的颜色 width n n 设定表格单元的宽度 height n 设定表格单元的高度 实例 31 2 网页的基本元素 2 表题表题是表格的内容声明 HTML使用标记给表格添加表题 并使用align属性定义表题的位置 格式为 表题其属性值如下 top 表题放在表的上部bottom 表题放在表的下部left 表题放在表上部的左侧right 表题放在表上部的右侧 32 2 网页的基本元素 3 表头使用标记可以在表的第1行或第1列加表头 表头写在开始标记和结束标记之间 并用醒目的粗体字显示 在表的第1行加表头的格式为 表头1表头2表头3表项1表项2表项3表项4表项5表项6 33 2 网页的基本元素 在表的第1列加表头的格式为 表头1表项1表项2表头2表项3表项4表头3表项5表项6 34 2 网页的基本元素 4 表格边框在标记内附加frame rules和border属性可以生成各种表格边框单元线 内容1 frame属性值 35 2 网页的基本元素 2 rules属性值none 无格线 groups 仅在行组和列组间有格线 rows 仅有行间格线 cols 仅有列间格线 all 有行和列格线 3 border 像素 设定边框宽度 例如 表格边框仅有行线时为 36 2 网页的基本元素 5 表格修饰HTML提供了配置表格元素背景色的功能 并可以设定表项数据的颜色 设定表格背景色的方法是使用bgcolor属性 格式分别为 设定表格背景色设定表格中一行的背景色设定表格中一个单元格的背景色在标记中 可以使用background属性设置表格的背景图像 格式为background 图像文件名 37 2 网页的基本元素 表格综合实例 38 窗口框架 3 1窗口框架简介3 1 1什么是窗口框架窗口框架可用于将窗口画面分割成多个小窗口 且每个小窗口中 可以显示不同的网页 达到在浏览器中同时浏览不同网页的效果 另外各窗口还可以扮演不同的功能 3 1 2窗口框架的基本结构窗口框架的建立语法 其中 标记用于定义一个窗口框架组件 而标记则用于定义窗口框架中的子窗口组件 39 窗口框架 3 2窗口框架的控制3 2 1窗口的水平分割 Rows属性 设置给rows属性的字符串 代表各分割子窗口的高度 第一个子窗口高度为高度1 依此类推 而最后一个 则代表最后一个子窗口的高度 为其他子窗口高度分配后所剩余的高度 例如 40 窗口框架 3 2 2窗口的垂直分割 Cols属性 3 2 3嵌套窗口框架一个窗口框架还包含了另一个窗口框架 41 窗口框架 3 2 4窗口框架的宽度 Border属性 n为一整数 代表此窗口框架的宽度 单位为像素 3 2 5框架的隐藏 Frameborder属性 Frameborder属性用于控制窗口框架四周 是否显示框架 此属性可使用在标记与标记中 使用在标记内时 可控制窗口框架的所有子窗口 使用在标记时 则仅能控制该标记所代表的子窗口 0代表不显示框线 1代表显示框线 实例 42 窗口框架 3 3子窗口的设置3 3 1指定子窗口显示网页 SRC属性 Src属性是用于指定要导入到某子窗口的HTML文件的位置 3 3 2定义子窗口名称 Name属性 Name属性是用来指定窗口的名称 当完成定义子窗口的名称后 便可在超链接中 指定显示网页的子窗口 3 3 3控制框架滚动条 Scrolling属性 43 窗口框架 3 3 4子窗口大小的调整 NoResize属性 若不能随意更改子窗口的大小 可在标记中 设置NoResize属性 3 4超链接Target属性与框架的应用3 4 1网页显示子窗口 Target属性 如何实现各窗口不同功能 运用标记的target属性 指定显示链接网页的子窗口 实例 44 窗口框架 3 4 2搭配Target属性的特殊设置 设置在空白窗口中显示网页当将Target属性设置为 blank时 若单击超链接后 将以打开另一个窗口的方式显示网页 设置在上一层框架显示网页当将Target属性值为 parent时 单击超链接后 该链接网页将导入目前子窗口的上一层框架 若没有上层 则导入在同一窗口中 将网页导入到同一子窗口中若将targer属性设置为 self 则将在同一子窗口中显示链接的网页 45 4 表单的应用 HTML提供的表单是用来将用户数据从浏览器传递给Web服务器的 例如可以利用表单建立一个录入界面 也可以利用表单对数据库进行查询 在这里需要声明的是 表单的操作是与服务器进行交互的操作 而服务器端的操作是通过服务器端的程序来实现的 实现在服务器端的操作有许多种方式 其中ASP 动态服务网页 的方式就是一种 它可以通过ADO方式与多种数据库相连 46 4 表单的应用 4 1表单的标记表单就是为Internet网络用户在浏览器上建立一个交互接口 使Internet网络用户可以在这个接口上输入自己的信息 然后使用提交按钮 将Internet网络用户的输入信息传送给Web服务器 在HTML中 有一个专门的标记FORM提供表单的功能 由表单开始标记和表单结束标记组成 表单中可以设置文本框 按钮或下拉菜单 它们也是通过标记完成 在表单的开始标记中带有两个属性 ACTION和METHOD 书写表单的HTML格式如下 47 4 表单的应用 FORM标记有以下主要属性 1 ACTION属性是用来指出 当这个FORM提交后需要执行的驻留在Web服务器上的程序名 包括路径 是什么 一旦Internet网络用户提交输入信息后服务器便激活这个程序 完成某种任务 例如 当用户点击 提交 按钮以后 Web服务器上的 login asp 将接收用户输入的信息 以登记用户信息 48 4 表单的应用 2 METHOD属性是用来说明从客户端浏览器将Internet网络用户输入的信息传送给Web服务器时所使用的方式 它有两种方式 POST和GET 默认的方式是GET 这两者的区别是在使用POST时 表单中所有的变量及其值都按一定的规律放入报文中 而不是附加在ACTION所设定的URL之后 在使用GET时将FORM的输入信息作为字符串附加在ACTION所设定的URL的后面 中间用 隔开 即在客户端浏览器的地址栏中可以直接看见这些内容 49 4 表单的应用 HTML中的INPUT标记HTML中的INPUT标记是表单中最常用的标记 我们在网页上所见到的文本框 按钮等等都由这个标记引出的 下面是INPUT标记的标准格式 其中TYPE属性是用来说明提供给用户进行信息输入的类型是什么 例如是文本框 单选按钮或多选按钮 它的取值如下 TEXT PASSWORD RADIO CHECKBOX SUBMIT RESET 50 这是个测试页请输入您的真实姓名 您的主页的网址 密码 1 文字输入和密码输入 51 2 复选框 Checkbox 和单选框 RadioBu