html5 标签(02) table表格 form表单

table:表格标签,表示表格的范围

         border="1":  1像素的边框

<body>
  <table border=1;
   <!--tr:行-->
    <tr>
        <!--td:列-->
        <!-- 列 
            clospan="2" 列合并。占用两列的位置
            rowspan="2" 行合并。占用两行的位置
         -->
        <td colspan="2>第一行,第一列</td>
        <td rowspan="2">第一行,第二列</td>
    </tr>
   </table>
   
     <!-- 
            cellspacing="0":单元格的内边距 单元格与单元格的边距
            cellpadding="20":单元格内部的边距 单元格与文字的边距
      -->
   <table boeder="1" cellpadding="20" cellspacing="0">
       <tr>
           <!--th:文字加粗-->
           <th>第一行,第一列</th>
           <td>第一行,第二列</td>
        </tr>
    </table>
 </body>

form:表单

 

       

<body>

<!-- 
method="GET"数据传送方法:GET  提交方式(?连接,拼接在接口后)
action="http://www.baidu.com" 提交位置
-->

<form action="http://www.baidu.com" method="GET">
<!--
<input type="text" 单行的输入框  
type="password":密码形式
name="" value的key值
value=""固定的值
placeholder=""提示内容
style="display: block; 块模式
outline: none;去掉style中的蓝色的外边框
-->

   <input type="text" name="userName" value="karry" style="display: block; outline: none;" />
   <input type="password" name="passWord" placeholder="请输入密码:" style="display: block; outline: none;" />
   
   <br />
   <!--单选框-->
   <!-- 
     type="radio"单选 小圆圈
     name="gender"性别 同一性别为一组 
     value="man":提交服务器显示
     -->
     
     <input type="radio" name="gender" value="man"/>
         <span>男</span>
         
         <input type="radio" name="gender" value="female"/>
         <span>女</span>

    <br />
    
    <!--复选框-->
    <input type="checkbox" name="hobby" value="read" />
    <span>读书</span>
    <input type="checkbox" name="hobby" value="sing" />
    <span>唱歌</span>
    <input type="checkbox" name="hobby" value="dance" />
    <span>跳舞</span>
    
    <br />
    <br />
    
    <input type="submit" value="百度一下"/>
    
</form>
    </body>

 

posted on 2016-12-22 14:22  乄Dream灬素梦丶  阅读(209)  评论(0)    收藏  举报

导航