ASP.NET Web Forms 中的 HTML 服务器控件（Html Controls）
HTML 服务器控件就是把普通的 HTML 标签加上 runat="server" 后，变成可以在服务器端直接用 C# 代码操作的控件。
它们和 Web 服务器控件（如 <asp:Label>、<asp:Button>）最大的区别是：
| 项目 | HTML 服务器控件 | Web 服务器控件（asp:） |
|---|---|---|
| 渲染结果 | 原生 HTML 标签 | 往往渲染成复杂 HTML（有时带 span、table） |
| 属性操作 | 操作 HTML 原生属性（如 value、src、style） | 操作 ASP.NET 封装属性 |
| 事件 | 只有少数支持服务器端事件（如 onclick） | 大多数都有丰富服务器端事件 |
| 状态管理 | 默认不自动 ViewState（除非加 id+runat） | 自动 ViewState |
| 适用场景 | 需要精确控制 HTML 输出、SEO、轻量级时 | 需要强大功能、验证、数据绑定时 |
常用 HTML 服务器控件一览表
| HTML 标签 | 对应的服务器控件类 | 常用属性（服务器端可读写） | 支持服务器端事件 |
|---|---|---|---|
<input type="text"> | HtmlInputText | Value | ServerChange |
<input type="password"> | HtmlInputText | Value | — |
<input type="checkbox"> | HtmlInputCheckBox | Checked | ServerChange |
<input type="radio"> | HtmlInputRadioButton | Checked | ServerChange |
<input type="button/submit"> | HtmlInputButton | Value | ServerClick |
<input type="image"> | HtmlInputImage | Src, Alt | ServerClick |
<input type="file"> | HtmlInputFile | PostedFile | — |
<button> | HtmlButton | InnerHtml / InnerText | ServerClick |
<textarea> | HtmlTextArea | Value, Rows, Cols | ServerChange |
<select> | HtmlSelect | Value, SelectedIndex, Multiple | ServerChange |
<img> | HtmlImage | Src, Alt, Width, Height | — |
<a> | HtmlAnchor | Href, Title, InnerHtml | ServerClick |
<div>、<span>、<table>、<tr>、<td> 等 | HtmlGenericControl | InnerHtml, InnerText, Style[“xxx”] | — |
<form> | HtmlForm | （整个表单） | — |
完整实战实例：纯 HTML 服务器控件实现登录表单（不使用任何 asp: 控件）
LoginHtml.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoginHtml.aspx.cs" Inherits="WebFormsDemo.LoginHtml" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>纯 HTML 服务器控件登录</title>
<meta charset="utf-8" />
<style>
body { font-family: Arial; margin: 50px; }
.box { width: 320px; margin: 0 auto; border: 1px solid #ccc; padding: 30px; border-radius: 8px; }
input[type=text], input[type=password] { width: 100%; padding: 10px; margin: 8px 0; box-sizing: border-box; }
input[type=submit] { padding: 12px 30px; background: #007cba; color: white; border: none; cursor: pointer; }
.msg { margin-top: 15px; font-weight: bold; }
</style>
</head>
<body>
<form id="htmlForm" runat="server">
<div class="box">
<h2>HTML 服务器控件登录</h2>
用户名：
<input type="text" id="txtUser" runat="server" placeholder="请输入用户名" />
密码：
<input type="password" id="txtPass" runat="server" placeholder="请输入密码" />
记住我：
<input type="checkbox" id="chkRemember" runat="server" />
<label for="chkRemember">下次自动登录</label>
<br /><br />
<!-- 方式1：HtmlInputButton -->
<input type="submit" id="btnSubmit" runat="server" value="立即登录（HtmlInputButton）"
onserverclick="btnSubmit_ServerClick" />
<!-- 方式2：HtmlButton（推荐，更灵活） -->
<button id="btnLogin" runat="server" onserverclick="btnLogin_ServerClick">
立即登录（HtmlButton）
</button>
<div id="divMsg" runat="server" class="msg"></div>
</div>
</form>
</body>
</html>LoginHtml.aspx.cs
using System;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.HtmlControls;
namespace WebFormsDemo
{
public partial class LoginHtml : Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
divMsg.InnerText = "请输入用户名和密码";
}
}
// 方式1：HtmlInputButton 的 ServerClick 事件
protected void btnSubmit_ServerClick(object sender, EventArgs e)
{
DoLogin();
}
// 方式2：HtmlButton 的 ServerClick 事件（推荐）
protected void btnLogin_ServerClick(object sender, EventArgs e)
{
DoLogin();
}
private void DoLogin()
{
string user = txtUser.Value.Trim();
string pass = txtPass.Value;
bool remember = chkRemember.Checked;
if (user == "admin" && pass == "123456")
{
divMsg.Style["color"] = "green";
divMsg.InnerHtml = $"登录成功！欢迎 {user}<br/>记住我：{remember}";
Session["User"] = user;
if (remember)
Response.Cookies["User"].Value = user; // 简单演示
}
else
{
divMsg.Style["color"] = "red";
divMsg.InnerText = "用户名或密码错误！";
}
}
}
}小技巧总结
- 给控件加 id + runat=”server” 才是服务器控件
没有 id 的 HTML 标签加了 runat=”server” 也是服务器控件，但后台无法直接访问。 - HtmlGenericControl 用来操作 div、span、table 等
divMsg.InnerHtml = "<b>加粗消息</b>";
divMsg.Style["background"] = "yellow";- HtmlSelect（下拉框）常用操作
// 添加选项
mySelect.Items.Add(new ListItem("北京", "1"));
// 选中
mySelect.Value = "1";
// 多选
mySelect.Multiple = true;- 想让普通 标签支持 ServerClick
<a id="lnkLogout" runat="server" href="#" onserverclick="lnkLogout_ServerClick">退出</a>HTML 服务器控件虽然没有 asp: 控件功能强大，但在以下场景特别好用：
- 需要输出干净、语义化的 HTML（利于前端框架接管、SEO）
- 和 Bootstrap、Vue、React 等前端框架混合开发
- 老项目改造、快速原型
- 追求极致性能（少一层 ViewState）
需要我再给你一个 HtmlTable + HtmlSelect + GridView 替代方案 的纯 HTML 控件分页表格例子吗？随时说！
