html基础知识学习文档格式.docx
《html基础知识学习文档格式.docx》由会员分享，可在线阅读，更多相关《html基础知识学习文档格式.docx（18页珍藏版）》请在冰豆网上搜索。
hrsize=3align=leftwidth="
75%"
>
页面布局及文字设计
标题
•html中提供了相应的标题标签<
hn>
其中n为标题的等
html总共提供六个等级的标题，n越小，标题字号就越
大
h1>
…<
/h1>
h2>
/h2>
h4>
/h4>
h5>
/h5>
h6>
/h6>
第一级标题
第二级标题
第三级标题
第四级标题
第五级标题
第六级标题
换行<
•在html语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。
所以，编写者对于自己需要断行的地方，应加上<
标签
段落标签<
p>
•文件段落的开始由<
来标记，段落的结束由<
/p>
来标记，<
是可以省略的，因为下一个<
的开始就意味着上一个<
的结束
标签还有一个属性aling，它用来指名字符显示时的对齐方式，一般值有center、left、right三种
水平线段<
•这个标签可以在屏幕上显示一条水平线，用以分割页面中的不同部分。
有四个属性：
size水平线的宽度width水平线的长，用占屏幕宽度的百分比或象素值来表示align水平线的对齐方式，有leftrightcenter三种noshade线段无阴影属性，为实心线段
文字的大小设置
•提供设置字号大小的是font，font有一个属性size，通过指定size属性就能设置字号大小，而size属性的有效值范围为1－7，其中缺省值为3。
我们可以size属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。
文字的字体与样式
•html4.0提供了定义字体的功能，用face属性来完成这个工作。
face的属性值可以是本机上的任一字体类型，只有对方的电脑中装有相同的字体才可以在他的浏览器中出现你预先设计的风格。
fontface=―字体”>
•为了让文字富有变化，或者为了着意强调某一部分，html提供了一些标签产生这些效果，现将常用的标签列举如下：
b>
/b>
粗体html语言
i>
/i>
斜体html语言
u>
/u>
加下划线html语言
tt>
打字机字体html语言
big>
/big>
大型字体html语言
small>
/small>
小型字体html语言
blink>
/blink>
闪烁效果html语言
表示强调，一般为斜体html语言
strong>
/strong>
表示特别强调，一般为粗体html语言
cite>
/cite>
用于引证、举例，一般为斜体html语言
文字的颜色
•文字颜色设置格式如下：
fontcolor=color_value>
这里的颜色值可以是一个十六进制数（用“#‖作为前缀），也可以是以下16种颜色名称
如：
black="
#000000―green="
#008000"
red="
#ff0000―blue="
#0000ff―
位置控制
•通过align属性可以选择文字或图片的对齐方式，left表示向左对齐，right表示向右对齐，center表示居中。
基本语法如下：
divalign=#>
#＝left／right／center
•另外，align属性也常常用在其它标签中，引起其内容位置的变动。
palign=#>
hralign=#>
h1align=#〉
在实际的编写中，许多标签和一些属性是结合起来使用的，
比如：
fontcolor="
#"
size=#>
文字<
列表
•无序号列表
•序号列表
•定义性列表
无序号列表
•无序号列表使用的一对标签是<
ul>
/ul>
，每一个列表项前使用<
li>
。
其结构如下所示：
第一项
第二项
第三项
序号列表
•序号列表和无序号列表的使用方法基本相同，它使用标签<
ol>
/ol>
每个项目都有前后顺序之分，多数用数字表示。
定义性列表
•定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。
在应用中，列表项使用标签<
dt>
标明，说明性文字使用<
dd>
表示。
在定义性列表中，还有一个属性是compact,使用这个属性后，说明文字和列表项将显示在同一行。
dl>
第一项<
叙述第一项的定义
第二项<
叙述第二项的定义
第三项<
叙述第三项的定义
/dl>
table表格
•表格的基本结构
•表格的标题
•表格的尺寸设置
•表格内文字的对齐、布局
•跨多行、多列的表元
•表格的颜色
表格的基本结构
table>
...<
/table>
定义表格
caption>
/caption>
定义标题
tr>
定义表行
th>
定义表头
td>
定义表元（表格的具体数据）
表格的标题
•表格标题的位置，可由align属性来设置，其位置分别由表格上方和表格下方。
下面为表格标题位置的设置格式。
设置标题位于表格上方：
captionalign=top>
...<
设置标题位于表格下方：
captionalign=bottom>
表格尺寸设置
•表格的大小
一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接
固定表格的大小，可以使用下列方式：
tablewidth=n1height=n2>
width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示
•边框尺寸设置
边框是用border属性来体现的，它表示表格的边框边厚度和框线。
将border设成不同的值，有不同的效果。
tableborder=10width=250>
定货单<
苹果<
/th>
香蕉<
葡萄<
200公斤<
/td>
100公斤<
•格间线宽度
格与格之间的线为格间线，它的宽度可以使用<
中的cellspacing属性加以调节。
格式是：
tablecellspacing=#>
#表示要取用的像素值
例：
tableborder=3cellspacing=5>
100公斤
•内容与格线之间的宽度
我们还可以在<
中设置cellpadding属性，用来规定内容与格线之间的宽度。
格式为：
tablecellpadding=#>
•例：
tableborder=3cellpadding=5>
表格内文字的对齐/布局
•表格中数据的排列方式有两种，分别是左右排列和上下排列。
左右排列是以align属性来设置，而上下排列则由valign属性来设置。
其中左右排列的位置可分为三种：
居左（left）、居右（right）和居中（center）；
而上下排列基本上比较常用的有四种：
上齐（top）、居中（middle）、下齐
（bottom）和基线（baseline）。
tralign=#>
thalign=#>
#=left,center,right
tdalign=#>
trvalign=#>
thvalign=#>
#=top，middle，bottom，baseline
tdvalign=#>
•左右排列
tableborder=1width="
200"
居左<
居中<
居右<
tdalign=left>
a<
tdalign=center>
b<
tdalign=right>
c<
•上下排列
250"
height="
100"
上齐<
下齐
基线<
tdvalign=top>
tdvalign=middle>
tdvalign=bottom>
tdvalign=baseline>
d<
跨多行、多列的表元
•要创建跨多行、多列的表元，只需在<
或<
中加入rowspan或colspan属性，这两个属性的值，表明了表元中要跨越的行或列的个数。
•跨多列的表元<
thcolspan=#>
tdcolspan=#>
colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。
•跨多行的表元<
throwspan=#>
tdrowspan=#>
rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。
表格的颜色
•在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。
表格的背景色彩<
tablebgcolor=#>
行的背景色彩<
trbgcolor=#>
表元的背景色彩<
thbgcolor=#>
tdbgcolor=#>
#=rrggbb16进制rgb数码,或者是下列预定义色彩名称：
black,olive,teal,red,blue,maroon,navy,gray,lime,fuchsia,white,green,purple,silver,yellow,aqua
文件之间的链接
•超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。
一个链接的基本格式如：
ahref="
资源地址"
链接文字<
/a>
••标签<
a>
表示一个链接的开始，<
表示链接的结束；
•属性“href‖定义了这个链接所指的地方；
•通过点击“链接文字”可以到达指定的文件。
ahref=“”>
西南财经大学<
本地链接
•以绝对路径表示：
ahref=“/c:
\study\html教程\link01.htm”>
文件的链接<
以相对路径表示：
ahref=“link01.htm”>
链接上一目录中的文件：
../../internet/ip地址"
ip地址<
url链接
•url链接的形式是：
协议名：
//主机.域名／路径／文件名
其中协议包括：
file本地系统文件
httpwww服务器
ftpftp服务器
telnet基于telnet的协议
mailto电子邮件
newsusenet新闻组
gophergopher服务器
waiswais服务器
•写在html文件中，链接其他主机上的文件时，格式如下：
ahref=“
ahref=“telnet:
//”>
财大bbs<
目录链接
•直接指到某文件上部、下部或是中央部分
•制作目录链接方法是：
•首先把把某段落设置为链接位置，格式是：
〈aname=―链接位置名称”>
•在调用此链接部分的文件，定义连接：
ahref=―文件名＃链接位置名称”>
如果是在一个文件内跳转，文件名可以省略不写。
多视窗口frames
•使用frames结构设计的html文件，能够将整个窗口分成几个独立的小窗口，每一个窗口可分别载入不同的文件，令人高兴的是，每个窗口是可以相互沟通的。
•frames结构的基本格式
•各窗口的尺寸设置
•各窗口间相互操作
•frame的其它属性
frames结构的基本格式
frameset>
framesrc="
url"
...
/frameset>
•在有frames结构的html文件中，frames文件的整体结构为：
......
各窗口的尺寸设置
•我们将窗口分割为几块，横向分用rows属性，纵向分用cols属性，每一块的大小可以由这两个属性的值来实现。
framesetcols=#>
framesetcols="
100,200,300"
framesetrows=#>
framesetrows="
10%,20%,70%"
•#的值为一对用引号括起来的字符串，字符串中的数字表示每个分窗口所占的尺寸，数字中间用逗号隔开，有几个数字就表示分出了几个窗口。
当然，这其中的任何一个数字也可以由“*”来代替，这样表示由浏览器自动设置其大小。
100,200,*"
100,*,*"
将100像素以外的窗口平均分配
*,*,*"
将窗口分为三等份
各窗口间相互操作（frametarget）
•由frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化，这就提高了frames的利用价值。
为了完成各窗口之间的相互操作，我们必须为每一个窗口起一个名字，这个名字用属性name来定义。
窗口标识（framename）
framesrc=urlname=“窗口名”>
例如：
frame/a.html"
name=―left‖>
定义了窗口名称，还应该有target来配合使用，target属性指定了所链接的文件出现在哪一窗口。
target的值可以是name定义的名称，也可以是以下四类值：
ahref=urltarget=_blank>
显示一个新窗口
ahref=urltarget=_self>
显示在同一个窗口
ahref=urltarget=_parent>
显示在frameset的前一份文件的窗口
ahref=urltarget=_top>
显示在整个浏览器窗口
frame的其它属性
•frameframeborder=#>
#=yes,no各窗口边框的设置，yes表示有边框，no表示没有边框
framemarginwidth=#marginheight=#>
#的值为像素点
设置各窗口的上下左右边界宽度，如不设置，由浏览器自动决定。
framescrolling=#>
#=yes,no,auto滚动条设置，yes表示有，no表示没有，auto表示由浏览器自动设置，#=缺省值是auto
framenoresize>
noresize属性来设置不可变动的框边
网页布局与层叠样式表
•样式表的概念并不是新创造的，文字处理器和桌面印刷系统长期以来都在使用做某种特殊样式的排版
•样式表最重要的作用是提供了一种能使所有web页面的样式保持一致的方法
css的必要性
•许多html元素都有外观属性，如果在元素中没有指定相应的值，那么浏览器将使用这些属性的默认值。
•例如，<
元素中包含font-size属性，某个浏览器可能将这个属性的默认值设定为30个点（pt）
•而通过样式表则可以将该默认值更改为26个，这种改动可以只对某个<
元素有效，也可以对这个文档中所有的<
元素都有效。
•样式表的某些功能可能需要借助元素的各种属性、字体的样式以及字体的尺寸元素来实现
•然而，利用样式表可以对这些样式说明进行更精确、更一致的描述
•目前已经不提倡直接绝大多数用于描述外观的元素属性，而是建议使用样式表。
样式表的层次
•样式表的三个层次按照从低层到高层的顺序依次是:
–内置（inline）样式表
–文档层（documentlevel）样式表
–外部（external）样式表。
•html样式表之所以被称为层叠样式表，是因为文档样式可以三个不同层次上进行定义
•低层样式表可以取代高层样式表，所以某个元素内容的样式是由样式表的叠加来确定的。
–内置样式表适用于单个元素的内容
–文档层样式表适用于整个文档的主体
–外部样式表则可以应用在多个文档的主体中。
•在使用时，内置样式表优先于文档样式表，而文档样式表又优先于外部样式表。
•在出现冲突的情况下，低层次的样式表具有使用上的优先权。
css可能遇到的问题
•与元素和元素属性所面临的情况一样，某种特殊的浏览器可能不能处理样式表中指定的一些属性值。
•对于这种情况，浏览器要么用一个可选择的值进行替代，要么将简单地忽略所给出的这些属性值。
内置样式
•内置样式说明出现在元素中，并且仅适用于那个元素中的内容。
•这种细粒度的样式应用背离了样式表的主要设计思想——对完整文档的各种元素进行样式统一
•对内置样式说明应当谨慎使用。
文档层样式
•文档层样式说明出现在文档的头部分，并且适用于文档的整个主体。
•这是对文档所有内容的显示外观进行格式统一的一种方法。
外部样式表
•在网站建设中，往往希望网站的整体风格能够一致，这就是外部样式表的主要应用目的
•外部样式表并不是它们所适用的文档的一部分。
外部样式表单独存储，并且在所有使用它们的文档中都要进行说明。
•可以用mime类型text/css将外部样式表编写成一些文本文件，它们可以存储在因特网上的任何一台计算机中，浏览器获取外部样式表就如同获取文档一样。
•网页首部的<
link>
元素也可用于指定外部样式表，在<
元素中，rel属性用于指定被链接的文档与包含该链接的文档之间的关系，而href属性用于指定样式表文档的url地址
外部样式表的引用
linkrel=stylesheettype=”text/css”href=”themes/autotheme/style.css”>
/link>
•指向一个外部样式表的链接必须放在html基本文档的头部（header容器中）。
样式说明格式
•一个样式说明的格式取决于该样式表的层次。
在一个元素中内置样式说明是以style属性值的形式出现的，其一般形式如下：
style=“property_1:
value_1；
property_2:
value_2;
...;
property_n:
value_n;
”
•内置样式说明的作用范围只限于所处元素中的内容部分。
•文档层样式说明在文档头部以一个<
style>
元素内容的形式出现，该说明的格式与内置样式表的格式有很大的区别。
•在<
元素中内容的一般形式如下：
styletype=”text/css”>
!
--rule_list-->
/style>
元素中的type属性向浏览器指明了在<
元素中样式说明的类型。
•在上面这个例子中，type属性被设置成“text/css‗‘，即层叠样式表。
•由于还有许多其他类型的样式表，因此样式说明的类型还是必要的。
•注意，<
元素中的规则列表是出现在html注释中的。
•由于这些规则列表并不是真正的html，在规则列表中所包含的是提供给浏览器的有关外观样式的信息，而不是使用者看到的内容。
元素的注释
•由于<
元素的内容是一个html注释，所以必须使用一种不同的方法在<
元素的内容中添加真正的注释
元素中这种注释由“/*‖开始至“*/‖结束。
•规则列表中的样式规则均包含两部分：
–选择器（selector）
–列表
•前者用于指出受规则影响的一个或多个元素，后者由若干成对的属性/值组成。
规则列表----rule_list
•与元素属性的属性/值不同（在元素符属性的每一对属性/值中，两个部分之间使用等号相分隔，而所形成的列表使用双引号进行界定）；
•在一个样式规则中，样式属性一值的各部分使用冒号相分隔，而所形成的列表则出现在大括弧之间。
•一个样式规则的格式如下所示：
tag_name_list{property_1:
property_2：
value_2；
…；
property_n：
value_n}
•其中，tag_name_list可以是单个元素名称，或一个用逗号相隔的若干元素名称的列表。
•tag_name_list{property_1:
property_
升级会员 