• HTMLCSS学习笔记(六)----表格表单及样式重置,特性


    • 表格
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>...</title>
    </head>
    <body>
    
     <table> <!-- 表格 -->
       <thead> <!-- 表格头部 -->
        <tr> <!-- 行 -->
          <th>表格标题</th>
          <th>表格标题</th>
          <th>表格标题</th>
        </tr>
       </thead>
     <tbody> <!-- 表格主体 -->
       <tr>
         <td>单元格</td>
         <td>单元格</td>
         <td>单元格</td>
       </tr>
       <tr>
         <td>单元格</td>
         <td>单元格</td>
         <td>单元格</td>
       </tr>
       <tr>
         <td>单元格</td>
         <td>单元格</td>
         <td>单元格</td>
       </tr>
     </tbody>
     <tfoot> <!-- 表格尾部 -->
       <tr>
         <td>单元格</td>
         <td>单元格</td>
         <td>单元格</td>
       </tr>
    </ftoot> <!-- 表格尾部 -->
    </table>
    
    </body>
    </html> 

      table css reset:

     th,td{padding:0;}

     table{ border-collapse: collapse;} 单元格属性合并

     注意事项:

     1,不要给table,th,td以外的表格标签加样式。

     2,table的标签基本特性是 display: table ;

     3,单元格默认平分table的宽度;

     4,th 里面的文字默认加粗并且左右上下居中显示;

     5,td里面的内容默认上下居中左右居左显示;

     6,table 决定了整个表格的宽度;

     7,table 里面的单元格宽度会被转换成百分比;

     8,表格里面的每一列必须有宽度;

     9,表格同一竖列继承最大宽度;

     10,表格同行继承最大高度;


    • 单元格合并

      <td colspan="3"></tdx>

     属性规定单元格可横跨的列数,被合并的列数去掉

     <td rowspan="3"></tdx>

     属性规定单元格可横跨的行数,被合并的列数去掉


    • 表单元素

     <form action="http://www.cnblog.com/" method="get" target="_blank">

     提交按钮:<input type="submit" value="提交OK"/ name="">

    </form>

     </br></br>

     文本框 : <input type="text" name=""/>

    </br></br>

    密码框:<input type="password" name=""/>

     </br></br>

     单选按钮 :

    <label>

    <input type=“radio” name="gender"/ >男

    </label>

    <label>

    <input type=“radio” name="gender"/ >女

    </label>

    两者取同一个名字是或的关系

    <br/><br/>

    复选框:

    <input type="checkbox" name=""disabled>逛街<!-- 禁止禁用 -->

    <input type="checkbox" name="">健身

    <input type="checkbox" name="">直排

    <input type="checkbox" name="">美食

    <input type="checkbox" name=checked/>旅游 <!-- 默认选中 -->

    <br/><br/>

    <hr/>

    上传:<input type="file" name=""/>

    <br/><br/>

    图片:<input src="xxx.jpg" type="image" name=""/>

    <br/><br/>

    按钮:<input type="button" name""/>

    <br/><br/>

    重置:<input type="reset" name""/>

    <br/><br/>

    隐藏:<input type="hidden" name""/>

    <br/><br/>

    <hr/>

     <select>

     <option >1990</option>

     <option>1991</option>

     <option selected>1992</option> <!-- 默认显示 -->

     <option>1993</option>

     </select>

     <br></br>

    文本域: <textarea></textarea>

     默认样式重置:

    form{margin:0;}

    input{margin:0; padding:0;}有默认两像素的边框

    select{margin:0;}一般不控制高度

    textarea{margin:0;padding:0;}


     

  • 相关阅读:
    Redis之面试题总结
    nginx入门,安装
    NGINX工作原理(2)
    Ngnx工作原理(1)
    Linux之常用脚本
    进程管理工具之supervisor[详解]
    PHP进阶书籍
    LVS、Nginx及HAProxy
    高级程序员与初级程序员差别在哪里?
    详解Wox
  • 原文地址:https://www.cnblogs.com/BBeyes/p/6581630.html
Copyright © 2020-2023  润新知