创建一个简单的页面
你一般都可以使用模板来创建一个新文件。大部分的基本HTML模板都只包含必须的标签。你需要按照需要来填充内容。把下面这些键入你的HTML编辑器，并且把它保存为template.html。
<html>
<head>
<title><!—标题 --></title>
</head>
<body>
<!—在这里输入你的内容 -->
</body>
</html>
你会看到使用这个文件是非常方便。如果你在使用一个精密的HTML编辑器，在你从“文件”菜单选择“新建”的时候，它应该会载入类似的文件。
在<title>标签中间添加标题。把注释<!--标题-->换成"HTML很容易"。把光标移动到<body>标签之后并且用你的内容替换<!--在这里输入你的内容 -->。完整的文件应该看起来很类似清单2.1。
清单2.1：HTML 很容易 (ch2-1.htm)
<html>
<head>
<title> HTML很容易</title>
</head>
<body>
<h1 align="center"> HTML很容易</h1>
<p>尽管HTML有大约100个不同的标签，你会很快发现你就使用很少几个。最重要的标签是段落标签——也就是封闭这段的标签(<p>) ； <b>粗体</b>标签； <i>斜体</i>标签（在微软产品里面的表达有些许不同，分别是<strong> 粗体</strong> 标签和<em>斜体</em> 标签）；头(heading)标签； 以及在所有里面最重要的表格(table)标签，该标签可以用来生成有或者没有边框的格式化的表格。</p>
<!--<p> </p>-->
<table align="center" border="1" width="50%">
<thead>
<tr>
<th align="center">产品</th>
<th align="center">价格</th>
</tr>
<tr>
<td align="left">帽子</td>
<td align="right">$14.50</td>
</tr>
<tr>
<td align="left">靴子</td>
<td align="right">$49.99</td>
</tr>
</table>
</body>
</html>
在你输入完成之后，把它保存为一个文件，然后在你浏览器里浏览一下。为了做这件事，输入: <drive><path><filename>，drive就是你保存文件的硬盘盘符，path就是目录或者是层次化目录，filename就是文件名。在你的浏览器中，你会看到类似于图2.2显示的页面。
图2.2：HTML很容易 (ch2-1.htm)
当你在浏览器中看清单2.1，你应该注意到几个特点。标题出现在浏览器的标题栏，而不是文档体中。那是因为标题根本不是文档的一部分——它是页眉(Header)的一部分，这就是为什么<title>标签在<head>标签里。
如果你输入的文字和我写的完全相同，你会注意到表单中行的中断处和浏览器中行的中断处不同。你输入的每一行（尽管你可能根本没有看到）都以两个字符终结：回车和换行(ASCII值为13和10)。浏览器把他们当作泛空白符并且忽略了他们。如果你需要浏览器按照你的要求断行，那你需要使用<br>或者是断行标签来显试的指定断行位置。
注意: <br>标签几个你必须输入相应的结束标签的例外情况。结束标签</br>不是必须的（尽管你可以输入它）。然而，就算没有她你的页面工作良好，但是养成写结束标签的习惯会让你的页面对于XHTML和XML兼容。
另一种有趣的特性是断行和显示内容的屏幕区域是相关的，叫做窗口的客户端区域(Client Area)。调整你的屏幕大小，看看文字会发生什么变化。当你改变浏览器窗口的宽度时，浏览器会重新安排断行以使得文字可以恰好放置在窗口内——文字清单会获得窗口的长度。
注意: 那到底是使用什么字体呢？Serif字体，例如Times New Roman，还是非Serif字体，例如Arial？那字体大小呢？作为一个页面设计师，你应该在脑子里记得默认的字体和默认的字体大小是根据你的浏览器本身的设置来设置的，而不是你的文档本身。默认的字体和字体大小都是用户在网景和IE浏览器里面设置的。如果你想要文本按照特定的字体和大小显示，你就必须包含适当的标签或者是（最好是）层叠样式表。即便是这样，最终结果也是依赖于终端用户在他们电脑中的设置。
接下来，让我们看一下<h1>标签。它有一个叫做align="center"的属性，这个属性让浏览器把内容显示在页面的中间。还有另一种方法在页面中安排内容的布局。你可以像这样写：
<center>
<h1>HTML很容易</h1>
</center>
在浏览器中，句法结构看起来都是一样的。尽管大部分的HTML编辑器单独安排每一个元素，你还是会看到那种语法。当你要强制安排许多连续的元素的时候，<center></center>语法就会是最有用的了。在HTML4.0中，<center>标签被抛弃了但是被写成<div align="center">。再说一遍，除非一定要用老版本的浏览器，你总是应该使用较新的语法。
段落标签<p>封装了整个段落。可以通过添加一个布局标签来改变段落的布局。试一下添加align="right"属性到段落标签上，然后刷新浏览器。
小窍门: 在作出任何改变之后，你都应该刷新一下浏览器。我看过很多人抱怨说浏览器没有正确的显示他们的代码改变，但实际的问题是他们忘记刷新浏览器了。浏览器会把网页内容缓存到一个特殊的文件夹。当访问网页时，浏览器会首先检查一下缓存该网页是否可用。浏览器可以联系服务器来看一下是否有一个更新版本的该页面，但是默认是不做的。刷新浏览器会强制客户端重新发送请求，重新解析，并重新显示页面，因此，任何改变都会与上次浏览器显示的页面合并显示。你可以在大多数浏览器中配置，让它们强制检查更新的页面。那会减慢你浏览远程文件的速度，但是可以帮助你保证看到最新的版本。不管你怎样设置浏览器缓存，当你没有看到你做的改变时，你就应该刷新一下来强制更新。
<b>标签和<strong>会实现完全相同的功能——加粗字体。不同是<b>标签会显式地加粗字体，但是<strong>标签的最终显示结果并没有在HTML中指定——那依赖于显示引擎的创建者。在实际中，主流的显示引擎都是选择加粗字体。
你会发现同样的状况也发生在<i>标签上。<i>标签显式地把字体变成斜体，但是许多HTML作者会使用<em>来代替。再说一次，<em>标签的最终显示结果并没有在HTML中指定——显示引擎可以使用任何方式来强调字体。在实际中，主流的显示引擎都是选择把字体变成斜体。
你也可以使用颜色名字，例如红(“red”)或者是蓝(“blue”)，最现代的浏览器会把文字显示成期望的颜色。IE和网景可以理解颜色名（尽管他们理解的颜色集是不同的）。在接下来的一章“字体和颜色”中，我会交给你使用一种浏览器无关的方式来指定颜色。
你可以使用<font>标签改变字体的颜色。注意，可以改变字体的指令是风格(<face>)指令。大部分人会误用单词“字体”(font)。另外，大小(size)属性——在清单2.1中指定为5，并不是像文字处理器中所说的磅值；它是指相对于用户选择的默认大小的字体比较值。标准的大小是从1到7，默认的是3，所以封装在标签<font size="4">Larger text</font>内的文字会显示得稍微大一点。注意，字体标签已经被抛弃了，这意味着如果不是必须，你应该避免使用它因为这个标签在未来的版本中不会被支持。然而如果你需要写底层的浏览器（很少，但是仍然在用），<font>标签仍然是需要的。所以我把它写在这里。
之后是第二段只包含一句 的段落。那意味着插入空格。开始的&以及结束的;都是必须的。有几种这样的指令，一个是对于每个非字母数字的字符。你可以使用它们来插入浏览器不能正常打印的字符，例如左尖括号(<)以及右尖括号(>)，他们分别代表大于号和小于号。插入空格强制浏览器显示那一段。因为该段落不包含任何内容，所以浏览器会忽略这一个空白段落。因为那是一个空格符，所以普通的空格是没办法正常工作的。除非是个把空白符当作一个分隔符，不然浏览器总是会忽略它。之后，浏览器会把这个分隔符当作单个空格。插入空格是一个“不可见的”字符。在文本处理器中，它就是一个“硬空格”(Hard Space)。
表格标签包含三个属性：属性align="center"强制浏览器把表格显示在屏幕中间。属性border="1"让浏览器围绕每个表格放置一个可见的，一个像素的边框。属性width=50%使得浏览器在半个水平空间中显示表格（如果可能的话）。再一次，调整你的浏览器大小。你会注意到随着窗口的宽度改变，表格宽度也会改变。把浏览器窗口变到无法容纳表格那么小，因为窗口变窄了，你就可能会需要滚动才能浏览整个表格。那什么发生了呢？在某个时刻，表格不会显示在半个屏幕中。在那一刻，浏览器放弃了，并且简单的把表格显示在所剩空间的中央。当空间变得太小了，浏览器会固定住表格的右边边界。表格本身包含两个单独的部分：<thead>部分包含<th>标签组成了表格的头部分。Thead意味着表格头(Table Head)。<th>标签包含了列(Column)的名字。你不需要一个thead部分，但是如果你和<th>标签一起使用，浏览器会自动把列的名字变成粗体。<tbody>部分包含了数据。<tr>标签(表行)分割了行，同时<td>标签(表数据)根据列把行分成一个个部分(Cell)。对于和表格相关的标签而言，结束标签都是必须的，除了列名(<th>)标签，它的结束标签是可选的。
注意，你已经看过了完整的HTML文件，我会花一点时间来更详尽的解释每一个HTML元素的用途。
文本格式化
HTML使得文本格式化变得非常容易，只要你不是对文字显示太挑剔。你可以通过使用标题样式(Heading Style)来控制文本的显示，像是字体，颜色，段落以及列表。
列表样式
你已经看过了怎样使用字体标签和段落标签。HTML也包含了一些可以用来格式化符号化和编号化列表的标签。符号列表(Bulleted List)是无序列表，项目的物理顺序是不重要的。因此，在HTML中，你可以使用<ul>标签，它意味着无序列表，来创建列表。你也可以在列表的每一个项目周围放置一个<li>（列表项目）标签：
<ul>要做的事情
<li>去便利店</li>
<li>到兽医站接狗狗</li>
<li>买新电脑</li>
</ul>
当项目的顺序很重要时，你可以创建一个编号列表(Numbered List)。在HTML中，你可以使用<ol>标签，也就是有序列表来创建。你还是可以像无序列表那样使用<li>标签来罗列项目。
<ol><b>要做的事情——有序</b>
<li>去便利店</li>
<li>到兽医站接狗狗</li>
<li>买新电脑</li>
</ol>
图2.3显示了浏览器会怎样显示这两种列表。
图2.3：列表类型(ch2-2.htm)
你也可以嵌套列表到一个列表中。浏览器会让从属列表比包含列表多一层缩进（见图2.4）。
<ol><b>要做的事情——有序</b>
<li>去便利店</li>
<li>到兽医站接狗狗</li>
<ul><b>记住这些条目</b>
<li>买个新狗牌</li>
<li>要一个新的跳蚤粉药方</li>
</ul>
<li>买新电脑</li>
</ol>
图2.4：嵌套列表(ch2-3.htm)
你可以为不同的目的使用不同的文本格式化方法。你可以在附件A，“ HTML快速参考”，中找到一个完整的列表。但是这里还是有一点要说。
正如你所见，浏览器会忽略断行。你可以在段落中使用<br>（换行）标签来强制换行。例如，在你的浏览器中看一下清单2.2（也看一下图2.5）。第一段不包含任何换行符，然而在第二段每行的末尾都是一个换行符。如果你缩小窗口，第一段会被调整大小。第二段也会，但是那些有换行符的地方还是会显示出来。
清单2.2：显式断行 (ch2-4.htm)
<html>
<head>
<title>显式断行</title>
</head>
<body>
<h1>显式断行</h1>
<p>
这段不包含任何的换行符。
当在浏览器中显示时，浏览器会插入换行符。
如果你调整窗口大小，浏览器会重新调整换行符的位置。
</p>
<p>
这段 <i>的确</i>包含换行符。<br>
浏览器在遇到 <br>标签时换行。<br>
当在屏幕上显示时，如果你调整浏览器大小，浏览器 <i>不会</i>重新调整换行符。<br>
</p>
</body>
</html>
</body>
</html>
图2.5：显式断行(ch2-4.htm)
我将用两个便笺来结束这章。首先，许多优秀的HTML作者为你做了大量乏味的，低层的工作。而且我也看到许多网站使用了许多高级功能来或者很炫的效果。然后，除非你完全了解了基本的HTML，你还是应该避免使用高级编辑器。问题是这些高级编辑器为你做了太多了。这本书的观点是为了让你能仅仅使用一个简单的文本编辑器就可以理解和写出HTML代码。因此，我建议知道你绝对保证你可以自己写出那些高级编辑器给你插入的内容的时候才使用他们。
第二，在你完全掌握浏览器的默认显示之前，不要试着去打败它。我保证即便是使用默认的HTML指令，你还是可以创建出非常吸引人并且功能强大的页面。高级的HTML编辑器其实会阻滞你的学习。在这些浏览器中，你可以在像素层面上指定文本和图像的放置。记住，他们并不是通过HTML的指令来完成这个放置，而是使用层叠样式表或者是嵌入式样式——我会在这章的晚些时候简单的介绍他们。
自己翻译的书（关于ASP.NET），希望对大家有帮助 （五）
最新推荐文章于 2025-09-05 14:01:23 发布
本文介绍了如何使用HTML创建基本网页，包括使用模板、标题、段落、列表等元素，并讲解了文本格式化技巧。
扫一扫
455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
