前端-王卓凡-20230412

今天所学内容：

• 表格标签
  
  • 表格的作用
    
    
    • 可以更加清晰的展示数据，增强可读性。
      
      
  • 表格标签的基本语法
    
    
    • 例
    • < table>< /table>定义表格标签
    • < tr>< /tr>标签用于定义表格中的行（table row）,要嵌套在< table>< /table>标签中
    • < td>< /td>标签用于定义行中的单元格（table data）, 必须嵌套在< tr>< /tr>标签中
    • < th>< /th>标签定义的内容是表头内容，表头内容会加粗并且居中对齐
      
      
  • 表格中常用的基本属性
    
    
    • align 规定表格的相对于周围元素的水平对齐方式
      
      
      • 属性值：left、center、right
        
        
    • border 固定表格的是否拥有边框，默认是没有的
      
      
      • 属性值：1 代表有边框
        
        
    • width 固规定表格的宽度
      
      
      • 属性值：像素值
        
        
    • height 规定表格的高度
      
      
      • 属性值：像素值
        
        
    • cellpadding  控制单元格内容和单元格边框之间的距离
      
      
      • 属性值：像素值，默认是1像素
        
        
    • cdllspacing 控制单元格和单元格之间的距离
      
      
      • 属性值：像素值，默认是2像素
        
        
    • 例
    • 一般控制样式会使用CSS，目前可以先通过属性来控制。
      
      
  • 表格的结构标签
    
    
    • 表格标签中，用< thead>< /thead>来确定表头区域、用< tbody>< /tbody>来确定表格的主体区域，这样能让表格的结构更加清晰，也方便后期使用JS来获取表格中的内容。
    • 例
      
      
  • 合并单元格
    
    
    • 合并单元格的步骤
      
      
      • 1、找到目标单元格
      • 2、确定是跨行还是跨列合并
        
        
        • 跨行合并 rowspan=“被合并单元格的个数”, 合并单元格的个数最少是2
        • 跨列合并 colspan=“被合并单元格的个数”，合并单元格的个数最少是2
          
          
      • 3、将被和合并的单元格删除掉
        
        
      
      
    
    
• 列表标签
  
  • 无序列表
    
    
    • 语法结构
    • 注意点：
      
      
      • 1、无序列表的各个列表项之间是没有级别之分
      • 2、< ul>< /ul>标签中只能嵌套< li>< /li>标签，不允许嵌套其他的标签
      • 3、< li>< /li>相当于一个盒子或者容器，可以容纳所有的元素
      • 4、无序列表有自己本身的样式 后期可以通过CSS处理掉。
        
        
      
      
  • 有序列表
    
    
    • 语法结构
    • 注意点：
      
      
      • 1、有序列表的各个列表项之间是有级别之分，会有数字标识
      • 2、< ol>< /ol>标签中只能嵌套< li>< /li>标签，不允许嵌套其他的标签
      • 3、< li>< /li>相当于一个盒子或者容器，可以容纳所有的元素
      • 4、有序列表有自己本身的样式 后期可以通过CSS处理掉
        
        
      
      
  • 自定义列表
    
    
    • 语法结构
    • 注意点
      
      
      • < dl>< /dl>标签用于定义一个自定义列表
      • < dt>< /dt>标签定义项目/名字
      • < dd>< /dd>标签来定义对项目的解释/描述
      • 一般情况下一个< dl>< /dl>标签中只能放一个< dt>< /dt>，但是可以有多个< dd>< /dd>
        
        
      
      
      
    
    
• 表单标签
  
  • 为什么需要表单
    
    
    • 为了收集用户信息，就会用到表单标签。
      
      
  • 表单域
    
    
    • 表单域是一个包含表单元素的区域，在HTML中，使用< form>< /form>标签来定义表单域，在表单域中的信息会发送给服务器
    • 常用的属性
      
      
      • action
        
        
        • 属性值：url地址，用于指定接受并处理表单内容的服务器地址。
          
          
      • method
        
        
        • 属性值：get/post，用于指定表单数据传递的方式，取值为get/post
          
          
      • name
        
        
        • 属性值：名称，用于区分同一个页面中的不同的表单
          
          
        
        
    • 例
      
      
  • 表单控件
    
    
    • 在表单域中可以定义多种表单元素，可以让用户输入相关的内容。
    • input表单元素
      
      
      • input中的type属性使用
        
        
        • 属性值
          
          
          • text  定义单行输入文本框，输入文本内容
          • password 定义密码输入框，输入的内容加密显示
          • button  定义按钮，一般会和js联合使用
          • file 定义文件提交按钮
          • radio 定义单选按钮（一组radio标签要有相同的name值）
          • checkbox 定义复选框（一组checkbox标签要有相同的name值）
          • submit 定义提交按钮，提交按钮会将表单的数据提交给服务器
          • reset 定义重置按钮，清空表单元素中的所有数据
            
            
        • 例
          
          
      • input表单元素的其他属性
        
        
        • name和value 是每个表单元素都有的属性值，主要是发送数据的时候给后台人员使用
        • name可以设置表单元素的名字，要求相同的单选按钮或者复选框要有相同的name值
        • value规定input表单元素的值，可以修改按钮的内容，也可以给文本输入框设置默认文本
        • checked 可以在页面重新加载的时候默认选中某个表单元素，一般只针对单选按钮和复选框
        • maxlength  规定输入框中的最大字符数，一般都会写正整数
        • 例
          
          
      • label标签的使用
        
        
        • label标签用于绑定一个表单元素，当点击该标签内的文本时，浏览器会将焦点自动聚焦到对应的表单元素上，可以增加用户体验。
        • label标签中的for属性的属性值要和绑定的表单元素的id属性值保持一致
        • 例
          
          
        
        
    • select表单元素
      
      
      • 在页面中，如果有多个选项让用户去选择，还可以节约页面的空间，就能使用select标签定义下拉列表
      • 基本语法
      • select标签定义下拉列表
      • option标签定义列表中的选项，一个select标签至少应该有一个option标签
      • 如果要默认选中某个选项，就给option标签添加selected属性值，属性值为selected
        
        
    • textarea表单元素
      
      
      • textarea文本域标签，一般用在评论区或者用户输入内容较多的时候（留言版）
      • 例
      • cols 控制文本域中的文字应该显示多少列
      • rows 控制文本域中的文字应该显示多少行
      • 遇到的问题