html5 |
备注 |
只有一种 DOCTYPE ⽂件类型声明(统 一标准) |
<!DOCTYPE html> |
增加了一些新的标签元素(功能, 语义化） |
section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup... |
input 支持了几个新的类型值 |
date, email, url 等等 |
新增了一些标签属性 |
charset（⽤于 meta 标签）；async（⽤于 script 标 签） |
新增的全域属性 |
contenteditable, draggable... hidden... |
新增API |
本地存储, 地理定位, Canvas绘图, 拖拽API, 即时通信 WebSocket |
css3新增的特性
说出下方常用的即可， 无需全部背出
- 伪元素
- 弹性布局flex
- 媒体查询
- 圆角
- 渐变
- 阴影
- 平面转换
- 3D转换
- 动画
盒子/图片水平垂直居中：
- 要使一个盒子水平和垂直居中，最简单的方法是使用 CSS 的 flex 布局。
首先，让父元素使用 display: flex 并设置 align-items: center 和 justify-content: center，这样父元素就会在水平和垂直方向上居中。然后，将子元素设置为盒子即可。
下面是一个示例：
.parent { display: flex; align-items: center; justify-content: center; } .child { width: 100px; height: 100px; } <div class="parent"> <div class="child">I am centered</div> </div>
如果你希望盒子在垂直方向上居中，但在水平方向上靠左或靠右，则可以使用 justify-content: flex-start 或 justify-content: flex-end。
如果你想使用其他布局方式来实现居中，也可以使用 position: absolute 和 transform: translate(-50%, -50%)。
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
还有其他一些方法可以实现居中，但上述方法是最常用的。
css盒模型：
CSS盒模型是用于描述HTML元素的布局的一种方法。它用于在浏览器中渲染HTML元素的边框和内容。
每个HTML元素都是一个盒子，其中包含元素的内容，内边距（padding），边框和外边距（margin）。
在CSS中，你可以使用多种属性来控制盒模型的外观和布局，包括：
- width和height属性用于控制元素的内容区域的大小。
- padding属性用于控制元素的内边距。
- border属性用于控制元素的边框。
- margin属性用于控制元素的外边距。
你还可以使用box-sizing属性来控制元素的盒模型类型。默认情况下，HTML元素使用的是“标准盒模型”，在这种情况下，元素的宽度和高度仅指内容区域的宽度和高度。但是，你也可以将box-sizing属性设置为“边距盒模型”，在这种情况下，元素的宽度和高度将包括内边距和边框。
块级元素和行内元素：
在HTML中，元素可以分为两种类型：块级元素和行内元素。
块级元素：
- 块级元素在文档流中占据一整行。
- 块级元素可以设置宽度和高度。
- 块级元素可以设置内外边距和边框。
常见的块级元素包括：div，h1，p，form，header，footer，section等。
行内元素：
- 行内元素在文档流中只占据所需的空间。
- 行内元素不能设置宽度和高度。
- 行内元素只能设置内边距。
常见的行内元素包括：a，span，button，input，label，select等。
注意：元素的类型并不是固定的，你可以使用CSS的display属性来改变元素的类型。例如，你可以将一个行内元素转换为块级元素，或者将一个块级元素转换为行内元素。
css选择器权重值：
在CSS中，选择器的权重值（也称为优先级）是用于确定哪些样式规则应该应用到HTML元素的一种机制。
选择器的权重值由两部分组成：选择器的特殊性和样式定义的位置。
选择器的特殊性是根据选择器中使用的各种类型的选择器来计算的。每种类型的选择器都有一个固定的权重值，如下表所示：
选择器类型 |
权重值 |
通配符（*） |
0 |
元素选择器（例如p） |
1 |
类选择器（例如.class） |
10 |
ID选择器（例如#id） |
100 |
属性选择器（例如[type]） |
10 |
伪类选择器（例如:hover） |
10 |
伪元素选择器（例如::before） |
10 |
为了计算选择器的特殊性，需要对选择器中使用的每种类型的选择器的权重值进行加权。例如，如果选择器为#id .class p，则其特殊性为(100 * 1) + (10 * 1) + (1 * 1) = 111。
样式定义的位置也会影响选择器的权重值。在所有其他因素相同的
的情况下，样式定义出现的位置越靠后，其权重值就越大。这意味着如果有多个样式规则适用于同一个HTML元素，那么最后出现的样式规则会覆盖先前出现的样式规则。
为了确定哪些样式规则应用到HTML元素，浏览器会比较所有适用于该元素的样式规则的权重值，并应用权重值最大的样式规则。
你可以使用!important来强制应用样式规则，即使其权重值低于其他样式规则。例如，如果你想要强制应用某个样式规则，你可以在样式值后面添加!important，例如：
p { color: red !important; }
这将强制将所有段落的文本颜色设置为红色，即使有其他样式规则为段落设置了不同的颜色。注意，使用!important会使样式规则的权重值变得非常高，因此应该谨慎使用。
H5事件：
- onblur失焦事件
- onfocus聚焦事件
- onchange改变事件
- onclick点击事件
- onerror错误事件
- oninput输入事件
- onkeydown键盘按下事件
- onkeyup键盘抬起事件
- onmousemove鼠标移动事件
- onmouseover鼠标进入事件
- onmouseout鼠标移出事件等
H5中input元素的type属性值：
- color颜色
- password密码
- text文本
- CheckBox复选框
- radio单选框
- date日期
- button按钮
- submit提交按钮等
