资源描述
HTML教程大全 详细用法
HTML结构
<HTML> 文件类型标记开始，HTML文件
<HEAD> 文件头开始
<TITLE>页面标题</TITLE> 页面标题标记
</HEAD> 文件头结束
<BODY> 主题标记开始
正文内容 主题内容
</BODY> 主题内容结束
</HTML> 文件类型标记结束
一、 HTML 头：
1、针对日文环境：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>yourtitle</title>
</head>
2、针对中文环境：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>yourtitle</title>
</head>
我们建议的编码格式是utf-8，它支持多语种，并且可以避免出现乱码的情况。
二、html中javascript的书写：
<head>…..
<script type="text/javascript">
<!—…..-->
</script>
</head>
当然我们不希望你是这样内嵌脚本，而是从一个外部文件进行引用，并且只把它放在文档的头部。
<script src="path/to/script.js" language="javascript" type="text/javascript"></script>
三、html中元素的书写：
1、 元素属性值必须包含在双引号中；
<font color=”#000000” size=”3” face=”Arial”>
2、 form 中必须加action属性，并且不能为空。
<form action=”/r/add.cgi” method=”post”>
如果不需要使用action属性，也必须定义：
<form action=”no” >
3、 img的alt属性不可以缺少；
<img src="/q/img/btn_style.gif" border="0" alt="Select”>
4、 head与</head>之间必须有title；
<head>
……
<title>your title </title>
……
</head>
5、 tr、td必须定义在table之间；
6、 button按钮必须定义在form之间，否则netscape不支持；
<form action=”……” method=”post”>
<input type=”button” name=”but” value=”back”>
</form>
7、 在javascript中的字符串中出现的“/”前要用转义符“\”：
<script type=”text/javascript”>
<!—
function check(str) {
var str=”\/r\/add.cgi”;
……
}
-->
</script>
8、 onclick 属性必须和 onkeypress 成对写( onmousedown + onkeydown、onmouseup + onkeyup)
mm
9、 用URL传值时直接写&是不可以的，可用&替换：
四、缩近规则：
<table>中<td></td>,<tr></tr>等必须保持严格的缩近规则，以"Tab"键为准：
<table>
<tr>
<td>
<table>
<tr>
<td>…</td>
…
</tr>
</table>
</td>
….
</tr>
</table>
五、为了检验您的HTML代码是否合法，您可以到W3的HTML Validator工具中进行检验，支持URI输入，上传文件和直接输入代码三种方式进行检验
编辑本段HTML标签参考
基本标签
创建一个HTML文档 <html></html>
设置文档标题以及其他不在WEB网页上显示的信息 <head></head>
设置文档的可见部分 <body></body>
标 题 标 签
将文档的题目放在标题栏中 <title></title>
文档整体属性
设置背景颜色，使用名字或十六进制值 <body bgcolor=?>
设置文本文字颜色，使用名字或十六进制值 <body text=?>
设置链接颜色，使用名字或十六进制值 <body link=?>
设置已使用的链接的颜色，使用名字或十六进制值 <body vlink=?>
设置正在被击中的链接的颜色，使用名字或十六进制值 <body alink=?>
文本标签
创建预格式化文本 <pre></pre>
创建最大的标题 <h1></h1>
创建最小的标题 <h6></h6>
创建黑体字 <b></b>
创建斜体字 <i></i>
创建打字机风格的字体 <tt></tt>
创建一个引用，通常是斜体 <cite></cite>
加重一个单词（通常是斜体加黑体） <em></em>
加重一个单词（通常是斜体加黑体） <strong></strong>
设置字体大小，从1到7 <font size=?></font>
设置字体的颜色，使用名字或十六进制值 <font color=?></font>
链接
创建一个超链接 <a href="URL"></a>
创建一个自动发送电子邮件的链接 <a href="mailto:EMAIL">.... </a>
创建一个位于文档内部的靶位 <a name="NAME"></a>
创建一个指向位于文档内部靶位的链接 <a href="#NAME"></a>
格式排版
创建一个新的段落 <p>
将段落按左、中、右对齐 <p align=?>
插入一个回车换行符 <br>
从两边缩进文本 <blockquote>
</blockquote>
创建一个定义列表 <dl></dl>
放在每个定义术语词之前 <dt>
放在每个定义之前 <dd>
创建一个标有数字的列表 <ol></ol>
放在每个数字列表项之前，并加上一个数字 <li>
创建一个标有圆点的列表 <ul></ul>
放在每个圆点列表项之前，并加上一个圆点 <li>
一个用来排版大块HTML段落的标签，也用于格式化表 <div align=?>
图形元素
添加一个图像 <img src="name">
排列对齐一个图像：左中右或上中下 <img src="name" align=?>
设置围绕一个图像的边框的大小 <img src="name" border=?>
加入一条水平线 <hr>
设置水平线的大小（高度） <hr size=?>
设置水平线的宽度（百分比或绝对像素点） <hr width=?>
创建一个没有阴影的水平线 <hr noshade>
表格
创建一个表格 <table></table>
开始表格中的每一行 <tr></tr>
开始一行中的每一个格子 <td></td>
设置表格头：一个通常使用黑体居中文字的格子 <th></th>
表格属性
设置围绕表格的边框的宽度 <table border=#>
设置表格格子之间空间的大小 <table cellspacing=#>
设置表格格子边框与其内部内容之间空间的大小 <table cellpadding=#>
设置表格的宽度－用绝对像素值或文档总宽度的百分比 <table width=# or %>
设置表格格子的水平对齐（左中右） <tr align=?> or <td align=?>
设置表格格子的垂直对齐（上中下） <tr valign=?> or <td valign=?>
设置一个表格格子应跨占的列数（缺省为1） <td colspan=#>
设置一个表格格子应跨占的行数（缺省为1） <td rowspan=#>
禁止表格格子内的内容自动断行回卷 <td nowrap>
窗框
放在一个窗框文档的<body>标签之前，也可以嵌在其他窗框文档中 <frameset></frameset>
定义一个窗框内的行数，可以使用绝对像素值或高度的百分比 <frameset rows="value,value">
定义一个窗框内的列数，可以使用绝对像素值或宽度的百分比 <frameset cols="value,value">
定义一个窗框内的单一窗或窗区域 <frame>
定义在不支持窗框的浏览器中显示什么提示 <noframes></noframes>
窗框属性
规定窗框内显示什么HTML文档 <frame src="URL">
命名窗框或区域以便别的窗框可以指向它 <frame name="name">
定义窗框左右边缘的空白大小，必须大于等于1 <frame marginwidth=#>
定义窗框上下边缘的空白大小，必须大于等于1 <frame marginheight=#>
设置窗框是否有滚动栏，其值可以是"yes","no","auto"，缺省时一般为"auto" <frame scrolling=VALUE>
禁止用户调整一个窗框的大小 <frame noresize>
表单
对于功能性的表单，一般需要运行一个CGI小程序，HTML仅仅是产生表单的表面样子。
创建所有表单 <form></form>
创建一个滚动菜单，size设置在需要滚动前可以看到的表单项数目 <select multiple name="NAME" size=?></select>
设置每个表单项的内容 <option>
创建一个下拉菜单 <select name="NAME"></select>
设置每个菜单项的内容 <option>
创建一个文本框区域，列的数目设置宽度，行的数目设置高度 <textarea name="NAME" cols=40 rows=8></textarea>
创建一个复选框，文字在标签后面 <input type="checkbox" name="NAME">
创建一个单选框，文字在标签后面 <input type="radio" name="NAME" value="x">
创建一个单行文本输入区域，size设置以字符计的宽度 <input type=text name="foo" size=20>
创建一个submit（提交）按钮 <input type="submit" value="NAME">
创建一个使用图象的submit（提交）按钮 <input type="image" border=0 name="NAME" src="name.gif">
创建一个reset（重置）按钮 <input type="reset">
字体效果
<h1>...</h1>标题字(最大)
<h6>...</h6>标题字(最小)
<b>...</b>粗体字
<strong>...</strong>粗体字(强调)
<i>...</i>斜体字
<em>...</em>斜体字(强调)
<dfn>...</dfn>斜体字(表示定义)
<u>...</u>底线
<ins>...</ins>底线(表示插入文字)
<strike>...</strike>横线
<s>...</s>删除线
<del>...</del>删除线(表示删除)
<kbd>...</kbd>键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext>固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<font color=00ff00>...</font>字体颜色
<font size=1>...</font>最小字体
<font style =font-size:100 px>...</font>无限增大
HTML标签和属性的语义化
分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容。一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义，没有理由使用其他的标记。换句话说，不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素，比如用<div>来代替<p>标记标题。
首先是关于语义（Semantics）和默认样式的区别，默认样式是浏览器设定的一些常用tag的表现形式，个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。
其次，语义化的网页的好处，最主要的就是对搜索引擎友好，又有良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。
具体的语义和用途在，XHTML1.0 TAG 参考中都已经说明，这里将一些容易遗忘或者混淆的TAGS和属性予以补充。
<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用，并且依据重要性递减。<h1>是最高的等级。
例如:
<h1>文档标题</h1>
<h2>次级标题</h2>
而不要使用
<div class=\"title\">文档标题</div>，或者<span class=\"title\">文档标题</span>.很明显搜索引擎对于后者是不会认为他是标题的。
<p>
段落标记，知道了<p>作为段落，你就不会再使用<br/>来换行了，而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行，而且换行的效果优于<br>。段落与段落之间的空隙也可以利用CSS来控制，很容易而且清晰的区分出段落与段落。在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。
例如：
<p>在利用行高(line-height)很容易的定义出行间距，再定义首字下沉等效果，那就挺完美了。</p>
<ul>、<ol>、<li>
<ul>无序列表，很常见的到了大家广泛的使用，<ol>有序列表也挺常用。在web标准化过程中，<ul>还被更多的用于导航条，本来导航条就是个列表，这样做是完全正确的，而且当你的浏览器不支持CSS的时候，导航链接仍然很好使，就是美观方面差了一点。
例如:
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
<ol>
<li>第一章</li>
<li>第二章</li>
<li>第三章</li>
</ol>
<dl>、<dt>、<dd>
dl就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
例如：
<dl>
<dt>Dog</dt>
<dd>A carnivorous mammal of the family Canidae.</dd>
</dl>
<dl>
<dt>上海滩</dt>
<dd>这部拍摄于1980年的《上海滩》堪称是香港电视史上最成功、最经典的剧集。
当年在香港播出以后，产生了巨大的轰动效应。</dd>
<dt>周润发</dt>
<dd>和所有伟大的影星一样，周润发印证了一个时代，一个香港电影的黄金时代。
风衣墨镜、冷血双枪、阳光微笑，都封存胶片之中，当我们回首寻望的时候，发哥已被刻为一个时代的坐标。</dd>
</dl>
<cite>、cite 、<q>、 <blockquote>
论坛和blog经常会用到引用别人的话，用<q>来标记简短的单行引用。Web浏览器会自动识别在<q> 之间的内容。不幸的是，IE不能识别，并且有些时候， <q>会引起一些可访问性(Accessibility)的问题。正因为如此，一些人建议尽量不要使用 <q>,手动的插入引用标记。在一个包含适当的类的 <span>中加入单行的引用内容，那么就可以用CSS来给引用设计样式了，但是这个没有语义上的意义。CSS可以用来定义引用的样式。注意，一段文章是不可以直接放在<blockquote>中的，引用的内容还必须包含在一个元素中，通常是<p>。属性cite既可以与<q> 一起用，也可以与<blockquote>一起用，用来提供引用内容的来源地址。需要注意的是，如果你使用 <span>来代替 <q>标记引用内容,那么你就不能使用 cite属性了。
例如:
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman.
<p> <cite>孔子</cite>曰：<q>学而不思则罔，思而不学则殆</q>.</p>
<p>The W3C says that <q cite=\"http://www.w3. org/TR/REC-html40/
struct/text.html#h-9.2.1\">The presentation of phrase elements
depends on the user agent.</q>.</p>
<blockquote cite=\"http://www.w3cn. org/\">
<p>“我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，
我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的\"浏览器大战\"，
为了兼容 Netscape 和 IE，网站不得不为这两种浏览器写不同的代码。同样的，
每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，
例如支持手机上网的 WAP 技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；
针对某种浏览器的 DHTML 特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。
这是一种恶性循环，是一种巨大的浪费。”</p>
</blockquote>
<em>、 <strong>
<em> 是用作强调的，<strong>是用作重点强调的。 大部分浏览器用斜体显示强调的内容，用粗体来显示重点强调的内容，然而，这是没有必要的，如果是为了确定强调内容的显示方式，最好的方法就是使用CSS来定义他们的表现。当你想要的只是视觉上的效果时，就不要使用强调了。而且如果你想要强调但是还觉得粗体或者斜体不视觉效果没那么好，特别是斜体对于中文来说，那么你完全可以定义一些其他的比较醒目的样式达到强调的效果。
例如:
<p><em>强调</em> 的文本通常用斜体显示，
然而， <strong>特别强调</strong> 的文本通常以粗体显示。</p>
<table>、<td>、<th>、< caption >、 summary
XHTML中的表格不应用来布局。然而如果是为了标记列表的数据，就应该使用表格了。<th>为表格标题，属性summar为摘要，<caption>标签为首部说明，<thead>标签为表格头部，<tbody>标签为表格主体内容，<tfoot>标签为表格尾部。
其中还可以使用scope 可用于取代headers属性，标记含有表头信息的单元格，其中各数值的内容如下：
row 指示当前单元格，为包含当前单元格的行提供相关的表头信息。
col 指示当前单元格，为根据当前单元格指定的列提供相应的表头信息。
rowgroup 指示当前单元格，为包含当前单元格的其余行组提供相关的表头信息。
colgroup 指示当前单元格，为根据当前单元格指定的其余列组提供相应的表头信息。
abbr 用于定义表头单元格中的缩写名，如果没有定义该属性，则将默认单元格内容为节略形式。
例如:
<table id=\"mytable\" cellspacing=\"0\" summary=\"The technical specifications of the Apple PowerMac G5 series\">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
<th scope=\"col\" abbr=\"Configurations\" class=\"nobg\">Configurations</th>
<th scope=\"col\" abbr=\"Dual 1.8\">Dual 1.8GHz</th>
<th scope=\"col\" abbr=\"Dual 2\">Dual 2GHz</th>
<th scope=\"col\" abbr=\"Dual 2.5\">Dual 2.5GHz</th>
</tr>
<tr>
<th scope=\"row\" abbr=\"Model\" class=\"spec\">Model</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope=\"row\" abbr=\"G5 Processor\" class=\"specalt\">G5 Processor</th>
<td class=\"alt\">Dual 1.8GHz PowerPC G5</td>
<td class=\"alt\">Dual 2GHz PowerPC G5</td>
<td class=\"alt\">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope=\"row\" abbr=\"Frontside bus\" class=\"spec\">Frontside bus</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<th scope=\"row\" abbr=\"L2 Cache\" class=\"specalt\">Level2 Cache</th>
<td class=\"alt\">512K per processor</td>
<td class=\"alt\">512K per processor</td>
<td class=\"alt\">512K per processor</td>
</tr>
</table>
<dfn>
<p><dfn title=\"Microsoft web browser\">Internet Explorer</dfn> is the most popular browser used underwater.</p>
<ins>, <del>
知道del，就不要再用<s>做删除线了，用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入，也有这样的属性。
例如：
<p>It really was <ins cite=\"rarara.html\" datetime=\"20031024\">very</ins> good.</p>
<code>
表示是计算机代码。而默认样式为打字体。技术论坛和blog中经常遇到。
例如：
<code>p{margin:2px 0;}</code>
<abbr>、<acronym>
<abbr>标签是表示web页面上的简称，<acronym>标签为取首字母缩写。（注：这里把简称和缩写分开而论，简称范围比缩写大，取首字母的缩写用<acronym>标签）Windows的IE6.0以下的浏览器暂不支持<abbr>标签。 在IE里，你可以应用CSS给<acronym>但是不能应用给<abbr>标签，IE会为<acronym>标签的title属性显示提示，但是会忽略<abbr>标签。
例如:
<abbr title=\"Cascading Style Sheets\">CSS</abbr>
<acronym title=\"Cascading Style Sheets\">CSS</acronym>
alt属性和title属性
title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。
alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。
<img src=\"/images/logo.gif\" width=\"90\" height=\"27\" alt=\"webjx. com\"/>
<a href=\"http://www.baidu. com\" title=\"用Photoshop创建最佳黑白照片的方法\">用Photoshop创建最佳黑白照片的方法</a>
编辑本段提高html页面显示速度
< TABLE BORDER="0" > < TR > < TD COLSPAN="2" >< !-- 顶端导航条的内容 -- >< /TD >< /TR > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 左边导航条的内容 -- >< /TD > <TD ALIGN="LEFT" VALIGN="TOP" >< !-- 页面内容区域 -- >< /TD > < /TR > < /TABLE >
修改后的布局代码如下所示：
< TABLE BORDER="0" WIDTH="100%" > < TR > < TD ALIGN="CENTER" VALIGN="TOP">< !-- 顶端导航条的内容 -- >< /TD > < /TR > < /TABLE > < TABLE BORDER="0"ALIGN="LEFT" > < TR > < TD ALIGN="LEFT" VALIGN="TOP" >< !-- 左边导航条的内容 -- ></TD > < /TR > < /TABLE > < TABLE BORDER="0" > < TR > < TD ALIGN="LEFT"VALIGN="TOP" >< !-- 页面内容区域 -- >< /TD > < /TR > < /TABLE >
例如，原先使用下面的代码：
Do while not objRS.EOF strOptionList = strOptionList & "< OPTIONVALUE=""" & objRS("ID") & _ """ >" & objRS("ProductName") objRS.MoveNextLoop Response.Write "< SELECT SIZE=""1"" >" & strOptionList & "< /SELECT >"
现在只需改动一行代码：
Do while not objRS.EOF strOptionList = strOptionList & "< OPTIONVALUE=""" & objRS("ID") & _ """ >" & objRS("ProductName") & "< /OPTION >"objRS.MoveNext Loop Response.Write "< SELECT SIZE=""1"" >" & strOptionList &""
如果原来使用的代码如下：
< UL > < LI >苹果 < LI >桔子 < LI >香蕉 < /UL >
那么现在改用：
< UL > < LI >苹果< /LI > < LI >桔子< /LI > < LI >香蕉< /LI > < /UL >
经过这些改动之后，浏览器显示页面的速度将会更快。
常用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 width=点数或百分比>
【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向右。
指令举
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
