标签：浏览器 标签 day01 元素 transform HTML5 H5C3 小结 属性
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。