HTML介绍

HTML是实际创建Web页面的语言,如今现有的每个Web浏览器都能理解这种语言。自从20世纪90年代初以来,它就成为了World Wide Web的驱动力量,是Internet处理Web页面的部分。HTML文档是含有标记、文本组合和影响文本显示的附加数据的简单文本文件。

1. HTML元素

HTML用尖括号指示内容在浏览器中如何显示。这种尖括号称为标记(tag);含有文本的一对标记称为元素。再看一下上面的“试一试”中所看到的HTML:

<h1>Hello World</h1>

<p>Welcome to Beginning ASP.NET 3.5 on 11/1/2007 5:03:39 PM</p>

该示例的第一行含有一个带起始标记<h1>和结束标记</h1>的<h1>元素。此元素用来表示一级标题。注意元素的结束标记和起始标记相似,只是多了个左斜杠(/):</h1>。这些起始标记和结束标记之间的所有文本都被看作是标题部分,因此被呈现为标题。在大多数浏览器中,这意味着标题会呈现为较大的字体。与<h1>标记类似,还有创建一直到6级标题的标记,比如<h2>、<h3>等。

在标题元素下面,可以看到一个<p>元素,它用来表示段落。<p>标记内的所有文本都被看作是段落部分。默认情况下,浏览器呈现段落时会在下方留一些空白,不过也可以无视这个行为。

HTML中有许多可用的标记;不可能在这里一一介绍。表1-1列出了一些最重要的标记,并说明了它们的用法 。要了解关于HTML元素的完整列表,参见维护HTML的组织的站点:www.w3.org/TR/html401/index/elements.html。

表 1-1

标 记

说 明

示 例

<html>

用来表示整个页面的开始和结束

<html>

...All other content goes here

</html>

<head>

<title>

用来表示含有页面数据的页面特殊部分,包括其标题

<head>

<title>Welcome to my site</title>

</head>

<body>

用来表示页面体的开始和结束

<body>

Page body goes here

</body>

<a>

用来将一个Web页面链接到另一个页面

<a href="http://www.wrox.com">Visit the Wrox site</a>

(续表)

标 记

说 明

示 例

<img>

用来向页面中嵌入图像

<img src="Logo.gif" />

<b>

<i>

<u>

用来将文本格式化为粗体、斜体或下划线字体

This is <b>bold text</b> while <i>this

text is in italic</i>

<form>

<textarea>

<select>

<input>

用于描述允许Web站点的用户向服务器提交信息的输入格式

<input type="text" value="Some Text" />

<table>

<tr>

<td>

这些标记用来创建有表的布局。<table>标记定义了整个表,而<tr>和<td>分别用来定义行和单元格

<table>

<tr>

<td>This is a Cell in Column 1</td>

<td>This is a Cell in Column 2</td>

</tr>

</table>

<ul>

<ol>

<li>

这3个标记用来创建编号或非编号的列表。<ul>和<ol>定义了列表的外观(可能是无序的,带一个简单项目符号;也可能是有序的,带有编号),而<li>用来表示列表中的项

<ul>

<li>First item with a bullet</li>

<li>Second item with a bullet</li>

</ul>

<ol>

<li>First item with a number</li>

<li>Second item with a number</li>

</ol>

<span>

这个标记用来包装和影响文档的其他部分。它作为内联文本出现,所以不会向页面添加行中断

<p>This is some normal text while <span

>this text appears in

red</span></p>

<div>

与<span>标记一样,<div>用来作为其他元素的容器。然而,<div>扮演block element,默认情况下它会使<div>标记后面出现显式的行中断

<div>This is some text on 1 line</div>

<div>This text is put directly under the

previous text on a new line. </div>

2. HTML属性

表1-1除了HTML元素外,还显示了HTML属性。这些属性包含一些改变特定元素行为方式的额外信息。例如,使用<img>标记显示一个图像,src属性定义图像的源代码。类似地,<span>标记含有一个将文本改为红色的style属性。style属性(color: red)的值是层叠样式表(Cascading Style Sheet,CSS)的一部分,这个概念将在第3章详细介绍。至于HTML元素,W3C的Web站点上有一个长长的可用属性列表:www.w3.org/TR/html 401/index/ attributes.html。

不需要记住所有这些元素和属性。在大多数情况下,VWD会生成它们。在其他情况下,当需要手工输入它们时,VWD有一些不错的工具,可以帮助找到正确的工具或属性。本书后面会介绍IntelliSense这一工具。