网络程序设计HTML.docx
《网络程序设计HTML.docx》由会员分享，可在线阅读，更多相关《网络程序设计HTML.docx（16页珍藏版）》请在冰豆网上搜索。
网络程序设计HTML
HTML讲稿
HTML是HyperTextMarkupLanguage（超文本标记语言）的缩写，它是构成Web页面（Page）的主要工具，是用来表示网上信息的符号标记语言。
HTML文件是一种纯文本文件，可以通过浏览器读取HTML文件，并用浏览器内含的语法分析器来解读各种特殊标记。
1．标记（标签、元素）
基本的标记可分为两种：
单一标记（只要一个标记就能完成所要表示的功能）和成对标记（需要两个标记组合才能完成所需功能）
HTML文件由标记和被标记的内容组成。
标记（tag）能产生所需的各种效果。
就像一个排版程序，它将网页的内容排成理想的效果。
这些标记名称大都为相应的英文单词首字母或缩写，如P表示Paragraph（段落）、IMG为Image（图像）的缩写，很好记忆。
各种标记的效果差别很大，但总的表示形式却大同小异，大多数成对出现，格式为：
<标记>受标记影响的内容
说明：
①每个标记都用“<”（小于号）和“>”（大于号）围住，如
，
，以表示这是HTML代码而非普通文本。注意，“<”与标记名之间不能留有空格或其它字符。
②在标记名前加上符号“/”便是其结束标记，表示这种标记内容的结束，如。
标记也有不用结尾的，称之为单标记。
③标记字母大小写皆可，没有限制。
对同一段要标记的内容，可以用多个标记来共同作用，产生一定的效果。
此时，各个标记间的顺序也是任意的。
2.标记的属性
标记只是规定这是什么信息，或是文本，或是图片，但怎样显示或控制这些信息，就需要在标记后面加上相关的属性来表示，每个标记有一系列的属性。
标记要通过属性来制作出各种效果。
格式为：
<标记属性1=属性值属性2=属性值…>受影响的内容
例如字体标记，有属性size和color等。
属性size表示文字的大小，属性color表示文字的颜色。
表示为：
属性示例
需要注意的是：
①并不是所有的标记都有属性，如换行标记就没有。
②根据需要可以用该标记的所有属性，也可以只用需要的几个属性，在使用时，属性之间没有顺序。
多个属性之间用空格隔开。
属性和标记一样，都不区分大小写。
但为了阅读方便，一般用大写字母表示标记，小写字母表示属性。
4.HTML文件的基本结构
HTML文件是一种纯文本格式的文件，HTML文件包括头部（head）和主体（body）。
文件的基本结构为：
网页标题网页的内容
说明：
①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
#0B6EFF
淡紫色
lavender
#DBDBF8
6.注释标记
通常使用“注释”为文中的不同部分加上说明，以方便日后阅读和修改。
注释标记的格式为：
--注释内容-->
注释内容不局限于一行，长度也不受限制。
即结束标识符不必与开始标识符在同一行上。
（以下是段落文字标记7~14）
7.标题文字标记
这里的标题是指页面中文本的标题，而不是用
…定义的网页标题，标题格式显示在浏览器窗口内，而不显示在浏览器的标题栏中。在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。
网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，为文章增加条理。
标题文字标记的格式为：
标题文字
说明：
①属性n用来指定标题文字的大小。
n可以取1～6的整数值，取1时文字最大，6时文字最小。
②属性align用来设置标题在页面中的对齐方式，取值有：
left（左对齐）、center（居中）或right（右对齐）。
③在一个标题行中无法使用不同大小的字体。
8．文本文字标记
在网页中为了增强页面的层次，其中的文字可以用不同的大小、字体、字型、颜色。
文本文字标记用来设定文字的字体、字号和颜色。
其格式为：
被设置的文字
说明：
标记的属性包括：
size、face、color。
①size属性用来设置文字的大小。
数字的取值范围从1～7，size取1时最小，取7时最大。
②face属性用来设置字体。
如黑体、宋体、楷体、隶书、TimesNewRoman等。
当文字为汉字时，格式中的“字体名”可以为：
宋体、幼圆、隶书、楷体、黑体、仿宋等。
当文字为英文时，字体名可以为TimesNewRoman等约50种字体。
其实，这里的字体名字就是在Word的“字体”工具栏中显示的字体名。
2color属性用来设置文字颜色。
思考:
①和标记都可以设置文字的大小，二者有何区别?
标记
对象
用法
文字大小n的取值
字体加粗
一段文章、语句、短语
文字
n=1～7，取1时最小，7时最大
不自动加粗
标题
文字
n=1～6，取6时最小，1时最大
自动加粗
另外，当中的size取7时，文字比要大。
②
标记中的text属性和标记中的color属性都可以设置文本的颜色?标记直接作用其后的文字，可在文件中多处设定，使网页中文字的颜色绚丽多彩。
当
与标记同时对文字颜色进行定义时，标记优先。
9.字型标记
字型就是文字的风格，如加粗、斜体、带下划线、上标、下标等。
标记格式
说明
受影响的文字
加粗
受影响的文字
斜体
受影响的文字
带下划线
受影响的文字
标准打印机字体
受影响的文字
带删除线
受影响的文字
下标
受影响的文字
上标
受影响的文字
大字体文本
受影响的文字
小字体文本
10.强制换行、换段标记
强制换行标记的格式为：
文字
段落标记
定义一个新段落的开始。
标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。
由于一段的结束意味着新一段的开始，所以使用
也可省略结束标记。
强制换段标记的格式为：
说明：
段落标记
的属性align用来设置段落的对齐方式，其取值可以为left、center或right，分别表示居左、居中、居右。
缺省时默认为left。
一个强制换段标记
可以看作是两个强制换行标记
。
11.空格标记
HTML语言忽略多余的空格，最多只空一个空格。
在需要空格的位置，可以用“ ”插入一个空格，或者输入全角中文空格。
12.预排版标记
想一想,如果想让网页显示以下文档效果,我们该怎么用HTML标记设计?
abcdef
hijklm
nopqst
uvwxyz
包含在预排版标记中的字符会按照HTML原码的格式输出到浏览器上.HTML方件中的英文空格一般不起作用,但是在预排版标记中空格可以显示出来.
格式:
要排版的文本
13.分区显示标记
分区显示标记可以使文本块或一段文字在网页上：
左对齐、居中和右对齐。
分区显示标记的格式为：
文本或图像
属性:
position:
指层的定位方式,其值可以是absolute或relative
left和top:
层的左边距与上边距
z-index:
层的叠放顺序
padding:
层内元素与边框的距离
background-color:
层的背景色
14.水平线标记
水平线标记的格式为：
说明：
①属性align设定横线放置的位置，可选择left（居左）、right（居右）或center（居中）。
②属性size设定线条粗细，以像素为单位，默认为2。
③属性width设定线段长度，可以是绝对值（以像素为单位）或相对值（相对于当前窗口的百分比）。
所谓绝对值，是指线段的长度是固定的，不随窗口尺寸的改变而改变。
所谓相对值，是指长度相对于窗口的宽度而定，窗口的宽度改变时，线段的长度也随之增减，默认值为100%，即始终填满当前窗口。
④属性color设定线条颜色，默认为黑色。
可以采用颜色的名称。
颜色可以用相应英文单词或以“#”引导的一个十六进制数代码来表示
⑤属性noshade设定线条为平面显示（没有三维效果），若缺省则有阴影或立体效果。
15.超链接标记
热点
说明：
①href为超文本引用，它的值为一个URL，是目标资源的有效地址。
在书写URL时要注意，如果资源放在自己的服务器上，可以写相对路径。
否则，应写绝对路径。
②target设定链接被按后结果所要显示的窗口。
常用值：
_blank（或new），_self（默认）。
16.创建指向本页中的链接（书签链接）
要在当前页面内实现超链接，需要定义两个标记：
一个为超链接标记，另一个为书签标记。
格式:
热点
目标文本附近的字符串
单击热点文本，将跳转到“记号名”开始的文本。
17.图片标记
使用图片标记，可以把一幅图片加入到网页中。
用图片标记还可以设置图片的替代文本、尺寸、布局等属性。
格式为：
18.用图片作为超链接
图片也可作为热点，单击图片则跳转到被链接的文本或其他文件。
格式为：
19.列表标记
列表（LIST）通常用于列举相关的信息条目，提供一种有组织的易于浏览的阅览格式，以及用于描述一个分布的过程。
无序列表标记
无序列表中每一个表项的前面是项目符号（如●、■等）。
建立无序列表使用
标记和- 表项标记。
格式为：
第一个列表项
第二个列表项
…
说明：
①type属性指定每个表项左端的符号类型，取值有：
disc（实心圆点●）、circle（空心圆点○）、square（方块■）
②在
；在后指定符号的样式，可以设置从该起直到。③
标记是单标记。即一个表项的开始，就是前一个表项的结束。
从浏览器上看，无序列表的特点是，列表项目作为一个整体，与上下段文本间各有一行空白；表项向右缩进并左对齐，每行前面有项目符号。
有序列表标记
通过带序号的列表可以更清楚地表达信息的顺序。
使用
标记可以建立有序列表，表项的标记仍为- 。
格式为：
表项1
表项2
…
说明：
①属性type指定符号的类型见表
取值
符号说明
示例
1
数字（缺省）
1、2、3
A
大写英文字母
A、B、C
a
小写英文字母
a、b、c
I
大写罗马字母
Ⅰ、Ⅱ、Ⅲ
i
小写罗马字母
ⅰ、ⅱ、ⅲ
②在
后指定符号的样式，可设定到
表项指定新的符号。③在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白；列表项目向右缩进并左对齐；各表项前带顺序号。
定义列表标记
用于对列表的条目进行简短说明,包括一系列名词及解释,名词比解释部分凸前,解释部分被视为一长串文字自动换行.
- 定义单词1
- 单词1的说明
- 定义单词2
- 单词2的说明
…
…
列表条目用
引导,列表条目的说明用引导.和都是单标记.20.表格标记
格式:
说明:
①
…
表格行标记,用来指明表格中一行的开始和结束.②
… | 字段名标记,在一行中标识行名.③
… | 数据标记,表格内的数据.21框架标记
框架标记有两个：
框架组标记
和框架标记。