ASp.net 生成页面，服务器控件对应html标签

Server controls

Besides HTML elements, ASP.NET uses server controls which have similar definition to HTML elements. The important difference between the two is that, unlike HTML elements, server controls are accessible from the code-behind or: the server side. This is determined with runat="server" attribute in their definitions. Server controls have different attributes than HTML elements and they are called properties. For example, Image control (which is equivalent to IMG element) has ImageUrl property instead of SRC attribute. But Visual Studio has very useful feature called intellisense which is some kind of autocomplete for your code and that will help you explore various properties.

Imoprtan note: Always style elements using CSS insted of server controls properties.

Server controls are much simpler than you might think. Each server control is rendered to a known HTML element on the client. Here is a list of server controls with their HTML equivalents and selectors that can be used from CSS or jQuery.

 

 

Server control	HTML equivalent	CSS/jQuery selector
Label	<span>	span
TextBox	<input type="text">	input[type="text"]
TextBox (TextMode="Password")	<input type="password">	input[type="password"]
TextBox (TextMode="Multiline")	<textarea>	textarea
Button	<input type="submit">	input[type="submit"]
LinkButton	<a href="postback options">	a
ImageButton	<input type="image">	input[type="image"]
HyperLink	<a>	a
DropDownList	<select>	select
ListBox	<select size="n">	select
CheckBox	<input type="checkbox"> with <label>	input[type="checkbox"]
CheckBoxList	<table> with a list of <input type="checkbox">	table or table input[type="checkbox"] for items
RadioButton	<input type="radio"> with <label>	input[type="radio"]
RadioButtonList	<table> with a list of <input type="radio">	table or table input[type="radio"] for items
Image	<img>	img
ImageMap	<img>	img
Table	<table>	table
BulletedList	<UL> or <OL> based on BulletedStyle property	ul or ol
HiddenField	<input type="hidden">	input[type="hidden"]
Literal	Literal doesn't have its HTML equivalent, it is usually used as a placehoder to render HTML generated on the server
Calendar	<table>	<table>
FileUpload	<input type="file">	input[type="file"]

 

 

All server controls are placed in Toolbox positioned on the left side if Visual Studio window. The controls listed in the table above are placed in "standard" panel in the Toolbox. To see how ASP.NET renders controls let's have a look at one example.