HTML5与CSS3新属性是什么

这篇文章将为大家详细讲解有关HTML5与CSS3新属性是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
　　1.结构标签 HTML5最大的变革是标签具有语义化
　　header 页面的头部
　　nav 导航栏
　　article 文章的内容
　　section 一个区块，与div相似
　　aside 侧边栏
　　footer 页脚
　　在HTML5中这些结构标签都可以增加网站的语义化，从而提升搜索引擎对网站的排名
　　比下拉菜单更加灵活，可以自己写也可以用下拉菜单中的
　　datalist –只准备了数据，所以先要有输入框
　　注意：
　　1.input中要设置list属性，里面的值要等于对应的数据datalist的id值，之后才能对应起来。
　　2.option中的value值要删除，否则无法实现效果
　　为了提升用户体验：新增与表单验证相关的属性，省去很多JS验证的繁琐操作
　　required属性就是空判断
　　autofocus属性是自动获取标点
　　autocomplete属性设置为on（默认为off）会保存之前提交的内容，name值改变，保存的内容就改变，它是对应着我们提交数据所保存的文件夹一样的地方
　　邮箱 :type=“email” 限定用户输入必须是email类型
　　网址：type=“url” 限定用户输入必须是网址地址类型，必须有http://
　　数字：type=“number” 限定用户输入必须是数字类型
　　类似地：
　　search 搜索，可在文本框中最后位置出现叉叉，点击后可以把内容清空
　　datetime-local 详细日期时间，让用户可以直接通过文本框弹出的时间日期进行选择
　　week 星期 ; 免费云主机域名time 时间; date 日期 ; month 月份，作用：让用户可以直接通过文本框弹出的内容进行填写
　　range 滑块操作，调整大小
　　写在body里
　　cotrols:控制条
　　autoplay:自动播放
　　loop:循环播放
　　因为音频标签价值很高，浏览器都想以自己为标准，所以W3C联盟组织就规定了浏览器对音频标签的兼容性要求，如果想要主流的浏览器都能够很好地播放音频，就需要把这首音频设置为不同的格式，都加载到页面中，这样就可以保证浏览器兼容性。
　　以下这种语法可以保证兼容性
　　video标签 （会自动生成一大堆代码） 用法和音频方法很像
　　为了兼容性 会引入多个格式
　　。mp4 .ogv .webm
　　flash格式 被历史所淘汰
　　‘当前浏览器不支持——’ 这句自动生成的代码的作用 ：
　　只有在浏览器无法识别以上视频的时候才会显示给用户看，用户可以点击你写好的链接地址，下载视频，使用自己本地的播放器来查看。
　　音频和视频标签执行顺序：由上至下，能识别哪一个就直接播放哪一个
　　//四个角设置为一样，圆的弧度
　　四个角：
　　border-radius:四个值 :顺时针：左上，右上，右下，左下
　　border-radius:两个值 ：左上和右下；右上和左下
　　//f12 检查 找到div 手动调 看效果 再写入代码
　　（渐变方向 色值，色值…色值）
　　方向：to right/left/top/bottom 也可以设置为角度： 90deg（=right）
　　色值不平均分，可以设置百分比：（red 0%,blue 90%,yellow 100%）
　　外发光：
　　控制阴影
　　控制阴影位置：第一个值：x轴横向；第二个值：y轴纵向
　　第三个值：阴影（虚化效果）大小
　　//f12 检查 找到div 手动调 看效果 再写入代码
　　第四个值：阴影颜色
　　内发光：
　　//设置背景图
　　红绿蓝，前边三个是色素值，要*//f12 检查 找到div 手动调 看效果 再写入代码* 自己调
　　最后一个值：1是完全不透明 ；0是完成透明
　　在特殊背景下，文字看不清，就要设置阴影。
　　与盒子阴影一样，自己调整
　　在 标签名{ }下实现
　　旋转：
　　缩放： //缩小0.3倍
　　位移： //水平，垂直
　　（以下div只是一个标签名 举例用的）
　　添加鼠标悬停后的动画效果
　　hover为css样式的伪类，设置鼠标悬停后的样式
　　设置过渡效果：
　　在div中添加
　　all：是hover中所有属性都变
　　1s ：第一个时间为动画的运行时间
　　2s为延时，第二个时间为延时时间
　　ease: 匀速，这个位置不写的话默认为匀速
　　ease-in:变加速
　　ease-out：变减速
　　注意：
　　//是错误的，变大效果被覆盖了
　　正确写法：
　　设置transform时，如果同时设置两个属性的变化，那就必须在每个属性值之间添加一个空格来进行操作
　　小技巧：
　　border-radius:50% 可以设置边框为正圆形，前提是形状是正方形
　　。5s 就是0.5秒 0就可以省略
　　一种自由度更大的自动以动画，利用纯CSS制作出像Flash一样的效果。在实际应用中，过渡和转换更适合做元素的交互，而自定义动画除了做交互还能使网页具有活力。（不用人去交互，只要刷新页面就可以）
　　另一种写法
　　在想要做动画的标签纵设置animation属性 animation: name（go） 1s alternate infinite;
　　延时和运动速率也都可以设置，与过渡属性中设置的规则一样关于“HTML5与CSS3新属性是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

相关推荐: 微信小程序自定义关键词如何做

本文小编为大家详细介绍“微信小程序自定义关键词如何做”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序自定义关键词如何做”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 　　自定义推广关键词常见问题 　　1、提交关键词的作用是…