html代码基础
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
常用HTML代码解释
一、文字
1.标题文字 <h#>.........</h#> #=1~6；h1为最大字，h6为最小字
2.字体变化 <font>..........</font>
【1】字体大小 <font size=#>..........</font> #=1~7；数字愈大字也愈大
【2】指定字型 <font face="字体名称">..........</font> 【3】文字颜色 <font color=#rrggbb>..........</font>
rr：表红色（red）色码
gg：表绿色（green）色码
bb：表蓝色（blue）色码
rrggbb也可用6位颜色代码数字
3.显示小字体 <small>..........</small>
4.显示大字体 <big>..........</big>
5.粗体字 <b>..........</b>
6.斜体字 <i>..........</i>
7.打字机字体 <tt>..........</tt>
8.底线 <u>..........</u>
9.删除线 <strike>..........</strike>
10.下标字 <sub>..........</sub>
11.上标字 <sup>..........</sup>
12.文字闪烁效果 <blink>..........</blink>
13.换行（也称回车） <br>
14.分段 <p>
15.文字的对齐方向 <p align="#"> #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐 P.S.<p align="#">之
后的文字都会以所设的对齐方式显示，直到出现另一个<p align="#">改变其对齐方向，遇到<hr>或<h#>标签时会自动设回预设的向左对齐。
16.分隔线 <hr>
【1】分隔线的粗细 <hr size=点数>
【2】分隔线的宽度 <hr size=点数或百分比>
【3】分隔线对齐方向 <hr align="#">
#号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
【4】分隔线的颜色 <hr color=#rrggbb>
【5】实心分隔线 <hr noshade>
17.居中对齐 <center>..........</center>
18.依原始样式显示 <pre>..........</pre>
19.<body>指令的属性
【1】背景颜色 -- bgcolor <body bgcolor=#rrggbb>
【2】背景图案 -- background <body background="图形文件名"> 【3】设定背景图案不会卷动-- bgproperties <body bgproperties=fixed>
【4】文件内容文字的颜色 -- text <body text=#rrggbb>
【5】超连结文字颜色 -- link <body link=#rrggbb>
【6】正被选取的超连结文字颜色 -- vlink <body vlink=#rrggbb>
【7】已连结过的超连结文字颜色 -- alink <body alink=#rrggbb>
20.文字移动指令<MARQUEE>..........</MARQUEE>
移动速度指令是:scrollAmount=# #最小为1，速度为最慢；数字越大移动的越快。
移动方向指令是：direction=# up向上、down向下、left向左、right向右。
指令举例：<MARQUEE scrollAmount=3 direction=up>..........</MARQUEE>
二、图片
1.插入图片 <img src="图形文件名">
2.设定图框 -- border <img src="图形文件名" border=点数>
3.设定图形大小 -- width、height <img src="图形文件名" width=宽度点数 height=高度点数>
4.设定图形上下左右留空 -- vspace、hspace <img src="图形文件名" vspace=上下留空点数 hspace=左右留空点数>
5.图形附注 <img src="图形文件名" alt="说明文字">
6.预载图片
<img src="高解析度图形文件名" lowsrc="低解析度图形文件名"> P.S.两个图的图形大小最好一致;
7.影像地图（Image Map） <img src="图形文件名" usemap="#图的名称"> <map name="图的名称">
<area shape=形状 coords=区域座标列表 href="连结点之URL">
<area shape=形状 coords=区域座标列表 href="连结点之URL">
<area shape=形状 coords=区域座标列表 href="连结点之URL">
<area shape=形状 coords=区域座标列表 href="连结点之URL"> </map>
【1】定义形状 -- shape
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形 【2】定义区域 -- coords
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意图形（多边形）：将图形之每一转折点座标依序填入
例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL"
三、表格相关
1.表格标题
<caption>..........</caption>
表格标题位置 -- align
<caption align="#"> #号可为 top：表标题置于表格上方（预设值）bottom：表标题置于表格下方
2.定义列 <tr>
3.定义栏位 《1》<td>：靠左对齐
《2》<th>：靠中对齐ⅱ粗体
【1】水平位置 -- align <th align="#">
#号可为 left：向左对齐 center：向中对齐 right：向右对齐
【2】垂直位置 -- align <th align="#"> #号可为
top：向上对齐 middle：向中对齐 bottom：向下对齐
【3】栏位宽度 -- width <th width=点数或百分比>
【4】栏位垂直合并 -- rowspan <th rowspan=欲合并栏位数> 【5】栏位横向合并 -- colspan <th colspan=欲合并栏位数>
四、表格的主要属性
1. <table>标记的主要属性
align定义表格的对齐方式，有三个属性值center，left，right background定义表格的背景图案，属性值为图片的地址
bgcolor定义表格的背景颜色，属性值是各种颜色代码
border定义表格的边框宽度，属性值是数字
bordercolor定义表格边框的颜色，属性值是各种颜色代码
cellpadding定义单元格内容与单元格边框之间的距离，属性值是数字
cellspacing定义表格中单元格之间的距离
height定义表格的高度，属性值是数字
width定义表格的宽度，属性值是数字
2. <tr>标记，表格是由多行与多列组成的，<tr>标记用来定义表格的一行，他的属性极其属性值定义的是表格中的该行，其主要属性与属性
值如下：
align定义对齐方式，属性值与上同
background定义背景图案 bgcolor定义背景色
3. <td>标记。
用<td>标记概况起来的内容表示表格的单元。
其主要属性与属性值和<table>标记的一样，补充两个合并列和行的代码： colspan定义合并表格的列数，属性值是数字
rowspan定义合并表格的行数，属性值是数字
五、FRAME
1、分割视窗指令 <frameset>..........</frameset>
【1】垂直（上下）分割 -- rows
<frameset rows=#> #号可为点数：
如欲分割为100,200,300三个视窗，则<frameset rows=100,200,300>；
亦可以*号代表，如<frameset rows=*,500,*>
百分比：如<frameset rows=30%,70%>，各项总和最好为100%; 【2】水平（左右）分割 -- cols <frameset cols=点数或百分比>
2、指定视窗内容 -- <frame>
<frameset cols=30%,70%> <frame> <frame> </frameset>
【1】指定视窗的文件名称 -- src <frame src=HTML档名>
【2】定义视窗的名称 -- name
<frame name=视窗名称>
【3】设定文件与上下边框的距离 -- marginheight
<frame marginheight=点数>
【4】设定文件与左右边框的距离 -- marginwidth
<frame marginwidth=点数>
【5】设定分割视窗卷轴 -- scrolling
<frame scrolling=#> #号可为 yes：固定出现卷轴
no：不出现卷轴
auto：自动判断文件大小需不需要卷轴（预设值） 【6】锁住分割视窗的大小 -- noresize <frame noresize>
六、歌曲代码:
在这组代码中，不必管它是mms.http.rtsp，只要看尾缀是asf、wma、wmv、wmv、rm都可适用下面的代码:
1. 手动播放:
<EMBED src=歌曲地址volume="100" width=39 height=18 hidden="FALSE" autostart="fault" type="audio/x-pn-realaudio-plugin"
controls="PlayButton">
2. 打开页面自动播放:
<EMBED src="歌曲地址" width="39" height="18" autostart="true" hidden="false" loop="infinite" align="middle" volume="100"
type="audio/x-pn-realaudio-plugin" controls="PlayButton" autostart="true">
------------------------------------------------------------------
套用代码:
<div align="center">
<table border="1" width="90%" height="403" background="背景图片地址">
<tr><td width="80%" height="100%">
<p align="center"><br><br><br>
<font face="华文彩云" size="6" color="#FFFFFF">歌曲或音乐名称</font><br><br>
<p align="center"><img src="图片地址"><br><br>
<font color="#FFFFFF" size=3>介绍文字</font><br><br><br>
<EMBED style="FILTER: xray()" src=音乐地址width=250 height=30 type=audio/x-ms-wma autostart="true" loop="-1"><br><br><br>
</td></tr>
</table>
</div>
简易套用代码详解:
<div align="center">是定义帖子居中;
<table border="1" width="90%" height="403" background="背景图片地址"><tr><td width="80%" height="100%">
这其中的border="1"是定义表格边线的宽度,定义为0则无边线;width="90%" height="403"分别定义背景图表格的宽度和高度.如果背景图是
一张大图,可以这样定义:width=图片宽度 height=图片高度
<p align="center"><br><br><br><font face="华文彩云" size="6" color="#FFFFFF">歌曲或音乐名称</font><br><br>
<p align="center">是定义文字居中的，<br>是回行代码，加几个就会空几行。
<font face="华文彩云" size="6" color="#FFFFFF">是定义
文字属性的。
face="华文彩云"是定义字体，你可以把字体换成隶书、宋体等。
size="6"是定义字号的，数字越大字越大，如果不定义，默认
是2号字。
color="#FFFFFF"是定义字体颜色的。
全部字体颜色的代码在妙手饰图区有人发过，你可以找来改。
<p align="center"><img src="图片地址"><br><br><font color="#FFFFFF">介绍文字</font><br><br><br>
第一个括号里的代码仍然是定义图片和文字居中的。
<img src="图片地址">是插入图片代码。
<font color="#FFFFFF" size=3>介绍文字
<EMBED style="FILTER: xray()" src=音乐地址width=250 height=30 type=audio/x-ms-wma autostart="true" loop="-1">
这一段是插入播放器代码，因为我插的是特殊的播放器，style="FILTER: xray()" 是特殊代码。
“src=音乐地址”是插入音乐文件的地址。
width=250 height=30分别定义播放器的宽度和高度(如果把宽和高都设成零则为隐藏,并且只能自动播放)。
autostart="true" loop="-1"是
定义音乐播放方式的，autostart="true"是设定手动或自动播放，“true”或“1”是自动播放，“false”或“0”是手动播放；loop="-1"
是播放次数，“true”或“1”表示重复播放，“false”“-1”或“0”是只播放一次。
<br><br><br></td></tr></table></div>回行代码和与前面对应的
固定代码。
<EMBED style="FILTER: xray()" src=音乐地址width=250 height=30 type=audio/x-ms-wma autostart="true" loop="-1">
这一段是插入播放器代码，因为我插的是特殊的播放器，style="FILTER: xray()" 是特殊代码。
“src=音乐地址”是插入音乐文件的地址。
width=250 height=30分别定义播放器的宽度和高度(如果把宽和高都设成零则为隐藏,并且只能自动播放)。
autostart="true" loop="-1"是
定义音乐播放方式的，autostart="true"是设定手动或自动播放，“true”或“1”是自动播放，“false”或“0”是手动播放；loop="-1"
是播放次数，“true”或“1”表示重复播放，“false”“-1”或“0”是只播放一次。
<br><br><br></td></tr></table></div>回行代码和与前面对应的固定代码。
<head> //头文件开始
<base href="当前文档的url全称（基底网址）" target="空白(_B)/父(_P)/自身(_s)/顶部(_T)">
<basefont face="隶书" size="6" color="blue"> //设定基准的文字字体，字号和颜色
<title>设定显示在浏览器左上方的标题内容</title>
<isindex> //表明该文档是一个可用于检索的网关脚本，由服务器自动建立
<meta name="keywords" content="关键字" />
<meta name="description" content="网页说明" />
<meta http-equiv="refresh" content="刷新时间/单位秒" />
<meta http-equiv="refresh" content="跳转时间/单位秒;URL=跳转地址" />
<Meta name="Copyright" Content="版权说明"> //Copyright (版权) <Meta name="Generator" Content="你所用的编辑器"> //Generator (编辑器)
<Meta name="revisit-after" Content=""> //revisit-after (重访) <Meta name="build" Content="时间"> //Build(网站建站时间) <Meta name="Reply-to" Content="邮箱地址"> //Reply-to(联系人邮箱)
<meta http-equiv="Content-Type" content="text/html";charset="gb2312"/>
<meta http-equiv="page-enter" content="revealtrans(duration=3,transtion=20)"
<meta http-equiv="page-exit" content="revealtrans(duration=3,transtion=20)"//duration滤
镜持续时间 transtion 滤镜类型，表示
使用哪种特效，取值为0-23.0 矩形减小 1 矩形扩大 2 圆形缩
小 3 圆形扩大 4 向上擦除 5 向下擦除 6 向左擦除 7 向
右擦除 8 垂直百叶窗 9 水平百叶窗 10 横向棋盘式 11
纵向棋盘式 12 溶解 13 左右向中部收缩 14 中部向左右展
开 15 上下向
中部收缩
6 向左擦除
7 向右擦除
8 垂直百叶窗
9 水平百叶窗 10 横向棋盘式 16 中部向上下展开 17 阶梯状向左下展开 18 阶
梯状 向左上展开 19 阶梯状向右下展开 20 阶梯状向右上展开
21 随机水平线 22 随机垂直线 23 以上随机选择
<style> 设定css层叠样式表的内容
<link> 设定外部文件的连接
<script>设定页面中程序的脚本内容
</head> //头文件结束
<body bgcolor 等等标记 > // 主题开始
<bgcolor="颜色代码"> 设定页面背景颜色
<background ="图片url地址">设定页面背景图像
<text ="颜色代码">设定页面文字颜色
<bgproper-ties="fixed"> 设定页面背景图像为固定
<link ="颜色代码">设定页面默认的连接颜色
<vlink ="颜色代码">访问后的连接颜色
<alink ="颜色代码">鼠标正在单击时的连接颜色
<leftmargin ="值">设定页面左边距
<topmargin ="值">页面右边距
</body> // 主题结束
</html> //网页结束
http-equiv常用类型
Expires(期限) 说明 指定网页在缓存中的过期时间，一旦网页过期，必须到服务器上重新调阅。
用法<Meta http-equiv="Expires"
Content="Web,26 Feb 2009 08:21:57 GMT"> content 必须是GTM的时间格式 直接输入数字 表示多少时间后过期
Pragma （cach 模式）禁止浏览器从本地机的缓存中调阅页面内容 用法 <Meta http-equiv="Pragma" Content="No-cach">这样设定 浏览者
无法脱机浏览
Window-target (显示窗口设定)
<Meta http-equiv="Window-target" Content="_top"> 用来防止别人在框架里面调用你的页面 Content 选项 _blank _top _self _parent
◆◆◆◆◆◆◆◆◆◆◆◆◆《〈格式标志〉》◆◆◆◆◆◆◆◆◆◆◆◆
<p></p> 创建一个段落
<p align=""> 将段落按左、中、右对齐
<br>换行 插入一个回车换行符
<blockquote></blockquote> 从两边缩进文本
<dl></dl> 定义列表
<dt> 放在每个定义术语词前
<dd> 放在每个定义之前
<ol></ol> 创建一个标有数字的列表
<ul></ul> 创建一个标有圆点的列表
<li> 放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字,
若在<ul></ul>之间则每个列表项加上一个圆点
<div align=""></div> 用来排版大块HTML段落,也用于格式化表
<MENU> 选项清单
<DIR> 目录清单
<nobr></nobr> 强行不换行
<hr size='9' width='80%' color='ff0000'>水平线(设定宽度)
<center></center> 水平居中
◆◆◆◆◆◆◆◆◆《〈链接标志表格标志〉》◆◆◆◆◆◆◆◆◆◆◆◆◆◆
<a href="URL"></a> 创建超文本链接
<a href="mailtEMAIL">
</a> 创建自动发送电子邮件的链接
<a name="name"></a> 创建位于文档内部的书签
<a href="#name"></a> 创建指向位于文档内部书签的链接
<BASE> 文档中不能被该站点辨识的其它所有链接源的URL
<LINK> 定义一个链接和源之间的相互关系
◆◆◆◆◆◆◆◆链接标记注解：◆◆◆◆◆◆◆◆◆◆◆◆
◆target="..."决定链接源在什么地方显示(用户自定义的名字，_blank,_parent,_self
,_top
◆rel="..."发送链接的类型
◆rev="..."保存链接的类型
◆accesskey="..."指定该元素的热键
◆shape="..."允许我们使用已定义的形状定义客户端的图形镜像(default，rect，circ
le，poly
◆coord="..."使用像素或者长度百分比来定义形状的尺寸
◆tabindex="..."使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用
tab键使元素获得焦点)
◆◆◆◆◆◆◆◆表格标记注解：◆◆◆◆◆◆◆◆◆◆◆◆
<table></table> 创建一个表格
<tr></tr> 表格中的每一行
<td></td> 表格中一行中的每一个格子
<th></th> 设置表格头:通常是黑体居中文字
<table cellspacing=""> 设置表格格子之间空间的大小
<table border=""> 设置边框的宽度
<table cellpadding=""> 设置表格格子边框与其内部内容之间空间的大小
<table width=""> 设置表格的宽度。
用绝对像素值或总宽度的百分比
<table align=""> 设置表格格子的水平对齐方式(left,center,right,justify)
<tr align=""> 设置表格格子的水平对齐方式(left,center,right,justify)
<tr valign=""> 设置表格格子的垂直对齐方式(baseline,bottom,middle,top)
<td colspan=""> 设置一个表格格子跨占的列数(缺省值为1)
<td rowspan=""> 设置一个表格格子跨占的行数(缺省值为1)
<td nowrap> 禁止表格格子内的内容自动断行
<CAPTION></CAPTION> 表格的标题
<COLGROUP></COLGROUP> 定义多个列为一组列
<TABLE></TABLE> 创建一个表格
<THEAD></THEAD> 定义表格的页眉
<COL> 定义一个列组中的列，以便对它们能够同时设置有关属性 <TBODY></TBODY> 定义一个表格的实体
<TFOOT></TFOOT> 定义一个表格的页脚
◆◆◆◆◆◆◆◆◆◆◆◆《表单标志》◆◆◆◆◆◆◆◆◆◆◆ <form></form> 创建表单
action="..."接收数据的服务器的URL
method="..."HTTP的方法(get, post)。
其中get是被反对使用的 enctype="..."指定MIME(Internet媒体类型)
onsubmit="..."当提交表单时发生的内部事件
noreset="..."在重新设置表单时发生的内部事件
target="..."决定把内容显示在什么地方(_blank, _parent, _self, _top
<select multiple name="name" size=""></select> 创建滚动菜单,size设置在需要滚
动前可以看到的表单项数目 <option> 设置每个表单项的内容
<select name="name"></select> 创建下拉菜单
<textarea name="name" cols=40 rows=8></textarea> 创建一个文本框区域,列的数目
设置宽度,行的数目设置高度
<input type="checkbox" name="name"> 创建一个复选框,文字在标签后面
<input type="radio" name="name" value=""> 创建一个单选框,文字在标志后面
<input type=text name="foo" size=20> 创建一个单行文本输入区域,size设置以字符
串的宽度
<input type="submit" value="name"> 创建提交(submit)按钮
<input type="image" border=0 name="name" src="name.gif"> 创建一个使用图象的提
交(submit)按钮 <input type="reset"> 创建重置(reset)按钮
<BUTTON></BUTTON> 创建一个按钮
disabled="..."把按钮的状态设置为不能
name="..."按钮的控制名 value="..."按钮的值
type="..."按钮的类型(button, submit, reset)
<FIELDSET></FIELDSET> 把相互关联的控件组合成一组
<ISINDEX> 提示用户输入
<LABEL></LABEL> 为一个控件提供标签
<LEGEND></LEGEND> 为FIELDSET元素指定一标题
<SELECT></SELECT> 为用户做选择创建各个选项
<TEXTAREA></TEXTAREA> 创建一个允许用户多行输入的区域
◆◆◆◆◆◆◆◆◆◆◆◆◆◆表单注解：◆◆◆◆◆◆◆◆◆◆◆◆◆◆
type="..."用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,h
idden,image,button)
name="..."控件的控制名(要求是除了submit和reset之外的任何名字)
value="..."控件的初始值
checked="..."把一个单选钮设置为选中的状态
disabled="..."把控件的状态设置为不能使用
readonly="..."只对输入密码的文本框使用
size="..."表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度，它是
用来指定字符的数目 src="..."一个图像控件的URL
maxlength="..."指定可以输入的最多的字符数目
alt="..."另外一种文本描述
usemap="..."到客户端图形镜像的URL
align="..."被反对。
控制对齐方式(left, center, right, justify)
tabindex="..."通过定义的tabindex值确定在不同元素之间获得焦
点的顺序
onfocus="..."当元素获得焦点时发生的事件
onblur="..."当元素失去焦点时发生的事件
onselect="..."当元素被选中时发生的事件
onchang="..."当元素状态被改变时发生的事件
accept="..."允许上载的文件类型
◆◆◆◆◆◆◆◆◆◆◆◆◆◆《帧标志》◆◆◆◆◆◆◆◆◆◆◆◆◆◆
<frameset></frameset> 放在一个帧文档的<body>标签之前,也可以嵌在其他帧文档中
<frameset rows="value,value"> 定义一个帧内的行数,可以使用绝对像素值或高度的百
分比
<frameset cols="value,value"> 定义一个帧内的列数,可以使用绝对像素值或宽度的百
分比
<frame> 定义一个帧内的单一窗或窗区域
<noframes></noframes> 定义在不支持帧的浏览器中显示什么提示
<frame src="URL"> 规定帧内显示的HTML文档
<frame name="name"> 命名帧或区域以便别的帧可以指向它
<frame marginwidth=""> 定义帧左右边缘的空白大小,必须大于等于1
<frame marginheight=""> 定义帧上下边缘的空白大小,必须大于等于1
<frame scrolling=""> 设置帧是否有滚动栏,其值可以是"yes","no" 或"auto"
<frame noresize> 禁止用户调整一个帧的大小
<IFRAME></IFRAME> 创建一个内联的帧
scr="..."定义在帧中显示的内容的来源
frameborder="..."定义帧之间的边界(0或1)
align="..."被反对。
控制对齐方式(left, center, right, justify) height="..."帧的高度 width="..."帧的宽度
marquee>...</marquee>普通卷动
<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction='left'></marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定卷动距离
<marquee scrolldelay=300>...</marquee>设定卷动时间
<img src=""> 插入图片，参数有:width="宽",alt="说明文字",height="高",boder="边
框"
◆◆◆◆◆◆◆◆◆◆◆◆◆◆《 文档整体属性标志》◆◆◆◆◆ <body bgcolor=""> 设置背景颜色。
使用名字或RGB的十六进制值 <body background=""> 设置背景图片
<body bgsound=""> 设置背景音乐
<body bgproperties="fixed">
固定背景图片（IE适用）
<body text=""> 设置文本颜色。
使用名字或RGB的十六进制值
<body link=""> 设置链接颜色。
使用名 字或RGB的十六进制值
<body vlink=""> 设置已使用的链接的颜色。
使用名字或RGB的十六
进制值
<body alink=""> 设置正在被击中的链接的颜色。
使用名字或RGB的
十六进制值
<body topmargin=""> 设置页面的上边距 <body leftmargin=""> 设置页面的左边距。