html5 video 控制面板 html control

转载

墨染青丝 2023-07-12 15:51:28

文章标签 html5 video 控制面板 html button server table 文章分类 HTML5 移动开发

System.Web.UI.HtmlControls简介
System.Web.UI.HtmlControls命名空间是专为创建ASP.NET应用程序而建立的，它包含了所有HTML服务器控件的类。HtmlControl类时所有HTML服务器控件的父类，该类定义了所有HTML服务器控件公共的属性、方法和事件。HtmlContainerControl类继承了HtmlControl类，该类是与具有开始标记和结束标记的HTML元素映射的HTML服务器控件的父类。如HtmlAnchor类、HtmlForm类、HtmlTable类等都是该类的子类。HTML服务器控件默认只在客户端使用，通过runat="server"属性可以使HTML服务器控件与服务器进行交互。

HTML服务器控件HTML服务器控件与标准的HTML元素相映射。ASP.NET把这些元素对象化，让程序可以直接控制。这样的好处就是使构建Web程序更加高效和灵活，还方便了代码的编写和维护。

HTML的锚点控件：HtmlAnchor控件HtmlAnchor控件与Html<a>元素映射。该控件可以用编程的方式控制HTML<a>元素，用于在Web窗体设置描点或其他网页的超链接。HtmlAnchor控件的语法定义如下所示：

HTML的Input系列控件：HtmlInput控件HtmlInput使用于输入数据的控件。该控件有10种类型，通过其Type属性可以设置不同的类型。HtmlInput控件包含的类型如下所述。

Button:普通按钮。
Submit:提交按钮。
Reset：重置按钮。
Image:显示图片的按钮。
Text:普通文本框。
Password：输入密码的文本框。
CheckBox:复选框输入控件。
Radio:单选按钮。
File:上传文件到服务器。
Hidden：输入隐藏内容的控件,如ID.

下面我重点讲述其中几个：

1、HtmlInputButton控件：该控件与<input type=button>元素映射。该控件的功能与HtmlButton控件相似，用于创建命令按钮。单击该控件将引发ServerClick事件，在此事件中可以编写要执行得代码。Value属性可以设置按钮显示的文本信息。HtmlInputButton控件的语法定义如下：

<input 
type="Button"
id = "被程序代码识别的名称"
Visible="False|True"
OnServerClick="事件函数名"
runat="server"
value="显示按钮的文字"
/>

HtmlInputButton类的主要成员及其说明：

属性：Value：在控件上显示的文本信息

方法：ServerClick：单击控件时引发此事件

下面演示如何使用HtmlInputButton控件，代码如下：

[csharp] view plain copy print ?

1. <%@ Page Language="C#" AutoEventWireup="true"
2. <html xmlns="http://www.w3.org/1999/xhtml"
3. <head runat="server"> 
4. <title>HtmlButton使用示例</title> 
5. <script language="javascript" type="text/javascript"> 
6. function onClientclick() 
7. { 
8. alert("单击了按钮"); 
9. } 
10. </script> 
11. <script type="text/C#" runat="server"> 
12. protected void ButtonOnclick(object
13. { 
14. Response.Write("服务器端处理按钮事件"); 
15. } 
16. </script> 
17. </head> 
18. <body> 
19. <form id="form1" runat="server"> 
20. <div> 
21. <h3>HtmlButton使用示例</h3> 
22. </div> 
23. <button id ="button1" οnclick="onClientclick()"
24. <br /><br /> 
25. <button id ="button2" runat="server" onserverclick="ButtonOnclick"
26. </form> 
27. </body> 
28. </html>

<%@ Page Language="C#" AutoEventWireup="true" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>HtmlButton使用示例</title>
<script language="javascript" type="text/javascript">
function onClientclick() 
{
alert("单击了按钮");
}
</script>
<script type="text/C#" runat="server">
    protected void ButtonOnclick(object sender, EventArgs e)
    {
        Response.Write("服务器端处理按钮事件");
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <h3>HtmlButton使用示例</h3>
    </div>
    <button id ="button1" οnclick="onClientclick()" >客户端按钮</button>
    <br /><br />
     <button id ="button2" runat="server" onserverclick="ButtonOnclick" >服务器端按钮</button>
    </form>    
</body>
</html>

HTML的表格控件：HtmlTable控件HtmlTable控件与<table>元素映射。该控件是一个表格。一个表格包含行，行包含单元格。HtmlTable控件通常用设计页面的布局。其语法如下：

<table
 ID="被程序代码识别的名称"
 Align="left|Center|Right"
 runat="server"
 BGColor="背景色"
 BorderColor="边框颜色"
 CellPadding="像素"
 CellSpacing="像素"
 Hight="表格高度"
 Rows="行的集合"
 Width="表格的宽度"
 >
 <tr><td></td></tr>
 < /table>

HtmlTable类的主要成员及其说明：

Align：指定内容的对齐方式

BgColor:指定背景色

Border:指定边框大小

BorderColor：指定边框颜色

CellPadding:指定单元格的内容与边框的距离，以像素为单位

CellSpacing:指定相邻两个单元格的距离，以像素为单位

Rows:包含行的集合

Height:指定控件的高度

width:指定控件的宽度

下面演示如何使用HtmlTable控件，代码如下：

[csharp] view plain copy print ?

1. <%@ Page Language="C#" AutoEventWireup="True"
2. <script runat="server"> 
3. void
4. { 
5. this.Table1.BgColor =  this.BgColorSelect.Value; 
6. this.Table1.Border = int.Parse(BorderSelect.Value); 
7. this.Table1.BorderColor =  this.BorderColorSelect.Value; 
8. } 
9. </script> 
10. <html xmlns="http://www.w3.org/1999/xhtml"
11. <head> 
12. <title>HtmlTable使用示例</title> 
13. </head> 
14. <body> 
15. <form id="Form1" runat="server"> 
16. <h3>HtmlTable使用示例</h3> 
17. <table id="Table1"
18. border="1"
19. runat="server"> 
20. <tr> 
21. <th> 
22. 第一列 
23. </th> 
24. <th> 
25. 第二列 
26. </th> 
27. </tr> 
28. <tr> 
29. <td> 
30. 1 
31. </td> 
32. <td> 
33. 2 
34. </td> 
35. </tr> 
36. <tr> 
37. <td> 
38. 3 
39. </td> 
40. <td> 
41. 4 
42. </td> 
43. </tr> 
44. </table> 
45. <hr/> 
46. 选择显示设置: <br/><br/> 
47. 背景色: 
48. <select id="BgColorSelect"
49. runat="server"> 
50. <option value="Red">Red</option> 
51. <option value="Blue">Blue</option> 
52. <option value="Green">Green</option> 
53. <option value="Black">Black</option> 
54. <option value="White"
55. </select> 
56. 边框大小: 
57. <select id="BorderSelect"
58. runat="server"> 
59. <option value="0">0</option> 
60. <option value="1"
61. <option value="2">2</option> 
62. <option value="3">3</option> 
63. <option value="4">4</option> 
64. <option value="5">5</option> 
65. </select> 
66. 边框颜色: 
67. <select id="BorderColorSelect"
68. runat="server"> 
69. <option value="Red">Red</option> 
70. <option value="Blue">Blue</option> 
71. <option value="Green">Green</option> 
72. <option value="Black"
73. <option value="White">White</option> 
74. </select> 
75. <br/><br/> 
76. <input id="Button1" type="button" value="设置" onserverclick ="Button_Click" runat="server"/> 
77. </form> 
78. </body> 
79. </html>

<%@ Page Language="C#" AutoEventWireup="True" %>
<script runat="server">
  void Button_Click(Object sender, EventArgs e)
  {
      this.Table1.BgColor = this.BgColorSelect.Value;
      this.Table1.Border = int.Parse(BorderSelect.Value);
      this.Table1.BorderColor = this.BorderColorSelect.Value;
  }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <title>HtmlTable使用示例</title>
</head>
<body>
   <form id="Form1" runat="server">
      <h3>HtmlTable使用示例</h3>
      <table id="Table1" 
             border="1" 
             runat="server">
         <tr>
            <th>
              第一列
            </th>
            <th>
               第二列
            </th>  
         </tr>
         <tr>
            <td>
              1
            </td>
            <td>
              2
            </td>    
         </tr>
         <tr>
            <td>
               3
            </td>
            <td>
              4
            </td>
         </tr>
      </table>
      <hr/>
      选择显示设置: <br/><br/>
      背景色:
      <select id="BgColorSelect" 
              runat="server">
         <option value="Red">Red</option>
         <option value="Blue">Blue</option>
         <option value="Green">Green</option>
         <option value="Black">Black</option>
         <option value="White" selected>White</option>      
      </select>
      边框大小:
      <select id="BorderSelect" 
              runat="server">
         <option value="0">0</option>
         <option value="1" selected>1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </select>
      边框颜色:
      <select id="BorderColorSelect" 
              runat="server">
         <option value="Red">Red</option>
         <option value="Blue">Blue</option>
         <option value="Green">Green</option>
         <option value="Black" Selected>Black</option>
         <option value="White">White</option>
      </select>
      <br/><br/>
      <input id="Button1" type="button"  value="设置" onserverclick ="Button_Click"  runat="server"/>
   </form>
</body>
</html>

HTML的数据行控件：HtmlTableRow控件HtmlTableRow控件与<tr>元素映射。该控件表示为HtmlTable控件的行，每行中包含一个或一个以上的单元格。通过其Align,BgColor等属性，可以设置控件的对齐方式、背景色等。

HtmlTableRow控件的语法定义如下：
 <tr
 ID="被程序代码识别的名称"
 Align="left|Center|Right"
 runat="server"
 BGColor="背景色"
 BorderColor="边框颜色" 
 Height="行高度"
 Cells="单元格集合"

 >
 <td>单元格</td>
 < /tr>HtmlTableRow类的主要成

员及其说明：

Align：指定内容的对齐方式

BgColor:指定背景色

Border:指定边框大小

BorderColor：指定边框颜色

Cells:包含单元格的集合

Height:指定行的高度

下面将演示如何使用HtmlTableRow控件，代码如下：

[csharp] view plain copy print ?

1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="HtmlTableRow.aspx.cs" Inherits="HtmlTableRow"
2. 
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
4. 
5. <html xmlns="http://www.w3.org/1999/xhtml"> 
6. <head runat="server"> 
7. <title>HtmlTableRow使用示例</title> 
8. 
9. <script runat="server"> 
10. void
11. { 
12. int
13. for (int
14. { 
15. Table1.Rows[i].Align = "center"; 
16. for (int
17. { 
18. Table1.Rows[i].Cells[i2].InnerText = cellcount.ToString();  //与GridView1.Rows[i].Cells[0].Text几乎一样
19. cellcount++; 
20. } 
21. } 
22. } 
23. </script> 
24. </head> 
25. <body> 
26. <form id="form1" runat="server"> 
27. <h3>HtmlTableRow使用示例</h3> 
28. <br/> 
29. <table id="Table1" border="1" bordercolor="black" runat="server" width="50%"> 
30. <tr align="left"> 
31. <td>Cell 1</td><td>Cell 2</td> 
32. </tr> 
33. <tr align="left"> 
34. <td> Cell3</td><td>Cell 4 </td> 
35. </tr> 
36. </table> 
37. <br/><br/> 
38. <input id="Button1" type="button"
39. value="改变单元格的内容"
40. onserverclick="Button_Click"
41. runat="server"/> 
42. </form> 
43. </body> 
44. </html>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HtmlTableRow.aspx.cs" Inherits="HtmlTableRow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>HtmlTableRow使用示例</title>

    <script  runat="server">
        void Button_Click(Object sender,EventArgs e)
        {
            int cellcount = 1;
            for (int i = 0; i <= Table1.Rows.Count - 1; i++)
            {
                Table1.Rows[i].Align = "center";
                for (int i2 = 0; i2 <= Table1.Rows[i].Cells.Count - 1; i2++)
                {
                    Table1.Rows[i].Cells[i2].InnerText = cellcount.ToString();  //与GridView1.Rows[i].Cells[0].Text几乎一样
                    cellcount++;
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <h3>HtmlTableRow使用示例</h3>
        <br/>
        <table id="Table1" border="1" bordercolor="black" runat="server" width="50%">
            <tr align="left">
                <td>Cell 1</td><td>Cell 2</td>
            </tr>
            <tr align="left">
                <td> Cell3</td><td>Cell 4 </td>
            </tr>
        </table>
        <br/><br/>
        <input id="Button1" type="button"
          value="改变单元格的内容"
          onserverclick="Button_Click"
          runat="server"/>
    </form>
</body>
</html>

运行后，结果如下：

HTML的单元格控件：HtmlTableCell控件HtmlTableCell控件与<td>和<th>元素映射。该控件表示为HtmlTableRow控件的Cell。其中<td>元素表示一般单元格，而<th>元素表示标题单元格。通过其Align，BgColor等属性，可以设置控件的对齐方式、背景色等。HtmlTableCell控件的语法定义如下：

<tr或th
 ID="被程序代码识别的名称"
 Align="left|Center|Right"
 runat="server"
 BGColor="背景色"
 BorderColor="边框颜色" 
 Height="高度"
 NoWap="True|False"
 ColSpan="跨列数"
 RowSpan="跨行数"
 Width="宽度"
 >
 单元格内容
 < /tr或th>

下面将演示如何使用HtmlTableCell控件，代码如下：

[csharp] view plain copy print ?

1. <%@ Page Language="C#" AutoEventWireup="True"
2. <script runat="server"> 
3. void
4. { 
5. this.column1.BgColor =  "red"; 
6. this.column2.BgColor = "yellow"; 
7. this.cell1.BgColor =  "green"; 
8. this.cell1.InnerText = "单元格1"; 
9. this.cell2.BgColor =  "white"; 
10. this.cell2.Width = "50"; 
11. this.cell2.NoWrap =  true; 
12. this.cell2.InnerText = "单元格2的内容非常多,需要换行显示"; 
13. 
14. } 
15. </script> 
16. <html xmlns="http://www.w3.org/1999/xhtml"
17. <head> 
18. <title>HtmlTableCell 使用示例</title> 
19. </head> 
20. <body> 
21. <form id="Form1" runat="server"> 
22. <h3>HtmlTableCell 使用示例</h3> 
23. <table id="Table1"
24. border="1"
25. runat="server"> 
26. <tr> 
27. <th id ="column1" runat="server"> 
28. 第一列 
29. </th> 
30. <th id ="column2" runat="server"> 
31. 第二列 
32. </th> 
33. </tr> 
34. <tr> 
35. <td id="cell1" runat="server"> 
36. 1 
37. </td> 
38. <td id="cell2" runat="server"
39. 2 
40. </td > 
41. </tr> 
42. </table> 
43. 
44. <br/><br/> 
45. <input id="Button1" type="button" value="设置" onserverclick ="Button_Click" runat="server"/> 
46. </form> 
47. </body> 
48. </html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。