link与@import 的区别，以及HTML和css新特性

1.link属于html标签，

• link属于html标签，而@import在css中使用表示导入外部样式表
• 页面被加载的时，link会同时被加载，而@import引用的css会等到页面被加载完再加载

2.区别

• link属性于html标签，@import 在css中使用表示导入外部样式表
• 页面被加载的时，link会同时被加载，而@import引用的css会等到页面加载
• import只在IE5以上才能识别，而link是HTML标签，无兼容问题
• link方式的样式的权重，高于@impor的权重那种
• link支持使用javascript改变样式，（document.styleSheets),后者不可

1.HTML和css3的新特性

1.CSS新特性
选择器

 * :last-child:选择元素最后一个孩子
 * :first-child:选择元素第一个元素
 * :nth-child(1): 按照第几个孩子给它设置样式
 * :nth-child(even):按照偶数
 * :disabled:选择每个禁用的dom元素
 * :checked:选择每个被选中的dom元素
 * :not(selector):选择被用户选取的元素部分

2.伪类元素和伪元素

• 根本区别在于他们是否创建了新的元素（抽象）
  伪类：用于向某些选择器添加特殊的效果(没有创建新元素)

:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

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

::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */
:first-letter /* 选择该元素内容的首字母 */
:first-line /* 选择该元素内容的首行 */
::selection /* 选择被用户选取的元素部分 */

3.背景和边框
background-size:规定背景图片的尺寸(cover:填充：100% 100%：拉伸）
background-origin：规定背景图片的定位区域，对于background-origin属性，有如下属性，背景图片可以防放置于content ,padding-box区域

4.边框

• border-radius：圆角
• box-shadow/text-shadow:阴影
• border-image:边框图片

5.文本效果

• text-shadow 向文本添加阴影
• text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
• text-outline 规定文本的轮廓
• text-overflow 规定当文本溢出包含元素时发生的事情
• text-wrap 规定文本的换行规则
• word-break 规定非中日韩文本的换行规则
• word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
• text-decoration 文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线
• @font-face自定义字体
• 渐变，Css新增了渐变效果，包括linear-gradient(线性渐变)和radial-gradient(径向渐变

6.2D/3D的转换

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

7.过渡transition
过渡transition是一个复合的属性，可以同时定义transition-property, transition-duration, transition-timing , transition-delay子属性

8.动画的使用，首先通过@（-webki-tkeyframes定义动画名称及动画的行为，在通过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,-m 0）

9.H5的新特性

1.h5新增
* 语义化标签：header, footer,section,nav,aside,article
* 增强型表单：input 的多个 type
* 新增表单属性：placehoder、required、min 和 max
* 音频视频：audio、video
* canvas 画布
* 地理位置
* 拖拽
2.本地存储
localStorage:永久存储，除非手动删除，否则一直都在，只有5m
sessionStorage：也是5m,浏览器关闭会自动消失
3.新事件:onresize,ondrag,onscroll,onmousewheel,onerror
onplay,onpause,WebSocket:建立持久通信协议

10.语义化标签

• header 定义了文档的头部区域
• footer 定义了文档的尾部区域
• nav 定义文档的导航
• section 定义文档中的节（section、区段）
• article 定义页面独立的内容区域
• aside 定义页面的侧边栏内容
• dialog 定义对话框，比如提示框

11.表单类型增强

HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

• color 主要用于选取颜色
• date 从一个日期选择器选择一个日期
• datetime 选择一个日期（UTC 时间）
• email 包含 e-mail 地址的输入域
• month 选择一个月份
• number 数值的输入域
• range 一定范围内数字值的输入域
• search 用于搜索域
• tel 定义输入电话号码字段
• time 选择一个时间
• url URL 地址的输入域

12.html新增的表单属性

• placehoder 在用户输入后消失
• required 是一个 boolean 属性。要求填写的输入域不能为空
• pattern 描述了一个正则表达式用于验证 input 元素的值
• min 和 max 设置元素最小值与最大值
• step 为输入域规定合法的数字间隔
• height 和 width 用于 image 类型的 input 标签的图像高度和宽度
• autofocus 是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
• multiple 是一个 boolean 属性。规定 input 元素中可选择多个值

13.html新事件

• onscroll 当滚动元素滚动元素的滚动条时触发
• onmousewheel 当转动鼠标滚轮时触发
• ondrag 当拖动元素时触发
• onerror 当错误发生时触发