HTML5和css3新特性

:not(selector) /* 选择非 selector 元素的每个元素 */

::selection /* 选择被用户选取的元素部分 */

伪类和伪元素：

根本区别在于它们是否创造了新的元素（抽象）

伪类：用于向某些选择器添加特殊的效果（没有创建新元素）

:last-child /* 选择元素最后一个孩子 */

:first-child /* 选择元素第一个孩子 */

:nth-child(1) /* 按照第几个孩子给它设置样式 */

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */

伪元素：创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器

::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */

::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */

:first-letter /* 选择该元素内容的首字母 */

:first-line /* 选择该元素内容的首行 */

::selection /* 选择被用户选取的元素部分 */

2. 背景和边框

---

背景：

background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）

background-origin：规定背景图片的定位区域 对于 background-origin 属性，有如下属性 背景图片可以放置于

content-box、padding-box 或 border-box 区域

边框：

border-radius：圆角

box-shadow / text-shadow：阴影

border-image：边框图片

3. 文本效果

| 属性 | 描述 |

| — | — |

| text-shadow | 向文本添加阴影 |

| text-justify | 规定当 text-align 设置为 “justify” 时所使用的对齐方法 |

| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色 |

| text-outline | 规定文本的轮廓 |

| text-overflow | 规定当文本溢出包含元素时发生的事情 |

| text-wrap | 规定文本的换行规则 |

| word-break | 规定非中日韩文本的换行规则 |

| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行 |

| text-decoration | 文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线 |

• @font-face 自定义字体

• 渐变，CSS3新增了渐变效果，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变)

4. 2D/3D 转换

---

变形transform

变形有rotate旋转、scale缩放、translate位移、skew倾斜

过渡transition

过渡transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值

一般写在一起：

div

{

width:100px;

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

动画animation

动画的使用，首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用

.myClass {

-webkit-animation-name: fadeIn;

-moz-animation-name: fadeIn;

-o-animation-name: fadeIn;

-ms-animation-name: fadeIn;

animation-name: fadeIn; /* 不带前缀的放到最后 */

}

/* 复杂属性 keyframes */

@-webkit-keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

@-moz-keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

@-o-keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

@-ms-keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

/* 不带前缀的放到最后 */

@keyframes fadeIn {

0% { opacity: 0; } 100% { opacity: 0; }

}

这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）

H5 新特性

1. h5新增特性：

---

语义化标签：header、footer、section、nav、aside、article

增强型表单：input 的多个 type
跳槽是每个人的职业生涯中都要经历的过程，不论你是搜索到的这篇文章还是无意中浏览到的这篇文章，希望你没有白白浪费停留在这里的时间，能给你接下来或者以后的笔试面试带来一些帮助。

也许是互联网未来10年中最好的一年。WINTER IS COMING。但是如果你不真正的自己去尝试尝试，你永远不知道市面上的行情如何。这次找工作下来，我自身感觉市场并没有那么可怕，也拿到了几个大厂的offer。在此进行一个总结，给自己，也希望能帮助到需要的同学。

面试准备

面试准备根据每个人掌握的知识不同，准备的时间也不一样。现在对于前端岗位，以前也许不是很重视算法这块，但是现在很多公司也都会考。建议大家平时有空的时候多刷刷leetcode。算法的准备时间比较长，是一个长期的过程。需要在掌握了大部分前端基础知识的情况下，再有针对性的去复习算法。面试的时候算法能做出来肯定加分，但做不出来也不会一票否决，面试官也会给你提供一些思路。