HTML指令详解
结构
标题
……….文件内容……….
1.文件标题
2.文件更新–
【1】10秒后自动更新一次
【2】10秒後自动连结到另一文件
3.查询用表单–
<form>
<hr />
<label>这是一个可搜索的索引。请输入搜索关键字： <input type=”text” name=”isindex” /></label>
<hr />
</form>
若欲设定查询栏位前的提示文字：
<form>
<hr />
<label>”提示文字”<input type=”text” name=”isindex” /></label>
<hr />
</form>
4.预设的基准路径–
版面
1.标题文字 ………. #=1~6；h1为最大字，h6为最小字
2.字体变化 <span>……….</span>
【1】字体大小 <span>……….</span> #=1~7；数字愈大字也愈大
【2】指定字型 <span style=”font-family: 字型名称;”>……….</span>
【3】文字颜色 <span>……….</span> rr：表红色(red)色码 gg：表绿色(green)色码 bb：表蓝色(blue)色码
3.显示小字体 <small>……….</small>
4.显示大字体 <big>……….</big>
5.粗体字 <strong>……….</strong>
6.斜体字 <em>……….</em>
7.打字机字体 <tt>……….</tt>
8.底线 <span style=”text-decoration: underline;”>……….</span>
9.删除线 <span style=”text-decoration: line-through;”>……….</span>
10.下标字 <sub>……….</sub>
11.上标字 <sup>……….</sup>
12.文字闪烁效果 ……….
13.换行
14.分段
15. 文字的对齐方向
<p align=””#””>#号可为 left：表向左对齐(预设值) center：表向中对齐 right：表向右对齐 P.S.</p>
<p align=””#””>之後的文字都会以所设的对齐方式显示， 直到出现另一个</p>
<p align=””#””>改变其对齐方向，或遇到</p>
<hr />
<p align=””#””>ⅱ 标签时会自动设回预设的向左对齐。
16.分隔线</p>
<hr />
<p align=””#””>【1】分隔线的粗细</p>
<hr size=”点数” />
<p align=””#””>【2】分隔线的宽度</p>
<hr size=”点数或百分比” />
<p align=””#””>【3】分隔线对齐方向</p>
<hr align=””#”” />
<p align=””#””>#号可为 left：表向左对齐(预设值) center：表向中对齐 right：表向右对齐
【4】分隔线的颜色</p>
<hr />
<p align=””#””>【5】实心分隔线</p>
<hr noshade=”noshade” />
<p align=””#””>17.向中对齐</p>
<center>……….</center>
<p align=””#””>
18.依原始样式显示</p>
<pre>……….</pre>
19.指令的属性
【1】背景颜色 — bgcolor
【2】背景图案 — background
【3】设定背景图案不会卷动 — bgproperties
【4】文件内容文字的颜色 — text
【5】超连结文字颜色 — link
【6】正被选取的超连结文字颜色 — vlink
【7】已连结过的超连结文字颜色 — alink
20.注解 <!–……….–>21.特殊字元表示法
符 号 语 法
< ＆ｌｔ
> ＆ｇｔ
& ＆ａｍｐ
” ＆ｑｕｏｔ
空白 ＆ｎｂｓｐ
图片
1.插入图片 <img src=””图形文件名”” alt=”” />
2.设定图框 — border <img src=””图形文件名”” alt=”” border=”点数” />
3.设定图形大小 — widthⅱheight <img src=””图形文件名”” alt=”” width=”宽度点数” height=”高度点数” />
4.设定图形上下左右留空 — vspaceⅱhspace <img src=””图形文件名”” alt=”” hspace=”左右留空点数” vspace=”上下留空点数” />
5.图形附注 <img src=””图形文件名”” alt=””说明文字”” />
6.预载图片
<img src=””高解析度图形文件名”” alt=”” /> P.S.两个图的图形大小最好一致
7.影像地图(Image Map) <img src=””图形文件名”” alt=”” usemap=””#图的名称”” />
<map name=””图的名称””></map>
<p align=””#””></p>
<p align=””#””></p>
<p align=””#””></p>
【1】定义形状 — shape
shape=rect：矩形 shape=circle：圆形 shape=poly：多边形
【2】定义区域 — coords
a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标
例：
b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度
例：
c.任意图形(多边形)：将图形之每一转折点座标依序填入
例：
表格
1.定义表格
……….
【1】设定边框的厚度 — border
【2】设定格线的宽度 — cellspacing
【3】设定资料与格线的距离 — cellpadding
【4】调整表格宽度 — width
【5】调整表格高度 — height【6】设定表格背景色彩 — bgcolor【7】设定表格边框色彩 — bordercolor2.显示格线3.表格标题表格标题位置 — align5.定义栏位 《1》
<table width=”点数或百分比”><caption>……….</caption><caption align=””#””>#号可为 top：表标题置于表格上方(预设值)
bottom：表标题置于表格下方
4.定义列</caption>
<tbody>
<tr>
<td>：靠左对齐
《2》：靠中对齐ⅱ粗体
【1】水平位置 — align#号可为 left：向左对齐
center：向中对齐 right：向右对齐
【2】垂直位置 — align#号可为
top：向上对齐 middle：向中对齐
bottom：向下对齐
【3】栏位宽度 — width【4】栏位垂直合并 — rowspan【5】栏位横向合并 — colspan清单
一、目录式清单
<dir>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</dir>P.S.目录式清单每一个项目不能超过20个字元(即10个中文字)
二、选项式清单
<menu>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</menu>三、有序号的清单
<ol>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
【1】序号形式 — type
<ol type=”#”>
<ol type=”#”>或
<li type=”#”>#号可为 A：表以大写英文字母AⅱBⅱCⅱD…做为项目编号 a：表以小写英文字母aⅱbⅱcⅱd…做为项目编号 I：表以大写罗马数字做为项目编号 i：表以小写罗马数字做为项目编号 1：表以阿拉伯数字做为项目编号(预设值)
【2】起始数字 — start
<ol start=”欲开始计数的序数”>【3】指定编号 — value
<li value=”欲指定的序数”>四、无序号的清单
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
【1】项目符号形式 — type
<ul type=”#”>或
<li type=”#”>#号可为 disc：实心圆点(预设值) circle：空心圆点 square：实心方块
【2】原始清单 — plain
<ul>
<ul>【3】清单排列方式 — warp 《1》清单垂直排列
<ul>《2》清单水平排列
<ul>五、定义式清单</ul>
</ul>
</ul>
</ul>
<dl><dt>项目1</dt><dd>项目1说明</dd><dt>项目2</dt><dd>项目2说明</dd><dt>项目3</dt><dd>项目3说明</dd></dl>紧密排列 — compact
<dl compact=”compact”>P.S.如此可使<dt>的内容与</dt><dd>的内容在同一行，仅 以数格空白相隔而不换行，但若</dd><dt>的文字超过一 定的长度后，compact的作用就消失了！
表单
一、基本架构</dt></dl><form action=””处理资料用的CGI程式之URL”或”mailto:电子信箱的URL”” method=””get或post””>………. ………. ……….</form>二、输入文件型表单
<form action=””URL”” method=””post””><input type=”text” /> <input type=”text” /> ………. ……….</form>【1】栏位类型 — type
<input type=”#” /> #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位
【2】栏位名称 — name
<input type=”text” name=””资料栏名”” /> P.S.若type为submitⅱreset则name不必设定
【3】文件上的预设值 — value
<input type=”text” value=””预设之字串”” /> 【4】设定栏位的宽度 — size
<input type=”text” size=”字元数” /> 【5】限制最大输入字串的长度 — maxlength
<input type=”text” maxlength=”字元数” /> 【6】预设checkbox或radio的初值 — checked
<input type=”checkbox” checked=”checked” /> <input type=”radio” checked=”checked” /> 【7】指定图形的URL — src
<input type=”image” src=””图档名”” /> 【8】图文对齐 — align
<input type=”image” align=””#”” /> #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部
三、选择式表单
<form action=””URL”” method=””post””></form></li>
</ul>
</li>
</ol>
</li>
</ol>
</ol>
………. ……….
<ol type=”#”>
<ol type=”#”>
<li type=”#”>
<ol start=”欲开始计数的序数”>
<li value=”欲指定的序数”>
<ul type=”#”>
<li type=”#”><form action=””URL”” method=””post””></form>A、的属性
【1】栏位名称 — name
【2】设定显示的选项数 — size
【3】多重选项 — multiple
B、</li>
</ul>
</li>
</ol>
</li>
</ol>
</ol>
的属性
【1】定义选项的传回值 — value
【2】预先选取的选项 — selected
四、多列输入文字区表单
<form action=””URL”” method=””post””><textarea> ………. ………. </textarea></form>【1】文字区的变数名称 — name
<textarea name=”变数名称”> 【2】设定文字输入区宽度 — cols </textarea>
<textarea cols=”字元数”> 【3】设定文字输入区高度 — rows </textarea>
<textarea rows=”列数”> 【4】输入区设定预设字串 </textarea><textarea> 预设文字 </textarea>
<textarea rows=”列数”> 【5】自动换行与否 — wrap </textarea><textarea> #号可为 off：表输入的文字超过栏宽时，不会自动换行(预设值) virtual：表输入的文字在超过栏宽时会自动换行</textarea>
<textarea> 链接</textarea>
<textarea> 一、连结至其他文件 </textarea><a href=””URL””>说明文字或图片</a>
<textarea> 二、连结至文件内之某一处(外部连结) </textarea>
<textarea> 《1》起点</textarea>
<a href=””档名#名称””>……….</a>
<textarea> 《2》终点 </textarea><a name=””名称””></a>
三、frame的超连结
【1】开启新的浏览器来显示连结文件 — _blank <a href=””URL”” target=”_blank”>
【2】显示连结文件於目前的frame — _self </a><a href=””URL”” target=”_self”>
【3】以上一层的分割视窗显示连结文件 — _parent </a><a href=””URL”” target=”_parent”>
【4】以全视窗显示连结文件 — _top </a><a href=””URL”” target=”_top”>
【5】以特定视窗显示连结文件 –</a><a href=””URL”” target=””特定视窗名称””>
FRAME
一、分割视窗指令 ……….
【1】垂直(上下)分割 — rows
#号可为点数：如欲分割为100,200,300三个视窗，则
；亦可以*号代表，如
百分比：如，各 项总和最好为100%
【2】水平(左右)分割 — cols
二ⅱ指定视窗内容 —
【1】指定视窗的文件名称 — src
【2】定义视窗的名称 — name
【3】设定文件与上下边框的距离 — marginheight
【4】设定文件与左右边框的距离 — marginwidth
【5】设定分割视窗卷轴 — scrolling
#号可为 yes：固定出现卷轴
no：不出现卷轴 auto：自动判断文件大小需不需要卷轴(预设值)
【6】锁住分割视窗的大小 — noresize </a>
补充详细介绍2
总类(所有HTML文件都有的) 文件类型 (放在档案的开头与结尾)
文件主题 (必须放在「文头」区块内)
文头 (描述性资料，像是「主题」)
文体
(文件本体)结构性定义(由浏览器控制的显示风格)
标题 (从1到6，有六层选择)
3.0 标题的对齐
3.0 区分
<div>
3.0 区分的对齐
<div align=”LEFT|RIGHT|CENTER|JUSTIFY”>
引文区块
<blockquote>(通常会内缩)
强调 <em><em> (通常会以斜体显示)
特别强调 <strong> (通常会以加粗显示)
引文 <cite> (通常会以斜体显示)
码 <code> (显示原始码之用)
样本<samp>
键盘输入 <kbd>
变数 <var>
定义 <dfn> (有些浏览器不提供)
地址</dfn></var></kbd></samp></code></cite></strong></em></em><address>
3.0 大字 <big>
3.0 小字 <small> </small></big></address></blockquote>
</div>
</div>
与外观相关的标签(作者自订的表现方式)
加粗
斜体
3.0 底线 (尚有些浏览器不提供)
3.0 删除线 <s> (尚有些浏览器不提供)
3.0 下标 <sub>
3.0 上标 <sup>
打字机体 <tt> (用单空格字型显示)
预定格式</tt></sup></sub></s>
<pre> (保留文件中空格的大小)
预定格式的宽度</pre>
<pre width=”?”>(以字元计算)
N1.0+ 向中看齐</pre>
<center>(文字与图片都可以)
N1.0 闪耀 (有史以来最被嘲弄的标签)
N1.0 字体大小 (从1到7)
N1.0 改变字体大小 <span>
N1.0 基本字体大小 <basefont size=”?” /> (从1到7; 内定为3)
N2.0 字体颜色 </span></center>连结与图形
连结 <a href=””URL””>
连结到锚点 </a><a href=””URL#***””>(如果锚点在另一个档案)
</a><a href=””#***””> (如果锚点目前的档案)
N2.0 连结到目的视框 </a><a href=””URL”” target=””***””>
设定锚点 </a><a name=””***””></a>
图形 <img src=””URL”” alt=”” />
图形看齐方式 <img src=””URL”” alt=”” align=”TOP|BOTTOM|MIDDLE” />
N1.0 图形看齐方式 <img src=””URL”” alt=”” /> ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM >
取代文字 <img src=””URL”” alt=””***”” /> (如果没有办法显示图形则显示此文字)
点选图 <img src=””URL”” alt=”” ismap=”ismap” /> (需要CGI程式)
N2.0 点选图 <img src=””URL”” alt=”” usemap=””URL”” />
N2.0 地图 <map name=””***””>(描述地图) </map>
<map name=””***””> N2.0 段落 <area shape=””RECT”” coords=””,,,”” href=””URL”|NOHREF” /> </map>
<map name=””***””> 3.0 大小 </map><img src=””URL”” alt=”” width=””?”” height=””?”” /><map name=””***””>(以pixels为单位) </map>
<map name=””***””> N1.0 图形边缘 </map><img src=””URL”” alt=”” border=”?” /><map name=””***””> (以pixels为单位) </map>
<map name=””***””> N1.0 图形边缘空间 </map><img src=””URL”” alt=”” hspace=”?” vspace=”?” /><map name=””***””> (以pixels为单位) </map>
<map name=””***””> N1.0 低解析度图形 </map><img src=””URL”” alt=”” />
<map name=””***””> N1.1 用户端拉 (使用端自动更新 ) </map>
<map name=””***””> N2.0 内嵌物件 </map><object width=”320″ height=”240″ classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param name=”src” value=””URL”” /><embed width=”320″ height=”240″ type=”application/x-shockwave-flash” src=””URL”” /></object><map name=””***””> (将物件插入页面) </map>
<map name=””***””> N2.0 内嵌物件大小 </map><object width=””?”” height=””?”” classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0″><param name=”src” value=””URL”” /><embed width=””?”” height=””?”” type=”application/x-shockwave-flash” src=””URL”” /></object>
分隔
段落
(通常是两个return)
3.0 段落
(新定义成容器型标签)
3.0 文字看齐方式
<p align=”LEFT|CENTER|RIGHT”>
换行
(一个return)
N1.0 文字部份看齐方式<br clear=”LEFT|RIGHT|ALL” />(与图形合用时)
横线</p>
<hr />
<p align=”LEFT|CENTER|RIGHT”>
N1.0 横线对齐</p>
<hr align=”LEFT|RIGHT|CENTER” />
<p align=”LEFT|CENTER|RIGHT”>
N1.0 横线厚度</p>
<hr size=”?” />
<p align=”LEFT|CENTER|RIGHT”>(以pixels为单位)
N1.0 横线宽度</p>
<hr width=”?” />
<p align=”LEFT|CENTER|RIGHT”>(以pixels为单位)
N1.0 横线比率宽度</p>
<hr width=”%” />
<p align=”LEFT|CENTER|RIGHT”>(以页宽为100%)
N1.0 实线</p>
<hr noshade=”noshade” />
<p align=”LEFT|CENTER|RIGHT”>(没有立体效果)
N1.0 不可换行 (不换行)
N1.0 可换行处 <wbr> (如果需要，可在此断行) </wbr></p>
列举 (可以巢状列举)
无次序式列举
(
放在每一项前)
N1.0 公布式列举
<ul type=”DISC|CIRCLE|SQUARE”>
<ul type=”DISC|CIRCLE|SQUARE”>(定义全部的列举项)</ul>
</ul>
<ul type=”DISC|CIRCLE|SQUARE”>
<li type=”DISC|CIRCLE|SQUARE”>(定义这个及其後的列举项)
有次序式列举</li>
</ul>
(
放在每一项前)
N1.0 数标型态
<ol type=”A|a|I|i|1″>
<ol type=”A|a|I|i|1″>(定义全部的列举项)</ol>
</ol>
<ol type=”A|a|I|i|1″>
<li type=”A|a|I|i|1″>(定义这个及其後的列举项)
N1.0 起始数字
<ol>
<ol>(定义全部的列举项)</ol>
</ol>
<ol>
<li value=”?”>(定义这个及其後的列举项)
定义式列举<dl><dd>(</dd><dt>项目,</dt><dd>定义)
表单式列举
<menu>(</menu>
<menu>放在每一项前)</menu>
<menu>目录式列举</menu>
<dir>(</dir>
<dir>放在每一项前)</dir></dd></dl></li>
</ol>
</li>
</ol>
背景与颜色
3.0 重复排列的背景
N1.1+ 背景颜色(依序为红、绿、蓝)
N1.1+ 文字颜色
N1.1+ 连结颜色
N1.1+ 看过的连结
N1.1 使用中的连结特殊字元(以下标签需用小写)
特别符号 &#?; (其中 ? 代表 ISO 8859-1 的编码)
< < > > & & ” ”
注册商标TM &reg;
N1.0+ 注册商标TM &reg;
著作权符号 &copy;
N1.0+ 著作权符号 &copy;
表单 (通常需要与CGI程式配合)
定义表单
<form action=””URL”” method=”GET|POST”>
N2.0 上传档案</form><form enctype=””multipart/form-data”>
输入栏位 <input type=””TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET”” />
栏位名称 <input type=”text” name=””***”” />
栏位内定值 <input type=”text” value=””***”” />
已选定 <input type=”text” checked=”checked” /> (适用於checkboxes与 radio boxes)
栏位宽度 <input type=”text” size=”?” /> (以字元数为单位)
最长字数 <input type=”text” maxlength=”?” /> (以字元数为单位)
下拉式选单
下拉式选单名称
选单项目数量
多选式选单 (多选)
选项</form>
内定选项
文字输入区 <textarea></textarea></td>
</tr>
</tbody>
</table>
香港饭馆打工妹妹生活纪实
好也！！！！！！[lol]
很值得浏览!
不错啊,我们与楼主共乐!!!!!!!!!!!!