HTML

`<meta>` 标签

`<video>` 标签

自定义列表

<dl> （description list）

<dt>名词1</dt> (description term)

<dd>名词1解释1</dd> (description description)

<dd>名词1解释2</dd>

<dt>名词2</dt>

<dd>名词2解释1</dd>

<dd>名词2解释2</dd>

</dl>

HTML5新个性

(不反对 ie8 及 ie8 以下版本的浏览器)

语义标签
增强型表单
视频和音频
Canvas绘图
SVG绘图
天文定位
拖放API
WebWorker
WebStorage
WebSocket

锚点跳转

以后页面a.html: <a href="b.html#aaa">跳转到b页面aaa处</a>

另一页面b.html: <a name="aaa" id="aaa">aaa</a>

CSS

选择器品种

相邻选择器（h1 + p）、子选择器（ul > li）、后辈选择器（li a）

选择器优先级

!important > 内联 > id选择器 ( #id{}) > class类选择器 (.class{}) = 属性选择器(a[href="xxx"]{}) = 伪类选择器 (:xxx{}) > 伪元素选择器(::before{}) = 标签选择器(span{}) > 通配符选择器（*{}） > 继承父元素 > 浏览器默认

款式继承

可继承的款式： font-size font-family color, UL LI DL DD DT;

不可继承的款式： width height 、margin border padding ;

将超出的文本内容替换成省略号

graph TD设置宽度&nbspwidth --> 设置文本不换行&nbspwhite-space:nowrap-->暗藏溢出内容&nbspoverflow:hidden-->省略溢出内容&nbsptext-overflow:ellipsis

CSS3 新个性

色彩：新增 RGBA、HSLA
文字暗影 text-shadow
边框圆角 border-radius、边框暗影 box-shadow
盒子模型 box-sizing
背景 background-size
设置背景图片尺寸 background-origin
设置背景图片原点 background-clip
设置背景图片裁剪区域，以“，”分隔能够设置多背景，用于自适应布局
突变：linear-gradient、radial-gradient
过渡：transition可实现动画
自定义动画
在CSS3中惟一引入的伪元素是::selection
多媒体查问、多栏布局
border-image
2D、3D转换

`display: none`、`visibility: hidden`和`opacity: 0`

	`display: none;`	`visibility: hidden;`	`opacity: 0;`
是否存在	×	√
是否重绘	√		×
是否重排	√	×
是否复原子元素	×	√	×
是否反对transition	×	√
是否触发本身绑定事件	×		√
是否影响被遮挡元素触发事件	×		√

布局

在网页中应用偶数的字体

偶数字号绝对更容易和 web 设计的其余局部形成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稠密

三栏布局

相对定位
左右浮动
table-cell
圣杯布局
双飞翼布局
Flex布局
Grid布局
革除浮动
在最初一个浮动标签后新增一个标签（不举荐）
毛病：增加无意义标签，语义化差
```
clear：both;
```
暗藏父元素溢出内容（不举荐）
毛病：内容增多的时候容易造成不会主动换行导致内容被暗藏掉，无奈显示要溢出的元素
```
overflow:hidden/auto; // 父元素*zoom: 1; // IE6 中须要触发 hasLayout,只有IE6-IE7执行
```
应用:after伪元素革除浮动（举荐）

.父元素:after {    content: "";    display: block;    clear: both;}.父元素 {    *zoom: 1;}

应用before和after双伪元素（最举荐）

.父元素:before,.父元素:after {    content: "";    display: table;}.父元素:after {    clear: both;}.父元素 {    *zoom: 1;}

程度垂直居中

块级元素
```
margin: 0 auto;
```
行内元素
```
text-align: center；
```
单行
```
line-height = height；
```

多行

display:table-cell;vertical-align: middle;

应用 flex 布局

display:flex;justify-content: center;align-items: center;

应用相对定位
```
position:absolute;
```

(1)

left:50%;top:50%;transform:translateX(-50%);transform:translateY(-50%);

(2)

margin:auto;top:0; right:0; bottom:0; left:0;

(遇到记得不太分明的概念大家也能够上菜鸟查查~)