HTML5与CSS3新属性是什么

这篇文章将为大家详细讲解有关HTML5与CSS3新属性是什么,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联是一家业务范围包括IDC托管业务,网页空间、主机租用、主机托管,四川、重庆、广东电信服务器租用,四川联通机房服务器托管,成都网通服务器托管,成都服务器租用,业务范围遍及中国大陆、港澳台以及欧美等多个国家及地区的互联网数据服务公司。

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新属性是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享名称:HTML5与CSS3新属性是什么
分享链接:http://myzitong.com/article/goohjo.html