表格、表单和高级选择器

1. 表格的使用

1.1 表格的基本语法

1.2 合并单元格-跨列合并

合并单元格需要进行以下三步

1. 先考虑没有进行合并时的行与列数
2. 找到需要合并的单元格 给其添加属性colspan（column span跨列），并赋值为要合并的单元格个数
3. 删除逻辑上已经被合并的单元格

    

        
学生成绩
    
    

        
语文
        
20
    
    

        
数学
        
99
    

1.3 合并单元格-跨行合并

1. 先考虑未进行合并时的行数和列数
2. 找到需要合并的单元格 给其添加属性rowspan(row span 跨行)，并赋值为要合并的单元格个数
3. 删除逻辑上已经被合并的单元格

    

        
张三
        
语文
        
20
    
    

        
数学
        
99
    
    

        
李四
        
语文
        
99
    
    

        
数学
        
20
    

2. 表单的使用

表单是由一系列表单元素，例如输入框、单选按钮、复选框、下拉框等组成的用于方便用户使用填选信息的一种数据填写方式。

2.1 表单基本语法

    表单元素们

2.2 常见的表单元素

• 文本输入框type="text"
  如果在value中输入，就会在文本框内默认显示输入的数值

输入框
输入框

• 密码输入框type="password"输入内容将变为实心原点

输入框

• 单选按钮type="radio"，有多个单选按钮时，将不同input标签内的name属性值设置为相同值可以用来区别选择，从而不会发生多选的情况

单选按钮

• 复选框type="checkbox"

    复选框1
    复选框2
    复选框3
    复选框4

• 文件域type="file"显示一个文件选择按钮

文件选择

• 按钮

1. 普通按钮

2. 提交按钮

3. 图片提交按钮

4. 重置按钮

• 时间输入框type="date"

• 数值输入框\点输框type="number"
  
  

• 列表框

    
    请选择
    选择1
    选择2

• 文本域

自我介绍：121

2.3表单的高级应用

• 增强鼠标可用性的小标签，创建标签在标签内设置for值，并在标签内用id值与其关联，可以实现点击文本即可选中按钮的效果

性别：


男


女

• 隐藏域：它不会显示出来，但是如果绑定好name和value可以作为隐藏的数据传递

• 禁用

运行代码后发现按钮无法点击

• 只读

运行代码发现无法对输入框内的文本进行修改、删除等操作

2.4 数据请求

GET和POST请求的基本区别：

• GET请求方式：
  它在进行数据传输的时候 会采用URL地址后?+数据键值对(name=value) 键值对以&分隔
  success.html?username=%E6%A2%81%E6%B6%9B&pwd=123456&gender=on&city=
• POST请求方式：
  它会通过请求体来传输数据 不会在地址栏显示请求数据 所以相对安全

3.CSS高级选择器

3.1 层级选择器

• 后代选择器
  E F表示选择E选择器下的F选择器（包含后代）

div p{

}

• 子选择器
  E>F表示选择E选择器下的F选择器（只会选择直接子元素）

div>p{

}

• 相邻兄弟选择器
  E+F表示选择E选择器后紧挨着的F选择器内容

div~p{

}

3.2 复合选择器

• 并集选择器
  E,F表示E和F选择器都被选中
• 交集选择器

/*1.使用并集选择器将p选择器和ul选择器的范围内背景颜色都设置为绿色*/
p,ul{
background: green;
}

/*2.使用交集选择器将p选择器和.active选择器的范围内公共的交集部分颜色设置为红色*/
/*p.active{
background: red;
}*/

3.3 属性选择器

根据属性选择内容