读HTML

为什么我们要使用小写的标签？

我们刚才讲到：HTML标签对大小写是不敏感的：<b>和<B>的作用的相同的。当您在网上冲浪时，您会发现大多数教程在他们的例子中都使用大写的HTML标签。而我们总是使用小写。原因何在呢？

如果您希望为使用下一代HTML而做好准备，您就应该使用小写标签。万维网协会(W3C)的标准是：建议在HTML 4中使用小写标签，而在XHTML（下一代HTML）中，必须使用小写标签。

HTM还是HTML扩展名？

当您将一个HTML文件存盘时，您即可以使用HTM也可以使用HTML作为扩展名。我们刚才使用的.htm作为上面那个例子的扩展名。不过这样做也许是一个坏习惯，习惯于这样做的人也许是因为使用某些过时的软件而养成了这个坏习惯，这些软件只允许三个字母作为扩展名。

如果您使用新近的软件，我们认为使用.html是相当安全的做法。

单引号还是双引号？

属性值应被置于引号之间。通常情况下应该使用双引号，不过使用单引号也没有问题。

但是在个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

name='John"ShotGun"Nelson'


HTML注释

注释标签被用来在HTML源码中插入注释。注释会被浏览器忽略。您可以使用注释对您的代码进行解释，这么做在以后的日子里会对您的代码编辑产生帮助。

<!-- This is a comment -->

注意：左括号后需要写一个惊叹号，右括号前就不需要了。


基本的注意事项 - 有益的提示

当您写HTML文本的时候，你永远也没法确定这些文本在另一台显示器上是如何显示的。一些人使用大显示器，而另一些使用小的。当用户调整视窗的分辨率时，这些文本就会被重新格式化。所以不要通过在文本中添加空行和空格的办法在你的编辑器中格式化文本。

HTML会裁掉文本中所有的空格。任何数量的空格都被按一个空格计数。另外，在HTML中，一个空行也被当作一个空格。

使用空的段落标记<p>去插入一个空行是个坏习惯。用<br>标签代替它！（但是不要用<br>标签去创建列表。不要着急，您将在稍后的篇幅学习到HTML列表。）

您也许已经注意到了，在没有结束标签</p>的情况下，<p>标签依然可以正常工作。不过不要这样做！下一个版本的HTML将不允许忽略任何的结束标签。

HTML会自动地在某些元素前后添加一个额外的空行，比如段落、标题元素前后。

使用水平线(<hr>标签)来分隔文章中的小节是一个办法（但并不是唯一的办法）。


字符实体

某些字符在HTML中拥有特殊的含义，比如小于号(<)用来定义一个HTML标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在HTML源码中插入字符

字符实体有三部分：一个和号(&)，一个实体名称，或者#和一个实体编号，以及一个分号(;)。

要在HTML文档中显示小于号，我们需要这样写：&lt;或者<

使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。

注意：实体对大小写敏感。

空格

空格是HTML中最普通的字符实体。

通常情况下，HTML会裁掉文档中的空格。假如你在文档中连续输入10个空格，那么HTML会去掉其中的9个。如果使用 ，就可以在文档中增加空格。

最常用的字符实体

显示结果 描述 实体名称 实体编号
  空格 &nbsp;  
< 小于号 &lt; <
> 大于号 &gt; >
& 和号 &amp; &
" 引号 &quot; "
' 撇号  &apos; (IE不支持) '

其他一些常用的字符实体

显示结果 描述 实体名称 实体编号
￠ 分 &cent; ¢
£ 镑 &pound; £
¥ 日圆 &yen; ¥
§ 节 &sect; §
© 版权 &copy; ©
® 注册商标 &reg; ®
× 乘号 &times; ×
÷ 除号 &divide; ÷

锚标签和Name属性

Name属性被用来创建被命名的锚（named anchors）。当使用命名锚（named anchors）时，我们可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。

以下是命名锚的语法：

<a name="label">Text to be displayed</a>

name属性被用来创建命名锚。锚的名称可以是任何你喜欢的名字。

下面这行定义了命名锚：

<a name="tips">Useful Tips Section</a>

你会注意到，命名锚会以特殊的方式来显示。

将#符号和锚名称添加到URL的末端，就可以直接链接到tips这个节，就像这样：

<a href="http://www.w3school.com.cn/html_links.asp#tips">
Jump to the Useful Tips Section
</a>

基本的注意事项 - 有用的提示：
<thead>,<tbody> and <tfoot>很少被用到，这是由于浏览器对它们的支持不太好。希望这种情况在未来版本的 XHTML 中会有所改观。如果你使用IE5.0或者更新的版本，可以查看在我们的《XML教程》中的具体例子。
标签 描述
<ol> 定义有序列表
<ul> 定义无序列表
<li> 定义列表项
<dl> 定义定义列表
<dt> 定义定义项目
<dd> 定义定义描述
<dir> 已废弃。使用<ul>代替它。
<menu> 已废弃。使用<ul>代替它。

背景（Backgrounds）

<body>拥有两个配置背景的标签。背景可以使颜色或者图像。

背景颜色（Bgcolor）

背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB值或颜色名。

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

以上的代码均将背景颜色设置为黑色。

背景（Background）

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。

提示：如果你打算使用背景图片，你需要紧记一下几点：

  • 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过10k。
  • 背景图像是否与页面中的其他图象搭配良好。
  • 背景图像是否与页面中的文字颜色搭配良好。
  • 图像在页面中平铺后，看上去还可以吗？
  • 对文件的注意力被背景图像喧宾夺主了吗？

基本的注意事项 - 有用的提示：

<body>标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的HTML标准（HTML4和XHTML）中已被废弃。W3C在他们的推荐标准中已删除这些属性。

应该使用层叠样式表（CSS）来定义HTML元素的布局和显示HTML元素的属性。

216跨平台色

最初，216 跨平台web安全色被用来确保：当计算机使用256色调色板时，所有的计算机能够正确地显示所有的颜色。

000000 000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF
CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF
CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF
FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF
FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

HTML Basic Document

<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>

Text Elements

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

<frameset cols="25%,75%">
  <frame src="page1.htm">
  <frame src="page2.htm">
</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname"
value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>

Entities

&lt; is the same as <
&gt; is the same as >
© is the same as ©

Other Elements

<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>

请不要使用字体标签

在最新的HTML版本（HTML 4 and XHTML）中，字体标签已被废弃。

万维网联盟已从其标准中删除了字体标签，在未来，样式表（CSS）将被用来定义布局，以及显示HTML元素的属性。


HTML4.0 的优秀特性

使用HTML4.0，所有的格式化都可以从HTML文件中剥离，并植入一个独立的样式表。

因为HTML4.0将文档的表达与其结构分离，我们从而得到了我们一直需要的东西：在不把文档内容搞糟的情况下，对表现层进行完全的控制。
 XHTML 做好准备

XHTML是下一代的HTML。你现在就应该为此做好准备。而您可以做的最重要的事情就是开始编写正确的HTML4.01代码。并且使用小写字母编写标签。记得关闭标签。决不要在没有</p>标签的情况下结束一个段落。

提示：官方的HTML4.01标准推荐使用小写的标签。


外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过<style>标签定义内部样式表。

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

内联样式

当特别的样式需要被应用到个别的元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何CSS属性。以下实例显示出如何改变段落的颜色和左边界。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

Head标签

标签 描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面中所有链接的基准URL。
<link> 定义资源索引。
<meta> 定义元信息。
标签 描述
<!DOCTYPE> 定义文档类型。此标签须位于html标签之前。

统一资源定位器

一个被称为统一资源定位器的东西被用来对万维网上的文档（或其他数据）进行寻址。一个完整的网址，例如：http://www.w3school.com.cn/html/lastpage.htm，遵守如何语法规则：

scheme://host.domain:port/path/filename

Scheme定义因特网服务的类型。最流行的类型是http。

Domain（域）定义因特网域名，比如：

Host（主机）定义此域中的主机。如果被省略，缺省的支持http的主机是www。

Port(端口)定义主机的端口号。端口号通常是被省略的。缺省的端口号是80。

Path（路径）定义服务器上的路径（一个辅助的路径）。如果路径被省略，资源（文档）会被定位到网站的根目录。

filename（文件名）定义文档的名称。缺省的文件名一般会是default.asp或者index.html，或者依据WEB服务器设置的其他文件名。


URL Schemes

以下是其中一些最流行的scheme：

Schemes Access
file a file on your local PC
ftp a file on an FTP server
http a file on a World Wide Web Server
gopher a file on a Gopher server
news a Usenet newsgroup
telnet a Telnet connection
WAIS a file on a WAIS server

如何应付老式的浏览器

如果某个浏览器压根没法识别<script>标签，那么<script>标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，你应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别<script>标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

实例

JavaScript:
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
VBScript:
<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>

<noscript>标签

除了将脚本隐藏于注释中，你还可以添加<noscript>标签。<noscript>标签用于定义替代的文本，假如脚本没有被执行的话。这个标签被用于以下情况：如果浏览器能够识别<script>标签，但是不支持其中的脚本，那么这些浏览器将显示出<noscript>标签内部的文本。不过，如果浏览器支持<script>内的脚本，那么浏览器将忽略<noscript>标签。

JavaScript:

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

VBScript:

<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

posted on 2008-01-07 21:35  破曉之陽  阅读(393)  评论(0)    收藏  举报

导航