H5和CSS3新增功能H5和CSS3新增功能1.h5新增功能1.h5语义标签2 .扩展表单3.html5包含以下表单元素4.html5添加的表单属性5.html5新事件2.CSS3新增功能1 .选择器2.html 5
语义标记： header、footer、section、nav、aside、article扩展表单： input多个type新表单元素： datalist、keygen、output新表单属性：输入
的数据存储库。 用户关闭浏览器窗口后，数据将与新事件、onresize、ondrag、onscroll、onmousewheel、onerror、onplay、 onpauseWebSocket :通过单个TCP连接进行全双工通信的协议H5和CSS3的新功能1.h5新功能1 .语义标签说明头部区域footer定义文档的尾部区域nav定义文档的导航secect 节(article定义页上的独立内容区域描述aside定义页的侧栏中的内容详细信息文档或文档的一部分的详细信息摘要标记包含详细信息元素的
HTML5提供了多种新的表单输入类型。 这些新功能改进了输入控制和验证
输入类型说明颜色主要用于选择颜色。 从date日期选择器中选择日期。 选择日期时间日期。 UTC时间(包含电子邮件地址的输入字段month选择月份的number值输入字段range选择一定范围内的数值输入字段search用于搜索字段tel定义输入电话号码字的段time时间_ week选择周和年3.html5添加以下表单元素表单元素以包含datalist元素定义输入字段的选项列表： 此外，使用input元素的list属性绑定datalist元素的id和keygen还提供了一种验证用户的可靠方法。 标签描述在计算和脚本输出4.html5中添加的表单属性表单属性。用于表单的密钥对生成字段output的各种类型包括placehoder的简短提示在用户输入值之前显示在输入字段中换句话说，布尔属性在用户键入required后，在常规输入框的缺省提示下消失。 需要输入的输入字段不能包含在空pattern中。 编写用于验证输入元素值min和max的正则表达式，并设置元素的最小值和最大值step以在输入字段中指定有效的数字间隔。 height和width验证image类型的输入标签的图像高度和宽度autofocus是否为布尔属性。 它规定，域在加载页面时自动获得焦点的multiple是一个布尔属性。 允许为input元素选择多个5.html5值的新事件说明在调整onresize窗口大小时执行脚本在拖动ondrag元素时执行脚本在滚动onscroll元素滚动条时执行任务转动滚轮时运行脚本在出现onerror错误时运行脚本在开始播放onplay媒体数据时运行脚本暂停onpause媒体数据
div、p、h1至h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、HTML5
添加了的内联元素，如标题、安全、辅助和导出
pan、img、a、lable、input、abbr (缩写) em )强调) big、cite )引用) I )斜体) q )短引) textarea、select、small、suuure
文本效果
二维/三维转换
动画、过渡
多列布局
用户界面
1 .选择器：last-child /*选择元素最后一个孩子*/:first-child /*选择元素第一个孩子*/:nth-child(1) )设定适合第几个孩子的风格() 根据3360nth-child(odd )/*奇数(/:disabled ) ) */:checked /*选择每个选定的e元素(/:not ) set
根本的区别在于是否创造了新元素(抽象)
伪类和伪元素：选择用于向特定选择器添加特殊效果的：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：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域
对于 background-origin 属性，有如下属性
背景图片可以放置于 content-box、padding-box 或 border-box 区域
边框：
border-radius：圆角
box-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 分别是上划线、中划线、下划线@font-face 自定义字体渐变，CSS3新增了渐变效果，包括 linear-gradient(线性渐变)和 radial-gradient(径向渐变)
详看：https://www.ainyi.com/krry_project 4.2D/3D 转换 2D 转换（transform）
(1) translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px);
(2) rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg);
(3) scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4);
(4) skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg);
(5) matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0);
(1) rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg);
(2) rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg);
(3) perspective：规定 3D 元素的透视效果 5.动画、过渡 过渡效果（transition），使页面变化更平滑，以下参数可直接写在 transition 后面
(1) transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。
(2) transition-duration：过渡动画的一个持续时间。
(3) transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier
(4) transition-delay：延迟多久后开始动画
先定义 @keyframes 规则（0%，100% | from，to）
然后定义 animation，以下参数可直接写在 animation 后面
(1) animation-name: 定义动画名称
(2) animation-duration: 指定元素播放动画所持续的时间长
(3) animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式
(4) animation-delay: 指定元素动画开始时间
(5) animation-iteration-count: infinite | number：指定元素播放动画的循环次数
(6) animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放）
(7) animation-play-state: running | paused ：控制元素动画的播放状态
通过CSS3，能够创建多个列来对文本进行布局
column-count: 规定元素应该被分隔的列数column-gap: 规定列之间的间隔column-rule: 设置列之间的宽度、样式和颜色规则 7.用户界面CSS3中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等
resizebox-sizingoutline-offsetresize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll
div { resize: both; /* none|both|horizontal|vertical; */ overflow: auto;} box-sizing 属性可设置的值有 content-box、border-box 和 inheritcontent-box 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 widthborder-box 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border
包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成inherit：规定应从父元素继承 box-sizing 属性的值outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓 8.CSS 兼容内核 -moz-：代表FireFox浏览器私有属性-ms-：代表IE浏览器私有属性-webkit-：代表safari、chrome浏览器私有属性-o-：代表opera浏览器私有属性