目录
目录
2.html5新特性
1. 语义化标签
1.css3中新增的一些特性大概可以分为:选择器,背景和边框属性,文本效果,2D/3D转换
- 选择器
常规选择器
1.标签选择器(如:body,div,p,ul,li)
2.类选择器
3.ID选择器
4.全局选择器(如:*号)
5.组合选择器
6.继承选择器(如:div p)
7.伪类选择器(4种不同的状态:link、visited、active、hover。)
8.字符串匹配的属性选择符(^ $ *三种,分别对应开始、结尾、包含)
:last-child /* 选择元素最后一个孩子 */
:first-child /* 选择元素第一个孩子 */
:nth-child(1) /* 按照第几个孩子给它设置样式 */
:nth-child(even) /* 按照偶数 */
:nth-child(odd) /* 按照奇数 */
:disabled /* 选择每个禁用的dom元素 */
:checked /* 选择每个被选中的dom元素 */
:not(selector) /* 选择非 selector 元素的每个元素 */
::selection /* 选择被用户选取的元素部分 */
背景:
规定背景图片的尺寸:background-size
规定背景图片的定位区域:background-origin(content-box、padding-box、margin-box)
边框:
border-radius: 圆角
border-shadow/text-shadow: 阴影
border-image: 边框图片
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 (上划线、中划线、下划线) |
4.2D/3D转换
变形transform:
有rotate旋转、scale缩放、translate位移、skew倾斜
过渡transition:
transition是一个复合属性,可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值
动画animation
动画的使用,首先通过@(-webkit-)keyframes 定义动画名称及动画的行为,再通过animation属性设置动画特征相关值进行调用
这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-、-moz-、-ms-、-o-)
1. 语义化标签
1. 语义化标签:文档头部:header、文档尾部:footer、文档中的节点:section、导航:nav、侧边栏:aside、独立内容区域:article
2. 增强型表单:HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证
3. 新增表单属性:(placehoder、required、min 和 max)、音频视频:(audio、video、canvas )画布、地理定位、拖拽、 本地存储:localStorage 没有时间限制的数据存储;
sessionStorage, session 的数据存储,当用户关闭浏览器窗口后,数据会被删除
10. 新事件:
onresize | 当调整窗口大小时触发 |
ondrag | 当拖动元素时触发 |
onscroll | 当滚动元素滚动元素的滚动条时触发 |
onmousewheel | 当转动鼠标滚轮时触发 |
onerror | 当错误发生时触发 |
onplay | 当媒介数据将要开始播放时触发 |
onpause | 当媒介数据暂停时触发 |