三HTML语言文档格式.docx
- 文档编号:17624372
- 上传时间:2022-12-07
- 格式:DOCX
- 页数:31
- 大小:266.43KB
三HTML语言文档格式.docx
《三HTML语言文档格式.docx》由会员分享,可在线阅读,更多相关《三HTML语言文档格式.docx(31页珍藏版)》请在冰豆网上搜索。
bodybgcolor="
black"
text="
#FFFFFF"
这是我用记事本做的第一个网页,我会努力学好HTML!
/body>
/html>
(3)保存文件:
HTML文件的扩展名为.htm或.html,因为有些Web服务器对中文文件名不能很好支持,所以文件名中尽量不要使用汉字。
为避免保存文件时操作系统自动为文件名加上扩展名.txt,可在保存时用双引号把文件名(包括扩展名)引起来。
通常情况下,HTML文件图标为浏览器形状。
(4)用浏览器打开上步保存的文件,即可看到如图3-3所示的页面。
如果没有正常显示,则说明代码有错误,这时可以重新切换到记事本窗口,对代码进行修改并保存,然后再切换到浏览器窗口,打开【查看】菜单,选择【刷新】命令,即可看到修改后的页面。
图3-3第一个网页
HTML代码中,用尖括号括起来的即为HTML标记,如<
、<
等。
标记往往成对出现,一个称为开始标记,一个称为结束标记,开始标记与结束标记之间的部分称为标记的内容,如<
为开始标记,<
为结束标记,文本“我的第一个网页”为<
标记的内容,显示在浏览器的标题栏上。
具有开始标记和结束标记的标记称为围堵标记,标记单独出现,只有开始标记的标记称为空标记。
有些开始标记里有形如name="
value"
的代码,称为标记的属性,用来修饰标记的内容,如<
body>
标记里的bgcolor="
、text="
都是属性,属性里等号左边的称为属性名,等号右边被引号引起来的称为属性值,如bgcolor为属性名,black为属性值。
一个HTML文档的基本结构为:
整个文档处于标记<
与<
之间;
文档分两部分,<
到<
为头部,用于存放重要的信息,如标题和meta数据,内容不在浏览器窗口里显示,<
为主体部分,网页中的内容都要放在这一部分,大部分HTML标记使用在这一部分。
标记常用的属性有:
(1)text:
用来设定网页中文本的颜色,属性值可以是颜色的名称,也可以是#后面跟6位十六进制数字,如text="
和text="
#000000"
都可以把文本颜色设为黑色。
(2)bgcolor:
用来设定整个页面的背景颜色,如bgcolor="
green"
。
(3)link:
用来设定链接文本的颜色,如link="
blue"
(4)alink:
用来设定活动链接文本的颜色,也就是刚按下鼠标左键还没松开时的颜色。
(5)vlink:
用来设定访问过的链接文本的颜色,如vlink="
#ff0000"
(6)background:
用来设定页面的背景图片,属性值可以是图片文件的相对路径或绝对路径,如background="
bg.gif"
如果同时设定了页面的背景颜色和背景图片,则只能看到背景图片,因为背景图片在背景颜色之上。
(7)leftmargin:
用来设定整个网页内容与浏览器窗口左右边框之间空白大小,属性值为整数,单位为像素,如leftmargin="
4"
(8)topmargin:
用来设定整个网页内容与浏览器窗口上下边框之间空白大小。
(9)bgproperties:
当属性值为fixed时,可固定页面的背景图片,拖动滚动轴时背景图片不会随着文本而滚动。
书写HTML代码时应注意以下几点:
(1)HTML标记及属性中字母不区分大小写,如<
Html>
HTml>
对浏览器来说是完全相同的。
(2)标记名与左尖括号之间不能留有空白,如<
html>
是错误的。
(3)属性要写在开始标记的尖括号中,放在标记名之后,并且与标记名之间要有空白;
多个属性之间也要有空白;
属性值最好用单引号或双引号引起来,引号一定要是英文的引号,不能是中文的引号。
(4)结束标记要书写正确,不能忘掉斜杠。
3.2常用HTML标记
本节分类介绍常用的HTML标记及其常用属性,其它标记的详细情况请参考相关书籍。
3.2.1排版标记
1.<
!
--注释-->
像很多语言一样,HTML也提供注释功能,注释以<
--开始,以-->
结束,之间所有的内容会被浏览器忽略。
利用注释可以为HTML文档的不同部分加上说明,方便日后修改,也可以利用注释为HTML文档加上版权声明。
2.<
p>
称为段落标记,用来创建一个段落,段落内容显示时与前后的内容之间保留一空白行。
如果两个段落相连,则可以省略第一个段落的结束标记<
/p>
,因为第二段的开始自动结束第一段,如“<
第一段<
第二段<
”,当然结束标记也可以不省略。
的常用属性align,用来设定段落的对齐方式,可取属性值有:
●left:
左对齐。
●center:
居中对齐。
●right:
右对齐。
默认为左对齐。
3.<
br>
称为换行标记,在网页设计中比较常用。
它的作用就是换行,这一点与<
相同,与<
不同的是换行后行之间不留空白行,页面看起来比较紧凑。
属于空标记,没有结束标记。
4.<
pre>
称为预格式化标记,它的作用是按原始代码的排列方式显示内容。
通常情况下,浏览器显示时会忽略内容中的空白及换行,而<
/pre>
之间的空白及换行会被保留。
5.<
hr>
称为水平线标记,可以在页面中产生一条水平线,属于空标记,没有结束标记。
的常用属性有:
(1)align:
用来设定水平线的对齐方式,可取属性值有:
left、center、right。
(2)width:
用来设定水平线的水平长度,属性值可以是绝对值或相对值,如width="
300"
表示长度为300像素,是绝对长度,width="
50%"
表示水平长度为上一级容器水平总长度的一半,是相对长度。
(3)size:
用来设定水平线的厚度,属性值为整数,单位为像素,如size="
(4)color:
用来设定水平线的颜色。
(5)noshade:
水平线默认为立体显示,具有阴影,加上此属性可删除水平线阴影,如<
hrnoshade>
6.<
center>
称为居中标记,可以使标记的内容居中显示,属于围堵标记,使用时需要结束标记。
7.排版标记举例
(1)新建网页文档3-2.htm,其代码如下:
排版标记举例<
--读者可以试试每个标记的各个属性的用法-->
palign="
center"
这是一个居中对齐段落,有三行<
第二行<
第三行<
hrwidth="
100"
70%"
align="
月落乌啼霜满天,江枫渔火对愁眠。
故苏城外寒山寺,夜半钟声到客船。
>
/center>
(2)用浏览器打开3-2.htm,可看到如图3-4所示的效果。
图3-4排版标记
3.2.2字体列表标记
1.<
b>
为粗体标记,<
/b>
之间的文本产生加粗效果。
使用此标记时如果忘掉结束标记,则后面所有的文本都将以粗体显示。
i>
为斜体标记,<
/i>
之间的文本产生斜体效果。
使用此标记时如果忘掉结束标记,则后面所有的文本都将以斜体显示。
u>
为加底线标记,<
/u>
之间的文本显示时会加底线。
使用此标记时如果忘掉结束标记,则后面所有的文本都将加上底线。
s>
为加删除线标记,<
/s>
之间的文本显示时会加删除线。
使用此标记时如果忘掉结束标记,则后面所有的文本都将加上删除线。
big>
/big>
之间的文本显示时会加大。
small>
/small>
之间的文本显示时会缩小。
7.<
sub>
为下标字标记,<
/sub>
之间的文本以下标字显示。
8.<
sup>
为上标字标记,<
/sup>
之间的文本以上标字显示。
9.<
h1>
h2>
h3>
h4>
h5>
h6>
为标题标记,每个标题标记所标记的文本加粗显示独占一行且上下保留一空白行,由<
字体依次变小。
10.<
font>
可用来设定文本的大小、颜色等,它的常用属性有:
(1)face:
用来设定文本的字体,属性值为逗号隔开的字体列表,如“face="
宋体,楷体"
”,浏览器显示时,会按照字体列表中从左到右第一种在机器上安装了的字体显示文本,如果浏览器所在机器上没有安装指定的任何一种字体,则以浏览器默认字体显示,所以使用时最好不使用特殊字体。
(2)size:
用来设定文本的大小,属性值可以是绝对的或相对的,如size="
5"
是绝对的,表示文本以5号字显示,size="
+2"
是相对的,表示文本在原先大小的基础上再增大2级。
(3)color:
用来设定文本的颜色,如color="
red"
11.<
ul>
称为无序列表标记或项目列表标记,用来在页面中显示项目形式的列表,列表中每一项的前面会加上○、●或■等符号,每一项需用<
li>
标记,所以需要同<
结合使用。
定义项目列表的语法为:
ultype="
disc"
<
项1<
/li>
项2<
/ul>
的常用属性只有一个type,用来设定列表项前面出现的符号,可取属性值有:
●disc:
列表项前面加上符号●。
●circle:
列表项前面加上符号○。
●square:
列表项前面加上符号■。
12.<
ol>
称为有序列表标记或编号列表标记,用来在页面中显示编号形式的列表,列表中每一项的前面会加上如A、a、i或I等形式的编号,每一项需要用<
定义编号列表的语法为:
oltype="
a"
/ol>
(1)type:
用来设定列表的编号形式,可取属性值有:
●1:
用阿拉伯数字1、2、3...编号。
●a:
用小写英文字母a、b、c...编号。
●A:
用大写英文字母A、B、C...编号。
●i:
用小写罗马字母ⅰ、ⅱ、ⅲ...编号。
●I:
用大写罗马字母Ⅰ、Ⅱ、Ⅲ...编号。
(2)start:
用来设定列表开始编号的位置,不论采用何种编号形式,属性值都为整数,如start="
3"
表示第一项从第3的位置开始编号。
13.<
用来标记列表的一项,需同<
或<
一起使用,它的属性有:
用来设定列表项的符号,如果<
用在<
里,属性取值为disc、circle或square,如果<
里,则属性取值为1、a、A、i或I。
(2)value:
此属性仅当<
里有效,属性值为一整数,用来设定当前项的编号,其后的项目将以此值为起始数目递增,前面各项不受影响。
14.字体列表标记举例
(1)新建网页文档3-3.htm,其代码如下:
字体列表标记举例<
/h1>
这一行为粗体字<
这一行为斜体字<
这一行文字会加上下画线<
这一行文字会加上删除线<
多个<
标<
记可同<
时<
使用<
上标下标标记可用来写数学公式A<
2<
+X<
=?
fontsize="
+3"
来一个好玩的字:
fontface="
wingdings"
J<
/font>
书写HTML代码应注意以下几点:
square"
HTML代码不区分大小写<
两个属性间要加上空格<
结束标记不要忘写斜杠<
建立一个网页的步骤:
I"
打开记事本<
输入HTML代码<
以.htm或.html为扩展名保存文件<
(2)用浏览器打开3-3.htm,可看到如图3-5所示的效果。
图3-5字体列表标记
3.2.3表格标记
1.表格概述
表格本来是用于在HTML页中显示表格式数据的,但很多设计人员使用表格来对页面进行布局,表格现已成为对文本和图形进行布局的强有力的工具。
表格由一行或多行组成;
每行又由一个或多个单元格组成。
HTML中一个表格通常是由<
table>
tr>
td>
三个标记来定义的,这三个标记分别表示表格、表格行、单元格。
在对表格进行设置时,可以设置整个表格(<
)或表格中的行(<
)或单元格(<
)的属性,它们优先顺序为:
单元格(<
)优先于行(<
),行(<
)优先于表格(<
)。
例如,如果将某个单元格的背景色属性设置为红色,然后将整个表格的背景色属性设置为蓝色,则红色单元格不会变为蓝色。
称为表格标记,整个表格始于<
而终于<
/table>
,它是一个容器标记,用于声明一个表格,<
等只能在它的范围内使用。
常用的属性有:
(1)width:
用来设定表格的宽度,属性值可以是相对的或绝对的,如width="
(2)align:
用来设定表格水平对齐方式,属性值可以是left、center、right三者中之一。
(3)border:
用来设定表格边框的厚度,属性值为整数,单位为像素。
(4)cellpadding:
用来设定边距的大小,也就是单元格中内容与单元格边框之间留的空白大小,属性值为整数,单位为像素。
(5)cellspacing:
用来设定单元格与单元格之间的距离,属性值为整数,单位为像素。
(6)bgcolor:
用来设定整个表格的背景颜色。
(7)background:
用来设定表格的背景图像,属性值为图像文件的相对路径或绝对路径。
用来标记表格行,是单元格(<
th>
)的容器,使用时要放在<
容器里,结束标记可以省略。
用来设定这一行单元格中内容的水平对齐方式,属性值为left、center或right。
用来设定这一行的背景颜色。
(3)valign:
用来设定这一行单元格中内容的垂直对齐方式,可取属性值有:
●top:
顶端对齐。
●middle:
中间对齐。
●bottom:
底端对齐。
在表格中表示一个单元格,是表格中具体内容的容器,使用时要放在<
/tr>
之间。
用来设定单元格中内容的水平对齐方式,属性值为left、center或right。
(2)background:
用来设定单元格的背景图像。
(3)bgcolor:
用来设定单格的背景颜色。
(4)colspan:
用来在水平方向向右合并单元格,属性值为跨列的数目。
(5)height:
用来设定单元格的高度,属性值可以是像素数,也可以是占整个表格高度的百分比。
(6)nowrap:
加入nowrap一词可以防止单元格中内容宽度大于单元格宽度时自动换行。
(7)rowspan:
用来在垂直方向向下合并单元格,属性值为跨行的数目。
(8)valign:
用来设定单元格中内容的垂直对齐方式,属性值为top、middle或bottom。
(9)width:
用来设定单元格的宽度,属性值可以是像素数,也可以是占整个表格宽度的百分比。
在表格中也表示一个单元格,用法与<
相同,不同的是,<
所标记的单元格中文本内容默认以粗体显示,且居中对齐。
6.表格标记举例
(1)新建网页文档3-4.htm,其代码如下:
表格标记举例<
tablewidth="
border="
1"
thcolspan="
期中成绩表<
/th>
姓名<
语文<
数学<
张三<
/td>
tdcolspan="
2"
100<
李四<
98<
43<
王晓彬<
tdrowspan="
97<
78<
成大才<
94<
(2)用浏览器打开3-4.htm,可看到如图3-6所示的效果。
图3-6表格标记
3.2.4链接标记
链接的作用就是把页面中的文本或图片链接到其它的页面、文本或图片。
如果没有链接,看到的只是一个单独的网页,而不是一个站点,这样Web也将不成为Web。
链接用标记<
a>
来定义,它是网页中最为常用的标记。
因为定义链接时常常需要设置文件的路径,其它地方像设置表格背景图片、设置图形标记等也需要用到文件路径,所以本小节先介绍文件路径的写法,然后再介绍链接标记的用法。
1.文件路径
网页设计中,经常需要设置文件路径,文件的路径可分为绝对路径和相对路径。
(1)绝对路径:
文件的绝对路径提供文档的完整URL,而且包括所使用的协议(如对于Web页,通常使用http:
//)。
如
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 语言