【.NET全栈】第16章 Web开发

文章目录

前言
16.1 HTML概述
- 16.1.1 HTML的基本概念
- 16.1.2 HTML语言的基本元素
- 16.1.3 格式设置
- 16.1.4 超级链接
- 16.1.5 图像
- 16.1.6 表格
- 16.1.7 框架
- 16.1.8 表单
16.2 ASP.NET Web Forms的组织
- 16.2.1 认识ASP.NET
- 16.2.2 Web Forms的组织
16.3 Web服务器组件
- 16.3.1 使用Label和TextBox控件
- 16.3.2 使用Button控件
- 16.3.3 其他控件介绍
16.4 数据验证控件
- 16.4.1 数据验证机制介绍
- 16.4.2 验证输入控件RequiredFieldValidator
- 16.4.3 比较验证控件CompareValidator
- 16.4.4 范围验证控件RangeValidator
- 16.4.5 正则表达式验证控件RegularExpressionValidator
- 16.4.6 用户自定义验证控件CustomValidator
- 16.4.7 汇总显示验证控件ValidatorSummary
- 16.4.8 数据验证控件综合使用
16.5 小结

前言

ASP.NET(Active Server Page.NET)提供了强大的Web开发功能，C#是ASP.NET技术支持的语言之一。
C#不仅提供了强大的窗体应用程序和命令行应用程序的开发支持，还支持B/S模式的Web应用开发。

ASP.NET是.NET Framework的一部分，在通过HTTP请求建立文档时，它可以在Web服务器上动态创建文档。
该文档主要是指HTML文档，所以了解HTML语法也是十分重要的。

本章主要内容如下：

HTML文件的组成
ASP.NET的开发环境和配置
常用的Web服务器控件
数据验证控件的使用

16.1 HTML概述

Web开发的基础知识，HTML语言。

这些都是网页编程的基础。

HMTL的应用就是对网页内容的排版。

16.1.1 HTML的基本概念

HTML–Hypertext Markup Language。
超文本标记语言。
用于制作网页。
之所以“超”，是不仅限于文本内容，可以加入图片、声音、动画、影视等多种内容。

优点：在浏览器运行时，有统一规则和标准。

第一个HTML程序：

新建记事本文件，文件名后缀修改为.html：
在这里插入图片描述

加入HTML代码：

<HTML><HEAD>
<TITLE></TITLE>
</HEAD><BODY><CENTER>
<H>HELLO C#</H>
<BR>
<HR>
<FONT SIZE=7 COLOR=RED>MY FIRST WEB</FONT>
</CENTER></BODY></HTML>

双击使用浏览器打开运行：
在这里插入图片描述

16.1.2 HTML语言的基本元素

<HTML></HTML>
标记一个文档的开始、结束。
<HEAD></HEAD>
标记文档的开头部分。
该标记中可以使用<title></title>和<script></script>
<BODY></BODY>
文档头部内容结束后，开始的文档的内容主体部分。
<BODY>有以下属性：
Bgcolor:设置主体背景颜色。
Text:设置文本颜色。
Link:设置链接颜色。
Vlink:设置已使用链接颜色。
Alink:设置正在被击中的链接的颜色。
<TITLE></TITLE>
放在Head中使用。用来修改浏览器窗口标题栏信息。

使用上面的HTML语言的基本元素，继续使用记事本创建一个：简单文档.html文件
在这里插入图片描述

<HTML><HEAD>
<TITLE>简单文档</TITLE>
</HEAD><BODY bgcolor = "green" text = "white">
<p>简单的一个文档</p>
</BODY></HTML>

在浏览器中打开的结果：
在这里插入图片描述

16.1.3 格式设置

HTML语言中用来设置文字样式的标记。

<p></p>标记一个段落。
可以用align属性说明对齐方式：left/cemter/right
<br>回车
在段落中小回车，在段落间大回车。

范例：

<HTML>
<HEAD>
<TITLE>区别</TITLE>
</HEAD><BODY bgcolor = "LightBlue", text = "DarkOrange" >
<p>这是一个段落</p><br>
<p>这是另一个段落</p>
<br>
<br>
<br>
<p>第三个段落<br></p>
<p>第四个段落</p>
<br>
<br>
<br>
<p>第五个段落第六个段落<br>第七个段落</p></BODY></HTML>

在这里插入图片描述

<div><div>文档分节，或格式化表。
用法与<p></p>类似。
<span></span> 在行内控制特定内容的显示。
将要设置格式的文字使用此标记包围，然后设置格式。

范例：

<HTML>
<HEAD>
<TITLE>区别</TITLE>
</HEAD><BODY bgcolor = "LightBlue", text = "DarkOrange" ><div>故事的小黄花，在出生那年就飘着<div>
<div>童年的荡秋千，随记忆一直晃到现在<div>
<div>吹着前奏，<span style= "font-size:40px">望着天空</span>我想起花瓣试着飘落</div></BODY></HTML>

结果

16.1.4 超级链接

<a href=链接目标的位置>链接的名字</a> 超链接用来实现页面的联系和转换。

链接到同一站点内的文档

<a href=myhtml.htm></a>

链接到其他站点内的文档

<a href=http://www.myweb.edu.cn>示例</a>

E-mail链接代码如下

<a href=mailto:mymail@126.com>示例</a>

页面内部链接。首先给页面中需要链接的地方命名

<a name=myword></a>

在页面调用的地方设置指向已经命名的链接

<a href=#mywork>转到</a>

当点击“转到”这个链接时，就从当前页的当前位置转到标记名为myword的位置。

范例

<HTML><HEAD>
</HEAD><BODY bgcolor = "LightGreen", text = "White">
<a href=myhtml.htm>本站页面链接示例</a>
<a href=http://www.web.edu.cn>外部站页面链接</a>
<a href=mailto:mymail:mymail@126.com></a><a name=myword></a>
<center>第二章 HTML<br><br><hr></center><br><br>
2.1 基本结构<br><br><br><br>
2.2 标记格式<br><br><br><br>
</hr>
<br><br><br><br><br><br>
<a href=#myword>转到</a>
</BODY></HTML>

浏览器显示结果
在这里插入图片描述

16.1.5 图像

<img> 标记显示网页中图像。

一些属性：

属性	说明
src	图形文件路径、图形文件名。图与当前HTML文档在同一目录：`<src = "pic.gif">`。图在HTML文档文件夹的子文件夹：`<src = "images/pic.gif">`。图在HTML文档所在文件夹的上层目录：`<src = "../web/pic.gif">`
alt	图片没完全加载时，鼠标放在图片上显示的文字
Height,Width	图像的宽度和高度，像素为单位。可以先建小图，在浏览器上按照比例放大
border	边框线宽度，0表示无边框

示例：

<HTML><HEAD>
<title>图片显示</title>
</HEAD><BODY><img src="picEarth.gif" alt="地球" style="width:300px;height:auto;"></BODY></HTML>

运行结果
在这里插入图片描述

16.1.6 表格

表格对网页意义重大，因为能够对页面排版。

<table></table> 创建一个表格。
其属性：

属性	说明
bgcolor	表格背景色
border	边框宽度，默认0
bordercolor	边框颜色
bordercolorlight	边框亮部分颜色
bordercolordark	边框暗部分颜色
cellsapcing	表格单元格之间空隙大小
cellpadding	表格单元格边框与其中内容的间距大小
width	表格宽度

<tr></tr> 表格的一行
属性：

属性	说明
align	单元格中文字的水平对齐方式
valign	单元格中文字的垂直对齐方式

<td></td> 标记表格中除标题外所有文字的格式
属性：

属性	说明
colspan	可以设置跨多列的单元格
rowspan	可以设置跨多行的单元格

<th></th> 标记表格标题单元格的文字格式，通常是黑体居中
示例代码：

<HTML><HEAD>
<TITLE>表格</TITLE>
</HEAD><BODY><TABLE bgcolor="lighblue" bordercolor="white" border="1" width="100%" cellspacing="5">
<tr align=“left”valign="top">
<td>表格1-1</td>
<td>表格1-2</td>
<td>表格1-3</td>
<td>表格1-4</td>
<td>表格1-5</td>
<td>表格1-6</td>
</tr><tr>
<td>表格2-1</td>
<td>表格2-2</td>
<td>表格2-3</td>
<td>表格2-4</td>
<td>表格2-5</td>
<td>表格2-6</td>
</tr><tr>
<td>表格3-1</td>
<td>表格3-2</td>
<td>表格3-3</td>
<td>表格3-4</td>
<td>表格3-5</td>
<td>表格3-6</td>
</tr>
</TABLE></BODY><HTML>

运行结果：
在这里插入图片描述

16.1.7 框架

框架的标记为Frame,一个框架内可以有多个HTML文件。多个框架可以同时显示在一个浏览器中。

通常的设计格局是在一个框架中放置目录，另一个框架中放置HTML文件。

<frameset></frameset>
标记对可以放在<body></body>标记对的外边，也可以嵌在其他框架文中。可以嵌套使用。

该标记对有两个属性rows和cols，使用该标记时至少选择两个属性之一。

属性	说明
rows	规定主文档中各个框架的行定位（百分数、绝对像素值、星号（*））
cols	规定主文档中各个框架的列定位（百分数、绝对像素值、星号（*））

*代表没被说明的空间，如果同一个属性中出现多个星号，则将剩下的没被说明的控件平均分配。同时，所有的框架按照rows和cols的值从左往右，从上到下排列。

<frame> 标记放在<frameset></frameset>之间，用来定义一个具体的框架。
属性：有两个属性，都必须赋值。

属性	说明
src	此框架的源HTML文件名，浏览器显示此框架src指定的HTML文件
name	此框架名字，用来供超文本连接标记`<a href="" target=""></a>`中的target属性指定链接的HTML文件显示在哪个框架中

<noframesets></noframesets> 用在<frameset></frameset>标记对之间，用于在不支持框架的浏览器中显示文本或图像信息。
此标记对之间必须先紧跟<body></body>标记对，然后才可以使用以前讲过的其他标记。

代码示例：

在这里插入图片描述
07 框架.html

<HTML><HEAD>
<TITLE>框架</TITLE>
</HEAD><frameset col="25%,*"><frame src="07-1 框架-left.html" scrolling="no" name="left"><frame src="07-2 框架-page1.html" scrolling="auto" name="main"><noframes>
<BODY>
<p>你的浏览器不支持此框架！</p>
</BODY>
</noframes></frameset></HTML>

07-1 框架-left.html

<HTML><HEAD>
<TITLE>导航</TITLE>
</HEAD><BODY>
<p>导航</p>
<p><a href="07-2 框架-page1.html" target="Main">第一页</a></p>
<p><a href="07-3 框架-page2.html" target="Main">第二页</a></p>
</BODY></HTML>

07-2 框架-page1.html

<HTML><HEAD>
<TITLE>第一页</TITLE>
</HEAD><BODY>
<p>这是第一页</p>
</BODY></HTML>

07-3 框架-page2.html

<HTML><HEAD>
<TITLE>第二页</TITLE>
</HEAD><BODY>
<p>这是第二页</p>
</BODY></HTML>

运行结果：
将四个文件放在同一个文件夹内，运行 07 框架.html，进入导航页面。

在这里插入图片描述
点击第一页链接，进入第一个页面：

点击第二页链接，进入第二个页面。

在这里插入图片描述
如果浏览器不支持框架，就会显示<noframes></noframes>中的内容“你的浏览器不支持框架！”

总结：这样使用框架，实现了页面之间的跳转。

16.1.8 表单

16.2 ASP.NET Web Forms的组织

16.2.1 认识ASP.NET

16.2.2 Web Forms的组织

16.3 Web服务器组件

16.3.1 使用Label和TextBox控件

16.3.2 使用Button控件

16.3.3 其他控件介绍

16.4 数据验证控件

16.4.1 数据验证机制介绍

16.4.2 验证输入控件RequiredFieldValidator

16.4.3 比较验证控件CompareValidator

16.4.4 范围验证控件RangeValidator

16.4.5 正则表达式验证控件RegularExpressionValidator

16.4.6 用户自定义验证控件CustomValidator

16.4.7 汇总显示验证控件ValidatorSummary

16.4.8 数据验证控件综合使用

16.5 小结

ASP.NET是C#应用程序的另一个重要方面，其提供了一个统一的Web开发模型，同时也是一种新的编程模型和结构。该类程序可生成伸缩性和稳定性更好的应用程序，并提供了更好的环境保护。

本章从Web基础知识入手，首先介绍了HTML语言，接着介绍了ASP.NET的基本控件。有了这些基本的知识，读者即可应用ASP.NET技术编写部分实用的网站应用程序。