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 以下版本的浏览器)

1. 语义标签
2. 增强型表单
3. 视频和音频
4. Canvas 绘图
5. SVG 绘图
6. 天文定位
7. 拖放 API
8. WebWorker
9. WebStorage
10. 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

布局

在网页中应用偶数的字体

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

三栏布局

1. 相对定位
2. 左右浮动
3. table-cell
4. 圣杯布局
5. 双飞翼布局
6. Flex 布局

7. Grid 布局

   革除浮动

8. 在最初一个浮动标签后新增一个标签（不举荐）
   毛病：增加无意义标签，语义化差

   clear：both;

9. 暗藏父元素溢出内容（不举荐）
   毛病：内容增多的时候容易造成不会主动换行导致内容被暗藏掉，无奈显示要溢出的元素

   overflow:hidden/auto; // 父元素
   *zoom: 1; // IE6 中须要触发 hasLayout, 只有 IE6-IE7 执行 

10. 应用:after 伪元素革除浮动（举荐）

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

. 父元素 {*zoom: 1;}

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

. 父元素:before,
. 父元素:after {
    content: "";
    display: table;
}

. 父元素:after {clear: both;}

. 父元素 {*zoom: 1;}

程度垂直居中

1. 块级元素

   margin: 0 auto;

2. 行内元素

   text-align: center；

3. 单行

   line-height = height；

4. 多行

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

5. 应用 flex 布局

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

6. 应用相对定位

   position:absolute;

7. (1)

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

8. (2)

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

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