html5 字体选择器,常用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)