html网页文件标志记,HTML学习-网页主体标记body(二)

网页的主体标记body包括要在浏览器显示处理的所有信息。在网页的主体标记中有很多的属性设置,包括网页的背景设置、文字属性设置和链接设置等。在和标签之间的内容是网页的主要内容,如

使用图像

GIF格式:Graphic Interchange Format的缩写,即图像交换格式。最大优点是可制作动态图像,可以将数张静态文件作为动画帧串联起来,转换成一个动画文件。另一个优点是可以将图像以交错的方式在网页中呈现。

JEPG格式:Joint PhotoGraphic Experts Group的缩写,它是一种图像压缩格式。

PNG格式:Portable Network Graphics的缩写,是一种非破坏性的网页图像文件格式,它提供了将图像文件以最小的方式压缩却又不造成图像失真的技术。

插入图像标签img和属性src

语法为:

%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

用于插入图像,src用于指定图像源文件所在的路径,它是图像必不可少的属性。src参数用来设置文件所在的路径,这一路径可以是相对路径,也可以是绝对路径。

图像的地址可以使用文件和http://关键字作为图像的地址,并且能够用于在网页上载入图像。

图像的提示文字

图像的提示文字有两个作用:当浏览该网页时,如果图像下载完成,将鼠标指针放在该图像上,鼠标指针旁边会出现提示文字;如果图像没有被下载,在图像的位置上就会显示提示文字。

第一个作用语法为:

%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

第二个作用语法为:

%E2%80%9D%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80%E2%80%9C

在该语法中,提示文字的内容可以是中文,也可以是英文。

图像的宽度和高度width、height

语法为:

%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

width和heith属性用来定义图片的高度和宽度。如果

1298542243270959104.htm元素不定义高度和宽度,图片就会按照它的原始尺寸显示。

在该语法中,图像的宽度和高度的单位是像素。宽度和高度值的大小不影响图像的下载速度。

图像的边框border

语法为:

%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

默认情况下,图像是没有边框的,通过border属性可以为图像添加边框线。边框线的宽度可以设置,但是边框线的颜色不可以设置,当图像上没有添加链接的时候,边框的颜色为黑色;当图像上添加了链接时,边框的颜色和链接文字颜色一致,默认为深蓝色。

在该语法中,border的单位是像素,值越大边框越大。

图像的垂直边距vspace

语法为:

%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

垂直边距vspace用来调整图像与文字的垂直边距。单位为像素。

图像的水平间距hspace

语法为:

%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

水平间距hspace用来调整图像与文字的水平间距。单位为像素。

使用vspace和hspace属性会在图像周围对称加入空格。hspace属性在图像两侧加入空格,而vspace属性在图像顶部和底部加入相同的空格。

图像的排列align

语法为:

%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

align属性用来设置图像和文字之间的对齐方式,对齐方式有绝对对齐和相对对齐两种。

绝对对齐只有3种:居中(middle)、居左(left)、居右(right)

align的取值有:

align属性的属性值定义

属性

描述

bottom

图片的底部和当前行的文字底部对齐

top

图片的顶端和当前行的文字顶端对齐

middle

图片水平中线和当前行的文字中线对齐

left

图片左对齐

center

图片水平中线和当前行的文字中线对齐

right

图片右对齐

图像的超链接

图像的超链接

语法为:%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

在该语法中href用来设置图像链接的地址。

当鼠标指针放置在链接的图像上时,鼠标指针会发生相应的变化。

图像热区链接

语法为:

首先要在图像文件中设置映射图像名,在图像的属性中使用标记添加图像要引用的映射图像的名称

%E5%9B%BE%E5%83%8F%E6%96%87%E4%BB%B6%E7%9A%84%E5%9C%B0%E5%9D%80

然后需要定义热区图像以及热区的链接属性如下:

映射图像名称中属性值,可以通过网页绘制图像工具设置。

使用列表

HTML列表一共有三种类型,一种是无序列表,项目符号由几个符号构成;一种是有序列表,项目符合由字母或数字进行排序;一种是定义列表,它用作产生条件和描述的双重列表,可以对列表进行更灵活的定义。

有序列表ol

语法为:

有序列表项

有序列表项

有序列表项

有序列表项

...

在该语法中,和标识标志着有序列表的开始和结束,而

和标记表示这是一个列表项。

有序列表的序号类型type

语法为:

有序列表项

有序列表项

有序列表项

有序列表项

...

type用于改变序号的类型,包括大小写字母、阿拉伯数字和大小写罗马数字。

有序列表的序号类型

type

列表项目的序号类型

1

数字1、2、3、4...

a

小写英文字母a、b、c、d...

A

大写英文字母A、B、C、D...

i

小写罗马字母ⅰ、ⅱ、ⅲ、ⅳ...

大写罗马字母Ⅰ、Ⅱ、Ⅲ、Ⅳ...

第一个

第二个

第三个

f5f806b2e65f50234e3478f7d166541a.png

有序列表的起始数值start

语法为:

有序列表项

有序列表项

有序列表项

有序列表项

...

默认情况下,有序列表的编号是从1开始的,通过start属性可以调整编号的起始值。

在该语法中,起始数值只能是数字,但是同样可以对字母和罗马数字起作用。

第一个

第二个

第三个

42e779090df19c5f5c0850b31165dea3.png

第一个

第二个

第三个

e22a81f0d3dc00dfe4c2af7da7c451ae.png

无序列表

无序列表标识ul

语法为:

有序列表项

有序列表项

有序列表项

有序列表项

...

在该语法中,使用和标记表示这一个无序列表的开始和结束,

则表示一个列表项的开始。在无序列表中可以包含多个列表项。

无序列表的类型type

语法为:

有序列表项

有序列表项

有序列表项

有序列表项

...

默认情况下,无序列表的符号为●,而通过type参数可以调整无序列表的项目符号,避免列表符号的单调。

无序列表的序号类型

type

列表项目的符号

DIsc

默认值,黑色实心圆点项目符号“●”

circle

空心圆环项目符号“○”

square

正方形的项目符号“□”

第一个

第二个

第三个

第一个

第二个

第三个

第一个

第二个

第三个

dc6944d6819d6a5acccfc8693dc75179.png

目录列表标记dir

语法为:

列表项

列表项

列表项

...

目录列表一般用来创建多列的目录列表,它在浏览器中的显示效果与无序列表相同,因为它的功能也可以通过无序列表来实现。

在该语法中,和标志着目录列表的开始和结束。

列表第一个

第二个

第三个

c20f59a24f7ebb34005138a7da4487fc.png

定义列表标记

语法为:

定义条件

定义描述

...

定义列表由两部分组成:定义条件和定义描述。定义列表的全称是definition list。

和标识分别定义了定义列表的开始和结束。

用来指定需要解释的名词,英文全称为definition term;

是具体的解释,英文全称为definition description;

css

css就是Cascading Style Sheets。中文翻译为“层叠样式表”,简称样式表,它是一种制作网页的新技术。

指针的概念

指针是一个特殊的变量,它里面存储的数值被解释成为内存里的一个地址

6d755891c89995c3514a11dccd042152.png

菜单列表标记

语法为:

有序列表项

有序列表项

有序列表项

有序列表项

...

菜单列表主要用于设计单列的菜单列表。菜单列表在浏览器中的显示效果和无序列表是相同的,因为它的功能可以通过无序列表来实现。

列表

第一个

第二个

第三个

a55e34f1825c88c693610573e0d4d894.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值