当前位置:
文档之家› HTML网页设计基础知识学习
HTML网页设计基础知识学习
11
2.网页的基本元素
3)标尺线
标尺线标记<HR>在前、后两个段落之间定义一 条标尺线。<HR>标记中的width属性用来控制 标尺线的长度。
例如,<HR width=50> 线长为50像素宽 <HR width=50%> 线长为屏幕宽度的50%
<HR>标记的size属性控制标尺线的粗细; noshade属性将标尺线设置为黑色;align属性指 定标尺线的位置。
16
2.网页的基本元素
2.3 网页中的列表使用
在网页中使用列表,可以清楚地看到定义顺序、 信息排序及信息的相对重要性。
HTML提供了丰富的列表元素,用于在HTML文 档中建立列表。
列表中并列的信息(数据)称为项。项前可以添 加符号或序号,也可以各项并列而不加任何记 号。带序号的列表称为有序列表,带符号的列 表称为无序列表,各项并列而不加任何记号的 列表称为定义列表。
格式为: <OL type=”1,A,a,i,I”> 或 <LI type=”1,A,a,i,I”>
说明: ①省略 type 属性时自动设定为阿拉伯数字。 ②<OL type=””>的作用范围为整个标记范围。 ③<LI type=””>的作用范围是当前项(行)。
20
2.网页的基本元素
3)设定起始序号
2
1.HTML概述
3)标记的表示方法
HTML的标记有下列3种表示方法: a)<标记名>文本</标记名> b)<标记名 属性名1=”值1” 属性名2=”值2” …> 文本</标记名> c)<标记名>:仅用于一些特殊的标记。例如, <BR>表示强制换行,它没有与之对应的&否居中及各级标题的 设置,文字字体及颜色的设定,文章分段及段 落的风格,页面的整体布局等,都是在网页设 计中必须考虑的问题。
1. 标题
<Hn>标题</Hn> 标记中的n值可取1~6的整数,取1时文字最大,
取6时最小,默认为<H6>。
8
2.网页的基本元素
【例2-1】<Hn>标记的应用
1)标记的功能
HTML标记的功能是,标记文件结构,设定文字、 图像、表格、表单等在浏览器上的显示风格和位 置,嵌入脚本,实现动态网页及多媒体等。
1
1.HTML概述
2)标记的构成
标记是由符号<…>、</…>和括在其中的命令字 符串组成。标记有双标记和单标记两种。
双标记包括开始标记和结束标记,必须成对出现。 例如,<HTML>、</HTML>是文件的开始标记和 结束标记;<BODY>、</BODY>是网页内容的开 始和结束标记。单标记只有开始标记而没有结束 标记。例如,标尺线标记<HR>只有开始标记而没 有结束标记。另外,有的标记例如<P>(分段标 记)可以写为双标记<P>、</P>,也可以写为单 标记<P>。
c)色彩属性 ( color=#RRGGBB 前景色 bgcolor=#RRGGBB 背景色)
其中,颜色值可以是英文颜色名或十六进制的颜 色值。
4
5
1.HTML概述
1.2 HTML文件结构
6
1.HTML概述
<BODY>标记中可以有以下常用属性: ①background — 设置网页背景图案。 ②bgcolor — 设置网页背景色。默认为白色。 ③text — 设置文本颜色。默认为黑色。 ④link — 设置尚未被访问过的超文本链接的颜 色,默认为蓝色。 ⑤vlink — 设置已被访问过的超文本链接的颜色, 默认为紫色。
有序列表的序号可以从任意数字开始。方法是, 在<OL>标记内使用start属性或在<LI>标记内加 入value属性。
格式为: <OL start=x> <LI value=”x”>
其中,x为任意整数。 注意,<OL start=x>的作用域为当前<OL>标记,
<LI value=”x”>的作用域为从当前项开始直到当 前的</OL>标记为止的各项。
格式为:<FONT color=”颜色”>一段文章、一 个语句、一个单词</FONT>
例如,<FONT color=”#FFFFFF”>文字段颜 色为白色</FONT> 或 <FONT color=”red”>文字段颜色为红 色</FONT>
10
2.网页的基本元素
2)使用<BODY>标记的text属性
</BIG>
22
2.网页的基本元素
2.4 超文本链接
浏览Web页时,我们能够快捷地从一个Web网 页跳到另一个相关的Web网页,就是在这些文 件之间建立了超文本链接。
1.创建网页间的链接
建立超文本链接语法格式为: <A href=“URL”>文本或图像</A>
注意,必须使用结束标记</A>。href意为超文 本引用,URL是一个有效的链接资源的地址, “文本或图像”是在浏览器上显示的热点信息。
17
2.网页的基本元素
1.无序列表
建立无序列表可以使用标记<UL>和项目标记 <LI>;
格式为:
<UL> <LI>项目 <LI>项目 …
</UL>
<UL> <LI>WWW <LI>Browser <LI>HTML <LI>Home Page
</UL> 注:无序列表可以嵌套
18
2.网页的基本元素
例如:<HR align=”right”> 右对齐 <HR align=”left”> 左对齐 <HR align=”center”> 居中(默认) <HR>的color属性控制标尺线的颜色。如<HR
color=”颜色”>
12
2.网页的基本元素
4.文本(或图像)布局
1)对齐方式
1.HTML概述
1.1 简介
HTML即超文本标记语言。所谓标记语言是指用标 记进行编辑作业的语言,通过标记指定文本或其他 对象(如图像、声音等)的表示格式,从而制作成 超文本文件。
标记是描述HTML文件结构的标识符。它规定了 HTML文件的逻辑结构,并且控制网页的显示方式。 HTML的标记不区分大小写,例如<HTML>和 <html>等价。
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%>
<BODY>标记中的text属性可以设定整个网页文 字的颜色,格式为:<BODY text=”颜色”>
例如,<BODY text=”#FF0000”>
3.换行和分段
1)强制改行
强制改行使用标记<BR>,位于行的末尾,无结 束标记。
2)段落
段落标记<P>用于分段,位于前段的末尾,并使 前段与后段之间加一行空白。段落标记<P>可以 省略结束标记。
例如, <A href=“”> 热点文本</A>
文件之间的局部链接有下面4种情况: (1)链接同一目录内的文件。 (2)链接下一级目录内的文件。 (3)链接上一级目录内的文件。 (4)链接同级目录内的文件。
<HTML><BODY> <H1 align="center">软件学院教授简介</H1> <HR size=4 color="#FF00FF"> 定义一条标尺线 <H1>张光明教授</H1><P> 张光明教授,男,1940 年10月诞生于河北省石家庄市。 <H2>张光明教授研究方向</H2><P> <H3>张光明教授研究成果</H3><P> </BODY></HTML>
本性说明” longdesc=”xxx.htm”> 其中,“图像文件名”可以用绝对路径也可以用
相对路径,文件可以是gif、jpg或png类型。 “图像文本性说明”用在不能显示图像的浏览器,
或浏览器显示图像时间太长时先显示此文字内容。 “xxx.htm”指明关于图的详细说明以补充alt属
性的简单说明。
<P align=”center”>文本或图像</P> 或 <Hn align=”center”>文本或图像</Hn> (n=1,2,3,4,5,6) 或 <CENTER>文本或图像 </CENTER> (center 居中; right 右对齐; left 左对齐)