你正在查看: 首页 > 技术文章>html > html标签详解

html标签详解

详解 --HTML标签详解
HTML指令详解
结构
<html>
<head>
<title>标题<title>
</head>
<body>..........文件内容..........
</body>
</html>
1.文件标题
<title>..........</title>
2.文件更新--<meta>
 【1】10秒后自动更新一次
  <metahttp-equiv="refresh"content=10>
 【2】10秒後自动连结到另一文件
  <metahttp-equiv="refresh"content="10;URL=欲连结文件之URL">
3.查询用表单--<isindex>
   若欲设定查询栏位前的提示文字:
  <isindexprompt="提示文字">
4.预设的基准路径--<base>
<basehref="放置文件的主机之URL">
版面
1.标题文字<h#>..........</h#>#=1~6;h1为最大字,h6为最小字
2.字体变化<font>..........</font>
【1】字体大小<fontsize=#>..........</font>#=1~7;数字愈大字也愈大
【2】指定字型<fontface="字型名称">..........</font>
【3】文字颜色<fontcolor=#rrggbb>..........</font>rr:表红色(red)色码gg:表绿色(green)色码bb:表蓝色(blue)色码
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.文字的对齐方向<palign="#">#号可为left:表向左对齐(预设值)center:表向中对齐right:表向右对齐P.S.<palign="#">之後的文字都会以所设的对齐方式显示,直到出现另一个<palign="#">改变其对齐方向,或遇到<hr>ⅱ<h#>标签时会自动设回预设的向左对齐。
16.分隔线<hr>
【1】分隔线的粗细<hrsize=点数>
【2】分隔线的宽度<hrsize=点数或百分比>
【3】分隔线对齐方向<hralign="#">#号可为left:表向左对齐(预设值)center:表向中对齐right:表向右对齐
【4】分隔线的颜色<hrcolor=#rrggbb>
【5】实心分隔线<hrnoshade>
17.向中对齐<center>..........</center>
18.依原始样式显示<pre>..........</pre>
19.<body>指令的属性
【1】背景颜色--bgcolor<bodybgcolor=#rrggbb>
【2】背景图案--background<bodybackground="图形文件名">
【3】设定背景图案不会卷动--bgproperties<bodybgproperties=fixed>
【4】文件内容文字的颜色--text<bodytext=#rrggbb>
【5】超连结文字颜色--link<bodylink=#rrggbb>
【6】正被选取的超连结文字颜色--vlink<bodyvlink=#rrggbb>
【7】已连结过的超连结文字颜色--alink<bodyalink=#rrggbb>
20.注解<!--..........-->21.特殊字元表示法
符号  语法
<   &lt
>   &gt
&   &amp
"   &quot
空白  &nbsp

 

图片
1.插入图片<imgsrc="图形文件名">
2.设定图框--border<imgsrc="图形文件名"border=点数>
3.设定图形大小--widthⅱheight<imgsrc="图形文件名"width=宽度点数height=高度点数>
4.设定图形上下左右留空--vspaceⅱhspace<imgsrc="图形文件名"vspace=上下留空点数hspace=左右留空点数>
5.图形附注<imgsrc="图形文件名"alt="说明文字">
6.预载图片
<imgsrc="高解析度图形文件名"lowsrc="低解析度图形文件名">P.S.两个图的图形大小最好一致
7.影像地图(ImageMap)<imgsrc="图形文件名"usemap="#图的名称"><mapname="图的名称">
<areashape=形状coords=区域座标列表href="连结点之URL">
<areashape=形状coords=区域座标列表href="连结点之URL">
<areashape=形状coords=区域座标列表href="连结点之URL">
<areashape=形状coords=区域座标列表href="连结点之URL"></map>
【1】定义形状--shape
shape=rect:矩形shape=circle:圆形shape=poly:多边形
【2】定义区域--coords
a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标
例:<areashape=rectcoords=100,50,200,75href="URL">
b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度
例:<areashape=circlecoords=85,155,30href="URL">
c.任意图形(多边形):将图形之每一转折点座标依序填入
例:<areashape=polycoords=232,70,285,70,300,90,250,90,200,78href="URL">
表格
1.定义表格<table>..........</table>
【1】设定边框的厚度--border
<tableborder=点数>
【2】设定格线的宽度--cellspacing
<tablecellspacing=点数>
【3】设定资料与格线的距离--cellpadding
<tablecellpadding=点数>
【4】调整表格宽度--width
<tablewidth=点数或百分比>
【5】调整表格高度--height
<tableheight=点数或百分比>
【6】设定表格背景色彩--bgcolor
<tablebgcolor=#rrggbb>
【7】设定表格边框色彩--bordercolor
<tablebordercolor=#rrggbb>
2.显示格线<tableborder>
3.表格标题
<caption>..........</caption>
表格标题位置--align
<captionalign="#">#号可为top:表标题置于表格上方(预设值)
bottom:表标题置于表格下方
4.定义列<tr>
5.定义栏位《1》<td>:靠左对齐
《2》<th>:靠中对齐ⅱ粗体
【1】水平位置--align<thalign="#">
#号可为left:向左对齐
center:向中对齐right:向右对齐
【2】垂直位置--align<thalign="#">#号可为
top:向上对齐middle:向中对齐
bottom:向下对齐
【3】栏位宽度--width
<thwidth=点数或百分比>
【4】栏位垂直合并--rowspan
<throwspan=欲合并栏位数>
【5】栏位横向合并--colspan
<thcolspan=欲合并栏位数>
清单
一、目录式清单
<dir><li>项目1<li>项目2<li>项目3</dir>P.S.目录式清单每一个项目不能超过20个字元(即10个中文字)
二、选项式清单<menu><li>项目1<li>项目2<li>项目3</menu>
三、有序号的清单<ol><li>项目1<li>项目2<li>项目3</ol>
【1】序号形式--type<oltype=#>或<litype=#>#号可为A:表以大写英文字母AⅱBⅱCⅱD...做为项目编号a:表以小写英文字母aⅱbⅱcⅱd...做为项目编号I:表以大写罗马数字做为项目编号i:表以小写罗马数字做为项目编号1:表以阿拉伯数字做为项目编号(预设值)
【2】起始数字--start<olstart=欲开始计数的序数>
【3】指定编号--value<livalue=欲指定的序数>
四、无序号的清单<ul><li>项目1<li>项目2<li>项目3</ul>
【1】项目符号形式--type<ultype=#>或<litype=#>#号可为disc:实心圆点(预设值)circle:空心圆点square:实心方块
【2】原始清单--plain<ulplain>
【3】清单排列方式--warp《1》清单垂直排列<ulwarp=vert>《2》清单水平排列<ulwarp=horiz>
五、定义式清单<dl><dt>项目1<dd>项目1说明<dt>项目2<dd>项目2说明<dt>项目3<dd>项目3说明</dl>
紧密排列--compact<dlcompact>P.S.如此可使<dt>的内容与<dd>的内容在同一行,仅以数格空白相隔而不换行,但若<dt>的文字超过一定的长度后,compact的作用就消失了!
表单
一、基本架构<formaction="处理资料用的CGI程式之URL"或"mailto:电子信箱的URL"method="get或post">..............................</form>
二、输入文件型表单<formaction="URL"method="post"><input><input>....................</form>
【1】栏位类型--type<inputtype=#>#号可为text:文字输入password:密码checkbox:多选钮radio:单选钮submit:接受按钮reset:重设按钮image:图形钮hidden:隐藏栏位
【2】栏位名称--name<inputname="资料栏名">P.S.若type为submitⅱreset则name不必设定
【3】文件上的预设值--value<inputvalue="预设之字串">
【4】设定栏位的宽度--size<inputsize=字元数>
【5】限制最大输入字串的长度--maxlength<inputmaxlength=字元数>
【6】预设checkbox或radio的初值--checked<inputtype=checkboxchecked><inputtype=radiochecked>
【7】指定图形的URL--src<inputtype=imagesrc="图档名">
【8】图文对齐--align<inputtype=imagealign="#">#号可为top:文字对齐图片之顶端middle:文字对齐图片之中间buttom:文字对齐图片之底部
三、选择式表单<formaction="URL"method="post"><select><option><option>....................</select></form>
A、<select>的属性
【1】栏位名称--name<selectname="资料栏位名">
【2】设定显示的选项数--size<selectsize=个数>
【3】多重选项--multiple<selectmultiple>
B、<option>的属性
【1】定义选项的传回值--value<optionvalue="传回值">
【2】预先选取的选项--selected<optionselected>
四、多列输入文字区表单<formaction="URL"method="post"><textarea>....................</textarea></form>
【1】文字区的变数名称--name<textareaname=变数名称>
【2】设定文字输入区宽度--cols<textareacols=字元数>
【3】设定文字输入区高度--rows<textarearows=列数>
【4】输入区设定预设字串<textarea>预设文字</textarea>
【5】自动换行与否--wrap<textareawrap=#>#号可为off:表输入的文字超过栏宽时,不会自动换行(预设值)virtual:表输入的文字在超过栏宽时会自动换行
链接
一、连结至其他文件<ahref="URL">说明文字或图片</a>
二、连结至文件内之某一处(外部连结)
《1》起点
<ahref="档名#名称">..........</a>
《2》终点<aname="名称">
三、frame的超连结
【1】开启新的浏览器来显示连结文件--_blank<ahref="URL"target=_blank>
【2】显示连结文件於目前的frame--_self<ahref="URL"target=_self>
【3】以上一层的分割视窗显示连结文件--_parent<ahref="URL"target=_parent>
【4】以全视窗显示连结文件--_top<ahref="URL"target=_top>
【5】以特定视窗显示连结文件--<ahref="URL"target="特定视窗名称">
FRAME
一、分割视窗指令<frameset>..........</frameset>
【1】垂直(上下)分割--rows
<framesetrows=#>#号可为点数:如欲分割为100,200,300三个视窗,则
<framesetrows=100,200,300>;亦可以*号代表,如<framesetrows=*,500,*>
百分比:如<framesetrows=30%,70%>,各项总和最好为100%
【2】水平(左右)分割--cols<framesetcols=点数或百分比>
二ⅱ指定视窗内容--<frame>
<framesetcols=30%,70%><frame><frame></frameset>
【1】指定视窗的文件名称--src<framesrc=HTML档名>
【2】定义视窗的名称--name
<framename=视窗名称>
【3】设定文件与上下边框的距离--marginheight
<framemarginheight=点数>
【4】设定文件与左右边框的距离--marginwidth
<framemarginwidth=点数>
【5】设定分割视窗卷轴--scrolling
<framescrolling=#>#号可为yes:固定出现卷轴
no:不出现卷轴auto:自动判断文件大小需不需要卷轴(预设值)
【6】锁住分割视窗的大小--noresize<framenoresize>

转自:动态网制作指南 www.knowsky.com

客服 反馈