HTML标签以及各个标签属性大全(网页制作必备)
总类(所有HTML文件都有的)
--------------------------------------------------------------------------------
文件类型
文件主题
文头
文体
结构性定义(由浏览器控制的显示风格)
--------------------------------------------------------------------------------
标题<H?></H?>(?表示从1到6,有六层选择) 数值越高字越小
标题对齐
区分<DIV></DIV>
区分对齐 <DIVALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>左对齐、右对齐、居中对齐、两端对齐
引文区块<BLOCKQUOTE></BLOCKQUOTE>(通常会内缩)
斜体
加粗
引文
码<CODE></CODE>(显示原始码之用)
样本<SAMP></SAMP>
表示一段用户应该对其没有什么其他解释的文本。要从正常的上下文抽取这些字符时,通常要用到这个标签。
并不经常使用,只在要从正常上下文中将某些短字符序列提取出来,对其加以强调,才使用这个标签
键盘输入<KBD></KBD>
变数<VAR></VAR>
定义<DFN></DFN>(有些浏览器不提供)
地址<ADDRESS></ADDRESS>
3.0 大字<BIG></BIG>
3.0 小字<SMALL></SMALL>
与外观相关的标签(作者自订的表现方式)
--------------------------------------------------------------------------------
加粗<B></B>
斜体<I></I>
3.0 底线<U></U>(尚有些浏览器不提供)
3.0 删除线<S></S>(尚有些浏览器不提供)
3.0 下标<SUB></SUB>
3.0 上标<SUP></SUP>
打字机体<TT></TT>(用单空格字型显示)
预定格式<PRE></PRE>(保留文件中空格的大小)
预定格式的宽度 <PREWIDTH=?></PRE>(以字元计算)
N1.0+ 向中看齐<CENTER></CENTER>(文字与图片都可以)
N1.0 闪耀<BLINK></BLINK>(有史以来最被嘲弄的标签)
N1.0 字体大小 <FONTSIZE=?></FONT>(从1到7)
N1.0 改变字体大小 <FONTSIZE=+|-?></FONT>
N1.0 基本字体大小 <BASEFONTSIZE=?> (从1到7; 内定为3)
N2.0 字体颜色 <FONTCOLOR="#$$$$$$"></FONT>
连结与图形
--------------------------------------------------------------------------------
链接
连结到锚点 <AHREF="URL#***"></A>(如果锚点在另一个档案)
N2.0 连结到目的视框 <A HREF="URL"TARGET="***"></A>
设定锚点 <ANAME="***"></A>
图形 <IMGSRC="URL">
图形看齐方式 <IMGSRC="URL"ALIGN=TOP|BOTTOM|MIDDLE>
N1.0 图形看齐方式 <IMGSRC="URL"ALIGN=LEFT|RIGHT|TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM>
取代文字 <IMG SRC="URL" ALT="***">(如果没有办法显示图形则显示此文字)
点选图 <IMG SRC="URL"ISMAP> (需要CGI程式)
N2.0 点选图 <IMG SRC="URL"USEMAP="URL">
N2.0 地图 <MAPNAME="***"></MAP>(描述地图)
N2.0 段落 <AREA SHAPE="RECT" COORDS=",,,"HREF="URL"|NOHREF>
3.0 大小 <IMG SRC="URL" WIDTH="?"HEIGHT="?">(以pixels为单位:px)
N1.0 图形边缘 <IMG SRC="URL" BORDER=?>(以pixels为单位)
N1.0 图形边缘空间 <IMG SRC="URL" HSPACE=?VSPACE=?> (以pixels为单位)
N1.0 低解析度图形 <IMG SRC="URL"LOWSRC="URL">
N1.1 用户端拉 <META HTTP-EQUIV="Refresh" CONTENT="?;URL=URL">(使用端自动更新 )
N2.0 内嵌物件 <EMBED SRC="URL">(将物件插入页面)
N2.0 内嵌物件大小 <EMBED SRC="URL" WIDTH="?"HEIGHT="?">
分隔
--------------------------------------------------------------------------------
段落 <P> (通常是两个return)
3.0 段落<P></P>(新定义成容器型标签)
3.0 文字看齐方式 <PALIGN=LEFT|CENTER|RIGHT></P>
换行 <BR> (一个return)
N1.0 文字部份看齐方式<BRCLEAR=LEFT|RIGHT|ALL>(与图形合用时)
横线 <HR>
N1.0 横线对齐 <HRALIGN=LEFT|RIGHT|CENTER>
N1.0 横线厚度 <HR SIZE=?>(以pixels为单位)
N1.0 横线宽度 <HR WIDTH=?>(以pixels为单位)
N1.0 横线比率宽度 <HR WIDTH=%>(以页宽为100%)
N1.0 实线 <HR NOSHADE> (没有立体效果)
N1.0 不可换行<NOBR></NOBR>(不换行)
N1.0 可换行处 <WBR> (如果需要,可在此断行)
列举(可以巢状列举)
--------------------------------------------------------------------------------
无次序式列举<UL><LI></UL>(<LI> 放在每一项前)
N1.0 公布式列举 <ULTYPE=DISC|CIRCLE|SQUARE>(定义全部的列举项)
<LITYPE=DISC|CIRCLE|SQUARE>(定义这个及其後的列举项)
有次序式列举<OL><LI></OL>(<LI> 放在每一项前)
N1.0 数标型态 <OL TYPE=A|a|I|i|1>(定义全部的列举项)
<LI TYPE=A|a|I|i|1>(定义这个及其後的列举项)
N1.0 起始数字 <OL VALUE=?>(定义全部的列举项)
<LI VALUE=?> (定义这个及其後的列举项)
定义式列举<DL><DT><DD></DL>(<DT>项目,<DD>定义)
表单式列举<MENU><LI></MENU>(<LI>放在每一项前)
目录式列举<DIR><LI></DIR>(<LI> 放在每一项前)
背景与颜色
--------------------------------------------------------------------------------
3.0 重复排列的背景 <BODYBACKGROUND="URL">
N1.1+ 背景颜色 <BODYBGCOLOR="#$$$$$$"> (依序为红、绿、蓝)
N1.1+ 文字颜色 <BODYTEXT="#$$$$$$">
N1.1+ 连结颜色 <BODYLINK="#$$$$$$">
N1.1+ 看过的连结 <BODYVLINK="#$$$$$$">
N1.1 使用中的连结 <BODYALINK="#$$$$$$">
特殊字元(以下标签需用小写)
--------------------------------------------------------------------------------
特别符号 &#?; (其中 ? 代表 ISO 8859-1 的编码)
< < >> & & ""
注册商标TM ?
N1.0+ 注册商标TM ®
著作权符号 ?
N1.0+ 著作权符号 ©
表单(通常需要与CGI程式配合)
--------------------------------------------------------------------------------
定义表单 <FORM ACTION="URL"METHOD=GET|POST></FORM>
N2.0 上传档案 <FORMENCTYPE="multipart/form-data></FORM>
输入栏位 <INPUTTYPE="TEXT|PASSWORD|CHECKBOX|RADIO|IMAGE|HIDDEN|SUBMIT|RESET">
栏位名称 <INPUT NAME="***">
栏位内定值 <INPUT VALUE="***">
已选定 <INPUT CHECKED>(适用於checkboxes与 radio boxes)
栏位宽度 <INPUT SIZE=?> (以字元数为单位)
最长字数 <INPUT MAXLENGTH=?>(以字元数为单位)
下拉式选单<SELECT></SELECT>
下拉式选单名称 <SELECTNAME="***"></SELECT>
选单项目数量 <SELECTSIZE=?></SELECT>
多选式选单 <SELECT MULTIPLE> (多选)
选项 <OPTION>
内定选项 <OPTION SELECTED>
文字输入区 <TEXTAREA ROWS=?COLS=?></TEXTAREA>
输入区名称 <TEXTAREANAME="***"></TEXTAREA>
N2.0 输入区换行方式 <TEXTAREAWRAP=OFF|VIRTUAL|PHYSICAL></TEXTAREA>
表格
--------------------------------------------------------------------------------
3.0 定义表格<TABLE></TABLE>
3.0 表格框线 <TABLEBORDER></TABLE>(有或没有)
N1.1 表格框线 <TABLEBORDER=?></TABLE>(可以设定数值)
N1.1 储存格左右留白 <TABLECELLSPACING=?>
N1.1 储存格上下留白 <TABLECELLPADDING=?>
N1.1 表格宽度 <TABLE WIDTH=?>(以pixels为单位)
N1.1 宽度比率 <TABLE WIDTH=%>(页宽为100%)
3.0 表格列<TR></TR>
3.0 表格列内容看齐 <TR ALIGN=LEFT|RIGHT|CENTERVALIGN=TOP|MIDDLE|BOTTOM>
3.0 储存格<TD></TD>(须与列并用)
3.0 储存格内容看齐 <TD ALIGN=LEFT|RIGHT|CENTERVALIGN=TOP|MIDDLE|BOTTOM>
3.0 不换行 <TD NOWRAP>
N3.0 储存格背景颜色 <TDBGCOLOR=#$$$$$$>
3.0 储存格横向连接 <TD COLSPAN=?>
3.0 储存格纵向连接 <TD ROWSPAN=?>
N1.1 储存格宽度 <TD WIDTH=?>(以pixels为单位)
N1.1 储存格宽度比率 <TD WIDTH=%>(页宽为100%)
3.0 表格标题<TH></TH>(跟<TD>一样,不过会对中并加粗)
3.0 表格标题对齐 <TH ALIGN=LEFT|RIGHT|CENTERVALIGN=TOP|MIDDLE|BOTTOM>
3.0 表格标题不换行 <TH NOWRAP>
3.0 表格标题占几栏 <TH COLSPAN=?>
3.0 表格标题占几列 <TH ROWSPAN=?>
N1.1 表格标题宽度 <TH WIDTH=?>(以pixels为单位)
N1.1 表格标题比率宽度<TH WIDTH=%>(页宽为100%)
3.0 表格抬头<CAPTION></CAPTION>
3.0 表格抬头看齐 <CAPTIONALIGN=TOP|BOTTOM>(在表格之上/之下)
视框(定义与控制萤幕上的特定区域)
--------------------------------------------------------------------------------
N2.0 视框格式总定义<FRAMESET></FRAMESET>(取代<BODY>)
N2.0 视框行长度分配 <FRAMESETROWS=,,,></FRAMESET>(pixels或 %)
N2.0 视框行长度分配 <FRAMESETROWS=*></FRAMESET> (*= 相对大小)
N2.0 视框栏宽度分配 <FRAMESETCOLS=,,,></FRAMESET>(pixels或 %)
N2.0 视框栏宽度分配 <FRAMESETCOLS=*></FRAMESET> (*=相对大小)
N2.0 定义个别视框 <FRAME> (定义个别视框)
N2.0 个别视框内容 <FRAME SRC="URL">
N2.0 个别视框名称 <FRAMENAME="***"|_blank|_self|_parent|_top>
N2.0 边缘宽度 <FRAME MARGINWIDTH=?>(「左」与「右」边界)
N2.0 边缘高度 <FRAME MARGINHEIGHT=?>(「天顶」与「地底」边界)
N2.0 卷动条 <FRAMESCROLLING="YES|NO|AUTO">
N2.0 不可改变大小 <FRAME NORESIZE>
N2.0 无视框时的内容<NOFRAMES></NOFRAMES>(如果浏览器不提供视框功能的话)
杂项
--------------------------------------------------------------------------------
说明 <!-- *** --> (浏览器不会显示)
档案型态声明 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML2.0//EN">
3.0 档案型态声明 <!DOCTYPE HTML PUBLIC "-//W3O//DTD W3HTML 3.0//EN">
可搜寻 <ISINDEX> (指示可搜寻的索引项)
N1.0 提示 <ISINDEX PROMPT="***">(要求输入的提示文字)
送出搜寻条件 <AHREF="URL?***"></a>(其中的问号不是数字,而是「问号」)
基本档案的URL <BASE HREF="URL">(必须放在「文头」区段内)
N2.0 基本视窗名称 <BASE TARGET="***">(必须放在「文头」区段内)
相关性 <LINK REV="***" REL="***"HREF="URL"> (必须放在「文头」区段内)
背景资讯 <META> (必须放在「文头」区段内)
HTML标签
HTML标签通常是英文词汇的全称(如块引用:blockquote)或缩略语(如“p”代表Paragragh),但它们的与一般文本有区别,因为它们放在单书名号里。故Paragragh标签是<p>,块引用标签是<blockquote>。有些标签说明页面如何被格式化(例如,<p>开始一个新段落),其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息--例如标题。
关于标签,需要记住的是,它们是成双出现的。每当使用一个标签--如<blockquote>,则必须以另一个标签</blockquote>将它关闭。注意“blockquote”前的斜杠,那就是关闭标签与打开标签的区别。
基本HTML页面以<html>标签开始,以</html>结束。在它们之间,整个页面有两部分--标题和正文。
标题词--夹在<head>和</head>标签之间--这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在<body>和</body>之间--即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。
那么让我们建立一个简单的范例吧,非常容易的。第一步,当然是要建立一个新的文本文件(记住,如果你在使用比较复杂的文字处理器,就应该用“纯文本”或“普通文本”来保存),将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文)
然后你可以用浏览器将它打开,你会看见最简单的自己做的页面。
.<html></html>
2.<head></head>
3.<body></body>
4.<title></title>
Html是英文 HyperText Markup Language的缩写,中文意思是“超文本标志语言”,用它编写的文件(文档)的扩展名是.html或.htm,它们是可供浏览器解释浏览的文件格式。您可以使用记事本、写字板或FrontPage Editor等编辑工具来编写Html文件。Html语言使用标志对的方法编写文件,既简单又方便,它通常使用<标志名></标志名>来表示标志的开始和结束(例如<html></html>标志对),因此在Html文档中这样的标志对都必须是成对使用的。在此教程中,我先讲一下Html的基本标志:
1.<html></html>
<html>标志用于Html文档的最前边,用来标识Html文档的开始。而</html>标志恰恰相反,它放在Html文档的最后边,用来标识Html文档的结束,两个标志必须一块使用。
2.<head></head>
<head>和</head>构成Html文档的开头部分,在此标志对之间可以使用<title></title>、<script></script>等等标志对,这些标志对都是描述Html文档相关信息的标志对,<head></head>标志对之间的内容是不会在浏览器的框内显示出来的。两个标志必须一块使用。
3.<body></body>
<body></body>是Html文档的主体部分,在此标志对之间可包含<p>、</p>、<h1>、</h1>、<br>、<hr>等等众多的标志,它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须一块使用。<body>标志中还可以有以下属性:属性
用途
示例
<body bgcolor="#rrggbb"> 设置背景颜色。<body bgcolor="red">红色背景
<body text="#rrggbb"> 设置文本颜色。<body text="#0000ff">蓝色文本
<body link="#rrggbb"> 设置链接颜色。<body link="blue">链接为蓝色
<body vlink="#rrggbb">设置已使用的链接的颜色。 <bodyvlink="#ff0000">
<body alink="#rrggbb">设置正在被击中的链接的颜色。 <bodyalink="yellow">
说明:以上各个属性可以结合使用,如<body bgcolor="red"text="#0000ff">。引号内的rrggbb是用六个十六进制数表示的RGB(即红、绿、蓝三色的组合)颜色,如#ff0000对应的是红色。此外,还可以使用Html语言所给定的常量名来表示颜色:Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Lime、Agua、Fuchsia、Silver、Red、Blue和Teal,如<bodytext="Blue">表示<body></body>标志对中的文本使用蓝色显示在浏览器的框内。
4.<title></title>
使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息,那些信息一般是网页的“主题”,要将您的网页的主题显示到浏览器的顶部其实很简单,只要在<title></title>标志对之间加入您要显示的文本即可。注意:<title></title>标志对只能放在<head></head>标志对之间。
下面是一个综合的例子,仔细阅读,您便可以了解以上各个标志对在一个Html文档中的布局或所使用的位置。
例1 Html文档中基本标志的使用
<html>
<head>
<title>显示在浏览器最上边蓝色条中的文本</title>
</head>
<body bgcolor="red"text="blue">
<p>红色背景、蓝色文本</p>
</body>
</html>
1.<p></p>
2.<br>
3.<blockquote></blockquote>
4.<dl></dl><dt></dt><dd></dd>
5.<ol></ol><ul></ul><li></li>
6.<div></div>
上一个教程中我们讲了Html文档的基本标志,但我们还不知道怎样在浏览器中显示文本之类的东西,这正是我们在教程二中将要谈到的。在学习之前,必须强调一下,我们这个教程中所讲的格式标志统统都是用于<body></body>标志对之间的。
1.<p></p>
<p></p>标志对是用来创建一个段落,在此标志对之间加入的文本将按照段落的格式显示在浏览器上。另外,<p>标志还可以使用align属性,它用来说明对齐方式,语法是:<palign=""></p>。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。如<palign="Center"></p>表示标志对中的文本使用居中的对齐方式。
2.<br>
<br>是一个很简单的标志,它没有结束标志,因为它用来创建一个回车换行,这么一说我想您该会使用了吧。在<br>的使用上还有一定的技巧,如果您把<br>加在<p></p>标志对的外边,将创建一个大的回车换行,即<br>前边和后边的文本的行与行之间的距离比较大,若放在<p></p>的里边则<br>前边和后边的文本的行与行之间的距离将比较小,您不妨试试看。
3.<blockquote></blockquote>
在<blockquote></blockquote>标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。
4.<dl></dl><dt></dt><dd></dd>
<dl></dl>用来创建一个普通的列表,<dt></dt>用来创建列表中的上层项目,<dd></dd>用来创建列表中最下层项目,<dt></dt>和<dd></dd>都必须放在<dl></dl>标志对之间。看一下下边的例子您就会明白了:
例2 创建一个普通列表
<html>
<head>
<title>一个普通列表</title>
</head>
<body text="blue">
<dl>
<dt>中国城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>广州</dd>
<dt>美国城市</dt>
<dd>华盛顿</dd>
<dd>芝加哥</dd>
<dd>纽约</dd>
</dl>
</body>
</html>
此例在浏览器中的显示如下:
中国城市
北京
上海
广州
美国城市
华盛顿
芝加哥
纽约
5.<ol></ol><ul></ul><li></li>
<ol></ol>标志对用来创建一个标有数字的列表;<ul></ul>标志对用来创建一个标有圆点的列表;<li></li>标志对只能在<ol></ol>或<ul></ul>标志对之间使用,此标志对用来创建一个列表项,若<li></li>放在<ol></ol>之间则每个列表项加上一个数字,若在<ul></ul>之间则每个列表项加上一个圆点。请看下边的例子:
例3 标有数字或圆点的列表
<html>
<head>
<title></title>
</head>
<body text="blue">
<ol>
<p>中国城市</p>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ol>
<ul>
<p>美国城市</p>
<li>华盛顿</li>
<li>芝加哥</li>
<li>纽约</li>
</ul>
</body>
</html>
此例在浏览器中的显示如下:
中国城市
北京
上海
广州
美国城市
华盛顿
芝加哥
纽约
6.<div></div>
<div></div>标志对用来排版大块Html段落,也用于格式化表,此标志对的用法与<p></p>标志对非常相似,同样有align对齐方式属性,读者可以自己试试看。
html标签的用法=======================================================================================
一、基本概念:
二、HTML语法:
三、<body>的一些属性:
四、注释与特殊字符:
五、格式标签
六、文本标签:
七、图像标签:
八、超链接标签:
九、<mapname=""></map>:图像地图将一个图像分成多个部分,各部分分别指向不同的链接。
十、表格标签:<table></table><tr></tr><td></td>
十一、框架标签<frameset></frameset><frame></frame>:
十二、表单标签:
十三、分区标签:
十四、头元素: