学习目标
l 创建并布局静态页面；
l VS中的HTML和HTML查看器；
l 服务器控件和动态内容；
l 在设计视图中配置控件；
l 在web控件库中的可用控件；
l 向页面添加动态导航控件，并且使它们投入工作而无需写下一行代码。
静态页面
写成之后其内容就固定下来，不会随着用户的输入或者周遭的环境而变化。
HTML文件是由浏览器来理解并且将括号中的那些东东转化为我们所要看到的样子。括号中的那些文字称为元素。有些元素具有两个标签（开、闭），又有一些仅仅具有一个标签。元素具有属性，来给浏览器一些附加的信息。将HTML代码转换为视觉元素的过程叫做渲染（rendering）。
一些常用的HTML元素
|
元素
|
描述
|
用法
|
|
<img>
|
图像标签，将一幅图像放在页面上
|
<
img
src="myimage.gif" />
|
|
<div>
|
段落格式文本块
|
<
div
style="float:left">Left-hand content here</div>
|
|
<span>
|
用来格式化文本字符的标签
|
<
div
>
Standard text and <span style="font-weight:bold">bold</span> text.</div>
|
|
<table>
<tr>
<td>
|
表格元素，包含行（<tr>）和单元（<td>）。
|
<
table
border="1">
<
tr
>
<
td
>
A cell</td>
</
tr
>
</
table
>
|
|
<a>
|
锚元素，定义超链接
|
Text with a <a href="page.htm">hyperlink</a>.
|
|
<head>
<body>
|
HTML页面的两个主要部分。<head>中存放<title>和<link>元素。<body>存放显示的元素。
|
<
html
>
<
head
>
<
title
>
Page Title</title>
</
head
>
<
body
>
Contents of page
</
body
>
</
html
>
|
|
<form>
<input>
|
表单元素，用来向服务器传送数据。
|
<
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>
|
可以包含客户端脚本或者服务器端的.NET代码
|
<
script
language="JavaScript">
alert("Hello World!");
</
script
>
|
|
<br />
<hr />
|
用来辅助布局页面。<br />标签添加一个分割行， 强制加入一个非分割的空格字符，被 分割的两个单词不会被分到两行中去。<hr />元素显示一条水平直线。
|
This is a string of text with a line<br />break and a space.
<
hr
/>
Two images separated by a space:<br />
<
img
src="azoreschurch.jpg" /> <img src="budapest.jpg" />
|
从HTML到XHTML
XHTML是一组规范，如果在编写HTML的时候遵循它们，结果就是代码更加标准化，能够被更多的浏览器所接受。
XHTML的核心规则如下：
l 总是关闭标签（比如<p>和</p>要成对）或者使用自闭的标签（比如用<br />来代替<br>）；
l 标签和属性的名字都要小写（比如<div id=”myDiv”>可以接受，但<Div ID=”myDiv”>则不然）；
l 属性值必须在双引号中被赋予。
Visual Studio可以在我们键入代码的时候自动检查代码是否符合规范。在HTML源编辑器工具栏中，可以在下拉列表框中选择代码架构规范。另外，其中还有一个非常好用的功能就是文档自动重排，可以格式化我们敲进去的代码成为标准缩进格式，快捷键是^ED。
动态内容
动态内容可以是运行在客户端（比如JavaScript），也可以是运行在服务器端，包括这里的ASP.NET，以及PHP、JSP等等。
在ASP.NET中创建动态页面，最简单的方法就是将服务器控件拖放到页面上来。
服务器控件
服务器控件在代码中体现为一个标签，比如<asp:textbox … />，这些标签不是标准的HTML元素，浏览器不能识别。但当一个ASP.NET页面被请求时，这些标签会动态地转化为标准HTML元素，浏览器就可以正确显示了。
VS的服务器控件工具箱包含以下几类控件
l 标准：一般的控件，组成90%以上的页面，等价于Windows窗体控件。
n TextBox，用来在页面上输入文字
n Button，一般用来向服务器提交信息
n Label，在指定位置显示简单的文本
n Hyperlink，生成超链接
n Image，用来在页面上显示图像
n DropDown，用来向用户提供一系列的选项以供选择，在不用时可以折叠起来以节约空间
n Listbox，用来提供一个固定大小的选择框
n CheckBox和Radio Button，提供额外的选项，互斥或是相容的
l 数据：用来连接数据源的控件（数据库或XML文件）
l 验证：用来添加进页面验证用户输入的控件
l 导航：用来提供简单快速的网站导航的控件
n SiteMapPath，这个控件用来给站点添加“面包屑”功能，可以给用户一个视觉提示，告诉他们现在正处于站点的什么位置
n SiteMapDataSource，不可见的控件，设置路径源用的，供Menu和TreeView控件使用
n Menu，融合了静态和动态的菜单功能。添加这个控件之前，必须先添加SiteMapDataSource。它有几个比较重要的属性：
u Orientation：确定菜单的走向，是横向（horizontal）还是纵向（vertical）；
u StaticSubMenuIndent：控制子菜单的缩排深度；
u DisappearAfter：确定弹出的菜单将在消失前保留多久可视；
u AccessKey：启用键盘快捷键；
u EnableViewState：ASP.NET的特征，如果设成true，则在回送页面到服务器的时候维持控件的状态，比如一个文本框在发送信息后仍然保留其中的文本。对于菜单来说就没有必要了，会加重服务器负担。
n TreeView，和Menu很像，只不过是用一个树形的结构来显示菜单。同样需要指定SiteMapDataSource。
l 登录：一组用来简化从开放站点到个性化区域的移动的控件
l WebParts：与SharePoint有关
l HTML：简单的HTML元素
服务器控件的工作，就是将ASP.NET代码转换为HTML。比如TextBox会转换为input，而Image的ImageURL属性会转换为img的src属性等等。
HTML控件也可以作为服务器控件来运行，只需要添加runat=”server”这一条属性就可以了。
6009
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
