前端面试准备笔记之html和css(02)

时间 2021-01-29

标签 css html html5 css3 浏览器 dom ide 动画 url 栏目快乐工作繁體版

原文原文链接

01. HTML5新增的一些特性

语义化标签

<header> 头部标签
<nav> 导航标签
<footer> 尾部标签
<section> 块级标签

多媒体标签

<audio src=" 文件地址" controls=" controls"></audio>
<video>

input 表单和表单属性

type="email" 邮箱
type="url" 路径
type="data" 日期
type="time" 时间
type="month" 月份
type="week" 周
type="tel" 手机号
type="search" 搜索框

// 表单属性类
required 表示变淡内容不能为空，必填
placeholder 表单的提示信息
autofocus 自动聚焦，页面加载完焦点自动到指定表单
multiple 能够提交多选文件

02. CSS3新增的一些属性

边框属性css

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

背景属性html

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

颜色属性html5

HSL colors
HSLA colors
opacity
RGBA colors

文字效果css3

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

用户界面浏览器

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

选择器dom

attribute selectors

基础盒模型ide

overflow-x
overflow-y

动画效果动画

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

过分效果ui

transition

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

button
checkbox
file
hidden
image
password
radio
reset
submit
text

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

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

05. css 优先级规则

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

通常划分4个等级:url

第一级，内联式，如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渲染层加入。