网页制作基本代码
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<img d ynsrc="xx/xx.xx x"> 插入视频
<bgsou nd sr c="xx/xx.x xx">插入背景音乐
以上二者在代码后加上loop=-1 即可连续播放
常用HTML代码解释
一、文字
1.标题文字<h#>..........</h#> #=1~6；h1为最大字，h6为最小字
2.字体变化 <f ont>..........</font>
【1】字体大小 <fon t siz e=#>..........</font> #=1~7；数字愈大字也愈大【2】指定字型 <fon t fac e="字体名称">..........</font>
【3】文字颜色 <fon t col or=#r rggbb>..........</fo nt>
rr：表红色（red）色码
gg：表绿色（gre en）色码
bb：表蓝色（b lue）色码
rr ggbb也可用6位颜色代码数字
3.显示小字体 <sma ll>..........</small>
4.显示大字体 <bi g>..........</b ig>
5.粗体字 <b>..........</b>
6.斜体字 <i>..........</i>
7.打字机字体 <tt>..........</tt>
8.底线 <u>..........</u>
9.删除线<strik e>..........</s trike>
10.下标字 <sub>..........</su b>
11.上标字 <su p>..........</s up>
12.文字闪烁效果 <bli nk>..........</blink>
13.换行（也称回车） <br>
14.分段<p>
15.文字的对齐方向 <p a lign="#">#号可为left：表向左对齐（预设值） cent er：表向中对齐r ight：表向右对齐 P.S.<p al ign="#">之后的文字都会以所设的对齐方式显示，直到出现另一个<p alig n="#">改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。
16.分隔线 <hr>
【1】分隔线的粗细 <hr size=点数>
【2】分隔线的宽度 <hrsize=点数或百分比>
【3】分隔线对齐方向<hr a lign="#">
#号可为 left：表向左对齐（预设值） cen ter：表向中对齐right：表向右对齐
【4】分隔线的颜色 <h r col or=#r rggbb>
【5】实心分隔线 <hr nosh ade>
17.居中对齐<cent er>..........</cente r>
18.依原始样式显示 <pre>..........</pr e>
19.<b ody>指令的属性
【1】背景颜色-- bgc olor<body bgco lor=#rrggb b>
【2】背景图案 --backg round <bod y bac kgrou nd="图形文件名">
【3】设定背景图案不会卷动 --bgpro perti es <b ody b gprop ertie s=fix ed>
【4】文件内容文字的颜色 -- text <bod y tex t=#rr ggbb>
【5】超连结文字颜色 -- link <bod y lin k=#rr ggbb>
【6】正被选取的超连结文字颜色 -- vlin k <bo dy vl ink=#rrggb b>
【7】已连结过的超连结文字颜色-- al ink <bodyalink=#rrg gbb>
20.文字移动指令<MAR QUEE>..........</MAR QUEE>
移动速度指令是:scrol lAmou nt=##最小为1，速度为最慢；数字越大移动的越快。
移动方向指令是：dir ectio n=# u p向上、d own向下、left向左、ri ght向右。
指令举例：<M ARQUE E scr ollAm ount=3 dir ectio n=up>..........</MAR QUEE>
二、图片
1.插入图片 <img src="图形文件名">
2.设定图框 -- bord er <i mg sr c="图形文件名"borde r=点数>
3.设定图形大小 --width、heig ht <i mg sr c="图形文件名"width=宽度点数 heig ht=高度点数>
4.设定图形上下左右留空-- vsp ace、h space <img src="图形文件名" vs pace=上下留空点数 hsp ace=左右留空点数>
5.图形附注 <img src="图形文件名" al t="说明文字">
6.预载图片
<imgsrc="高解析度图形文件名" lows rc="低解析度图形文件名"> P.S.两个图的图形大小最好一致;
7.影像地图（Im age M ap）<img s rc="图形文件名" usem ap="#图的名称"> <ma p
nam e="图的名称">
<are a sha pe=形状 coor ds=区域座标列表href="连结点之URL">
<ar ea sh ape=形状 coo rds=区域座标列表 href="连结点之URL">
<a rea s hape=形状 co ords=区域座标列表 hre f="连结点之URL">
<areashape=形状c oords=区域座标列表 hr ef="连结点之UR L"> </map>
【1】定义形状-- sh ape
shape=rect：矩形s hape=circl e：圆形shape=poly：多边形
【2】定义区域-- coo rds
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标例：<are a sha pe=re ct co ords=100,50,200,75 h ref="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度例：<a rea s hape=circl e coo rds=85,155,30 h ref="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例：<a rea s hape=polycoord s=232,70,285,70,300,90,250,90,200,78 hre f="UR L"
三、表格相关
1.表格标题
<cap tion>..........</cap tion>
表格标题位置-- al ign
<capt ion a lign="#">#号可为top：表标题置于表格上方（预设值）
botto m：表标题置于表格下方
2.定义列<tr>
3.定义栏位《1》<td>：靠左对齐
《2》<th>：靠中对齐ⅱ粗体
【1】水平位置 -- alig n <th alig n="#">
#号可为 le ft：向左对齐 ce nter：向中对齐right：向右对齐
【2】垂直位置-- al ign <th al ign="#"> #号可为
top：向上对齐m iddle：向中对齐 bott om：向下对齐
【3】栏位宽度 --width <thwidth=点数或百分比>
【4】栏位垂直合并-- ro wspan <throwsp an=欲合并栏位数>
【5】栏位横向合并 --colsp an <t h col span=欲合并栏位数>
四、表格的主要属性
1. <table>标记的主要属性
align定义表格的对齐方式，有三个属性值cent er，le ft，ri ght
backg round定义表格的背景图案，属性值为图片的地址
bgco lor定义表格的背景颜色，属性值是各种颜色代码
borde r定义表格的边框宽度，属性值是数字
b order color定义表格边框的颜色，属性值是各种颜色代码
cel lpadd ing定义单元格内容与单元格边框之间的距离，属性值是数字
cells pacin g定义表格中单元格之间的距离
heig ht定义表格的高度，属性值是数字
wi dth定义表格的宽度，属性值是数字
2. <t r>标记，表格是由多行与多列组成的，<t r>标记用来定义表格的一行，他的属性极其属性值定义的是表格中的该行，其主要属性与属性值如下：
al ign定义对齐方式，属性值与上同
ba ckgro und定义背景图案bgcol or定义背景色
3. <t d>标记。
用<td>标记概况起来的内容表示表格的单元。
其主要属性与属性值和<ta ble>标记的一样，补充两个合并列和行的代码：
colsp an定义合并表格的列数，属性值是数字
rowsp an定义合并表格的行数，属性值是数字
五、FR AME
1、分割视窗指令<frame set>..........</fram eset>
【1】垂直（上下）分割-- row s
<f rames et ro ws=#> #号可为点数：
如欲分割为100,200,300三个视窗，则<fr amese t row s=100,200,300>；
亦可以*号代表，如<fra meset rows=*,500,*>
百分比：如<fra meset rows=30%,70%>，各项总和最好为100%;
【2】水平（左右）分割 -- c ols <frame set c ols=点数或百分比>
2、指定视窗内容 -- <fra me>
<fram esetcols=30%,70%> <frame> <fr ame></fra meset>
【1】指定视窗的文件名称 -- s rc <f ramesrc=H TML档名>
【2】定义视窗的名称-- nam e
<f ramename=视窗名称>
【3】设定文件与上下边框的距离 -- marg inhei ght
<fram e mar ginhe ight=点数>
【4】设定文件与左右边框的距离 -- m argin width
<fr ame m argin width=点数>
【5】设定分割视窗卷轴 -- scro lling
<fr ame s croll ing=#> #号可为 yes：固定出现卷轴
n o：不出现卷轴
a uto：自动判断文件大小需不需要卷轴（预设值）
【6】锁住分割视窗的大小 -- nore size<fram e nor esize>
六、歌曲代码:
在这组代码中，不必管它是mms.h ttp.r tsp，只要看尾缀是asf、w ma、wm v、
wmv、rm都可适用下面的代码:
1. 手动播放:
<EMB ED sr c=歌曲地址 vol ume="100"
width=39 h eight=18 h idden="FAL SE" a utost art="fault" typ e="au dio/x-pn-r ealau dio-
p lugin" con trols="Pla yButt on">
2.打开页面自动播放:
<EMB ED sr c="歌曲地址" w idth="39"heigh t="18"
aut ostar t="tr ue" h idden="fal se" l oop="infin ite"align="mid dle"volum e="100"
ty pe="a udio/x-pn-reala udio-plugi n" co ntrol s="Pl ayBut ton"autos tart="true">
------------------------------------------------------------------
套用代码:
<di v ali gn="c enter">
<tabl e bor der="1" wi dth="90%"heigh t="403" ba ckgro und="背景图片地址">
<tr><td w idth="80%" heig ht="100%">
<p alig n="ce nter"><br><br><br>
<fon t fac e="华文彩云" s ize="6" co lor="#FFFF FF">歌曲或音乐名称</fo nt><b r><br> <p ali gn="c enter"><im g src="图片地址"><b r><br>
<fontcolor="#FF FFFF" size=3>介绍文字</f ont><br><b r><br>
<EMBED styl e="FI LTER: xray()" s rc=音乐地址 wi dth=250 he ight=30 ty pe=au dio/x-ms-w ma au tosta rt="t rue"loop="-1"><br><br><b r>
</td></tr>
</table>
</div>
简易套用代码详解:
<divalign="cen ter">是定义帖子居中;
<tab le bo rder="1" w idth="90%" heig ht="403" b ackgr ound="背景图片地址"><tr><t d wid th="80%" h eight="100%">
这其中的borde r="1"是定义表格边线的宽度,定义为0则无边线;width="90%"
hei ght="403"分别定义背景图表格的宽度和高度.如果背景图是一张大图,可以这样定义:wi dth=图片宽度h eight=图片高度
<p alig n="ce nter"><br><br><br><f ont f ace="华文彩云" size="6"color="#FF FFFF">歌曲或音乐名称</font><br><br>
<p a lign="cent er">是定义文字居中的，<b r>是回行代码，加几个就会空几行。
<fo nt fa ce="华文彩云"size="6" c olor="#FFF FFF">是定义文字属性的。
f ace="华文彩云"是定义字体，你可以把字体换成隶书、宋体等。
size="6"是定义字号的，数字越大字越大，如果不定义，默认是2号字。
col or="#FFFFF F"是定义字体颜色的。
全部字体颜色的代码在妙手饰图区有人发过，你可以找来改。
<p a lign="cent er"><img s rc="图片地址"><br><br><f ont c olor="#FFF FFF">介绍文
字</font><br><br><br>
第一个括号里的代码仍然是定义图片和文字居中的。
<img s rc="图片地址">是插入图片代码。
<f ont c olor="#FFF FFF"size=3>介绍文字</fo nt>是定义这段文字的。
如果想改变字拧⒆痔濉⒆值难丈 烧瞻嵘厦嫖医驳亩ㄒ宸椒ā?/fon t>
<EMBE D sty le="F ILTER: xra y()"src=音乐地址w idth=250 h eight=30 t ype=a udio/x-ms-wma a utost art="true" loop="-1">
这一段是插入播放器代码，因为我插的是特殊的播放器，s tyle="FILT ER: x ray()" 是特殊代码。
“s rc=音乐地址”是插入音乐文件的地址。
w idth=250 h eight=30分别定义播放器的宽度和高度(如果把宽和高都设成零则为隐藏,并且只能自动播放)。
aut ostar t="tr ue" l oop="-1"是定义音乐播放方式的，a utost art="true"是设定手动或自动播放，“tru e”或“1”是自动播放，“fa lse”或“0”是手动播放；l oop="-1"是播放次
数，“true”或“1”表示重复播放，“fal se”“-1”或“0”是只播放一次。
<br><br><br></td></tr></table></di v>回行代码和与前面对应的固定代码。
<EM BED s tyle="FILT ER: x ray()" src=音乐地址 widt h=250 heig ht=30 type=audi o/x-
m s-wma auto start="tru e" lo op="-1">
这一段是插入播放器代码，因为我插的是特殊的播放器，styl e="FI LTER: xray()" 是特殊代码。
“src=音乐地址”是插入音乐文件的地址。
widt h=250 heig ht=30分别定义播放器的宽度和高度(如果把宽和高都设成零则为隐藏,并且只能自动播
放)。
a utost art="true" loop="-1"是定义音乐播放方式的，auto start="tru e"是设定手动或自动播放，“t rue”或“1”是自动播放，“false”或“0”是手动播放；loop="-1"是播放次数，“tru e”或“1”表示重复播放，“f alse”“-1”或“0”是只播放一次。
<b r><br><br></td></tr></tab le></div>回行代码和与前面对应的固定代码。
。