常用HTML5和CSS3新特性

HTML5

一、语义化标签

1、

头部标签

2、

导航标签

3、

内容标签

4、

定义文档某个区域

5、

侧边栏标签

6、

  尾部标签

优点：

    HTML结构清晰、代码可度性好、无障碍阅读、搜索引擎可根据标签的语言确定上下文和权重问题、移动设备能更完美的展示页面、便于团队维护开发

二、多媒体标签

1、视频标签

2、音频标签

三、表单新类型

四、表单新属性

---

CSS3

一、边框

1、圆角边框：border-radius

    1.1、参数：border-radius（左上，右上，左下，右下） /*值为百分比和像素值*/

2、盒子阴影：box-shadow

    2.1、参数：box-shadow（水平阴影位置（必填），垂直阴影位置（必填），模糊距离    ，阴影的尺寸，阴影颜色，外部阴影改为内部阴影（默认为外部阴影））

二、背景

1、背景图片：background-image

    1.1、参数：background-image：url()

2、背景图片大小：background-size

    2.1、background-size:宽 高

三、文本属性

1、文本阴影：text-shadow

    1.1、参数：text-shadow: （水平阴影，垂直阴影，模糊的距离，阴影的颜色）

2、文本溢出：text-overflow

    2.1、参数：text-overflow: clip | ellipsis | string; /*clip （修剪文本） ellipsis（显示省略符号来代表被修剪的文本）string（使用给定的字符串来代表被修剪的文本）   */

3、换行：word-wrap

    3.1、参数：word-wrap: normal | break-word /*normal （只在允许的断字点换行（浏览器保持默认处理）break-word（在长单词或 URL 地址内部进行换行））  */

4、设置字体：@font-face

    4.1、参数

四、2D转换

1、移动：transform

    1.1、参数：transform：translate（x轴移动距离，y轴移动距离）

五、过度

1、过度：transition

    1.1、参数：transition:要过渡的属性 花费时间 运动曲线 何时开始

六、选择器

1、属性选择器

2、结构伪类选择器

3、伪类选择器

八、函数

1、计算盒子宽高：width/height:calc()

    1.1、参数：width:calc(100%-80px)