1. 基本的 HTML 标签
2. 文本格式化标签
3. “计算机输出”标签
|
标签
|
描述
|
|
<code>
|
定义计算机代码。
|
|
<kbd>
|
定义键盘码。
|
|
<samp>
|
定义计算机代码样本。
|
|
<tt>
|
定义打字机代码。
|
|
<var>
|
定义变量。
|
|
<pre>
|
定义预格式文本。
|
|
<listing>
|
不赞成使用。使用 <pre> 代替。
|
|
<plaintext>
|
不赞成使用。使用 <pre> 代替。
|
|
<xmp>
|
不赞成使用。使用 <pre> 代替。
|
4. 引用、引用和术语定义
5. 最常用的字符实体
|
显示结果
|
描述
|
实体名称
|
实体编号
|
|
|
空格
|
|
|
|
<
|
小于号
|
<
|
<
|
|
>
|
大于号
|
>
|
>
|
|
&
|
和号
|
&
|
&
|
|
"
|
引号
|
"
|
"
|
|
'
|
撇号
|
' (IE不支持)
|
'
|
6. 其他一些常用的字符实体
|
显示结果
|
描述
|
实体名称
|
实体编号
|
|
￠
|
分
|
¢
|
¢
|
|
£
|
镑
|
£
|
£
|
|
¥
|
日圆
|
¥
|
¥
|
|
§
|
节
|
§
|
§
|
|
©
|
版权
|
©
|
©
|
|
®
|
注册商标
|
®
|
®
|
|
×
|
乘号
|
×
|
×
|
|
÷
|
除号
|
÷
|
÷
|
7. 表格标签
8. 按字母顺序列出的HTML 4.01/XHTML 1.0标签手册
1. HTML标签
什么是 HTML 文件？
1. HTML 指超文本标签语言。
2. HTML 文件是包含一些标签的文本文件。
3. 这些标签告诉 WEB 浏览器如何显示页面。
4. HTML 文件必须使用 htm 或者 html 作为文件扩展名。
HTML标签特点：
1. HTML 标签是用来标记 HTML 元素的。
2. HTML 标签被 < 和 > 符号包围。
3. 这些包围的符号叫作尖括号。
4. HTML 标签是成对出现的。例如 <b> 和 </b>。
5. 位于起始标签和终止标签之间的文本是元素的内容。
6. HTML 标签对大小写不敏感，<b> 和 <B> 的作用的相同的
结构
1.1. <!--...--> 标签
注释标签用来在源文档中插入注释。注释会被浏览器忽略。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。
1.2. <html>标签
此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
1.3. <head>标签
<head> 标签用于定义文档的头部。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
1.4. <title>标签
<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
1.5. <body>标签
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＞
版面
1.6. <h1> to <h6>标签
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
1.7. <font> 标签
<font> 可规定文本的字体、字体尺寸、字体颜色。
【1】 字体大小 ＜font size=#＞..........＜/font＞ #=1~7；数字愈大字也愈大
【2】 指定字型 ＜font face="字型名称"＞..........＜/font＞
【3】 文字颜色 ＜font color=#rrggbb＞..........＜/font＞ rr：表红色（red）色码 gg：表绿色（green）色码 bb：表蓝色（blue）色码
1.8. 字体效果标签
显示小字体 ＜small＞..........＜/small＞
显示大字体 ＜big＞..........＜/big＞
粗体字 ＜b＞..........＜/b＞
斜体字 ＜i＞..........＜/i＞
打字机字体 ＜tt＞..........＜/tt＞
底线 ＜u＞..........＜/u＞
删除线 ＜strike＞..........＜/strike＞
下标字 ＜sub＞..........＜/sub＞
上标字 ＜sup>..........＜/sup＞
文字闪烁效果 ＜blink＞..........＜/blink＞
1.9. <br> 标签
<br> 可插入一个简单的换行符。
<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。
1.10. <p> 标签
<p> 标签可定义一个段落。
可选的属性
|
属性
|
值
|
描述
|
DTD
|
|
align
|
left
right
center
justify
|
规定段落中文本的排列方式。
|
TF
|
1.11. <hr> 标签
<hr> 标签可插入一个水平线。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
【1】分隔线的粗细 ＜hr size=点数＞
【2】分隔线的宽度 ＜hr size=点数或百分比＞
【3】分隔线对齐方向 ＜hr align="#"＞ #号可为 left：表向左对齐（预设值） center：表向中对齐 right：表向右对齐
【4】分隔线的颜色 ＜hr color=#rrggbb＞
【5】实心分隔线 ＜hr noshade＞
1.12. <center>标签
对其所包括的文本进行水平居中。
1.13. <pre> 标签
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来表示计算机的源代码。
图片
1.14. <img>标签
img 元素可定义一副图像。
例子：<img src="angry.gif" alt="Angry" />
属性：
|
属性
|
值
|
描述
|
DTD
|
|
alt
|
text
|
定义图像的简短描述（即图像的替代文本）。不超过 1024 个字符。
|
STF
|
|
src
|
URL
|
所显示图像的 URL。
|
STF
|
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.15. <table>标签
<table> 标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。
【1】设定边框的厚度 -- border
＜table border=点数＞
【2】设定格线的宽度 -- cellspacing
＜table cellspacing=点数＞
【3】设定资料与格线的距离 -- cellpadding
＜table cellpadding=点数＞
【4】调整表格宽度 -- width
＜table width=点数或百分比＞
【5】调整表格高度 -- height
＜table height=点数或百分比＞
【6】设定表格背景色彩 -- bgcolor
＜table bgcolor=#rrggbb＞
【7】设定表格边框色彩 -- bordercolor
＜table bordercolor=#rrggbb
1.16. <caption> 标签
caption 元素可定义一个表格标题。caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。
表格标题位置 -- align
＜caption align="#"＞ #号可为 top：表标题置于表格上方（预设值）
bottom：表标题置于表格下方
1.17. <tr>标签
在表格中定义一行。
1.18. <td>标签
定义表格中的一个单元格。
1.19. <th>标签
定义表格内的表头单元格。此 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.20. <dir> 标签
<dir> 标签可定义目录列表。
1.21. <menu>标签
<menu>标签可以定义一个菜单列表。
1.22. <ol>标签
<ol>标签可以定义有序列表
1.23. <ul>标签
<ul>标签可以定义无序列表。
1.24. <dl>标签
<dl>标签可以自定义列表。
表单
1.25. <form>标签
form 元素可为用户输入创建表单。
表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。
基本架构 ＜form action="处理资料用的CGI程式之URL"或"mailt电子信箱的URL" method="get或post"＞ .......... .......... .......... ＜/form＞
必需的属性
|
属性
|
值
|
描述
|
DTD
|
|
action
|
URL
|
当确认按钮被按下时，接受和处理表单数据的 URL。
|
STF
|
|
method
|
· get
· post
|
用于向 action URL 传送数据的 HTTP 方法。默认为 get。
|
|
注释：如果表单值包含非 ASCII 字符或者超过 100 个字符，您则必须使用 method="post"。
1.26. <input>标签
<input> 标签可定义输入域的开始，在其中用户可输入数据。
对于大量通常的表单控件，可以使用 <input> 标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。
虽然 <input> 标签中有许多属性，但是对每个元素来说，只有 type 属性和 name 属性是必需的（提交或重置按钮只有 type 属性）。
输入文件型表单 ＜form action="URL" method="post"＞ ＜input＞ ＜input＞ .......... .......... ＜/form＞
【1】栏位类型 -- type ＜input type=#＞ #号可为 text：文字输入 password：密码 checkbox：多选钮 radio：单选钮 submit：接受按钮 reset：重设按钮 image：图形钮 hidden：隐藏栏位
【2】栏位名称 -- name ＜input name="资料栏名"＞ P.S.若type为submitⅱreset则name不必设定
【3】文件上的预设值 -- value ＜input value="预设之字串"＞
【4】设定栏位的宽度 -- size ＜input size=字元数＞
【5】限制最大输入字串的长度 -- maxlength ＜input maxlength=字元数＞
【6】预设checkbox或radio的初值 -- checked ＜input type=checkbox checked＞ ＜input type=radio checked＞
【7】指定图形的URL -- src ＜input type=image src="图档名"＞
【8】图文对齐 -- align ＜input type=image align="#"＞ #号可为 top：文字对齐图片之顶端 middle：文字对齐图片之中间 buttom：文字对齐图片之底部
1.27. <select>标签
select 元素可创建单选或多选菜单。
当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
选择式表单 ＜form action="URL" method="post"＞ ＜select＞ ＜option＞ ＜option＞ .......... .......... ＜/select＞ ＜/form＞
A、＜select＞的属性
【1】栏位名称 -- name ＜select name="资料栏位名"＞
【2】设定显示的选项数 -- size ＜select size=个数＞
【3】多重选项 -- multiple ＜select multiple＞
B、＜option＞的属性
【1】定义选项的传回值 -- value ＜option value="传回值"＞
【2】预先选取的选项 -- selected ＜option selected＞
1.28. <textarea>标签
定义一个文本区域 (text-area) （一个多行的文本输入区域）。用户可在此文本区域中写文本。在一个文本区中，您可输入无限数量的文本。文本区中的默认字体是等宽字体 (fixed pitch)。
多列输入文字区表单 ＜form action="URL" method="post"＞ ＜textarea＞ .......... .......... ＜/textarea＞ ＜/form＞
【1】文字区的变数名称 -- name ＜textarea name=变数名称＞
【2】设定文字输入区宽度 -- cols ＜textarea cols=字元数＞
【3】设定文字输入区高度 -- rows ＜textarea rows=列数＞
【4】输入区设定预设字串 ＜textarea＞ 预设文字 ＜/textarea＞
【5】自动换行与否 -- wrap ＜textarea wrap=#＞ #号可为 off：表输入的文字超过栏宽时，不会自动换行（预设值） virtual：表输入的文字在超过栏宽时会自动换行。
下列的HTML中哪个可以产生文本区？
错误回答：<input type="textarea">
正确答案：<textarea>
链接
1.29. <a>标签
<a> 标签可定义锚。一个锚有两种用法：
1、 通过使用 href 属性，创建一个到另外一个文档的链接
2、 通过使用 name 或 id 属性，创建一个文档内部的书签
一、连结至其他文件 ＜a href="URL"＞说明文字或图片＜/a＞
二、连结至文件内之某一处（外部连结）
《1》起点
＜a href="档名#名称"＞..........＜/a＞
《2》终点 ＜a name="名称"＞
如何在新窗口打开链接？
回答：<a href="url" target="_blank">
框架
1.30. <frame>和<frameset>标签
<frame>在 <frameset> 中定义一个框架。
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
重要事项：您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。不过，如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！
一、分割视窗指令 ＜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=点数或百分比＞
二ⅱ指定视窗内容 -- ＜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】设定分割视窗卷轴 -- scrollin
＜frame scrolling=#＞ #号可为 yes：固定出现卷轴
no：不出现卷轴 auto：自动判断文件大小需不需要卷轴（预设值）
【6】锁住分割视窗的大小 -- noresize ＜frame noresize＞
王冠球2009年5月7日整理
没有所谓的命运，只有不同的选择！