HTML网页设计基础知识学习
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
14
2.网页的基本元素
2.图像的尺寸设定
使用<IMG>标记的width和height属性设定图像 的宽和高
格式为： <IMG src=”图像文件名” width=x height=y>
其中，x和y可以是像素值，也可以取百分数。例 如， <IMG src=”asd.gif” width=20 height=20> <IMG src=”asd.gif” width=20% height=20%>
例如，标题字的大小，是否居中及各级标题的 设置，文字字体及颜色的设定，文章分段及段 落的风格，页面的整体布局等，都是在网页设 计中必须考虑的问题。
1. 标题
<Hn>标题</Hn> 标记中的n值可取1～6的整数，取1时文字最大，
取6时最小，默认为<H6>。
8
2.网页的基本元素
【例2-1】<Hn>标记的应用
本性说明” longdesc=”xxx.htm”> 其中，“图像文件名”可以用绝对路径也可以用
相对路径，文件可以是gif、jpg或png类型。 “图像文本性说明”用在不能显示图像的浏览器，
或浏览器显示图像时间太长时先显示此文字内容。 “xxx.htm”指明关于图的详细说明以补充alt属
性的简单说明。
2.有序列表 1）创建有序列表
在实现应用中，人们更多地使用带序号的列表， 以便清楚地表达并列信息的顺序。使用标记 <OL>，可以实现有序列表。
格式为：
<OL> <LI>项目 <LI>项目 …
</OL>
19
2.网页的基本元素
2）有序列表序号的种类
有序列表序号可以设定，在<OL>或<LI>标记内 使用type属性可以设定5种序号，即阿拉伯数字 (1)、大小写英文字母(A)和(a)、大小写罗马数字 (I)和(i)。
例如， <A href=“http://www.example.com”> 热点文本</A>
文件之间的局部链接有下面４种情况： (1)链接同一目录内的文件。 (2)链接下一级目录内的文件。 (3)链接上一级目录内的文件。 (4)链接同级目录内的文件。
例如: <BODY background=“photo6.gif” bgcolor=”#00FF00”> 将背景图像设为 photo6.gif，背景色设为绿色。
7
2.网页的基本元素
2.1 网页中的文本使用
一般而言，Web网页是由图像、表格及环绕它 们的文本组成。网页中文本的文字风格和布局 设计在网页设计中非常重要。
例如：<HR align=”right”> 右对齐 <HR align=”left”> 左对齐 <HR align=”center”> 居中（默认） <HR>的color属性控制标尺线的颜色。如<HR
color=”颜色”>
12
2.网页的基本元素
４.文本(或图像)布局
1）对齐方式
c)色彩属性 （ color=#RRGGBB 前景色 bgcolor=#RRGGBB 背景色）
其中，颜色值可以是英文颜色名或十六进制的颜 色值。
4
5
1.HTML概述
1.2 HTML文件结构
6
1.HTML概述
<BODY>标记中可以有以下常用属性： ①background — 设置网页背景图案。 ②bgcolor — 设置网页背景色。默认为白色。 ③text — 设置文本颜色。默认为黑色。 ④link — 设置尚未被访问过的超文本链接的颜 色，默认为蓝色。 ⑤vlink — 设置已被访问过的超文本链接的颜色， 默认为紫色。
<DIV align=”center”>文本或图像</DIV> 居 中（center 居中; right 右对齐; left 左对齐）
13
2.网页的基本元素
2.2 网页中的图像使用
1. 网页中加入图像
使用标记<IMG> 格式为：<IMG src=”图像文件名” alt=”图像文
格式为： <OL type=”1,A,a,i,I”> 或 <LI type=”1,A,a,i,I”>
说明： ①省略 type 属性时自动设定为阿拉伯数字。 ②<OL type=””>的作用范围为整个标记范围。 ③<LI type=””>的作用范围是当前项(行)。
20
2.网页的基本元素
3）设定起始序号
1）标记的功能
HTML标记的功能是，标记文件结构，设定文字、 图像、表格、表单等在浏览器上的显示风格和位 置，嵌入脚本，实现动态网页及多媒体等。
1
1.HTML概述
2）标记的构成
标记是由符号<…>、</…>和括在其中的命令字 符串组成。标记有双标记和单标记两种。
双标记包括开始标记和结束标记，必须成对出现。 例如，<HTML>、</HTML>是文件的开始标记和 结束标记；<BODY>、</BODY>是网页内容的开 始和结束标记。单标记只有开始标记而没有结束 标记。例如，标尺线标记<HR>只有开始标记而没 有结束标记。另外，有的标记例如<P>（分段标 记）可以写为双标记<P>、</P>，也可以写为单 标记<P>。
21
2.网页的基本元素
【例2-2】设定序号的种类
<BIG> 大字 <H3>HTML入门</H3> <OL type=A> <LI>WWW <LI>Browser <LI type=I>HTML <LI>网页 </OL> <EM>HTML案例教程</EM> 斜体 <OL type=a> <LI>WWW网页 <LI>网页文本的布局 <LI>在网页中插入图像 <LI type=i>列表 <LI>表格 </OL>
9
2.网页的基本元素
2. 文字大小和颜色
1）使用<FONT>标记
使用<FONT>标记的size属性可以设定一段文章、 一个语句、一个单词的文字大小。
格式为：<FONT size=数字>一段文章、一个语 句、一个单词</FONT>
<FONT>标记的color属性设定一段文章、一个语 句、一个单词的文字颜色。
17
2.网页的基本元素
1.无序列表
建立无序列表可以使用标记<UL>和项目标记 <LI>;
格式为：
<UL> <LI>项目 <LI>项目 …
</UL>
<UL> <LI>WWW <LI>Browser <LI>HTML <LI>Home Page
</UL> 注：无序列表可以嵌套
18
2.网页的基本元素
有序列表的序号可以从任意数字开始。方法是， 在<OL>标记内使用start属性或在<LI>标记内加 入value属性。
格式为： <OL start=x> <LI value=”x”>
其中，x为任意整数。 注意，<OL start=x>的作用域为当前<OL>标记，
<LI value=”x”>的作用域为从当前项开始直到当 前的</OL>标记为止的各项。
<P align=”center”>文本或图像</P> 或 <Hn align=”center”>文本或图像</Hn> （n=1,2,3,4,5,6） 或 <CENTER>文本或图像 </CENTER> （center 居中; right 右对齐; left 左对齐）
2）<DIV>标记
当要在许多段落中设置对齐方式时，常使用 <DIV>（层）标记。
11
2.网页的基本元素
3）标尺线
标尺线标记<HR>在前、后两个段落之间定义一 条标尺线。<HR>标记中的width属性用来控制 标尺线的长度。
例如，<HR width=50> 线长为50像素宽 <HR width=50%> 线长为屏幕宽度的50%
<HR>标记的size属性控制标尺线的粗细； noshade属性将标尺线设置为黑色；align属性指 定标尺线的位置。
格式为：<FONT color=”颜色”>一段文章、一 个语句、一个单词</FONT>
例如，<FONT color=”#FFFFFF”>文字段颜 色为白色</FONT> 或 <FONT color=”red”>文字段颜色为红 色</FONT>
10
2.网页的基本元素
2）使用<BODY>标记的text属性
标记<A>的常用属性：Href : 定义一个URL，作 为有效的链接资源的地址。Name :指定当前文 档内的一个字符串作为链接时的位置名称。 Type :指定特定内容的类型。
23
2.网页的基本元素
注意，依链接资源存放位置不同，链接可分为 全局链接和局部链接。如果资源文件存放在服 务器自己的目录中，称为局部链接；与本服务 器以外文件的链接称全局链接。在全局链接中， http写入的URL称为绝对路径。
属性是用来修饰说明标记的，放在开始标记内。 例如颜色、对齐方式、高度和宽度等。各属性间 以空格分隔。
3
1.HTML概述
标记的常用属性如下：
a）对齐属性:align （left 左对齐（默认）、 center 居中对齐、right 右对齐、justify 两端对 齐）
b) 范围属性 （width=像素值或百分比 对象宽 度; height=像素值或百分比 对象高度）
2
1.HTML概述
3）标记的表示方法
HTML的标记有下列3种表示方法： a）<标记名>文本</标记名> b）<标记名 属性名1=”值1” 属性名2=”值2” …> 文本</标记名> c）<标记名>：仅用于一些特殊的标记。例如， <BR>表示强制换行，它没有与之对应的</BR>。
4）标记的属性
1.HTML概述
1.1 简介
HTML即超文本标记语言。所谓标记语言是指用标 记进行编辑作业的语言，通过标记指定文本或其他 对象（如图像、声音等）的表示格式，从而制作成 超文本文件。
标记是描述HTML文件结构的标识符。它规定了 HTML文件的逻辑结构，并且控制网页的显示方式。 HTML的标记不区分大小写，例如<HTML>和 <html>等价。
16
2.网页的基本元素
2.3 网页中的列表使用
在网页中使用列表，可以清楚地看到定义顺序、 信息排序及信息的相对重要性。
HTML提供了丰富的列表元素，用于在HTML文 档中建立列表。
列表中并列的信息(数据)称为项。项前可以添 加符号或序号，也可以各项并列而不加任何记 号。带序号的列表称为有序列表，带符号的列 表称为无序列表，各项并列而不加任何记号的 列表称为定义列表。
<BODY>标记中的text属性可以设定整个网页文 字的颜色，格式为：<BODY text=”颜色”>
例如，<BODY text=”#FF0000”>
3.换行和分段
1）强制改行
强制改行使用标记<BR>，位于行的末尾，无结 束标记。
2）段落
段落标记<P>用于分段，位于前段的末尾，并使 前段与后段之间加一行空白。段落标记<P>可以 省略结束标记。
<HTML><BODY> <H1 align="center">软件学院教授简介</H1> <HR size=4 color="#FF00FF"> 定义一条标尺线 <H1>张光明教授</H1><P> 张光明教授，男，1940 年10月诞生于河北省石家庄市。 <H2>张光明教授研究方向</H2><P> <H3>张光明教授研究成果</H3><P> </BODY></HTML>
</BIG>
22
2.网页的基本元素
2.4 超文本链接
浏览Web页时，我们能够快捷地从一个Web网 页跳到另一个相关的Web网页，就是在这些文 件之间建立了超文本链接。
1.创建网பைடு நூலகம்间的链接
建立超文本链接语法格式为: <A href=“URL”>文本或图像</A>
注意，必须使用结束标记</A>。href意为超文 本引用，URL是一个有效的链接资源的地址， “文本或图像”是在浏览器上显示的热点信息。
15
2.网页的基本元素
3.图像和文本布局
图像和文本混排时，图像和文本在垂直方向的对 齐及相互间的左右位置关系使用align属性。
格式为: 文本<IMG src=”图像文件名” align=” 位置参数”>文本
其中，位置参数可以是：top(顶对齐)、 middle(中央对齐)、bottom(底边对齐)、left(图 像在文本左边)和right(图像在文本右边)。
2.网页的基本元素
2.图像的尺寸设定
使用<IMG>标记的width和height属性设定图像 的宽和高
格式为： <IMG src=”图像文件名” width=x height=y>
其中，x和y可以是像素值，也可以取百分数。例 如， <IMG src=”asd.gif” width=20 height=20> <IMG src=”asd.gif” width=20% height=20%>
例如，标题字的大小，是否居中及各级标题的 设置，文字字体及颜色的设定，文章分段及段 落的风格，页面的整体布局等，都是在网页设 计中必须考虑的问题。
1. 标题
<Hn>标题</Hn> 标记中的n值可取1～6的整数，取1时文字最大，
取6时最小，默认为<H6>。
8
2.网页的基本元素
【例2-1】<Hn>标记的应用
本性说明” longdesc=”xxx.htm”> 其中，“图像文件名”可以用绝对路径也可以用
相对路径，文件可以是gif、jpg或png类型。 “图像文本性说明”用在不能显示图像的浏览器，
或浏览器显示图像时间太长时先显示此文字内容。 “xxx.htm”指明关于图的详细说明以补充alt属
性的简单说明。
2.有序列表 1）创建有序列表
在实现应用中，人们更多地使用带序号的列表， 以便清楚地表达并列信息的顺序。使用标记 <OL>，可以实现有序列表。
格式为：
<OL> <LI>项目 <LI>项目 …
</OL>
19
2.网页的基本元素
2）有序列表序号的种类
有序列表序号可以设定，在<OL>或<LI>标记内 使用type属性可以设定5种序号，即阿拉伯数字 (1)、大小写英文字母(A)和(a)、大小写罗马数字 (I)和(i)。
例如， <A href=“http://www.example.com”> 热点文本</A>
文件之间的局部链接有下面４种情况： (1)链接同一目录内的文件。 (2)链接下一级目录内的文件。 (3)链接上一级目录内的文件。 (4)链接同级目录内的文件。
例如: <BODY background=“photo6.gif” bgcolor=”#00FF00”> 将背景图像设为 photo6.gif，背景色设为绿色。
7
2.网页的基本元素
2.1 网页中的文本使用
一般而言，Web网页是由图像、表格及环绕它 们的文本组成。网页中文本的文字风格和布局 设计在网页设计中非常重要。
例如：<HR align=”right”> 右对齐 <HR align=”left”> 左对齐 <HR align=”center”> 居中（默认） <HR>的color属性控制标尺线的颜色。如<HR
color=”颜色”>
12
2.网页的基本元素
４.文本(或图像)布局
1）对齐方式
c)色彩属性 （ color=#RRGGBB 前景色 bgcolor=#RRGGBB 背景色）
其中，颜色值可以是英文颜色名或十六进制的颜 色值。
4
5
1.HTML概述
1.2 HTML文件结构
6
1.HTML概述
<BODY>标记中可以有以下常用属性： ①background — 设置网页背景图案。 ②bgcolor — 设置网页背景色。默认为白色。 ③text — 设置文本颜色。默认为黑色。 ④link — 设置尚未被访问过的超文本链接的颜 色，默认为蓝色。 ⑤vlink — 设置已被访问过的超文本链接的颜色， 默认为紫色。
<DIV align=”center”>文本或图像</DIV> 居 中（center 居中; right 右对齐; left 左对齐）
13
2.网页的基本元素
2.2 网页中的图像使用
1. 网页中加入图像
使用标记<IMG> 格式为：<IMG src=”图像文件名” alt=”图像文
格式为： <OL type=”1,A,a,i,I”> 或 <LI type=”1,A,a,i,I”>
说明： ①省略 type 属性时自动设定为阿拉伯数字。 ②<OL type=””>的作用范围为整个标记范围。 ③<LI type=””>的作用范围是当前项(行)。
20
2.网页的基本元素
3）设定起始序号
1）标记的功能
HTML标记的功能是，标记文件结构，设定文字、 图像、表格、表单等在浏览器上的显示风格和位 置，嵌入脚本，实现动态网页及多媒体等。
1
1.HTML概述
2）标记的构成
标记是由符号<…>、</…>和括在其中的命令字 符串组成。标记有双标记和单标记两种。
双标记包括开始标记和结束标记，必须成对出现。 例如，<HTML>、</HTML>是文件的开始标记和 结束标记；<BODY>、</BODY>是网页内容的开 始和结束标记。单标记只有开始标记而没有结束 标记。例如，标尺线标记<HR>只有开始标记而没 有结束标记。另外，有的标记例如<P>（分段标 记）可以写为双标记<P>、</P>，也可以写为单 标记<P>。
21
2.网页的基本元素
【例2-2】设定序号的种类
<BIG> 大字 <H3>HTML入门</H3> <OL type=A> <LI>WWW <LI>Browser <LI type=I>HTML <LI>网页 </OL> <EM>HTML案例教程</EM> 斜体 <OL type=a> <LI>WWW网页 <LI>网页文本的布局 <LI>在网页中插入图像 <LI type=i>列表 <LI>表格 </OL>
9
2.网页的基本元素
2. 文字大小和颜色
1）使用<FONT>标记
使用<FONT>标记的size属性可以设定一段文章、 一个语句、一个单词的文字大小。
格式为：<FONT size=数字>一段文章、一个语 句、一个单词</FONT>
<FONT>标记的color属性设定一段文章、一个语 句、一个单词的文字颜色。
17
2.网页的基本元素
1.无序列表
建立无序列表可以使用标记<UL>和项目标记 <LI>;
格式为：
<UL> <LI>项目 <LI>项目 …
</UL>
<UL> <LI>WWW <LI>Browser <LI>HTML <LI>Home Page
</UL> 注：无序列表可以嵌套
18
2.网页的基本元素
有序列表的序号可以从任意数字开始。方法是， 在<OL>标记内使用start属性或在<LI>标记内加 入value属性。
格式为： <OL start=x> <LI value=”x”>
其中，x为任意整数。 注意，<OL start=x>的作用域为当前<OL>标记，
<LI value=”x”>的作用域为从当前项开始直到当 前的</OL>标记为止的各项。
<P align=”center”>文本或图像</P> 或 <Hn align=”center”>文本或图像</Hn> （n=1,2,3,4,5,6） 或 <CENTER>文本或图像 </CENTER> （center 居中; right 右对齐; left 左对齐）
2）<DIV>标记
当要在许多段落中设置对齐方式时，常使用 <DIV>（层）标记。
11
2.网页的基本元素
3）标尺线
标尺线标记<HR>在前、后两个段落之间定义一 条标尺线。<HR>标记中的width属性用来控制 标尺线的长度。
例如，<HR width=50> 线长为50像素宽 <HR width=50%> 线长为屏幕宽度的50%
<HR>标记的size属性控制标尺线的粗细； noshade属性将标尺线设置为黑色；align属性指 定标尺线的位置。
格式为：<FONT color=”颜色”>一段文章、一 个语句、一个单词</FONT>
例如，<FONT color=”#FFFFFF”>文字段颜 色为白色</FONT> 或 <FONT color=”red”>文字段颜色为红 色</FONT>
10
2.网页的基本元素
2）使用<BODY>标记的text属性
标记<A>的常用属性：Href : 定义一个URL，作 为有效的链接资源的地址。Name :指定当前文 档内的一个字符串作为链接时的位置名称。 Type :指定特定内容的类型。
23
2.网页的基本元素
注意，依链接资源存放位置不同，链接可分为 全局链接和局部链接。如果资源文件存放在服 务器自己的目录中，称为局部链接；与本服务 器以外文件的链接称全局链接。在全局链接中， http写入的URL称为绝对路径。
属性是用来修饰说明标记的，放在开始标记内。 例如颜色、对齐方式、高度和宽度等。各属性间 以空格分隔。
3
1.HTML概述
标记的常用属性如下：
a）对齐属性:align （left 左对齐（默认）、 center 居中对齐、right 右对齐、justify 两端对 齐）
b) 范围属性 （width=像素值或百分比 对象宽 度; height=像素值或百分比 对象高度）
2
1.HTML概述
3）标记的表示方法
HTML的标记有下列3种表示方法： a）<标记名>文本</标记名> b）<标记名 属性名1=”值1” 属性名2=”值2” …> 文本</标记名> c）<标记名>：仅用于一些特殊的标记。例如， <BR>表示强制换行，它没有与之对应的</BR>。
4）标记的属性
1.HTML概述
1.1 简介
HTML即超文本标记语言。所谓标记语言是指用标 记进行编辑作业的语言，通过标记指定文本或其他 对象（如图像、声音等）的表示格式，从而制作成 超文本文件。
标记是描述HTML文件结构的标识符。它规定了 HTML文件的逻辑结构，并且控制网页的显示方式。 HTML的标记不区分大小写，例如<HTML>和 <html>等价。
16
2.网页的基本元素
2.3 网页中的列表使用
在网页中使用列表，可以清楚地看到定义顺序、 信息排序及信息的相对重要性。
HTML提供了丰富的列表元素，用于在HTML文 档中建立列表。
列表中并列的信息(数据)称为项。项前可以添 加符号或序号，也可以各项并列而不加任何记 号。带序号的列表称为有序列表，带符号的列 表称为无序列表，各项并列而不加任何记号的 列表称为定义列表。
<BODY>标记中的text属性可以设定整个网页文 字的颜色，格式为：<BODY text=”颜色”>
例如，<BODY text=”#FF0000”>
3.换行和分段
1）强制改行
强制改行使用标记<BR>，位于行的末尾，无结 束标记。
2）段落
段落标记<P>用于分段，位于前段的末尾，并使 前段与后段之间加一行空白。段落标记<P>可以 省略结束标记。
<HTML><BODY> <H1 align="center">软件学院教授简介</H1> <HR size=4 color="#FF00FF"> 定义一条标尺线 <H1>张光明教授</H1><P> 张光明教授，男，1940 年10月诞生于河北省石家庄市。 <H2>张光明教授研究方向</H2><P> <H3>张光明教授研究成果</H3><P> </BODY></HTML>
</BIG>
22
2.网页的基本元素
2.4 超文本链接
浏览Web页时，我们能够快捷地从一个Web网 页跳到另一个相关的Web网页，就是在这些文 件之间建立了超文本链接。
1.创建网பைடு நூலகம்间的链接
建立超文本链接语法格式为: <A href=“URL”>文本或图像</A>
注意，必须使用结束标记</A>。href意为超文 本引用，URL是一个有效的链接资源的地址， “文本或图像”是在浏览器上显示的热点信息。
15
2.网页的基本元素
3.图像和文本布局
图像和文本混排时，图像和文本在垂直方向的对 齐及相互间的左右位置关系使用align属性。
格式为: 文本<IMG src=”图像文件名” align=” 位置参数”>文本
其中，位置参数可以是：top(顶对齐)、 middle(中央对齐)、bottom(底边对齐)、left(图 像在文本左边)和right(图像在文本右边)。