重新认识web前端-表格和表单的使用_前端页面,表格能渲染,表单不能,两用的对象名是一样的-CSDN博客

本文链接：https://blog.csdn.net/qq_41163341/article/details/108047008

表格的使用

表格的介绍
表格的基本使用
表格的CSS
表单的介绍
- 相关属性
- form的相关属性

表格的介绍


    <!-- 
        表格

            之前：页面布局

            现在：局部布局
                   (批量展示的数据)

     -->
     <!-- 基本的表格结构 
                固定嵌套

                &nbsp;空格


    -->
      
     <table border="1">       
        <tr><!-- 行 -->           
            <td>1111</td> <!-- 单元格 -->
            <td>222</td>
        </tr>
        <tr><!-- 行 -->            
            <td>1111</td> <!-- 单元格 -->
            <td>222</td>
        </tr>
     </table>

     <!-- 表格的完整结构 -->
     <table border="1">
           <thead>
               <!-- 表格的头部 页眉 -->
               <tr>
                   <th>表头单元格</th>
                   <th>表头单元格</th>
               </tr>
           </thead>
           <tbody><!-- 表格的主体 -->
            <tr><!-- 行 -->            
                <td>1111</td> <!-- 标准单元格 -->
                <td>222</td>
            </tr>
            <tr><!-- 行 -->            
                <td>1111</td> <!-- 单元格 -->
                <td>222</td>
            </tr>
        </tbody>
        <tfoot> <!-- 表格的底部 页脚 -->
                <tr><!-- 行 -->            
                    <td>1111</td> <!-- 标准单元格 --
                    <td>222</td>
                </tr>
        </tfoot>
         </table>

表格的基本使用

带标题表格

 <table border="1">
     <caption>表格标题，1个table通常只有一个caption,table标签之后</caption>
     <thead>
         <!-- 表格的头部 页眉 -->
         <tr>
             <th>表头单元格</th>
             <th>表头单元格</th>
         </tr>
     </thead>
     <tbody>
         <!-- 表格的主体 -->
         <tr>
             <!-- 行 -->
             <td>1111</td> <!-- 标准单元格 -->
             <td>222</td>
         </tr>
         <tr>
             <!-- 行 -->
             <td>1111</td> <!-- 单元格 -->
             <td>222</td>
         </tr>
     </tbody>
     <tfoot>
         <!-- 表格的底部 页脚 -->
         <tr>
             <!-- 行 -->
             <td>1111</td> <!-- 标准单元格 -->
             <td>222</td>
         </tr>
     </tfoot>
 </table>

单元格基本属性

<!-- 
    
     width="300"
     height="60" 
     align="left" 单元格内容水平方向对齐方式  left center right
     valign="top" 单元格内容垂直方向对齐方式  top  middle bottom      
 -->

表格的CSS

 <!-- 
   table
       border-spacing: 0; 边框间距
       border-collapse: collapse; 边框折叠（合并）
                        separate  分离（默认值）
     用css给表格添加1像素边框
  -->
  <!-- class="tablebox"  起了一个名字
  .tablebox 查找有 class="tablebox" 属性的元素 -->
    <!-- 
          rowspan="5" 跨行合并
          colspan="3" 跨列合并
         
   -->

表单的介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 
        form    
            申明表单区域

            作用：收集不同类型的用户输入


            input 空元素
                  type="text" 文本域（单行文本输入框）

            
            <select></select>

            <textarea></textarea>
            

            <label>标注（给表单元素添加注解） 

            内联

            name="" 名称
     -->

    <form action="">
       文本域： <input type="text" name="username"><br/>
       密码域： <input type="password"><br/>
                 <!-- 掩码处理 -->
                 <!-- 
                    通过name属性，指定一组单选按钮  
                  -->
       单选按钮：<input type="radio" name="students" id="boy">
                    <label for="boy">男生</label><input type="radio" name="students" id="girl"><label for="girl">女生</label><br/>
                    <!-- 
                        for="id名称" 绑定表单元素
                     -->

       复选框：   <input type="checkbox"> 吃  <input type="checkbox"> 喝 <input type="checkbox"> 玩<input type="checkbox"> 学习<br/>

      列表菜单：
              <select name="" id="">
                  <option value="">北京</option>
                  <option value="">上海</option>
              </select>

              <!-- 
                  value="" 可以改变按钮上的文字
                            初始值
               -->
               <br/>

      文本区域：<textarea name="" id=""></textarea><br/>
      普通按钮：<input type="button" value="按钮"><br/>

      <!-- 默认带有提交，重置功能 -->
      提交按钮：<input type="submit" value="提交"><br/>
      重置按钮：<input type="reset" value="重置"><br/>

      图像域：<input type="image" src="imgbtn.png" alt="立即注册">
      （另一种类型的提交按钮）<br/>

      隐藏域：
             <input type="hidden"><br/>

      文件域：
            <input type="file">
     
    </form>


    
</body>
</html>

form的相关属性

<!-- 
     name=""  表单区域名称
    action="" 表单动作（地址）
              默认当前页面
    target="_blank" 新窗口
            _self 当前窗口
    
    method=""  http方法（数据提交方法）
    
               get(默认) 地址栏可见
               post     
    
 -->