表格、表单和高级选择器

表格、表单和高级选择器

1. 掌握表格的使用

1.1 表格的基本语法

表格是我们在日常生活用到的非常多的一种数据表现形式。

它的结构清晰、稳定、易于管理，且使用简单。

例如：工资条、后台管理系统各种数据表、考试成绩单、简历模板…

<table>
	
	
	<tr>
		
		<td>td>
	tr>
table>

<table border="1">
    <tr>
        <td>11td>
        <td>12td>
        <td>13td>
    tr>
    <tr>
        <td>21td>
        <td>22td>
        <td>23td>
    tr>
    <tr>
        <td>31td>
        <td>32td>
        <td>33td>
    tr>
table>

1.2 合并单元格-跨列合并

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

<table border="1">
    <tr>
        <td colspan="2">学生成绩td>
    tr>
    <tr>
        <td>语文td>
        <td>20td>
    tr>
    <tr>
        <td>数学td>
        <td>99td>
    tr>
table>

1.3 合并单元格-跨行合并

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

<table border="1">
    <tr>
        <td rowspan="2">张三td>
        <td>语文td>
        <td>20td>
    tr>
    <tr>
        <td>数学td>
        <td>99td>
    tr>
    <tr>
        <td rowspan="2">李四td>
        <td>语文td>
        <td>99td>
    tr>
    <tr>
        <td>数学td>
        <td>20td>
    tr>
table>

2. 掌握表单的使用

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

2.1 表单基本语法

<form action=""  method=“”>
    表单元素们
form>

2.2 常见的表单元素

<input type=""  name=""  value="" maxlength=""  size=""  max=""  min="" step=""/>

• 文本输入框 type="text"

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

• 单选按钮 type="radio"

  性别：
  
  
  
  <input type="radio" name="gender" value="" checked /> 男
  <input type="radio" name="gender" value="" /> 女
  

• 复选框 type="checkbox"

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

• 按钮

  • 普通按钮
  • 提交按钮
  • 图片提交按钮
  • 重置按钮

  
  <input type="button" value="普通按钮" />
  <br/>
  <form action="success.html">
      用户名：<input type="text" name="username" value="张三" />
      
      <input type="submit" value="提交"/>
      
      <input type="image" src="login.gif" />
      
      <input type="reset" value="重置" />
  
      
      
      <button type="submit">提交按钮button>
      <button type="button">普通按钮button>
      <button type="reset">重置button>
  form>
  

• 时间输入框 type="date"

• 数值输入框 type="number"

• 列表框

  <select name="">
      
      <option value="">xxxoption>
  select>
  

  <select name="">
      <option>请选择option>
      
      <option value="" selected>陈旭option>
      <option value="">史浩然option>
      <option value="">梁涛option>
  select>
  

• 文本域

  
  自我介绍：<textarea name="" cols="" rows="" style="resize: none;">121textarea>
  

**注意：**在使用浏览器预览我们的页面内容时，小心它自带的缓存功能，如果发现正确更改了代码，却并没有显示出预期的效果，记得要排除此问题。Ctrl+F5强制刷新 (Ctrl+Fn+F5)

2.3 表单的高级应用

• 增强鼠标可用性的小标签

  性别：
  <input id="male" type="radio" name="gender" />
  
  <label for="male">男label>
  
  <input id="female" type="radio" name="gender" />
  <label for="female">女label>
  

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

• 禁用

  
  <input type="button" name="" id="" value="普通按钮" disabled />
  

• 只读

  
  <input type="text" name="" id="" value="只能看不能摸" readonly />
  

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的高级选择器

**选择器：**作用：选中要被设置样式的标签

**基本选择器：**标签、类、ID

3.1 层次选择器

• 后代选择器

  E F 表示选择E选择器下的F选择器(包含后代)

  div p{
      
  }
  

• 子选择器

  E>F表示选择E选择器下的F选择器(只会选择直接子元素)

  div>p{
      
  }
  

• 相邻兄弟选择器

  E+F表示选择E选择器后紧挨着的F选择器内容

  div+p{
      
  }
  

• 通用兄弟选择器

  E~F表示选择E选择器后的所有F选择器内容

  div~p{
      
  }
  

3.2 复合选择器

• 并集选择器

  E,F 表示E和F选择器都被选中

• 交集选择器(小心语法)

  其他选择器 类选择器/ID选择器

  例如：p.div(X)

  p.active

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

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

3.3 属性选择器

根据属性选择内容。

/*1.将所有拥有id属性的元素背景颜色设置为黄色*/
/*a[id]{
	background: yellow;
}*/

/*2.将id属性值为first的元素背景颜色设置为红色*/
/*a[id=first]{
	background: red;
}*/

/*3.将所有拥有class属性且属性值中包含links字符串的元素背景颜色设置为红色*/
/*a[class*=links]{
	background: red;
}*/

/* 4.将所有拥有title属性并且属性值是以web开头的元素背景颜色设置为红色*/
/*a[title^=web]{
	background: red;
}*/

/*5.将所有拥有title属性并且属性值是以site结尾的元素背景颜色设置为红色*/
a[title$=site]{
    background: red;
}