第2章 Web开发基础

HTML/XHTML是网页设计语言，CSS是描述页面外观的层叠样式表，DIV+CSS模式是当前页面布局的主流技术。本章将主要学习HTML/XHTML文档结构、常用标记，页面常见表格的制作技术，DIV+CSS页面布局原理与实现技术。通过对本章的学习，学员要掌握HTML/XHTML常用标记的使用，掌握页面表格的制作技术，掌握定义CSS选择器的方法，理解页面布局原理及其具体实现技术。

2.1 HTML简介

编写ASP.NET Web应用程序，需要在HTML代码中插入HTML标记、Web Form标记、ASP.NET标准控件标记、JavaScript程序片等，因此，需要读者掌握基本的HTML知识。

2.1.1 HTML

HTML（Hyper Text Markup Language，超文本置标语言）是描述网页的标记语言。XHTML（eXtensible Hyper Text Markup Language，可扩展超文本置标语言）是更严格、更纯净的HTML版本，符合W3C标准，目前，HTML的版本4.1与XHTML几乎是相同的。HTML大约有一百多个标记，这些标记用于描述HTML文档中数据的显示格式，它们可以定义文本、图形、表格的格式，指向其他页面的链接，以及提交数据的表单等。HTML网页是HTML标记语言描述的文本文件。HTML文件由Web服务器发送给客户端浏览器，客户端浏览器按HTML描述的格式将其显示在浏览器窗口内，呈现给读者多姿多彩的页面。HTML文件通过HTTP通信协议，使得HTML文件可以在因特网上顺畅地进行文件交换和访问。

HTML文件是纯文本文件，可以用文本编辑器进行编辑制作，如记事本、Editplus等，也可以使用专业的网页编辑工具进行编辑制作，如Dreamweaver等。

2.1.2 URL

URL（Uniform Resource Locator，统一资源定位器）是Internet中资源的简单命名机制，它由三部分构成，即协议、主机DNS名或IP地址和文件名。例如，http://www.sina.com.cn/index.html。其中，协议为HTTP协议，主机为www.sina.com.cn，文件名为index.html。

2.1.3 HTML文件结构

1.HTML的标记与属性

HTML标记又称标签，是用“＜”和“＞”括起来的标识符，括号中间的标识符为标记名称，如标记＜body＞的标记名为body。HTML标记通过指定某块信息为段落或标题等来标识文档的某个部分。HTML标记分为单标记和成对标记两种。成对标记有开始标记＜标记名＞和结束标记＜/标记名＞，并配套使用，如开始标记＜html＞和结束标记＜/html＞配套使用。成对标记只作用于开始标记和结束标记之间的文档。单标记只有开始标记，如＜p＞，如果使用单标记，只要在文档的相应位置插入单标记即可。

属性是标记中的参数选项，大多数标记都有一些自己的属性，有些标记也有一些共用的属性，各属性之间无先后顺序，如果省略属性则采用默认值。如果要定义标记的属性，则在标记名称后加空格，再书写属性名并为其赋值，属性的一般使用格式如下：

              ＜标记名 属性1="属性值"  属性2="属性值"  ……＞内容＜/标记名＞

例如：

              ＜body text="blue"  link="red"＞

其中，body为标记名，text、link为属性，"blue"和"red"为text和link的属性值。

注意：HTML标记不区分大小写，本教材建议读者在书写标记属性值时，用""双引号将属性值引起来。

2.文档头与文档体

HTML文件必须由＜html＞标记开头，＜/html＞标记结束，这表明该文件为HTML超文本文档。一个完整的HTML文档分为文档头和文档体两部分。文档头信息包含在＜head＞与＜/head＞标记之间，包括有关此网页的标题、导入样式表等信息。文档体包含在＜body＞和＜/body＞标记之间，是网页的主体部分。＜html＞和＜/html＞标记将文档头和文档体包含在其中。

【例2.1】创建一个简单但较完整的HTML文件ch2_1.html，文件内容如下：

              ＜html＞
              ＜head＞
              ＜title＞网页文件的标题，属于文件头部分＜/title＞
              ＜/head＞
              ＜body＞
              这里是网页的内容，是文档体部分，显示在浏览器窗口中
              ＜/body＞
              ＜/html＞

在H:\C#2008文件夹中创建ch2文件夹，然后创建“C#程序设计”网站的虚拟目录ch2并指向该文件夹。将ch2_1.html文件保存在该文件夹内，使用浏览器查看ch2_1.html的效果，页面效果如图2.1所示。

图2.1 ch2_1.html页面效果

在文档ch2_1.html中，＜html＞和＜/html＞在文档的最外层，它表示文档是由HTML协议描述的；＜head＞与＜/head＞是文档头标记，不显示在浏览器的正文显示区里，此标记中可以插入其他标记，用以说明文档文件的一些公共属性；＜body＞与＜/body＞之间的文档是正文。

注意：本章的所有例题都保存在H:\C# 2008\ch2目录中，因为已经将操作系统物理路径H:\C#2008\ch2目录设置为“C# Web程序设计”网站的虚拟目录ch2，所以，用户在浏览器中输入“http://127.0.0.1:8088/ch2/ch2_1.html”即可访问该页面。

3.＜body＞＜/body＞标记与颜色设定

＜body＞＜/body＞标记为文档体标记，网页上所见到的内容都是放在＜body＞与＜/body＞之间的。主体标记有影响整个页面显示方式的属性，网页的背景颜色、文本颜色、背景图片都在＜body＞的属性里进行设置。其一般格式如下：

              ＜body  text="文本颜色"  link="链接颜色"  vlink="已访问过的链接颜色"
                  alink="单击时的链接颜色"  bgcolor="背景颜色"   background="背景图片"
              leftmargin="页面的左边距" topmargin="页面的上边距"
              bgproperties="背景图像固定" ＞
              ＜/body＞

其中，text属性为网页文本的颜色；link属性为超级链接文字的颜色，默认值为蓝色下画线；vlink属性为已单击文本的颜色；bgcolor属性为网页的背景颜色，只能设置单一颜色；background属性为网页的背景图片属性，属性值可指定一幅浏览器支持的图片文件名。

读者可能已注意到，＜body＞＜/body＞标记中很多属性都用来设置颜色，那么颜色属性如何设置呢？在HTML中，颜色设置通常有两种方式，一种是直接表示法，用常数表示颜色，如red代表红色、yellow代表黄色等；另一种是RGB三色表示法，任何颜色都是由Red、Green、Blue三色组成的，以#开头，用三组十六进制的RGB值表示，如红色为#FF0000、绿色为#00FF00、蓝色为#0000FF等。