css input type 浮点类型_前端面试准备笔记之html和css(02)

目录

1. HTML5新增的一些特性
2. CSS3新增的一些属性
3. input 标签中的type属性有哪些
4. css选择器中，优先级排序，由高向低。
5. css 优先级规则
6. 伪类和伪元素的区别

正文

01.HTML5新增的一些特性

• 语义化标签

 头部标签 导航标签 尾部标签 块级标签

• 多媒体标签

• input 表单和表单属性

type="email" 邮箱type="url" 路径type="data" 日期type="time" 时间type="month" 月份type="week" 周type="tel" 手机号type="search" 搜索框// 表单属性类required 表示变淡内容不能为空，必填placeholder 表单的提示信息autofocus 自动聚焦，页面加载完焦点自动到指定表单multiple 可以提交多选文件

02.CSS3新增的一些属性

边框属性

• border-color：设置边框多种颜色
• border-image: 图片边框
• border-radius: 圆角边框
• box-shadow: 阴影效果

背景属性

• background-size: 指定背景图片尺寸
• background-origin: 指定背景图片从哪里开始显示
• background-clip: 指定背景图片从什么位置开始裁剪

颜色属性

• HSL colors
• HSLA colors
• opacity
• RGBA colors

文字效果

• text-shadow 文本阴影
• word-wrap 自动换行
• text-overflow 规定当文本溢出包含元素时发生的事情。

用户界面

• box-sizing 允许您以特定的方式定义匹配某个区域的特定元素。
• resize 属性规定是否可由用户调整元素的尺寸。
• outline 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

选择器

• attribute selectors

基础盒子模型

• overflow-x
• overflow-y

动画效果

• transform 变换效果，可以将元素实现旋转、缩放、平移
• animation 动画效果，指定属性的初始状态和结束状态

过度效果

• transition

03.input 标签中的type属性有哪些

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text

04.css选择器中，优先级排序，由高向低。

• !important
• 行内样式，在style属性中写样式
• id 选择器
• class 选择器
• 标签选择器
• 伪类/属性
• 通配符选择器
• 浏览器自定义的属性和继承

05.css 优先级规则

• css 选择规则的权值不同时，权值高的优先;
• css 选择规则的权值相同时，后定义的优先;
• css属性后面加 ！important时，无条件绝对优先;

一般划分4个等级:

• 第一级，内联式，如style=“”，权值为1000;
• 第二级，代表ID选择器，如#id="", 权值为0100;
• 第三级，代表class|伪类|属性 选择器,如clas|:hover,:link,:target|[type],权值 0010.
• 第四级，代表标签|伪元素 选择器，p|::after,::before,::fist-inline,::selection, 权值0001.

权值计算公式：

• 权值=第一等级个数+第二等级个数+第三等级个数+第四等级个数
• 比较时，是从高往低逐级进行比较的。

06.伪类和伪元素的区别

• 伪元素的操作对象时新生成的dom元素，而不是原来的dom结构里就存在的;而伪类恰恰相反，伪类的操作对象时原来的dom结构里就存在的元素。
• 伪类和伪元素的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

伪类表示已存在的某个元素处于某种状态，但是通过dom树又无法表示这种状态，就可以通过伪类为其添加样式。例如a元素的，:hover,:active

伪元素主要是用来创建一些不存在原dom结构树中的元素。例如::before,::after在一些元素前后添加文字样式等。这些内容不会改变文档的内容，不会出现在DOM中，仅仅是在CSS渲染层加入。

写在最后

本文是写的html和css系列的第二篇文章，由于以上内容纯手敲，可能有手误的地方，也可能有错误的地方，希望大家指正和见谅。最后，希望与每一个努力的人同行，一起加油！！！