CSS常用五类选择器,经典好文
前言
腾讯的面试凉了,接着开始面试网易
网易的面试体验挺不错。它的微信公众号会给你叫号,前台小姐姐也会提醒你,每一面结束后都可以找前台小姐姐查询面试结果。而且食堂超级好吃!还可以边吃饭边吸猫!面试地点在一楼大厅。环境舒适,就是座位有点不够用。
不多说了,下面分享一下我的面试经历
form表单细节
一、表单
1.表单 标签用于为用户输入创建 HTML 表单
2.表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。
3.表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
4.表单用于向服务器传输数据。
二、表单form 的属性
(一)action属性
action 属性规定当提交表单时,向何处发送表单数据
**属性值:**url 链接的地址
(二)name属性
name属性规定表单的名称。 name 属性提供了一种在脚本中引用表单的方法。
(三)method属性
method 属性规定在提交表单时所用的HTTP方法(GET 或是 POST)
1、什么时候使用GET?
method属性的默认值是GET,如果表单的提交是被动的(比如搜索引擎查询),并且没有敏感信息;
当使用GET的时候,表单数据是提交到页面的地址栏中的。
2、什么时候使用post?
地址栏中可以储存的数据是有限的,如果想要储存更多数据,更安全的储存数据就需要使用 post
表单正在更新数据,或是包含敏感信息(例如密码)最好使用post;
post 安全性更好,因为在页面地址栏中提交的数据使不可见的(如果上传的数据比较多或是要上传图片,就要使用post)。
(四)legend元素
元素为 元素定义标签
标签 可以将表单内的相关元素分组,还可以在相关表单元素周围绘制边框。
<form><fieldset><legend>Personalia:</legend> Name: <input type="text"><br> Email: <input type="text"><br></fieldset>
</form>
input元素必须要加上 name 属性,定义一个名字,后台才会正常接收输入的数据;
三、表单描述标签的使用
为input元素定义标注
<label for="wenzi">文字</label>
<input type="text" id='wenz'></pre>
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。
如果在 label 元素内点击文本,就会触发此控件,使该控件获得焦点。当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。
为了实现同样的效果,会有另一种写法:不需要 for 和 id 属性;
<label>文字 <input type="text">
</label></pre>
四、表单约束属性
(一)required 属性
required 属性是一个布尔属性,规定必须在提交表单之前填写输入字段,必填字段。(required是H5的新属性)
**注意:**required 属性适用于下面的 input 类型:text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file。
(二)placeholder属性
placeholder 属性规定可描述输入字段预期值的简短的提示信息( 在输入框里面的提示文字,内容不会被提交),例如一个样本值或是预期格式的简短的描述。
placeholder 定义的提示会在用户输入值之前显示在输入字段中。
**注意:**placeholder 属性适用于下面的 input 类型:text、search、url、tel、email 和 password。
(三)value属性
value 属性为 input 元素设定值。对于不同的输入类型,value属性的用法也不同。
type类型为button、reset、submit。定义按钮上显示的文本;
type类型为text、password、hidden。定义输入字段的初始值(默认值);
type类型为checkbox、radio、image。定义输入相关联的值;
注意: 和 中必须设置 value 属性。
**注意:**value 属性无法与 一同使用。
(四)maxlength属性
maxlength 属性规定输入字段的最大长度,以字符个数计算。
maxlength 属性与 或 配合使用(有输入长度)
(五)size属性
size 属性规定以字符数计的 元素的可见宽度。
size 限制表单的长度(不建议用,用CSS去设置更好)
五、表单访问限制(表单禁用)
(一)readonly 属性
readonly 属性规定输入字段为只读,无法输入,可以使用value来设置默认值,可以提交到后台,但是用户无法修改。
只读字段无法修改,不过用户仍然可以使用tab键切换到该字段,还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改,直到满足某些条件为止(比如选中了一个复选框)。然后,需要使用 JavaScript 消除 readonly 值,将输入字段切换到可编辑状态。
readonly 属性可与** 或 ** 配合使用。
(二)disabled属性
disabled 属性定义应该禁用input元素(只能看,不能提交到后台)
被禁用的 input元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。
注意:disabled 属性无法与 一起使用。
六、常用的字段扩展类型
值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段,虽然隐藏了却依然存在。 |
image | 定义图像作为提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
H5新标签
值 | 描述 |
---|---|
color | 定义拾色器 |
date | 定义 date 控件(包括年、月、日,不包括时间) |
datetime | 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区) |
datetime-local | 定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区) |
定义用于 e-mail 地址的字段 | |
month | 定义 month 和 year 控件(不带时区) |
number | 定义用于输入数字的字段 |
range | 定义用于精确值不重要的输入数字的控件(比如 slider 控件) |
search | 定义用于输入搜索字符串的文本字段 |
tel | 定义用于输入电话号码的字段 |
time | 定义用于输入时间的控件(不带时区) |
url | 定义用于输入 URL 的字段 |
week | 定义 week 和 year 控件(不带时区) |
七、大量文本和列表
(一)文本域
textarea 标签定义一个多行的文本输入控件
文本域中可容纳无限数量的文本,其中的文本的默认字体是等宽字体(Courier)
文本域中的默认值,要放在一对textarea 标签中
可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小,不过更好地·办法是使用CSS的height 和 width属性
最后
由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!有需要的程序猿(媛)可以帮忙点赞+点击【学习资料】即可免费领取!
实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!有需要的程序猿(媛)可以帮忙点赞+点击【学习资料】即可免费领取!
[外链图片转存中…(img-OkGVC9fD-1623051913928)]
[外链图片转存中…(img-FuCDVadB-1623051913930)]
CSS常用五类选择器,经典好文相关推荐
- CSS常用五类选择器
要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器. ㈠什么是选择器? 每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/co ...
- web开发首选,CSS常用五类选择器
生产-消费者队列,用于多节点的分布式数据结构,生产和消费数据.生产者创建一个数据对象,并放到队列中:消费者从队列中取出一个数据对象并进行处理.在ZooKeeper中,队列可以使用一个容器节点下创建多个 ...
- CSS常用伪类选择器详解
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素. 应用场景: 鼠标经过元素时的样式变化,Tips提示,下拉列表和过渡动画等 细节优 ...
- Css 结构伪类选择器
目录 Css 结构伪类选择器 结构伪类-公式 Css 结构伪类选择器 在日常开发中,结构伪类选择器用的还是比较多的熟练的使用它,可以让我们的代码更整洁. 作用与优势: 作用:根据元素在HTML中的结构 ...
- 使用css伪类选择器,css的伪类选择器的使用
伪类选择器,在不同情况下显示的css,伪类选择器在处理页面的美观是很大帮助.其实很多美丽的按钮或者页面都是有这些基础的知识实现的,掌握好基础很重要. 名字 实例 说明 :link a:link 选择所 ...
- html伪类选择器focus,了解CSS :focus-within伪类选择器
一.了解CSS :focus-within伪类选择器 CSS :focus-within伪类选择器和IE8就开始支持的:focus可以说是近亲,区别在于:focus表示当前元素处于focus状态时候干 ...
- CSS结构伪类选择器
结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁. 表 2-6 结构伪类选择器 选择器 功能描述 版本 E:last-chi ...
- CSS 语言伪类选择器
语言伪类选择器,用来匹配使用指定语言的元素.对使用多语言版本的网站,可以根据不同语言版本,设置不同的样式. 表 2-9 语言伪类选择器 选择器 功能描述 版本 E:lang(language) 选择使 ...
- css基础伪类选择器与选择器权重以及盒子模型的用法演示
1. 伪类选择器 根据元素的位置或状态来匹配子元素 1.1 结构伪类 与上下文选择器很相似 后文演示所用 HTML 代码如下: <!DOCTYPE html> <html lang= ...
最新文章
- ISP PIPLINE (九_1) Denoise 之 space domain denoise
- Git: 生成ssh公钥
- python测试网络连通性_python 判断网络连通的实现方法
- 机器学习:朴素贝叶斯分类器代码实现,决策函数非向量化方式
- MySQL(十一)之触发器
- 生成用于ASP.NET Web API的TypeScript客户端API
- tensorflow实战学习笔记(1)
- ExtJS实战(4)-struts
- 广播的接收与U盘广播
- 区块链 什么是DAPP
- 《Modern Python Cookbook》(Python经典实例)笔记 1.13 使用元组
- (tensorflow2.1.0安装教程) 对应Anaconda3(对应python3.7)+cuda10.1+cudnn7.6.5+Pycharm 网盘 链接
- 菜鸟Java远程连接腾讯云服务器上面的数据库
- python ipo模型是什么意思_IPO里的估值模型是什么情况?
- TopFormer 新的语义分割Transformer 结构
- C语言switch史上最详细的讲解
- 形容人的内核是什么意思_cpu核数是什么意思
- 国产全志T3+Logos FPGA开发板(4核ARM Cortex-A7)规格书
- 三、Spring Cloud 之旅 -- Eureka 服务实例的健康自检
- AS400 资料并分享面经一
热门文章
- dms3.0 mysql_DMS 3.0 导入数据库出错-问答-阿里云开发者社区-阿里云
- 超简单集成华为HMS Core MLKit 机器学习服务银行卡识别SDK,一键实现银行卡绑定
- android紫禁城一日游的代码,故宫旅游app下载-故宫旅游 安卓版v3.3.6-PC6安卓网
- Linux 文字雨特效
- 【MOOC】华中科技大学操作系统慕课答案-第1~3章单元测试
- 中国咖啡机市场运行现状调研及投资战略分析报告2022-2027年
- 人机协作机器人发展趋势_人机协作引领机器人产业新趋势
- python去除图片背景(透明色)
- 几何分布的概率和期望
- 【igraph实例】Commmunity 识别