html基础教程1Word文档格式.docx
- 文档编号:18344485
- 上传时间:2022-12-15
- 格式:DOCX
- 页数:34
- 大小:40.59KB
html基础教程1Word文档格式.docx
《html基础教程1Word文档格式.docx》由会员分享,可在线阅读,更多相关《html基础教程1Word文档格式.docx(34页珍藏版)》请在冰豆网上搜索。
title>
/title>
是嵌套在<
头部标记中的,标记之间的文本是文档标题,它被显示在浏览器窗口的标题栏。
标记一般不能省略,标记之间的文本是正文,是在浏览器要显示的页面内容。
上面的这几对标记在文档中都是唯一的,HEAD标记和BODY标记是嵌套在HTML标记中的。
三、HTML的标记与属性:
对于刚刚接触超文本的读者,遇到的最大的障碍就是一些用“<
”和“>
”括起来的句子,我们称它为标记,是用来分割和标记文本的元素,以形成文本的布局、文字的格式及五彩缤纷的画面。
属性是标志里的参数的选项。
HTML的标记分单标记和成对标记两种。
成对标记是由首标记<
标记名>
和尾标记<
/标记名>
组成的,成对标记的作用域只作用于这对标记中的文档。
单独标记的格式<
,单独标记在相应的位置插入元素就可以了,大多数标记都有自己的一些属性,属性要写在始标记内,属性用于进一步改变显示的效果,各属性之间无先后次序,属性是可选的,属性也可以省略而采用默认值;
其格式如下:
标记名字属性1属性2属性3…>
内容<
/标记名字>
属性值可以不用加双引号,但是为了适应XHTML规则,提倡全部对属性值加双引号。
如:
fontcolor="
#ff00ff"
face="
宋体"
size="
30"
字体设置<
/font>
第二章HTML主体标记及属性、颜色的设定
为了使网页绚丽多姿,吸引更多的浏览者阅读,可以给网页添加更多的标记及属性,这是为了对网页中的元素进行修饰、布局。
下面就来逐一介绍这些标记。
一、html的主体标记<
body>
在<
和<
/body>
中放置的是页面中所有的内容,如图片、文字、表格、表单、超链接等设置。
标记有自己的属性,设置<
标记内的属性,可控制整个页面的显示方式。
标记的属性
属 性
描 述
link
设定页面默认的链接颜色
alink
设定鼠标正在单击时的链接颜色
vlink
设定访问后链接文字的颜色
background
设定页面背景图像
bgcolor
设定页面背景颜色
leftmargin
设定页面的左边距
topmargin
设定页面的上边距
bgproperties
设定页面背景图像为固定,不随页面的滚动而滚动
text
设定页面文字的颜色
格式:
bodytext="
#000000"
link="
alink="
vlink="
background="
gifnam.gif"
bgcolor="
leftmargin=3topmargin=2bgproperties="
fixed"
实例:
2-1.html
html>
head>
bady的属性实例<
/head>
bodybgcolor="
#FFFFE7"
text="
#ff0000"
link="
#3300FF"
alink="
#FF00FF"
vlink="
#9900FF"
center>
h2>
设定不同的链接颜色
/h2>
p>
测试body标记<
/p>
ahref="
br/>
/center>
/html>
实例说明:
的属性设定了页面的背景颜色,文字的颜色,链接的颜色为#3300ff,单击的链接颜色为#ff00ff,单击过后的颜色为#9900ff。
对于上面的属性在后面的章节中还会介绍,在这里就不逐一引用了,我们的学习目的主要是掌握标记及属性的使用方法。
二、颜色的设定
颜色值是一个关键字或一个RGB格式的数字。
在网页中用得很多,在此就先介绍一下。
颜色是由"
red"
green"
blue"
三原色组合而成的,在HTML中对颜色的定义是用十六进位的,对于三原色HTML分别给予两个十六进位去定义。
例如:
白色的组成是red=ff,green=ff,blue=ff,RGB值即为ffffff
红色的组成是red=ff,green=00,blue=00,RGB值即为ff0000
黑色的组成是red=00,green=00,blue=00,RGB值即为000000
应用时常在每个RGB值之前加上“#“符号,如:
bgcolor="
#336699"
用英文名字表示颜色时直接写名字。
如bgcolor="
。
第三章文字版面的编辑
3-1换行标记<
br>
换行标记是个单标记,也叫空标记,不包含任和内容,在html文件中的任何位置只要使用了<
标记,该标记之后的内容将显示在下一行。
请看下面的例子:
3-1
无换行标记:
白日依山尽,黄河入海流。
有换行标记:
白日依山尽,<
黄河入海流。
3-2换段落标记<
及属性:
由<
标记所标识的文字,表明是同一个段落的文字。
两个段落间的间距等于连续加了两个换行符,也就是要隔一行空白行。
P>
PALIGN=参数>
其中,ALIGN是<
标记的属性,属性有三个参数left,center,right.这三个参数设置段落文字的左,中,右位置的对齐方式。
实例:
3-2
<
这是<
br/>
第一段。
第二段。
palign="
center"
第三段。
3-3原样显示文字标记<
pre>
要保留原始文字排版的格式,就可以通过<
标记来实现,方法是把制作好的文字排版内容前后分别加上始标记<
/pre>
3-3
PRE>
白日依山尽,
/PRE>
3-4居中对齐标记<
在页面中使用<
标记进行居中显示,<
是成对标记,在需要居中的内容部分开头处加<
结尾处加<
3-4
居中对齐标记<
《送孟浩然之广陵》<
p/>
故人西辞黄鹤楼,烟花三月下扬州。
孤帆远影碧山尽,惟见长江天际流。
3-5水平分隔线标记<
hr>
标记是单独使用的标记,是水平线标记。
通过设置<
标记的属性值,可以控制水平分隔线的样式。
属性
参数
功能
单位
默认值
size
设置水平分隔线的粗细
pixel(像素)
2
width
设置水平分隔线的宽度
pixel(像素)、%
100%
align
Leftcenterright
设置水平分隔线的对齐方式
center
color
设置水平分隔线的颜色
black
noshade
取消水平分隔线的3d阴影
3-5
测试水平分隔线标记<
春晓
hrsize="
1"
width="
20%"
align="
noshadecolor="
春眠不觉晓,<
br>
处处闻啼鸟。
夜来风雨声,<
花落知多少?
3-6特殊字符
在HTML文档中,有些字符没办法直接显示出来,例如?
.使用特殊字符可以将键盘上没有的字符表达出来,而有些HTML文档的特殊字符在键盘上虽然可以得到,但浏览器在解析HTML文当时会报错,例如"
等,为防止代码混淆,必须用一些代码来表示它们。
HTML几种常见特殊字符及其代码表
特殊或专用字符
字符代码
&
lt;
©
copy;
gt;
×
times;
amp;
®
reg;
quot;
空格
nbsp;
3-6
特殊字符<
center/>
&
这是我的e家&
Copyright©
2008中国e家
3-7注释标记
在HTML文档中可以加入相关的注释标记,便于查找和记忆有关的文件内容和标识,这些注释内容并不会在浏览器中显示出来。
注释标记的格式有如下:
!
--注释的内容-->
3-7
--body标记是主体内容-->
赋得古原草送别&
pre代表原样显示排版格式>
离离原上草,
一岁一枯荣。
野火烧不尽,
春风吹又生。
3-8字体属性
3-10-1标题文字标记<
hn>
标记用于设置网页中的标题文字,被设置的文字将以黑体或粗体的方式显示在网页中。
标题标记的格式:
hnalign=参数〉标题内容<
/hn>
说明:
标记是成对出现的,<
标记共分为六级,在<
h1>
...<
/h1>
之间的文字就是第一级标题,是最大最粗的标题;
h6>
/h6>
之间的文字是最后一级,是最小最细的标题文字。
align属性用于设置标题的对齐方式,其参数为left(左),enter(中),right(右)。
标记本身具有换行的作用,标题总是从新的一行开始。
实例3-10-1html
设定各级标题<
h1align="
CENTER"
一级标题。
二级标题。
h3>
三级标题。
/h3>
3-10-2文字格式控制标记<
FONT>
标记用于控制文字的字体,大小和颜色。
控制方式是利用属性设置得以实现的。
FONT标记的属性
使用功能
face
设置文字使用的字体
宋体
设置文字的大小
3
设置文字的颜色
黑色
fontface=值1size=值2color=值3〉文字<
如果用户的系统中没有face属性所指的字体,则将使用默认字体。
size属性的取值为1~7。
也可以用"
+"
或"
-"
来设定字号的相对值。
color属性的值为:
rgb颜色"
#nnnnnn"
或颜色的名称。
3-10-2
fontface="
黑体"
size="
6"
color="
盼望着,盼望着,东风来了,春天脚步近了。
3-10-3特定文字样式标记
在有关文字的显示中,常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。
(1)粗体标记<
b>
:
放在<
与<
/b>
标记之间的文字将以粗体方式显示。
(2)斜体标记<
i>
/i>
标记之间的文字将以斜体方式显示。
(3)下划线标记<
u>
/u>
标记之间的文字将以下划线方式显示。
实例3-10-3
fontcolor="
#FF0000"
+2"
这些文字是粗体的<
这些文字是斜体的<
这些文字带有下划线<
第四章建立超链接
HTML文件中最重要的应用之一就是超链接,超级链接除了可链接文本外,也可链接各种媒体,如声音、图象、动画。
建立超链接的标记为:
A>
…<
/A>
格式为:
AHREF="
URL"
TARGET="
窗口名称"
TITLE="
标题文字"
显示内容<
上述语法格式包含<
标记的以下基本属性:
HREF:
该属性是必选项,用于指定目标端点的URL地址,可以包含一个或多个参数。
具体地,如果是与站点以外页面链接的情况,就为URL;
如果是与站点内页面链接,则为文件名。
TARGET:
该属性是可选项,用于指定一个窗口或框架的名称,目标文档将在该窗口或框架中打开。
如果省略该属性,则目标文档将取代包含该超链接的文档。
TARGET属性的取值既可以是窗口或框架的名称,也可以用“_blank”指定将链接的目标文件加载到未命名的新浏览器窗口中;
用“_parent”指定将链接的目标文件加载到包含链接的父框架页或窗口中,如果包含链接的框架不是嵌套的,则链接的目标文件加载到整个浏览器窗口中;
用“_self”指定将链接的目标文件加载到链接所在的同一框架或窗口中,这是默认值;
用“_top”指定将链接的目标文件加载到整个浏览器窗口中,并由此删除所有框架。
TITLE:
该属性也是可选项,用于指定指向超链接时所显示的标题文字。
4-1链接路径
路径是指从站点根文件夹或当前文件夹到目标文件所经过的路线,可以使用路径来指定超链接中目标端点的位置。
路径有以下几种类型:
绝对路径:
也称为绝对URL,它给出目标文件的完整URL地址,包括传输协议在内。
如果要链接的文件位于外部服务器上,则必须使用绝对路径。
相对路径:
也称为相对URL,是指以当前文档所在位置为起点到目标文档所经过的路径。
若要将当前文档与处在同一文件夹中的另一个文档链接,或者将同一站点中不同文件夹下的文档相互链接,都可以使用相对路径,此时可以省去当前文档与目标文档完整URL中的相同部分,只留下不同部分。
根相对路径:
是指从站点根目录到被链接文件的路径。
使用这种路径是指定站点内文档链接的最好方式。
4-2超链接的应用
1.超链接的形式
按照目标端点的不同,可以将超链接分为以下几种常见形式。
文件超链接:
这种链接的目标端点是一个文件,当然包括各种文件,如页面文件,它可以位于当前网页所在的服务器上,此时可称为“站点内页面的链接”,也可以位于其他服务器,此时可称为“与站点外页面的链接”。
书签超链接:
这种链接的目标端点是网页中的一个位置,通过这种链接可以从当前网页跳转到本页面或其他页面中的指定位置。
E-mail链接:
通过这种链接可以启动电子邮件客户端程序(如Outlook或FoxMail等),并允许访问者向指定的地址发送邮件。
图像超链接:
这种链接是在图像上建立若干个区域称为“链接区”,通过它可以跳转到其他目标端点去。
2.常见链接的创建
(1)创建文件链接
在HTML语言中,可以使用<
标记来创建超链接,基本语法格式如下:
AHREF="
字符串"
TARGET="
TITLE="
文本<
(2)创建书签链接
创建书签链接时,要在页面的某处设置一个位置标记(即所谓书签),并给该位置指定一个名称,以便在同一页面或其他页面中引用。
通过创建书签链接,可以使超链接指向当前页面或其他页面中的指定位置。
若要创建书签链接,首先在页面中为需要跳转的位置命名,即在该位置上放置一个A标记并通过NAME属性为该位置指定一个名称,一般不要在<
标记之间放置任何文字。
例如,可以使用A标记在test.htm页面顶部创建一个书签:
ANAME="
top"
/P>
创建书签后,可以使用A标记来创建指向该书签的超链接。
例如,要在同一个页面中跳转到名为“top”的书签处,可以使用以下HTML代码:
#top"
返回顶部<
若要在其他页面中跳转到该书签,则使用以下HTML代码:
test.htm#top"
跳转到test.htm页的顶部<
(3)创建邮件链接
使用A标记创建邮件链接,该标记的HREF属性应由三个部分组成:
第一部分是电子邮件协议名称mailto,第二部分是电子邮件地址,第三部分是可选的邮件主题,其形式为“subject=主题”。
第一部分与第二部分之间用冒号(:
)分隔,第二部分与第三部分之间用问号(?
)分隔。
mailto:
tzsimple@?
subject=关于动态网站设计"
给我写信<
当访问者在浏览器窗口中单击邮件链接时,将会自动启动电子邮件客户端程序(例如OutlookExpress或FoxMail等),并将指定的主题填入“主题”栏中。
(4)创建图像超链接
图像的超链接与文本超链接差不多,就是将<
AHREF=…>
标记放在图片两端即可。
例如语句:
AHREF=Default.htm>
imgsrc="
dysb.jpg"
/>
当单击dysb.jpg图片时将转向Default.htm网页。
3.示例
超链接主要形式的示例(注:
下面的“…”代表热点,即一般用鼠标指向时,鼠标指针变手形的区域)。
(1)创建指向本地页面的链接
filename.html"
(链接到本地磁盘上同一目录下的页面)
../../filename.html"
(链接到本地磁盘上不同目录下的页面)
(2)创建指向其他服务器的页面链接
http:
//server/path/filename.html"
(链接到Internet上其他服务器上的页面)
(3)创建一个指向页面特定部分的链接
#fragment"
(链接到本页面内的某指定位置)
//server/path/filename.html#fragment"
(链接到其他服务器上页面的某指定位置)
(4)创建一个指向电子邮件的链接
username@domain"
第五章建立列表
在html也面中,合理的使用列表标记可以起到提纲和格式排序文件的作用。
列表分为两类,一是无序列表,一是有序列表,无序列表就是项目各条列间并无顺序关系,纯粹只是利用条列来呈现资料而已,此种无序标记,在各条列前面均有一符号以示区隔。
而有序条列就是指各条列之间是有顺序的,比如从1、2、3…一直延伸下去。
5-1无序列表<
UL>
无序列表使用的一对标记是<
ul>
/ul>
,无序列表指没有进行编号的列表,每一个列表项前使用<
LI>
的属性type有三个选项,这三个选项都必须小写:
disc实心园
circle空心园
square小方块
如果不使用其项目<
li>
的属性值,即默认情况下的<
会加"
实心园"
格式:
litype=disc>
第一项
litype=circle>
第二项
litype=square>
第三项
第四项
示例5-1
无序列表<
默认的无序列表加"
litype="
square"
无序列表square加方块
circle"
无序列表circle加空心园
5-2有序列表<
OL>
有序列表和无序列表的使用格式基本相同,它使用标记<
ol>
/ol>
,每一个列表项前使用<
列表的结果是带有前后顺序之分的编号。
如果插入和删除一个列表项,编号会自动调整。
顺序编号的设置是由<
的两个属性type和start来完成的。
star
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- html 基础教程