前端技术学习之道：html之简单网页表格制作

雨点打透心脏的1/2处 2021-09-30 06:52 339阅读 0赞

### <input>用于搜集用户信息,无结束语。 ###

### <type>input元素类型, ###

### input 之type 属性，type属性值: ###

text（文本框），button（按钮），checkbox（复选框），file（文件），hidden（隐藏字段），

image（图像），password（密码框），radio（单选按钮），reset（重置按钮），submit（提交按钮）。

<table style="line-height:26px; margin:10px 0px 0px; padding:0px; border:1px solid rgb(170,170,170); border-collapse:collapse; width:709px; color:rgb(0,0,0); font-family:Verdana,Arial,宋体; font-size:12px; background-color:rgb(249,249,249)"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 值</th> 
   <th style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:baseline; background-color:rgb(213,213,213)"> 描述</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> button</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> checkbox</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义复选框。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> file</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义输入字段和 "浏览"按钮，供文件上传。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> hidden</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义隐藏的输入字段。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> image</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义图像形式的提交按钮。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> password</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义密码字段。该字段中的字符被掩码。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> radio</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义单选按钮。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> reset</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义重置按钮。重置按钮会清除表单中的所有数据。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> submit</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义提交按钮。提交按钮会把表单数据发送到服务器。</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> text</td> 
   <td style="margin:0px; padding:5px 15px 5px 5px; border:1px solid rgb(170,170,170); vertical-align:text-top; background-color:rgb(239,239,239)"> 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。</td> 
  </tr> 
 </tbody> 
</table>

**<textarea>**定义一个文本区域，结束语</textarea>.**textarea属性:**

<table style="font-family:Arial; line-height:26px; border-style:solid; border-color:rgb(170,170,170); margin:10px 0px 0px; padding:0px; border-collapse:collapse; width:709px; color:rgb(0,0,0); font-size:12px"> 
 <tbody style="margin:0px; padding:0px; border:0px"> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:baseline; background-color:rgb(213,213,213)"> 属性</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:baseline; background-color:rgb(213,213,213)"> 值</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:baseline; background-color:rgb(213,213,213)"> 描述</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:baseline; background-color:rgb(213,213,213)"> 4</th> 
   <th style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:baseline; background-color:rgb(213,213,213)"> 5</th> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> autofocus</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 
    <ul style="margin:0px; padding:0px; border:0px; list-style-type:none"> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">true</li> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">false</li> 
    </ul> </td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 在页面加载时，使这个 textarea 获得焦点。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> &nbsp;</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> cols</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> <span style="margin:0px; padding:0px; border:0px">number</span></td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 规定文本区内可见的列数。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 4</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> disabled</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 
    <ul style="margin:0px; padding:0px; border:0px; list-style-type:none"> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">true</li> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">false</li> 
    </ul> </td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 当此文本区首次加载时禁用此文本区。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 4</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> form</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 
    <ul style="margin:0px; padding:0px; border:0px; list-style-type:none"> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">true</li> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">false</li> 
    </ul> </td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 定义该 textarea 所属的一个或多个表单。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> &nbsp;</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> inputmode</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> <span style="margin:0px; padding:0px; border:0px">inputmode</span></td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 定义该 textarea 所期望的输入类型。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> &nbsp;</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> name</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> <span style="margin:0px; padding:0px; border:0px">name_of_textarea</span></td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 为此文本区规定的一个名称。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 4</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> readonly</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 
    <ul style="margin:0px; padding:0px; border:0px; list-style-type:none"> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">true</li> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">false</li> 
    </ul> </td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 指示用户无法修改文本区内的内容。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 4</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> required</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 
    <ul style="margin:0px; padding:0px; border:0px; list-style-type:none"> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">true</li> 
     <li style="margin:0px; padding:0px; border:0px; list-style-type:none">false</li> 
    </ul> </td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 定义为了提交该表单，该 textarea 的值是否是必需的。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> &nbsp;</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
  <tr style="margin:0px; padding:0px; border:0px"> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> rows</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> number</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 规定文本区内可见的行数。</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 4</td> 
   <td style="border-style:solid; border-color:rgb(170,170,170); margin:0px; padding:5px 15px 5px 5px; vertical-align:text-top; background-color:rgb(239,239,239)"> 5</td> 
  </tr> 
 </tbody> 
</table>

例:

<em>一般为斜体，强调</em>

<strong>一般为粗体，强调</strong>

<cite>一般为斜体，用于引证、举例</cite>

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****html****>**  
2.      **<****head****>**  
3.          **<****title****>**欢迎注册/登陆**</****title****>**  
4.      **</****head****>**  
5.  **<****form** name="form1" method="post" action=""**>**  
6.      **<****P****>**名  字：  
7.         **<****input**  type="text" value="小神" size="20"**>**  
8.      **</****P****>**  
9.  **</****form****>**  
10.   
11. **<****form** name="form2" method="post" action=""**>**  
12.     **<****P****>**密  码：  
13.         **<****input** value=“ 123456 ” type="password" size="22"**>**  
14.     **</****P****>**  
15. **</****form****>**  
16.   
17. **<****form** name="form3" method="post" action=""**>**  
18.     **<****br****>**单选性别：  
19.          **<****input** name="gen" type="radio" class="input" value="男" checked**>**  
20.          **<****img** src="b.gif" width="23" height="21"**>**男    
21.          **<****input** name="gen" type="radio" class="input" value="女" **>**  
22.          **<****img** src="g.gif" width="23" height="21"**>**女    
23.     **<****br****>**复选爱好：  
24.         **<****label****>**  
25.             **<****input** type="checkbox" name=""value=""checked**>**  
26.         **</****label****>**聊天    
27.         **<****label****>**  
28.             **<****input** type="checkbox" name="" value=""**>**  
29.         **</****label****>**电影    
30.         **<****label****>**  
31.             **<****input** type="checkbox" name="" value=""**>**  
32.         **</****label****>**游戏    
33.     **<****br****>**出生日期：  
34.         **<****input** name="byear" value="yyyy" size=4 maxlength=4 **>**年   
35.             **<****select** name="bmon"**>**  
36.                 **<****option** value=" " selected**>**\[选择月份\] **</****option****>**  
37.                 **<****option** value=0**>**一月**</****option****>**  
38.                 **<****option** value=1**>**二月**</****option****>**  
39.                 **<****option** value=2**>**三月**</****option****>**  
40.                 **<****option** value=3**>**四月**</****option****>**  
41.             **</****select****>**月   
42.             **<****input** name="bday" value="dd" size=2 maxlength=2 **>**日   
43.             **<****div** class="left"**>**  
44.             **<****span** class="spanTxt"**>**输入右图数字验证**</****span****>**：  
45.             **<****span** class="shortInputSpan"**>****<****input** type="text" class="short\_input" name="validatecode" id="validatecode"  maxlength="4"  onFocus="textshow(this,'请正确输入验证码');"**/>****</****span****>**  
46.             **<****span** class="h1"**>**  
47.             **<****img** id="vcode" name="vcode"  alt="" src="help\_alarm.jpg" height="28" width="63"  align="absmiddle"**/>****<****a** href="javascript:changeimg();" class="code\_style"**>**看不清，换一张**</****a****>**  
48.             **</****span****>**  
49.             **</****div****>**  
50.   **</****form****>**  
51.   **<****form****>**  
52.         **<****input** type="checkbox" id="chkagreement"  name="chkagreement" checked="checked"**/>**  
53.         接受**<****a** href="小神幻化成形.html" target="\_blank" **>**《XXX注册协议书》**</****a****>**  
54.   **</****form****>**  
55.   
56.   **<****form** name="form7" method="post" action=""**>**  
57.         **<****textarea** name="textarea" cols="35" rows="6"**>**欢迎阅读本服务条款协议，本协议阐述之条款和条件适用于您使用XXX的各服务。  
58. 本服务协议为me,you,ta，  
59. 本服务协议具有合同效力。  
60. me的权利和义务  
61.           **</****textarea****>**  
62.   **</****form****>**  
63. **</****html****>**  
64.

[view plain]: http://blog.csdn.net/callchunli/article/details/9716865#