html课件.docx

html课件.docx

《html课件.docx》由会员分享，可在线阅读，更多相关《html课件.docx（19页珍藏版）》请在冰豆网上搜索。

html课件

1.编辑HTML的工具：

1.记事本2.Office-frontpage3.DW4.mse

2.HTML的文件结构

文件的开始

文件的头部开始

。

。

。

。

标题的结束

。

。

。

头部的结束

文件的主体开始

。

。

。

〈/body>文件的主体结束

文件的结束

注意的事项：

“<”和“>”任何标记的开始和结束；标记和标记之间可以嵌套；源代码中不区分大小写；任何空格和回车在源代码中不起作用；

如果希望增加文件的可读性，可以加以注释：

--………..-->

3.html主体标记……

4.1.text改变整个页面的默认文字的颜色在没有对文字进行单独定义颜色时候，该属性对整个页面中所有的文字产生作用格式：

color-value=#******或者颜色的名称（英文）

2.背景颜色属性bgcolor改变整个页面的背景颜色格式：

color-value=#******或者颜色的名称（英文）

3.background页面的背景图

4.bgproperties背景图像固定属性

5.上边距属性：

内容和浏览器上部边矿的距离

6．左边距：

内容和浏览器左侧边矿的距离

5、1.标题文字＜h#＞..........＜/h#＞#=1~6；h1为最大字，h6为最小字

属性有：

对齐属性

2.文字的修饰标记：

粗体标记＜b＞..........＜/b＞……..

斜体标记＜i＞..........＜/i＞….…..

上标标记^…..

下标标记_……

大字号标记….

小字号标记…

下划线标记….

删除线标记….

地址文字标记

3．字体标记

字体属性face…….

字号属性size:

……#=1~7

颜色属性color:

…..

6、段落标记

1、段落标记:

……

2、段落标记的对齐属性:

……

3、换行标记：

又叫紧凑换行显示

4、居中标记：

7、水平线标记

1、插入水平线

2、水平线宽度属性默认的宽度100%

3、水平线高度属性

4、水平线颜色属性

5、水平线去掉阴影属性默认的水平线是空心立体的效果，该属性将其设置为实心并且不带阴影的水平线

6、水平线排列（对齐）属性align

8、滚动文字

1、滚动文字标记:

…….

2滚动方向属性direction:

…….

3、滚动方式属性behavior:

…….

Scroll---------循环往复；

slide-------只进行一次滚动；

alternate------交替进行滚动

4、滚动范围属性………..

5、滚动背景颜色属性bgcolor:

…….

6、滚动速度属性scrollamount:

…….

7、滚动延迟属性scrolldelay:

…….设置每一次滚动的间隔产生一段时间的延迟

8、滚动循环属性loop:

…….

9、建立列表

1）有序列表

……..

1. 项目1

2. 项目2

3. 项目3

4. 项目4

5. 项目5

6. 项目6

类型属性

起始属性注：

value=数值（阿拉伯数字）

2）无序列表各个项目没有顺序，使用一个项目符号作为每个项目的前缀

• 项目1

• 项目2

• 项目3

• 项目4

类型属性

3、定义列表标记

:

两个层次的列表，用于解释名词的定义，名词为第一层，解释为第二层，并且不包含任何项目符号。

名词1

解释1

解释11

解释111

名词2

解释2

解释22

解释222

名词3

解释3

名词4

解释4

名词4

解释5

4\无序和有序的嵌套

10、超联接

（1）路径

1）、绝对路径

ftp:

//212.11.13.56

2）、相对路径news/index.html

适用于内部联结，

使用方法：

a如果联结到同一目录下的文件，则只需要输入要联结文档的名称

b如果要联结到下一级目录中的文件，则先输入目录名，再加上“/”，输入文件名：

aaa/8-6.html

c如果联结到上一级目录的文件，先输入“。

。

/”，在输入目录、文件名

3）、根路径/website/news/index.html

1、联结的种类

内部和外部

2、联接标记

属性：

href指定联接地址

name给联接命名

title给联接提示文字

target指定联接的目标窗口

accesskey联接热键

3、设定联接的目录窗口

联接文字

value:

_parent在上一级窗口中打开（框架页面）

_blank在新窗口打开

_self在同一窗口中打开，一般不用设置

_top在浏览器的整个窗口打开，不考虑任何框架

9、路径

1）、绝对路径：

为文件提供完整的路径利用于各种协议：

htttp:

//

ftp:

//telnet:

//

2）相对路径

内部连接：

连接指向的文件是同一站点文件夹之内的文件

外部连接：

连接指向的文件是本站点之外的文件

方法：

A如果连接的页面在同一目录下，则只需要输入连接页面的名称

B如果连接的是下一级目录的文件，先输入目录名，在输入“/”+连接页面的名称

C如果连接的是上一级目录的文件，先输入“../”+目录名+连接页面的名称

10、联结标记

属性：

href------指定联结的地址

target-------指定联结的目标窗口

……

value=_parent在上一级窗口中打开一般使用框架页面时会经常使用

=_blank在新的窗口中打开

=_self在同一窗口中打开

11、外部联结

1）外部站点

新浪网

2）发送Email

a@b.c>文字联结

a@b.c?

subject=content>文字联结

a@b.c?

cc=ducongliang@>文字联结

a@b.c?

bcc=ducongliang@>文字联结

参数：

subject----邮件主题cc------抄送收件人bcc----暗送收件人

3）联结FTP

//61.129.15.100>我的FTP

//>我的FTP

4）联结TELNET

//IP地址或者域名>北京大学BBS

2、）外部联接----联接到外部网站

网易

3）发送电子邮件

ducongliang@>联系我

4）联接ftp站点

//>北京大学FTP站点

5）联接到telnet

//162.105.203.245:

端口号（23）>北京大学bbs站点

11、图片的基本格式

html:

JPEG（*.jpg）和GIF

JPEG:

照片、图片的处理格式

Gif：

256种色彩可以包含多帧动画；适用于：

卡通图形、LOGO、简单动画

12、插入图片

属性：

src=图像的源文件

alt提示文字

widthheight宽度和高度

border边框（只能改变大小不能改变颜色）

vspace垂直边距hspace水平边距

align排列

align=center/middle文字的中间线在图片中间

align=top文字的中间线在图片的上方

align=bottom文字的中间线在图片的底部

align=left图片在文字的左侧align=right图片在文字的右侧

13、制作表格

html中，由三个标记来构成：

表格标记、行标记、单元格标记

标记

描述

……..

表格标记

…..

行标记

…..

单元格标记

1）制作表格

……

…..

……….

…….	…….
…….	…….

2）边框属性border默认下，为0像素

3）宽度和高度属性widthheight

4）边框色属性bordercolor

5）表格的亮边框色属性bordercolorlight可以单独定义左上边框的颜色，也可以定义单元各中右下边框的颜色，把这两个边框叫做亮边框色

6）表格的暗边框色属性bordercolordark可以单独定义右下边框的颜色，也可以定义单元各中左上边框的颜色

7）背景颜色属性bgcolor

8）背景图像background

9）单元格间距属性cellspacing:

单元格与单元格之间的距离

10）单元格边距属性cellpadding:

单元格内容与边框之间的距离

11）表格的水平对齐属性align=left/center/right

12）表格的边框样式属性

frame=above显示上边框=below下边框border显示上下左右便框

hsides显示上下边框vsides显示左右边框lhs显示左边框rhs显示右边框

13）表格的内部边框样式属性

all显示所有内部边框none不显示内部边框cols显示列边框rows显示行边框

14）表格的标题…

表格标题的水平对齐align=center/left/right

表格标题的垂直对齐valign=top/bottom

15）表格的表头居中、加粗

……

…..

……….

…….	…….
…….	…….

16）行标记属性

align行内容的水平对齐left/center/right

valign行内容的垂直对齐top/middle/bottom

bgcolor背景颜色属性

background背景图像属性

bordercolorlight行的亮边框属性

bordercolordark行的暗边框属性

17）单元格属性

align单元格内容的水平对齐left/center/right

valign单元格内容的垂直对齐top/middle/bottom

bgcolor背景颜色属性

background背景图像属性

bordercolorlight单元格的亮边框属性

bordercolordark单元格的暗边框属性

width单元格的宽度

height单元格的高度

18）跨行属性rowspanvalue=跨越的行数

跨列属性colspan

19）表头标记属性

align单元格内容的水平对齐left/center/right

valign单元格内容的垂直对齐top/middle/bottom

bgcolor背景颜色属性

background背景图像属性

bordercolorlight单元格的亮边框属性

bordercolordark单元格的暗边框属性

width单元格的宽度

height单元格的高度

20）表格的结构标记

表首

表主体

表尾

1、表首

2\

3\

21）表格的嵌套

….	….	….
…. …. …. ….	….	….
….	….	….
….	….	….

22）框架结构

作用：

浏览器窗口划分成若干个区域，每个区域可以分别显示不同的网页；完成导航工作

1、框架集标记

注：

在使用了框架集的页面，不存在<ＢＯＤＹ>

2、三种结构　：

上下、左右、嵌套

3、左右分割窗口属性cols

value=像素值/%

4、上下分割窗口属性rows

value=像素值/%

5嵌套结构

6、框架集边框颜色属性bordercolor

框架集边框宽度属性framespacing

7、框架标记

框架页面：

每个框架都有一个显示的页面

1）框架页面的源文件属性src

2）框架名称属性name

3）框架边框显示属性frameborder=0/1

0-----不显示边框

1-----显示边框

4）框架滚动条显示属性scrolling

yes----显示；no-----不显示;auto-----根据实际长度

5）框架尺寸调整属性noresize---禁止改变框架的尺寸大小

6）框架边缘宽度属性marginwidth=value

7）框架边缘高度属性marginheight=value

8）浮动框架

src浮动框架中显示页面源文件的路径

align=left/right/center

frameboder=0/1

scrolling=yes/no/auto

marginwidth=value

marginheight=value

8、框架与链接

target=目标

23、表单：

页面和服务器交互的手段

语法：

…

1）name

2）action定义表单提交的地址

3）method提交的方法

get方法：

表单的内容附加在url地址的后面，不可以超过8192个字符；不具备保密性；

post方法：

把用户在表单中填写的数据包含在表单的主体中，一起传送到服务器的处理程序中，没有字符的限制

4）target

_blank返回的信息在父级浏览器窗口显示

_self返回的信息在当前浏览器窗口显示

24、输入标记

属性type:

1）文字域text

属性：

name文字域的名称

maxlength文字域的最大输入字符数

size文字域的宽度

value文字域的默认值

2）密码域password

name密码域的名称

maxlength密码域的最大输入字符数

size密码域的宽度

3）文件域file

外观：

一个文本框和一个浏览按忸

4）复选框checkbox

5）单选框radio

6）普通按忸button

7）提交按钮submit

8）重置按钮reset

9）图象域image

可以用在提交按钮位置上的图片，图片具有按钮的功能

10）隐藏域hidden

隐藏域在网页中对用户是不可见的，目的：

收集或发送信息，利于被处理表单的程序所使用，用户单机发送按纽时发送表单，隐藏域的信息一起发送到服务器

11）菜单和列表标记

选项1

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载