1，h5新特性有哪些

如下：1、email：可以自动验证输入的字符串是否是一个合法的邮箱地址。2、url：自动验证文本框内容是否是一个合法的URL地址。3、number：可以指定最大最小值以及数字改变的幅度，并且可以校验输入的数字是否在指定范围内，文本框只能输入数字。4、range：表示一个范围。介绍HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

h5新特性有哪些

2，H5和css3的新特性

例如 <input type="month"> 可以选择年月日例如 <input type="text" placeholder="请输入" > 显示在input输入框 默认显示的文字 例如 鼠标滑动事件 实例 <canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas> <video src=""></video> <audio src=""></audio> 用法一样 例如 // 设置本地存储 localStorage.setItem("lastname", "Smith"); // 获取本地存储 document.getElementById("result").innerHTML = localStorage.getItem("lastname"); draggable属性是html5的全局属性，是html5支持拖放操作的方式之一，用来表示元素是否可以被拖放,draggable有三个值，true表示可以拖放，false表示不可以被拖放，auto表示使用浏览器的默认值 在h5中，如果想拖拽元素，就必须为元素添加draggable="true"。图片和超链接默认就可以拖拽 <div draggable="true">123</div> :last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /* 按照奇数 */ :disabled /* 选择每个禁用的E元素 */ :checked /* 选择每个被选中的E元素 */ :not(selector) /* 选择非 selector 元素的每个元素 */ ::selection /* 选择被用户选取的元素部分 */ 伪类元素选择器 :last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ a:link a:visited a:hover a:active background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸） background-origin：规定背景图片的定位区域 对于 background-origin 属性，有如下属性 背景图片可以放置于 content-box、padding-box 或 border-box 区域 border-radius：圆角 box-shadow / text-shadow：阴影 border-image：边框图片2D/3D 转换 2D 转换（transform） translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。 transform: translate(50px, 100px); rotate()：元素顺时针旋转给定的角度。若为负值，元素将逆时针旋转。transform: rotate(30deg); scale()：元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数，也可以一个值（宽高）。transform: scale(2,4); skew()：元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。transform: skew(30deg, 20deg); matrix()： 把所有 2D 转换方法组合在一起，需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。transform:matrix(0.866,0.5,-0.5,0.866,0,0); 3D 转换 rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform: rotateX(120deg); rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform: rotateY(130deg); perspective：规定 3D 元素的透视效果 transition-property ：执行动画对应的属性，例如 color，background 等，可以使用 all 来指定所有的属性。 transition-duration：过渡动画的一个持续时间。 transition-timing-function：在延续时间段，动画变化的速率，常见的有：ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier transition-delay：延迟多久后开始动画 先定义 @keyframes 规则（0%，100% | from，to） 然后定义 animation，以下参数可直接写在 animation 后面 animation-name: 定义动画名称 animation-duration: 指定元素播放动画所持续的时间长 animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )： 指元素根据时间的推进来改变属性值的变换速率，即动画的播放方式 animation-delay: 指定元素动画开始时间 animation-iteration-count: infinite | number：指定元素播放动画的循环次数 animation-direction: normal | alternate： 指定元素动画播放的方向，其只有两个值，默认值为normal，如果设置为 normal 时，动画的每次循环都是向前播放；另一个值是 alternate，规定动画在下一周期逆向地播放（来去播放） animation-play-state: running | paused ：控制元素动画的播放状态 实例 div width: 200px; height: 100px; background: pink; animation: move 1s linear ; } @keyframes move 0% width: 0; } 100% width: 500px; } } 通过CSS3，能够创建多个列来对文本进行布局 column-count: 规定元素应该被分隔的列数 column-gap: 规定列之间的间隔 column-rule: 设置列之间的宽度、样式和颜色规则resize box-sizing outline-offset resize 属性规定是否可由用户调整元素尺寸。如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll div resize: both;/* none|both|horizontal|vertical; */ overflow: auto; } box-sizing 属性可设置的值有 content-box、border-box 和 inherit content-box 是W3C的标准盒模型，元素宽度 = 内容宽度 + padding + border：意思是 padding 和 border 会增加元素的宽度，以至于实际上的 width 大于原始设定的 width border-box 是ie的怪异盒模型，元素宽度 = 设定的宽度，已经将 padding 和 border 包括进去了，比如有时候在元素基础上添加内距 padding 或 border 会将布局撑破，但是使用 border-box 就可以轻松完成 inherit：规定应从父元素继承 box-sizing 属性的值 outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓 div display: flex; flex-direction: row; /*弹性盒方向：主轴方向X轴 */ flex-direction: column; /* 弹性盒方向：主轴Y轴方向 */ flex-direction: row-reverse; /* 弹性盒方向：主轴方向X轴 倒叙 */ flex-direction: column-reverse; /* 弹性盒方向：主轴Y轴方向 倒叙*/ flex-wrap: nowrap; /* 弹性盒换行：不换行 默认的 */ flex-wrap: wrap; /* 弹性盒换行：换行 */ /*设置主轴方向子元素排列顺序*/ justify-content: flex-start; /* 从左到右排列 默认的 */ justify-content: flex-end; /* 从尾部开始排列 不影响子元素排列顺序 */ justify-content: center; /* 从主轴居中对齐 */ justify-content: space-around; /* 平分主轴剩余空间 */ justify-content: space-between; /* 两边对齐，中间评分剩余空间 */ justify-content: space-evenly; /* 间距相同 */ } CSS 兼容内核 -moz-：代表FireFox浏览器私有属性 -ms-：代表IE浏览器私有属性 -webkit-：代表safari、chrome浏览器私有属性 -o-：代表opera浏览器私有属性

H5和css3的新特性


文章TAG：特性  哪些  h5新特性  
下一篇