H5C3-day01-小结
作者:互联网
H5C3-day01-小结
01-什么是HTML5
- HTML5是HTML的第五次升级
- 广义的HTML5指的是HTML本身+CSS3+js API
- HTML5暂未被所有浏览器兼容,但这是一个发展趋势
02-HTML5新增标签
-
语义化标签
- header 头部
- nav 导航
- aside 侧边
- article 内容
- section 块级
- footer 底部
-
优化搜索引擎SEO
-
IE9里需要把这些元素转换成块级
-
一般喜欢在移动端使用这些标签,PC端暂时未全面铺开
03-多媒体音频标签
-
audio
-
属性
- src 指定文件路径
- autoplay 自动播放
- loop 循环播放,默认只播放一次
- controls 是否显示操作控件
-
谷歌浏览器禁用了自动播放属性,而且暂时没有比较好的解决方案
-
各个浏览器的显示样式都不一样,我们一般在实际开发中都是自己写个控件,然后用js控制
-
我们一般在audio标签中会添加至少两种格式的音乐源文件,用source标签,这是一个单标签,来支持不同的浏览器
04-多媒体视频标签
- video
- 属性
- src
- autoplay
- loop
- controls 是否显示操作控件
- muted 禁音
- poster 预加载等待图片
- 同样在谷歌浏览器里面禁用了自动播放属性,可以通过添加muted属性解决
- 解决格式兼容问题和音频标签一样
05-HTML5新增input标签的type属性
- email 电子邮箱
- url 地址
- 日期
- date
- time
- month
- week
- number 数字
- 移动端默认弹开数字键盘
- tel 电话号码
- 移动端默认弹开数字键盘
- search 搜索框
- color 颜色
- 格式#000000
06-HTML5新增表单属性
- required 必填
- autofocus 自动获取焦点
- placeholder 提示文本/占位符
- autocomplete 自动完成
- on 默认值
- off
- 我们一般都会设为off,因为不想把用户的一些隐私信息直接暴露
- multiple 文件多选
07-结构伪类选择器
- 权值是10
08-属性选择器
- 权值是10
- 等于
E[attr='icon']
- 开头
E[attr^='icon']
- 结尾
E[attr$='icon']
- 包含
E[attr*='icon']
09-伪元素选择器
-
权值是1
-
::before 是在元素内部的前面插入一个元素
-
::after 是在元素内部的后面插入一个元素
-
插入的元素默认是行内元素
-
content属性必写,就算没有内容也要写个空字符串“”
10-2D转换之translate
-
位移:translate
transform: translate(x, y);
transform: translateX(x);
transform: traslateY(y);
transform: translateX(x) translateY(y);
-
最大的特点是不会影响其他元素的位置
-
百分比单位是对于自身的width和height值
-
对行内元素没有效果
标签:浏览器,标签,day01,元素,transform,HTML5,H5C3,小结,属性 来源: https://blog.csdn.net/weixin_45555964/article/details/100586848