快速自学java编程高级语言干货笔记 -表单、表格和高级选择器

1.掌握表格的使用

1.1 表格的基本语法

<!-- 声明表格 -->
<table>
	<!-- 表格由行和列组成 -->
	<!-- table row 行  你想要几行内容就写几个tr -->
	<tr>
		<!-- 单元格(列) 你在一行想要几个列就写几个td -->
		<td></td>
	</tr>
</table>
<!-- 考虑是几行几列的表格 -->
<!-- border 边框  -->
<table border="1">
    <tr>
        <td>11</td>
        <td>12</td>
        <td>13</td>
    </tr>
    <tr>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>31</td>
        <td>32</td>
        <td>33</td>
    </tr>
</table>

1.2 合并单元格-跨列合并

在这里插入图片描述

  1. 先考虑未进行合并时的行数和列数
  2. 找到需要合并的单元格 给其添加属性colspan(column span 跨列),并赋值为要合并的单元格个数
  3. 删除逻辑上已经被合并的单元格
<table border="1">
    <tr>
        <td colspan="2">学生成绩</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>20</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>99</td>
    </tr>
</table>

在这里插入图片描述
4. 先考虑未进行合并时的行数和列数
5. 找到需要合并的单元格 给其添加属性rowspan(row span 跨行),并赋值为要合并的单元格个数
6. 删除逻辑上已经被合并的单元格


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

2. 掌握表单的使用

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

2.1 表单基本语法

<!-- 最通俗的表单形态:form表单 -->
<!-- 
	action:表单数据提交地址
	method:请求的方式(HTTP请求的请求方式)  默认请求方式为GET
		GET POST  [PUT  DELETE HEAD ...]
-->
<form action=""  method=“”>
    表单元素们
</form>

2.2 常见的表单元素

<!-- 
	type:类型  表示input表单的类型  (默认值为text 表示文本输入框)
	name:目前了解  只要你想要将此表单填写的数据传输到后台  必须要写此属性!!!!
	value:表单默认的值

	可选/不常用属性:
	maxlength:允许输入的最大字符长度
	size:设置输入框的长度 取值范围[1,7]
	下面仨往往用于type=number输入框
	max:输入的最大值
	min:输入的最小值
	step:步进    默认为1   例如:1 2 3 4 5 6   如果改为2则变为了1 3 5 7 9
-->
<input type=""  name=""  value="" maxlength=""  size=""  max=""  min="" step=""/>
  • 文本输入框 type="text"

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

  • 单选按钮 type="radio"

    性别:
    <!-- 我们希望 单选按钮在性别需求上实现互斥效果 -->
    <!-- name除了作为关键的数据传输作用之外 还承担可以实现单选按钮的互斥效果  -->
    <!-- checked 默认选中 -->
    <input type="radio" name="gender" value="" checked /><input type="radio" name="gender" value="" />
  • 复选框 type="checkbox"

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

  • 按钮

    • 普通按钮
    • 提交按钮
    • 图片提交按钮
    • 重置按钮
    <!-- 未来要结合js使用 -->
    <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系列的按钮 -->
        <!-- 默认效果和提交按钮一样 -->
        <button type="submit">提交按钮</button>
        <button type="button">普通按钮</button>
        <button type="reset">重置</button>
    </form>
    
  • 时间输入框 type="date"

  • 数值输入框 type="number"

  • 列表框

    <select name="">
        <!-- 下拉列表项 -->
        <option value="">xxx</option>
    </select>
    
    <select name="">
        <option>请选择</option>
        <!-- selected默认被选中 -->
        <option value="" selected>陈旭</option>
        <option value="">史浩然</option>
        <option value="">梁涛</option>
    </select>
    
  • 文本域

    <!-- 
        cols控制列数
        rows 控制行数
        文本域的标签内写的内容就是它的value属性值
        style:resize:none; 可以取消可缩放效果
    -->
    自我介绍:<textarea name="" cols="" rows="" style="resize: none;">121</textarea>
    

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

2.3 表单的高级应用

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

    性别:
    <input id="male" type="radio" name="gender" />
    <!-- for属性用来关联表单元素的id属性 -->
    <label for="male"></label>
    
    <input id="female" type="radio" name="gender" />
    <label for="female"></label>
    
  • 隐藏域:它不会显示出来,但是如果绑定好name和value可以作为隐藏的数据传递

    <input type="hidden" name="token" id="token" value="ee3322xx" />
    
  • 禁用

    <!-- 禁用  -->
    <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;
}
  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
评论

打赏作者

weixin_44793608

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值