3.2 HTML的世界

如果对HTML不熟悉，下面是一些需要理解的基本概念：

● HTML文件是人类可读的带有一些额外括号的文本——当浏览Web页面时，Web浏览器将知道怎样把被括起来的块转变成一些看起来令人感兴趣的东西。

● 括起来的块被称为元素，虽然严格地说，元素通常由开始和结束元素的两个标记组成，并且有时在标记之间有文的或其他的HTML内容。一些元素只有单个标记。

● 元素具有属性，属性是供浏览器使用的关于元素应该如何在页面上显示的额外信息。

下面是一个简单的HTML元素：

<div id="divUserDetails"

style="width:300px;height:100px;float:left;background:darkred;color:white">

These are my details, my favorite color, and my hobbies

</div>

在此示例中，<div ...>和</div>部分是描述div元素的标记，id=" "和style=" "部分是属性，两个标记之间的文本是元素的内容。

● 呈现是把HTML代码转换成可视元素的过程，因此前面的代码将呈现为如图3-11所示的样子。

图3-11

以下表格包含一些可能用到的HTML元素。

元素	描述	示例用法
<img>	图像标记。此标记把一个图像放置到页面上	<img src="myimage.gif"/>
<div>	文本块的段落样式。包含在<div>元素内的文本可以使用各种属性放置到页面上。例如，为了并列放置两个div元素，可能把一个设置为float： left样式，另一个设置为float：right样式	<div style="float:left" >Left-hand content here</div> <div style="float:right"> Right-hand content here</div>
<span >	用于格式化文本字符的标记，可以用<span>标记包围句子中的一个单词并使span具有bold样式以加亮显示该单词	<div> Some standard text with a <span style="font-weight: bold"> bold</span> word in the middle </div>
<table > <tr > <td >	表格元素包含行（<tr>）和单元格（<td>）。通常用于在页面上放置元素，最好应该只用于列表数据。根据可到达性原则，<div>元素应该用于布局和定位，但是很多站点仍旧使用表格，因为它们更容易开发	<table border="1"> <tr> <td>The contents of a cell</td> </tr> </table>
<a >	锚元素。在页面上定义一个超链接，允许开发人员指定目标内容（用href属性）和显示给用户的文本	Some text with a <a href="page .htm"> hyperlink </a> in it
< head> <body >	HTML页面的两个主要部分是<head>和<body>。<head>是放置<title>元素和<link>元素（连同各种元数据）的地方	<html> <head> <title>Page Title</title> </head> <body> Contents of page </body> </html>

续表

元素	描述	示例用法
<form> <input >	表单元素。当创建具有数据项表单的站点时，用来向服务器传输数据的元素必须包含在<form>元素内。HTML<input>元素有很多用途。带有text的type属性时，它在界面上显示为一个文本框。带有submit属性时，它显示为一个单击时向服务器提交表单的按钮	<form id="form1" runat="server"> <input id="Text1" type="text" /> <input id="Submit1" type="submit" value="submit"/> </form>
<title> <link >	在页面的<head>内，<title>元素控制页面标题栏的文本。<link>最常用在把一个CSS样式表链接到页面	<head> <title>Page Title</title> <link rel="Stylesheet" type="text/css" href="MyCss.css" /> </head>
< script>	可以包含客户端脚本（脚本运行在浏览器上，通常用JavaScript编写，或者也可能是VBScript），或者服务器端.NET代码	<script language= "JavaScript"> alert('Hello World!'); </script> <script runat="server"> Protected void Page_Load( object sende r， EventArgs e) { ... } </script>
<br/> <hr/>	用于帮助布局页面，<br/>标记向文本字符串添加换行符，&nbsp强制输入一个非换行空白符；因此只用&nbsp字符分隔的两个单词（或元素）不能被分为两行。<hr/>元素在页面上显示一条水平线	This is a string of text with a line<br />break and a&nbspspace. <hr /> Two images separated by a space:<br /> <img src="1.gif">&nbsp ;<img src="2.gif">

在本章的下载代码中有一个包含这些简单示例的名称为SampleHTMLElements.htm的样例HTML页面。它显示为如图3-12所示的样子。

熟悉HTML中的常见元素对任何ASP.NET开发人员来说都是必要的，不仅需要懂得如何使用这些元素，也要知道如何正确地使用它们并且符合标准，确保站点能被尽可能多的用户访问。

在页面中到处放置标记和样式，非常容易使HTML变得几乎是不可维护的。很多老的构建HTML页面的工具对破坏您精心编制的HTML代码感到自豪，并根据推测改正您的代码以遵循工具内部的准则。任何使用过老版本FrontPage的人都会经常抱怨仅仅是打开或关闭HTML页面都会永久地破坏HTML代码。万幸，VWD具有我曾经使用过的最好的HTML编辑器。

也许使代码整洁并容易维护的最好方法是遵循公共标准。XHTML的引入为Web开发带来更多的准则，遵循这些准则是提高技术的主要方法。

图3-12

从HTML到XHTML代码

虽然大多数人谈到HTML代码，如果编写良好的HTML代码，实际上是在编写XHTML。XHTML是一组规则，如果编写HTML代码时遵循它们，会得到与标准更加兼容的代码，因此在各种不同的客户端浏览器上更可能像您希望的那样呈现。

XHTML的核心规则如下：

● 始终使用结束标记（因此对一个段落总是使用<p>和</p>标记）或者使用自结束标记（例如使用<br />而不是<br>）。

● 标记和属性名称必须为小写字母形式（因此<div id="myDiv">是可接受的，但是<Div ID="myDiv">是不能接受的），因为XHTML是大小写敏感的（因此<div>、<Div>和<DIV>对XHTML来说都是不同的实体）。

● 属性值必须放入双引号内。

这只是XHTML的一个简要总结。如果想学习更多的有关规则，应该参考W3站点www.w3.org/
TR/xhtml1/，在这里能学到所有关于XHTML的标准。该页的第4部分主要是关于XHTML与HTML之间的不同之处。

实质上，XHTML的目的是为Web开发人员和浏览器开发人员提供一组公共准则以便使其努力遵循。随着诸如Firefox这样的浏览器开始动摇Microsoft Internet Explorer占支配地位的情况，所有各方都同意在将来的相同产品中解决开发的Web站点只能在Internet Explorer上运行得好，但是在Netscape上看起来这个老问题却很糟糕，这一点很重要。

逐渐朝XHTML作为Web标准语言的方向转变，但永远不会彻底发生（为了向后兼容浏览器还要支持老的标记许多年），但是会发现如果遵循XHTML准则，现在编写的Web站点将来维护起来会更加简单。当使用下一个版本的Internet Explorer或Firefox时，很可能不会看到站点出故障。

Visual Web Developer具有帮助开发与标准兼容的Web站点的强大功能。如果在VWD中打开 SampleHTMLElements.htm，会注意到在页面（如图3-13所示）的顶部有一个工具栏，把Internet Explorer 6.0列为Web页面的目标。