html网页设计基础知识学习

《html网页设计基础知识学习》由会员分享，可在线阅读，更多相关《html网页设计基础知识学习（59页珍藏版）》请在金锄头文库上搜索。

1、1,1.HTML概述,1.1 简介 HTML即超文本标记语言。所谓标记语言是指用标记进行编辑作业的语言，通过标记指定文本或其他对象（如图像、声音等）的表示格式，从而制作成超文本文件。 标记是描述HTML文件结构的标识符。它规定了HTML文件的逻辑结构，并且控制网页的显示方式。HTML的标记不区分大小写，例如和等价。 1）标记的功能 HTML标记的功能是，标记文件结构，设定文字、图像、表格、表单等在浏览器上的显示风格和位置，嵌入脚本，实现动态网页及多媒体等。,2,1.HTML概述,2）标记的构成 标记是由符号、和括在其中的命令字符串组成。标记有双标记和单标记两种。 双标记包括开始标记和结束标记，

2、必须成对出现。例如，、是文件的开始标记和结束标记；、是网页内容的开始和结束标记。单标记只有开始标记而没有结束标记。例如，标尺线标记只有开始标记而没有结束标记。另外，有的标记例如（分段标记）可以写为双标记、，也可以写为单标记。,3,1.HTML概述,3）标记的表示方法 HTML的标记有下列3种表示方法： a）文本 b）文本 c）：仅用于一些特殊的标记。例如，表示强制换行，它没有与之对应的。 4）标记的属性 属性是用来修饰说明标记的，放在开始标记内。例如颜色、对齐方式、高度和宽度等。各属性间以空格分隔。,4,1.HTML概述,标记的常用属性如下： a）对齐属性:align （left 左对齐（默认

3、）、center 居中对齐、right 右对齐、justify 两端对齐） b) 范围属性 （width=像素值或百分比 对象宽度; height=像素值或百分比 对象高度） c)色彩属性 （ color=#RRGGBB 前景色 bgcolor=#RRGGBB 背景色） 其中，颜色值可以是英文颜色名或十六进制的颜色值。,5,6,1.HTML概述,1.2 HTML文件结构,7,1.HTML概述,标记中可以有以下常用属性： background 设置网页背景图案。 bgcolor 设置网页背景色。默认为白色。 text 设置文本颜色。默认为黑色。 link 设置尚未被访问过的超文本链接的颜色，默认

4、为蓝色。 vlink 设置已被访问过的超文本链接的颜色，默认为紫色。 例如: 将背景图像设为photo6.gif，背景色设为绿色。,8,2.网页的基本元素,2.1 网页中的文本使用 一般而言，Web网页是由图像、表格及环绕它们的文本组成。网页中文本的文字风格和布局设计在网页设计中非常重要。 例如，标题字的大小，是否居中及各级标题的设置，文字字体及颜色的设定，文章分段及段落的风格，页面的整体布局等，都是在网页设计中必须考虑的问题。 1. 标题 标题 标记中的n值可取16的整数，取1时文字最大，取6时最小，默认为。,9,2.网页的基本元素,【例2-1】标记的应用, 软件学院教授简介 定义一条标尺线

5、 张光明教授 张光明教授，男，1940 年10月诞生于河北省石家庄市。 张光明教授研究方向 张光明教授研究成果 ,10,2.网页的基本元素,2. 文字大小和颜色 1）使用标记 使用标记的size属性可以设定一段文章、一个语句、一个单词的文字大小。 格式为：一段文章、一个语句、一个单词 标记的color属性设定一段文章、一个语句、一个单词的文字颜色。 格式为：一段文章、一个语句、一个单词 例如，文字段颜色为白色 或 文字段颜色为红色,11,2.网页的基本元素,2）使用标记的text属性 标记中的text属性可以设定整个网页文字的颜色，格式为： 例如， 3.换行和分段 1）强制改行 强制改行使用标

6、记，位于行的末尾，无结束标记。 2）段落 段落标记用于分段，位于前段的末尾，并使前段与后段之间加一行空白。段落标记可以省略结束标记。,12,2.网页的基本元素,3）标尺线 标尺线标记在前、后两个段落之间定义一条标尺线。标记中的width属性用来控制标尺线的长度。 例如， 线长为50像素宽 线长为屏幕宽度的50% 标记的size属性控制标尺线的粗细；noshade属性将标尺线设置为黑色；align属性指定标尺线的位置。 例如： 右对齐 左对齐 居中（默认） 的color属性控制标尺线的颜色。如,13,2.网页的基本元素,.文本(或图像)布局 1）对齐方式 文本或图像 或 文本或图像 （n=1,2

7、,3,4,5,6） 或 文本或图像 （center 居中; right 右对齐; left 左对齐） 2）标记 当要在许多段落中设置对齐方式时，常使用（层）标记。 文本或图像 居中（center 居中; right 右对齐; left 左对齐）,14,2.网页的基本元素,2.2 网页中的图像使用 1. 网页中加入图像 使用标记 格式为： 其中，“图像文件名”可以用绝对路径也可以用相对路径，文件可以是gif、jpg或png类型。 “图像文本性说明”用在不能显示图像的浏览器，或浏览器显示图像时间太长时先显示此文字内容。 “xxx.htm”指明关于图的详细说明以补充alt属性的简单说明。,15,2.

8、网页的基本元素,2.图像的尺寸设定 使用标记的width和height属性设定图像的宽和高 格式为： 其中，x和y可以是像素值，也可以取百分数。例如， ,16,2.网页的基本元素,3.图像和文本布局 图像和文本混排时，图像和文本在垂直方向的对齐及相互间的左右位置关系使用align属性。 格式为: 文本文本 其中，位置参数可以是：top(顶对齐)、middle(中央对齐)、bottom(底边对齐)、left(图像在文本左边)和right(图像在文本右边)。,17,2.网页的基本元素,2.3 网页中的列表使用 在网页中使用列表，可以清楚地看到定义顺序、信息排序及信息的相对重要性。 HTML提供了丰

9、富的列表元素，用于在HTML文档中建立列表。 列表中并列的信息(数据)称为项。项前可以添加符号或序号，也可以各项并列而不加任何记号。带序号的列表称为有序列表，带符号的列表称为无序列表，各项并列而不加任何记号的列表称为定义列表。,18,2.网页的基本元素,1.无序列表 建立无序列表可以使用标记和项目标记; 格式为： 项目 项目 , WWW Browser HTML Home Page 注：无序列表可以嵌套,19,2.网页的基本元素,2.有序列表 1）创建有序列表 在实现应用中，人们更多地使用带序号的列表，以便清楚地表达并列信息的顺序。使用标记，可以实现有序列表。 格式为： 项目 项目 ,20,2

10、.网页的基本元素,2）有序列表序号的种类 有序列表序号可以设定，在或标记内使用type属性可以设定5种序号，即阿拉伯数字(1)、大小写英文字母(A)和(a)、大小写罗马数字(I)和(i)。 格式为： 或 说明： 省略 type 属性时自动设定为阿拉伯数字。 的作用范围为整个标记范围。 的作用范围是当前项(行)。,21,2.网页的基本元素,3）设定起始序号 有序列表的序号可以从任意数字开始。方法是，在标记内使用start属性或在标记内加入value属性。 格式为： 其中，x为任意整数。 注意，的作用域为当前标记，的作用域为从当前项开始直到当前的标记为止的各项。,22,2.网页的基本元素,【例2-

11、2】设定序号的种类, 大字 HTML入门 WWW Browser HTML 网页 HTML案例教程 斜体 WWW网页 网页文本的布局 在网页中插入图像 列表 表格 ,23,2.网页的基本元素,2.4 超文本链接 浏览Web页时，我们能够快捷地从一个Web网页跳到另一个相关的Web网页，就是在这些文件之间建立了超文本链接。 1.创建网页间的链接 建立超文本链接语法格式为: 文本或图像 注意，必须使用结束标记。href意为超文本引用，URL是一个有效的链接资源的地址，“文本或图像”是在浏览器上显示的热点信息。 标记的常用属性：Href : 定义一个URL，作为有效的链接资源的地址。Name :指定

12、当前文档内的一个字符串作为链接时的位置名称。 Type :指定特定内容的类型。,24,2.网页的基本元素,注意，依链接资源存放位置不同，链接可分为全局链接和局部链接。如果资源文件存放在服务器自己的目录中，称为局部链接；与本服务器以外文件的链接称全局链接。在全局链接中，http写入的URL称为绝对路径。 例如， 热点文本 文件之间的局部链接有下面种情况： (1)链接同一目录内的文件。 (2)链接下一级目录内的文件。 (3)链接上一级目录内的文件。 (4)链接同级目录内的文件。,25,2.网页的基本元素,标记用来控制文字的移动,例如: 文字在移动 标记的主要属性有: direction: 控制移动

13、方向,可取“left”, “right”, “up”, “down”四个值 behavior: 移动方式,可取“scroll“(循环移动), “slide“(只走一圈), “alternate“(来回移动) loop: 循环次数,不输入表示无限次循环 scrollamount: 移动快慢,数值越大越快 scrolldelay: 每移动一步之后的延时,单位是毫秒 height,width: 移动区域的高和宽,单位像素 bgcolor: 移动区域的背景色 实例: 滚动文字,26,2.网页的基本元素,2.图像链接 图像链接是将图像设定为热区，单击图像则转移到被链接的文本或其他文件。 链接同一目录中的

14、文件的格式为： 例如， 边框距离20 ,27,2.网页的基本元素,2.5 表格 将文本或图像按一定的行、列规则进行排列称为表格。在网页中使用表格，可以使一些数据信息更容易浏览。 HTML有极强的表格能力，可以把文字、图像、声音甚至视频组织在表格中，也可以使用表格实现对文本、图像或其他对象的页面布局。 1. 创建表格 网页中建立一个表格的基本格式为： 表项1表项n ,28,2.网页的基本元素,1）标记 border=”n” 定义表格边框的粗细，n取整数，单位为像素。 bordercolor=”颜色值” 定义表格边框的颜色。 summary=”简要说明” 对表格的格式和内容简要说明。 bgcolo

15、r 设定表格的背景色。 background 设定表格的背景图像。 width=“n | n%” 设定表格的宽度。 height=”n” 设定表格的高度。 align=”left | right | center” 定义表格的水平对齐方式。,29,2.网页的基本元素,cellpadding 调节表单元线和数据之间的距离。 cellspacing 调节表单元与边框间的空白。 rules=”参数” 设定有无表格线。 align=”left | right | all” 设定表格与文本的相互位置。 2）标记 表示表格的一行开始，可以是单标记，也可以是双标记。标记的属性主要如下： bgcolor 设定

16、表格一行的背景色。 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 -