html5介绍

(1)HTML5将成为HTML,XHTML以及HTML DOM 的新标准。大部分现代浏览器以经具备了某些HTML5支持。
(2)官方概念:HTML5草案的前身名为web Applications1.0,是作为下一代互联网标准,用于取代HTML4与xhtml的新一代标准版本,所以叫HTML5,它增加了新的标签和属性,加强了网页的标准,语义化与web表现性能,同时还增加了本地数据库等web应用的功能。
(3)HTML5一般现在都用来制作动画。
(4)HTML5的特点:
更简单,写法更简洁,如doctype;
标签语义化,所有的标记都是有意义的,如:div class=”header”,header nav
语法更轻松–


增加了强大的画布标签,必须配合js 使用;
一些标签不再使用(如:font,basefont,center,dir);
多设备跨平台;
自适应网页设计,兼容性好–响应式–网页根据屏幕大小自动改变网页的内容大小;
2.HTML5新增标签及属性
(1)表单的新增属性:
在这里插入图片描述
在这里插入图片描述
(2)input表单的type新增属性:
在这里插入图片描述
原有的Text/submit/password/checkbox/select/radio/textarea/image/reset/botton/file/hidden
在这里插入图片描述
在这里插入图片描述
(2)通用属性:contenteditable和hidden
Contenteditable:把普通元素做成可以可以输入内容的元素
在这里插入图片描述
Hidden:隐藏:
在这里插入图片描述
(3)结构标签:
在这里插入图片描述
在这里插入图片描述
(5)detaills,summary,mark标签–动态下拉展示效果
在这里插入图片描述
(6)多媒体的标签video和audio
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
视频:
在这里插入图片描述
3新增选择器:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
(1)新增伪类选择器
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
案例:
在这里插入图片描述
在这里插入图片描述
(2)border-radius属性
border-radius是圆角的意思,

在这里插入图片描述
(3)box-shadow属性:
Box-shadow指的是阴影
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
案例:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
块元素居中显示(transform)
在这里插入图片描述
在这里插入图片描述
斜切效果
在这里插入图片描述
头像旋转,特效360度
在这里插入图片描述
(7)3d旋转
在这里插入图片描述
(7)放大效果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值