总结一下HTML5和css3新特性

一、常见的块级、行级、空元素

在CSS中规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

我们在平常的项目中经常使用到的有:

• 行内元素有：span a b i img input select strong
• 块级元素有：div p h1-h6 ul table form ul ol li dl dt dd…
• 空元素(没有内容)： br、hr、 img、 input、link、meta

二、Css Hack

CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
CSS Hack常见的有三种形式：属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

1、 条件Hack

条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

2、 选择符 Hack

比如IE6能识别 html .class{}，IE7能识别+html .class{}

3、 属性 Hack

比如IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线” ”，而firefox两个都不能认识。

写CSS hack需要遵循以下三条原则：

• 有效： 能够通过 Web 标准的验证
• 只针对太古老的/不再开发的/已被抛弃的浏览器， 而不是目前的主流浏览器
• 代码要丑陋。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。现在很多hacks已经抛弃了最初的原则，而滥用hack会导致浏览器更新之后产生更多的兼容性问题。因此，并不推荐使用CSS hack来解决兼容性问题。

三、src与href的区别

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，主要用于超链接。

经常用到的主要是css外部样式的链接，a标签超链接的使用

src是指向外部资源的位置，指向的内容将会下载并应用到文档内；

经常在script引入时，还有img图片的请求时用到

Frame:是一个现在废弃的标签，可以使一个网站显示在当前的页面上

四、link与@import区别

页面中使用CSS的方式主要有3种：行内添加style属性，页面头部内嵌和外部链接，其中外部引用有两种：Link引入和@import导入

1. link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

2. link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

3. link支持使用Javascript控制DOM去改变样式；而@import不支持。

五、css3/H5新特性

一、css3新特性

css3中新增的一些特性大概可以分为：选择器，背景和边框属性，文本效果，2D/3D转换

1. 选择器和伪类、伪元素

• 常规选择器
  :last-child /* 选择元素最后一个孩子 /
  :first-child / 选择元素第一个孩子 /
  :nth-child(1) / 按照第几个孩子给它设置样式 /
  :nth-child(even) / 按照偶数 /
  :nth-child(odd) / 按照奇数 /
  :disabled / 选择每个禁用的dom元素 /
  :checked / 选择每个被选中的dom元素 /
  :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
  规定背景图片的定位区域:background-origin（content-box、padding-box、margin-box）
• 边框:
  border-radius: 圆角
  border-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 (上划线、中划线、下划线)
渐变，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;/*-webkit 是使用webkit内核的浏览器，主要是：Chrome和Safari*/
	-moz-animation-name: fadeIn; /*主要是火狐*/
	-o-animation-name: fadeIn;/*欧鹏*/
	-ms-animation-name: fadeIn;/*IE*/
	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-）

二、html5新特性

1. 语义化标签：文档头部:header、文档尾部:footer、文档中的节点:section、导航:nav、侧边栏:aside、独立内容区域:article

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

3. 新增表单属性：

• placeholder：输入框的默认提示
• required：是一个 boolean 属性。要求填写的输入域不能为空
• pattern：描述了一个正则表达式用于验证input元素的值
• min和max设置元素最小值和最大值
• 音频视频：（audio、video、canvas ）
• 画布、地理定位、拖拽

本地存储：localStorage 没有时间限制的数据存储；共享属性，我们可以把登录的token数据和一些公用的数据可以存储到localstorage里面，getItem（存储数据）、setItem（取出数据）、clear（清除本地存储的数据）

sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

我们在没有localStorage和sessionStorage的时候，我们一般是用的cookie来存储数据

语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video

4. 新事件:

• onresize 当调整窗口大小时触发
• ondrag 当拖动元素时触发
• onscroll 当滚动元素滚动元素的滚动条时触发
• onmousewheel 当转动鼠标滚轮时触发
• onerror 当错误发生时触发
• onplay 当媒介数据将要开始播放时触发
• onpause 当媒介数据暂停时触发