HTML基本结构与标记Word文件下载.docx

HTML基本结构与标记Word文件下载.docx

《HTML基本结构与标记Word文件下载.docx》由会员分享，可在线阅读，更多相关《HTML基本结构与标记Word文件下载.docx（21页珍藏版）》请在冰豆网上搜索。

单一型,无设置值的。

如：

br>

标记名称属性=”属性值”>

单一型，有设置值的。

hrwidth=”80%”>

/标记名称>

对称型，无设置值。

对称型，有设置值。

bodybgcolor=”red”>

<

fontsize=”7”>

/font>

3最常用的控制标记

（1）.跳行<

格式：

无属性设置

（2）.段落<

p>

palign=”排列方式”>

/p>

属性名称属性值说明

alignleft往左靠（默认）

center往中靠

right往右靠

（3）.水平直线<

hr>

size像素绝对设置，以数字表示，属性值越大，线越粗

百分比相对设置，以%表示，属性值越大，线越粗

width像素绝对设置，长度不会应视窗的改变而改变

百分比相对设置，长度会随着视窗宽度而改变

noshade实体线

（4）.向中对齐<

center>

（被废弃的标签）

/center>

（5）.背景色与文字设置

bodybgcolor=”背景色”text=”文字颜色”>

整体页面的边距，行距

<

bodyleftmargin=”像素”topmargin=”像素”>

（6）.标题文字设置

h1>

/h1>

h2>

/h2>

h3>

/h3>

h4>

/h4>

h5>

/h5>

h6>

/h6>

属性名称属性值说明

alignleft靠左

center靠中

right靠右

（7）.特殊字符设置

lt;

>

gt;

&

amp;

“quot;

（8）.在HTML备注

!

--…-->

（9）.实体字符控制标记

1.<

b>

/b>

粗

2.<

i>

/i>

斜

3.<

s>

/s>

删

4.<

u>

/u>

下划

5.<

tt>

/tt>

电报

6.<

sub>

/sub>

下标

7.<

sup>

/sup>

上标

（10）.语意字符控制

address>

/address>

地址

big>

/big>

大字

del>

/del>

删除

ins>

...<

/ins>

修改

5.<

samll>

/small>

小字

strong>

/strong>

加强语气（加粗）

7.<

em>

/em>

加强语气（倾斜）

（11）.<

font>

字体控制（被废弃的标签）

格式：

size0-7字体大小

color英文或十六颜色

face字体字体

（12）.格式化

pre>

/pre>

让书写的文字格式化！

（13）.引用文本

格式：

blockquote>

/blockquote>

属性名称属性值说明

citeurl被引用的地址

2列表控制标记

1无序号条例式清单<

ul>

与<

li>

格式:

/li>

/ul>

功能:

<

无序条列清单的开始.

<

表示结束.

表示一个项目.

<

的属性

属性名称属性值说明

typedise实心圆（默认值）

circle空心圆

square实心方块

2有序号条例式清单<

ol>

/ol>

有序条列清单的开始.

type1表示以1,2,3,4来表示

a表示以a,b,c,d来表示

A表示以A,B,C,D来表示

i表示以i,ii,iii来表示

I表示以I,II,III来表示

3无序列表和有序列表的结合应用

格式:

<

.....

<

<

.....

4叙述式清单（定义列表）

格式:

dl>

<

dt>

/dt>

dd>

/dd>

/dl>

功能:

叙述清单的开始

表示一个项目

表示一个项目下的更详细的内容

3表格

在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性页特别多。

1表格的基本格式

table>

tr>

…

<

th>

…<

/th>

/tr>

td>

/td>

/table>

用来声明表格开始与结束.

用来设置表格的行.

用来设置标题栏位.

用来设置数据栏位.

2<

标签下的属性

属性名称属性值说明

border像素设置表格的边线

cellspacing像素绝对设置,存储格框线宽度

百分比相对设置,存储格框线宽度

cellpadding像素绝对设置,数据与框线的距离

百分比相对设置,数据与框线的距离

width像素绝对设置,像素表示表格宽度

百分比相对设置,百分比表表格宽度

height像素绝对设置,像素表示表格宽度

百分比绝对设置,百分比表表格宽度

alignleft表格往左靠（默认）

center表格往中靠

right表格网右靠

bgcolor英文/十六表格的背景颜色

backgroundURL表格的背景图片

summary字符串用来描述表格数据说明

bordercolor英文/十六边框的颜色

bordercolorlight同上边框的亮色

bordercolordark同上边框的暗色

3<

标签下的边框设置

属性名称属性值说明

framevoid不要显现表格的边线

above只要显现出表格的上边线

below只显现出表格的下边线

hsides只显示表格的上下边线

vsides只显现表格的左右边线

lhs只显现表格的左边线

rhs只显现表格的右边线border/box会显现出表格的所有边线

rulesrows只显示出横行的格框线

cols只显示出直行的格框线

all显示全部格框线

groups表示列组合水平部分

none不显示任何格框线

4<

标签下的常用属性

属性名称属性值说明

width像素绝对设置,以像素值设置宽百分比相对设置,以百分比设置宽

height像素绝对设置,以像素值设置高

百分比相对设置,以百分比设置宽

bgcolor英文/十六数据栏的颜色设置

align（水平方向）left数据靠左

center数据靠中

right数据靠右

valign（垂直方向）top数据靠上

middle数据靠中

bottom数据靠下

nowrap无在单元格中换行

5拆分与合并单元格

colspan数字向两边扩展栏位

rowspan数字向下扩展栏位

6表格的结构化、直列化、标题

（1）.结构化格式：

<

thead>

……<

/thead>

--------表头区

tbody>

/tbody>

--------表体区

………………………

tfoot>

/tfoot>

--------表尾区

（2）.直列化格式：

colgroup>

….<

/colgroup>

alignleft靠左

center靠中

right靠右

valigntop靠上

middle靠中

bottom靠下

span数字直列数目

width像素/百分比宽度

个别直列设置

格式:

col>

功能完全和<

一样.

第2章.表格的标题：

caption>

/caption>

下的属性值有:

aligntop标题在表格上方

bottom标题在表格下方

7嵌套表格的应用:

看实例.

4图像

1背景图案的设置

bodybackground=”URL”>

2将图片插入到网页中去

imgsrc="

URL"

将图片插入到网页中去,单一标签

img>

下的属性

属性名称属性值说明

srcURL图片的路径

图片的注解

alt字符串给图片做注解

图象大小的设置

width像素绝对设置,宽

百分比相对设置,宽

height像素绝对设置,高

百分比相对设置,高

图象边框的设置

border数字图象边框

文字图象的排列

alignleft图象靠左,文字靠右

right图片靠右,文字靠左

top文字往上靠

middle文字靠中

bottom文字靠下

空隙的设置

vspace像素垂直上下两端与物件的距离

hspace像素水平左右两段与物件的距离

3用图像作为超链接

ahref="

/a>

注意点:

边框的问题.

4地图索引

mapname="

图象名称"

id="

areashape="

选取区块的形状"

coords="

坐标"

href="

alt="

文字说明"

/map>

USEMAP="

#图象名称"

map>

声明整张图使用地图链接方式进行连接.

name,id指此图的名称.

area>

表示我们所要链接其中一点的区快

shape表示我们所选择的形状,如:

rect矩形circle圆poly多边形

coords表示地图的坐标位置!

5切片索引

使用Firework来进行!

用表格进行定位!

6为网站添加图标

linkrel="

shortcuticon"

favicon.ico"

type="

image/x-icon"

5超链接

超链接也叫URL中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。

1超链接的基本格式

scheme:

//host[:

post]/path/filename

scheme指的是http,ftp,file,mailto,news,gopher,telnet七种

host指的是IP地址或计算机名称

post指的是服务器端口

path指的是文件路径

filename指的是文件名

ahref=scheme:

post]/path/filename>

2超链接的种类

一般常用的分为四种:

1.http

声明<

ahref=

2.file

声明<

ahref=file:

///e/images/pic.jpg>

图片<

3.ftp

ahref=ftp:

//192.168.4.21/>

进入<

4.mailto<

ahref=mailto:

bnbbs@>

E-MAIL<

3相对链接和绝对链接

1.index.htm

2.page/index.htm

3.page/top/index.htm

4.../index.htm

5.../../index.htm

6.../page/index.htm

4书签的链接

a>

属性名称属性值说明name字符串设置超链接的标记

基本格式：

瞄点<

aname=”音乐”>

链接点<

ahref=”#音乐”>

链接到别的网页的书签项目：

链接点<

ahref=”index.htm#音乐”>

5超链接事件

LINK颜色的设置

基本格式：

bodylink=”颜色”alink=”颜色”vlink=”颜色”>

link超链接尚被选中的文字

alink超链接点选但未被放开的颜色

vlink超链接已被点选过的颜色

6表单

表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。

1表单的功能结构：

主标记结构：

from>

/from>

属性值说明

name字符串给这个表单起个名字

methodget/post表单的传输方式

actionurl传输目标

2文本栏、密码栏、隐藏栏

文本栏：

inputtype=”text”name=”栏位名称”value=”栏位内定值”size=”栏位显示宽度”maxlength=”栏位数据输入最大长度”readonly=”readonly”>

密码栏：

inputtype=”password”name=”栏位名称”value=”栏位内定值”size=”栏位显示宽度”maxlength=”栏位数据输入最大长度”readonly=”readonly”>

隐藏性栏位：

inputtype=”hidden”name=”栏位名称”value=”栏位值”>

3复选栏、单选栏

多重勾选栏位：

inputtype=”checkbox”name=”栏位名称”value=”内定值”checked=”checked”disabled=”disabled”>

单选栏位:

inputtype=”radio”name=”栏位名称”value=”内定值”checked=”checked”disabled=”disabled”>

4窗体栏位、区块栏位

窗体选项栏位设置:

selectname=”栏位名称”size=”数字”>

optionvalue=”选项值”selected=”selected”>

optionvalue=”选项值”>

/select>

//分组<

optgrouplabel="

分组名称"

/optgroup>

//多选multiple

文字区块的设置:

textareacols=”设置长度”rows=”设置宽度”>

………

/textarea>

5按钮、图像按钮

按钮设置:

inputtype=”submit”value=”按钮中显示的文字”>

inputtype=”reset”value=”按钮中显示的文字”>

按钮图像:

buttonname=”栏位名称”type=”图象形态”>

imgsrc=”URL”>

/button>

图像按钮:

inputtype="

image"

src="

url"

文本"

6允许上传文件

上传栏位:

file"

name="

7表单加上外框和标题

外边框:

fieldset>

/fieldset>

标　　题:

legend>

/legend>

7框架

浏览器视窗本身就是一个框架，网页就是显示在该单一的框架内，本章将介绍另一种网页呈现的方式，那就是可将原先单一的框架分割成多个框架，且每个框架中可以分别显示出指定的网页，当然这种框架仍然是结构于单一的视窗中。

1多窗框的基本结构

格式：

frameset>

frame>

/frameset>

功能说明:

用来设置多窗框结构的声明

下的属性：

属性名称属性值说明

cols像素设置直排的多窗框环境

百分比同上