网络程序设计HTMLWord文档下载推荐.docx
- 文档编号:22355282
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:16
- 大小:23.59KB
网络程序设计HTMLWord文档下载推荐.docx
《网络程序设计HTMLWord文档下载推荐.docx》由会员分享,可在线阅读,更多相关《网络程序设计HTMLWord文档下载推荐.docx(16页珍藏版)》请在冰豆网上搜索。
4.HTML文件的基本结构
HTML文件是一种纯文本格式的文件,HTML文件包括头部(head)和主体(body)。
文件的基本结构为:
<
HTML>
HEAD>
TITLE>
网页标题<
/TITLE>
/HEAD>
BODY>
网页的内容
/BODY>
/HTML>
①HTML文件以<
开头,以<
结尾。
②<
…<
:
表示这是网页的头部,用来说明文件命名和与文件本身的相关信息。
可以包括网页的标题部分:
标记在HTML文件中不是必须的,如果没有,浏览器也会照常解读文件。
③<
表示网页的主体即正文部分。
④HTML语言并不要求在书写时缩进,但为了程序的易读性,建议网页设计制作者使标记的首尾对齐,内部的内容向右缩进几格。
5.主体标记<
HTML文件主体标记的格式为:
文件主体<
1主体位于头部之后,以<
为开始标记,<
为结束标记。
它定义了网页上显示的主要内容与显示格式,是整个网页的核心,网页中要真正显示的内容都包含在本标记中。
②<
有很多属性,这些属性用于设定网页的总体风格,可以定义页面的背景图像、背景颜色、文字颜色、超文本链接的颜色。
其中常用的属性:
值
说明
Bgcolor
设置网页的背景色。
Text
设置文本的颜色。
background
设置背景图片
Link
设置尚未被访问过的超文本链接的颜色,默认为蓝色。
Vlink
设置已被访问过的超文本链接的颜色,默认为蓝色。
Alink
设置超文本链接在被访问瞬间的颜色,默认为蓝色。
注意:
涉及颜色的属性,取值可以是英文颜色名,也可以用“#”引导的一个十六进制数代码来表示。
名称
英文颜色名
16进制代码
黑色
black
#000000
蓝色
blue
#0000FF
棕色
brown
#A52A2A
青色
cyan
#00FFFF
灰色
gray
#808080
绿色
green
#008000
乳白色
ivory
#FFFFF0
桔黄色
orange
#FFA500
粉红色
pink
#FFC0CB
红色
red
#FF0000
白色
white
#FFFFFF
黄色
yellow
#FFFF00
深红色
crimson
#CD061F
黄绿色
greenyellow
#0B6EFF
水蓝色
dodgerblue
淡紫色
lavender
#DBDBF8
6.注释标记
通常使用“注释”为文中的不同部分加上说明,以方便日后阅读和修改。
注释标记的格式为:
!
--注释内容-->
注释内容不局限于一行,长度也不受限制。
即结束标识符不必与开始标识符在同一行上。
(以下是段落文字标记7~14)
7.标题文字标记
这里的标题是指页面中文本的标题,而不是用<
定义的网页标题,标题格式显示在浏览器窗口内,而不显示在浏览器的标题栏中。
在页面中,标题是一段文字内容的核心,所以总是用加强的效果来表示。
网页中的信息可以分为主要点、次要点,可以通过设置不同大小的标题,为文章增加条理。
标题文字标记的格式为:
Hnalign=对齐方式>
标题文字<
/Hn>
①属性n用来指定标题文字的大小。
n可以取1~6的整数值,取1时文字最大,6时文字最小。
②属性align用来设置标题在页面中的对齐方式,取值有:
left(左对齐)、center(居中)或right(右对齐)。
③在一个标题行中无法使用不同大小的字体。
8.文本文字标记
在网页中为了增强页面的层次,其中的文字可以用不同的大小、字体、字型、颜色。
文本文字标记<
用来设定文字的字体、字号和颜色。
其格式为:
FONTsize=数字face=字体名color=颜色>
被设置的文字<
标记的属性包括:
size、face、color。
①size属性用来设置文字的大小。
数字的取值范围从1~7,size取1时最小,取7时最大。
②face属性用来设置字体。
如黑体、宋体、楷体、隶书、TimesNewRoman等。
当文字为汉字时,格式中的“字体名”可以为:
宋体、幼圆、隶书、楷体、黑体、仿宋等。
当文字为英文时,字体名可以为TimesNewRoman等约50种字体。
其实,这里的字体名字就是在Word的“字体”工具栏中显示的字体名。
2color属性用来设置文字颜色。
思考:
①<
和<
Hn>
标记都可以设置文字的大小,二者有何区别?
标记
对象
用法
文字大小n的取值
字体加粗
一段文章、语句、短语
FONTsize=n>
文字<
n=1~7,取1时最小,7时最大
不自动加粗
标题
文字<
n=1~6,取6时最小,1时最大
自动加粗
另外,当<
中的size取7时,文字比<
H1>
要大。
标记中的text属性和<
标记中的color属性都可以设置文本的颜色?
标记直接作用其后的文字,可在文件中多处设定,使网页中文字的颜色绚丽多彩。
当<
与<
标记同时对文字颜色进行定义时,<
标记优先。
9.字型标记
字型就是文字的风格,如加粗、斜体、带下划线、上标、下标等。
标记格式
B>
受影响的文字<
/B>
加粗
I>
/I>
斜体
U>
/U>
带下划线
TT>
/TT>
标准打印机字体
STRIKE>
/STRIIKE>
带删除线
受影响的<
SUB>
/SUB>
下标
SUP>
/SUP>
上标
BIG>
/BIG>
大字体文本
SMALL>
/SMALL>
小字体文本
10.强制换行、换段标记
强制换行标记的格式为:
BR>
段落标记<
定义一个新段落的开始。
标记不但能使后面的文字换到下一行,还可以使两段之间多一空行。
由于一段的结束意味着新一段的开始,所以使用<
也可省略结束标记。
强制换段标记的格式为:
的属性align用来设置段落的对齐方式,其取值可以为left、center或right,分别表示居左、居中、居右。
缺省时默认为left。
一个强制换段标记<
可以看作是两个强制换行标记<
11.空格标记&
nbsp;
HTML语言忽略多余的空格,最多只空一个空格。
在需要空格的位置,可以用“&
”插入一个空格,或者输入全角中文空格。
12.预排版标记
想一想,如果想让网页显示以下文档效果,我们该怎么用HTML标记设计?
abcdef
hijklm
nopqst
uvwxyz
包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上.HTML方件中的英文空格一般不起作用,但是在预排版标记中空格可以显示出来.
格式:
PRE>
要排版的文本<
/PRE>
13.分区显示标记
分区显示标记可以使文本块或一段文字在网页上:
左对齐、居中和右对齐。
分区显示标记的格式为:
DIValign=left|center|right>
文本或图像<
/DIV>
属性:
position:
指层的定位方式,其值可以是absolute或relative
left和top:
层的左边距与上边距
z-index:
层的叠放顺序
padding:
层内元素与边框的距离
background-color:
层的背景色
14.水平线标记<
HR>
水平线标记的格式为:
HRalign=对齐方式size=横线粗细width=横线长度color=横线颜色noshade>
①属性align设定横线放置的位置,可选择left(居左)、right(居右)或center(居中)。
②属性size设定线条粗细,以像素为单位,默认为2。
③属性width设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。
所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。
所谓相对值,是指长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终填满当前窗口。
④属性color设定线条颜色,默认为黑色。
可以采用颜色的名称。
颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示
⑤属性noshade设定线条为平面显示(没有三维效果),若缺省则有阴影或立体效果。
15.超链接标记
Ahref=地址target=打开窗口方式>
热点<
/A>
①href为超文本引用,它的值为一个URL,是目标资源的有效地址。
在书写URL时要注意,如果资源放在自己的服务器上,可以写相对路径。
否则,应写绝对路径。
②target设定链接被按后结果所要显示的窗口。
常用值:
_blank(或new),_self(默认)。
16.创建指向本页中的链接(书签链接)
要在当前页面内实现超链接,需要定义两个标记:
一个为超链接标记,另一个为书签标记。
Ahref="
#记号名"
>
Aname=“记号名”>
目标文本附近的字符串<
单击热点文本,将跳转到“记号名”开始的文本。
17.图片标记
使用图片标记,可以把一幅图片加入到网页中。
用图片标记还可以设置图片的替代文本、尺寸、布局等属性。
IMGsrc=文件名alt=说明width=xheight=yborder=nalign=对齐方式>
18.用图片作为超链接
图片也可作为热点,单击图片则跳转到被链接的文本或其他文件。
Ahref=地址>
IMGsrc=图片文件名>
19.列表标记
列表(LIST)通常用于列举相关的信息条目,提供一种有组织的易于浏览的阅览格式,以及用于描述一个分布的过程。
无序列表标记
无序列表中每一个表项的前面是项目符号(如●、■等)。
建立无序列表使用<
UL>
标记和<
LI>
表项标记。
ULtype=符号类型>
LItype=符号类型1>
第一个列表项
LItype=符号类型2>
第二个列表项
…
/UL>
①type属性指定每个表项左端的符号类型,取值有:
disc(实心圆点●)、circle(空心圆点○)、square(方块■)
②在<
后指定符号的样式,可设定直到<
;
在<
后指定符号的样式,可以设置从该<
起直到<
标记是单标记。
即一个表项的开始,就是前一个表项的结束。
从浏览器上看,无序列表的特点是,列表项目作为一个整体,与上下段文本间各有一行空白;
表项向右缩进并左对齐,每行前面有项目符号。
有序列表标记
通过带序号的列表可以更清楚地表达信息的顺序。
使用<
OL>
标记可以建立有序列表,表项的标记仍为<
OLtype=符号类型>
表项1
表项2
/OL>
①属性type指定符号的类型见表
取值
符号说明
示例
1
数字(缺省)
1、2、3
A
大写英文字母
A、B、C
a
小写英文字母
a、b、c
I
大写罗马字母
Ⅰ、Ⅱ、Ⅲ
i
小写罗马字母
ⅰ、ⅱ、ⅲ
后指定符号的样式,可设定到<
表项指定新的符号。
③在浏览器中显示时,有序列表整个表项与上下段文本之间各有一行空白;
列表项目向右缩进并左对齐;
各表项前带顺序号。
定义列表标记
用于对列表的条目进行简短说明,包括一系列名词及解释,名词比解释部分凸前,解释部分被视为一长串文字自动换行.
DL>
DT>
定义单词1
DD>
单词1的说明
定义单词2
单词2的说明
/DL>
列表条目用<
引导,列表条目的说明用<
引导.<
都是单标记.
20.表格标记
TABLE>
CAPTION>
表名<
/CAPTION>
TR>
TH>
/TH>
/TR>
TD>
/TD>
/TABLE>
说明:
①<
表格行标记,用来指明表格中一行的开始和结束.
②<
字段名标记,在一行中标识行名.
③<
数据标记,表格内的数据.
21框架标记
框架标记有两个:
框架组标记<
FRAMESET>
/FRAMESET>
和框架标记<
FRAME>
用以划分框架,而每一框架由一个<
标记所标示,<
标记用来声明其中框架页面的内容,并且必须在<
范围中使用。
(见示例)
FRAMESETrows=x1|cols=x2>
FRAMEsrc="
URL"
22.自动刷新页面
自动刷新页面就是页面停留几秒钟后自动指向新网页。
METAhttp-equiv="
Refresh"
content="
秒数;
url=新页面"
①<
META>
标记必须放置在<
...<
中;
②http-equiv属性值设置为“Refresh”时,要求显示URL制定的文件;
③content属性包含两个值:
秒数和URL,它们之间用“;
”分隔。
该链接将在指定的时间后被打开。
22表单标记(<
FORM>
/FORM>
)
●表单标记与动态网站设计是分不开的.
●表单的功能是它可以从客户端浏览器收集信息,并将所收集的信息指定一个处理的方法(ASP、JSP、PHP)。
●表单信息的处理过程:
当单击表单中的提交按钮时,表单中的信息就会上传到服务器中,然后由服务器端的应用程序进行处理,处理后将用户提交的信息存储在服务器端的数据库中,或者将有关信息返回到客户端浏览器。
●表单作为实现用户进行信息交流的主要方式,可以细分成以下两块:
1)FORM标记(表单):
用于指明处理数据的方法。
2)表单域:
提供收集用户信息的方式,如产生文本框还是选择框。
语法格式:
FORMname=“名字”action=“文件”method=“方式”>
插入相应的表单域标记
参数说明:
1name给出表单的名称
2action说明当这个表单提交后,将传送给哪个文件处理。
3method指定表单的提交方式即服务器交换信息时所使用的两种方式:
post和get(有何区别?
常见表单域:
(1)文本域
●单行文本域:
用户输入的信息会原样显示。
inputtype=“text”value=“设置的初始值”name=“文本域的名称”>
●密码文本域:
用户输入的信息会以*形式显示。
inputtype=“password”value=“设置的初始值”name=“文本域名称”>
●多行文本域:
与单行文本域的区别在于,多行文本域可以指定文本框的宽度和高度。
textareacols=“文本框的宽度”rows=“文本框的高度”name=“文本域的名称”>
/textarea>
(2)选择域(让浏览者在固定范围内作出选择)
●单选域:
只允许选取一项
inputtype=“radio”name=“选择域的名称”>
●复选域:
可多项选取
inputtype=“checkbox”name=“选择域的名称”>
注意:
CHECKED属性用法;
同一组radio中,name值相同
(3)按钮域(让浏览者将所有输入的内容采取的一个响应动作,如提交给服务器处理,还是将输入的内容清除后重填)
●提交按钮
inputtype=“submit”value=“确定”name=“按钮域的名称”>
●重置按钮
inputtype=“reset”value=“重置”name=“按钮域的名称”>
(4)菜单域
●下拉菜单
selectname=“菜单名称”>
option>
菜单中第一个值<
/option>
菜单中第二个值<
…
/select>
●滚动菜单:
提供一个带有滚动条的菜单
selectname=“菜单名称”multiplesize=“确定显示选择项个数”>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网络程序设计 HTML