资源描述

李炎辉xhtml.docx

《李炎辉xhtml.docx》由会员分享，可在线阅读，更多相关《李炎辉xhtml.docx（81页珍藏版）》请在冰点文库上搜索。

李炎辉xhtml.docx

李炎辉xhtml

Xhtml教程

第2章HTML基本结构

本章讲解最基本的HTML元素，也就是创建文档结构所需的元素。

例如：

标题、段落、

页面分隔、注释等等。

2.1HTML的基本结构

-------根控制标记

-------头控制标记

标题-------标题标记

-------头控制标记（尾）

-------网页显示区域

-------根控制标记（尾）

（1）.…根控制标记

开头和结尾成对出现，双标签

（2）.…头控制标记

1.很单纯的文件标题声明2.<meta>控制标记的动态文件转换声明3.<base>超链接网址基准参考点4.Javascript和VBScript程序5.stylesheet可用来设置排版来的声明6.<link>可引用外部文件，如CSS排版样本（3）.<title>…设置浏览器的视窗标题

（4）.…页面可见内容

2.2HTML控制标记的格式

（1）.<标记名称>

单一型,无设置值的。

如：

（2）.<标记名称属性=”属性值”>

单一型，有设置值的。

如：

（3）.<标记名称>…

对称型，无设置值。

如：

…

（4）.<标记名称属性=”属性值”>…

对称型，有设置值。

如：

…

2.3最常用的控制标记

（1）.跳行

格式：

无属性设置

（2）.段落

格式：

…

属性名称属性值说明

alignleft往左靠（默认）

center往中靠

right往右靠

（3）.水平直线

格式：

属性名称属性值说明

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

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

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

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

noshade实体线

color颜色

（4）.向中对齐

（被废弃的标签）

格式：

…

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

格式：

整体页面的边距，行距

（6）.标题文字设置

（10）.语意字符控制

…

地址

2.…大字

3.…删除

4....修改

5.…小字

6.…加强语气（加粗）

7....加强语气（倾斜）

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

格式：

…

属性名称属性值说明

size0-7字体大小

color英文或十六颜色

face字体字体

（12）.格式化

格式：

…

让书写的文字格式化！

（13）.引用文本

格式：

...

属性名称属性值说明

citeurl被引用的地址

格式：

…

属性名称属性值说明

alignleft靠左

center靠中

right靠右

（7）.特殊字符设置

格式：

>gt;

“quot;

（8）.在HTML备注

格式：

--…-->

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

1.…粗

2.…斜

3.…删

4.…下划

5.…电报

6._…下标

7.^…上标

第3章排列清单控制标记

排列清单控制标记可以创建一般的列表、编号列表或加着重号列表，以及定义列表。

还

可以在一种列表中嵌套另一种列表。

对于概括因特网上的内容，列表是非常方便的。

3.2有序号条例式清单

与

格式:

功能:

表示结束.

…

表示一个项目.

属性名称属性值说明

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

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

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

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

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

3.1无序号条例式清单

格式:
- …
- …
- …
- …
功能:
表示结束.
…

的属性
属性名称属性值说明
typedise实心圆（默认值）
circle空心圆
square实心方块

3.3无序列表和有序列表的结合应用
格式:
第4章表格
4.3
标签下的边框设置
属性名称属性值说明
Frame该属性必须在border的属性值不为0的状
态下!
void不要显现表格的边线
above只要显现出表格的上边线
below只显现出表格的下边线
hsides只显示表格的上下边线
vsides只显现表格的左右边线
lhs只显现表格的左边线
rhs只显现表格的右边线
border/box会显现出表格的所有边线
rulesrows只显示出横行的格框线
cols只显示出直行的格框线
all显示全部格框线
groups表示列组合水平部分
none不显示任何格框线
4.1表格的基本格式
格式:
…
… … …
… … …
功能:
…
用来声明表格开始与结束.
…用来设置表格的行.
…用来设置标题栏位.
…用来设置数据栏位.
4.4标签下的常用属性
属性名称属性值说明
width像素绝对设置,以像素值设置宽
百分比相对设置,以百分比设置宽
height像素绝对设置,以像素值设置高
百分比相对设置,以百分比设置宽
bgcolor英文/十六数据栏的颜色设置
align（水平方向）left数据靠左
center数据靠中
right数据靠右
valign（垂直方向）top数据靠上
middle数据靠中
bottom数据靠下
nowrap无在单元格中换行
4.2
标签下的属性
属性名称属性值说明
Border像素设置表格的边线
cellspacing像素绝对设置,存储格框线宽度
百分比相对设置,存储格框线宽度
cellpadding像素绝对设置,数据与框线的距离
百分比相对设置,数据与框线的距离
width像素绝对设置,像素表示表格宽度
百分比相对设置,百分比表表格宽度
height像素绝对设置,像素表示表格高度
百分比绝对设置,百分比表表格高度
alignleft表格往左靠（默认）
center表格往中靠
right表格网右靠
bgcolor英文/十六表格的背景颜色
backgroundURL表格的背景图片
summary即注释字符串用来描述表格数据说明
bordercolor英文/十六边框的颜色
bordercolorlight同上边框的亮色
bordercolordark同上边框的暗色
4.5拆分与合并单元格
属性名称属性值说明
colspan数字向两边扩展栏位
rowspan数字向下扩展栏位

4.6表格的结构化、直列化、标题
（1）.结构化格式：
……--------表头区
……--------表体区
………………………
……--------表尾区
（2）.直列化格式：
….
属性名称属性值说明
alignleft靠左
center靠中
right靠右
valigntop靠上
middle靠中
bottom靠下
span数字直列数目
width像素/百分比宽度
个别直列设置
格式:
功能完全和一样.
（3）.表格的标题：
….
下的属性值有:
属性名称属性值说明
aligntop标题在表格上方
bottom标题在表格下方

第5章图像
5.1背景图案的设置
格式：
5.2将图片插入到网页中去
格式:
5.3用图像作为超链接
格式:
注意点:
边框的问题.
5.4地图索引
格式:
href="URL"alt="文字说明">
声明整张图使用地图链接方式进行连接.
name,id指此图的名称.
表示我们所要链接其中一点的区快
shape表示我们所选择的形状,
如:
rect矩形circle圆poly多边形
coords表示地图的坐标位置!
!
5.5切片索引
使用Firework来进行!
!
用表格进行定位!
!
5.6为网站添加图标
href="favicon.ico"type="image/x-icon">
功能:
将图片插入到网页中去,单一标签
下的属性
属性名称属性值说明
srcURL图片的路径
图片的注解
属性名称属性值说明
alt字符串给图片做注解
图象大小的设置
属性名称属性值说明
width像素绝对设置,宽
百分比相对设置,宽
height像素绝对设置,高
百分比相对设置,高
图象边框的设置
属性名称属性值说明
border数字图象边框
文字图象的排列
属性名称属性值说明
alignleft图象靠左,文字靠右
right图片靠右,文字靠左
top文字往上靠
middle文字靠中
bottom文字靠下
空隙的设置
属性名称属性值说明
vspace像素垂直上下两端与物件的距离
hspace像素水平左右两段与物件的距离

第6章超链接
超链接也叫URL中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL
的地址找到所需的资源。
6.1超链接的基本格式
格式:
scheme:
//host[:
post]/path/filename
scheme指的是http,ftp,file,mailto,news,gopher,telnet七种
host指的是IP地址或计算机名称
post指的是服务器端口
path指的是文件路径
filename指的是文件名
//host[:
post]/path/filename>…
6.2超链接的种类
一般常用的分为四种:
1.http
声明
2.file
声明
///e/images/pic.jpg>图片
3.ftp
声明
//192.168.4.21/>进入
4.mailto
bnbbs@>E-MAIL
6.3相对链接和绝对链接
1.index.htm
2.page/index.htm
3.page/top/index.htm
4.../index.htm
5.../../index.htm
6.../page/index.htm
6.4书签的链接
下的属性
属性名称属性值说明
6.6超链接事件
LINK颜色的设置
基本格式：
alink=”颜色”vlink=”颜色”>
link超链接尚被选中的文字
alink超链接点选但未被放开的颜色
vlink超链接已被点选过的颜色
6.7为链接创建键盘快捷键
accesskey="w"（Alt+w）（Ctrl+w）
6.8为链接设置制表符次序
tabindex="n"
name字符串设置超链接的标记
基本格式：
瞄点…
链接点…
链接到别的网页的书签项目：
基本格式：
瞄点…
链接点…
6.5基准参考点
基本格式：
\”>
第7章表单
表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。
7.1表单的功能结构：
主标记结构：
…
属性值说明
name字符串给这个表单起个名字
methodget/post表单的传输方式
actionurl传输目标
7.2文本栏、密码栏、隐藏栏
文本栏：
宽度”maxlength=”栏位数据输入最大长度”readonly=”readonly”>
密码栏：
显示宽度”maxlength=”栏位数据输入最大长度”readonly=”readonly”>
隐藏性栏位：
7.3复选栏、单选栏
多重勾选栏位：
值”checked=”checked”disabled=”disabled”>
单选栏位:
checked=”checked”disabled=”disabled”>
7.4窗体栏位、区块栏位
窗体选项栏位设置:
…
…
…
//分组
//多选multiple
文字区块的设置:
………
7.5按钮、图像按钮
按钮设置:
按钮图像:
图像按钮:
7.6允许上传文件
上传栏位:
7.7表单加上外框和标题
外边框:
...
标题:
...
7.8元件的次序和快捷键
accesskey="w"（Alt+w）（Ctrl+w）
tabindex="n"
第8章框架
8.1多窗框的基本结构
格式：
功能说明:
用来设置多窗框结构的声明
下的属性：
属性名称属性值说明
cols像素设置直排的多窗框环境
百分比同上
rows像素设置横排的多窗框环境
百分比同上
border像素边框的宽度
framespacing像素页面与页面的边距
属性格式：
下的属性：
属性名称属性值说明
SrcURL链接的页面
noresizetrue允许浏览器自行改变框架大小
false不允许
scrollingyes不管网页内容的大小，都出现滚动条
no不管网页内容的大小，都不现滚动条
auto浏览器自动判断，是否需要滚动条
marginheight像素设置垂直方向，窗体内容与边界的距离
marginwidth像素设置水平方向，窗体内容与边界的距离
frameborder0\1不出现框体边/出现窗体边线
属性格式：
8.2嵌套多窗体设置：
格式：
8.3多框架与超链接
框架式网站的好处就是在同一张页面可以显示多个页面，而且可以跟方便的进行链接。
相关属性说明：
的命名属性：
格式：
超链接
多窗体链接的属性：
属性名称属性值说明
Target_blank打开一个新建的页面
8.4悬浮窗体的设置
格式:
…
功能:
设置悬浮窗框
属性名称属性值说明
height像素/%绝对/相对高度
width像素/%绝对/相对宽度
其余属性除了noresize外,其他都和frameset一样.

第9章多媒体
9.1FLASH动画的插入
使用...标记插入FLASH动画
属性值说明
srcurlflash路径
width像素/百分比flash宽度
height像素/百分比flash高度
wmodewindow使flash自身的矩形窗口来播放
opaque使flash隐藏页面上位于它后面
transparent使flash某一部分透明
使用标记插入flash动画
属性值说明
typeapplication/x-shockwave-flashflash类型
dataurlflash路径
width像素/百分比flash宽度
height像素/百分比flash高度
注意：
必须再使用子标签完成flash插入
属性值说明
name属性flash属性
value值flash值
9.3MP3音频及WMV视频的插入
使用...标记插入FLASH动画
属性值说明
autostarttrue/false自动/非自动播放
loop数字音乐循环的次数
它的前身是

使用标记插入MP3音乐

…	…	…
…	…	…

展开阅读全文