<1..h5新增的语义化(看到该标签就知道板块相关的内容)标签 >
header 头部
nav 导航
main 主要内容区
section 板块
article 段落
figure>figcaption 类似于自定义列表
footer 底部
time 时间 内联元素
mark 标记 内联元素
<2..电量、磁盘容量>
<meter min="电量低值" max="电量高值" low="最低值" higt="最高值" value="当前值"></meter>
- 当前值如果低于low值或者高于high值会变警告色
进度条
<progress min="最低进度" max="最高进度" value="当前进度值"></progress>
<3..h5新增下拉列表:模拟搜素功能>
<input type="text" list="myData">
<datalist id="myData">
<option value="a1"></option>
<option value="a2"></option>
</datalist>
点击展开的
<details>
<summary>标题</summary>
<p>
内容
</p>
</details>
<4..h5新增多媒体标签>
1. 音频标签 audio 内联块
controls 显示控件
loop 循环
muted 静音
autoplay 自动播放 谷歌和火狐禁止 ie可以
2. 视频标签 video 内联块
controls 显示控件
loop 循环
muted 静音
autoplay 自动播放 静音状态下可以自动播放
<5..新增表单type>
1. 表单type
type="url" 地址
type="email" 邮箱
type="search" 搜索
type="number" 数值 min="最小值" max="最大值"
2. 颜色
type="color"
3. 范围
type="range"
4. 日期
type="date" 年月日
type="month" 月份
type="week" 周
type="time" 时和分
type="datetime-local" 年月日时分
<6..新增表单属性>
1. 提示信息 placeholder
2. 自动聚焦 autofocus
3. 必填 required
4. 显示历史记录 autocomplete="on" 需要结合name和value点击提交
5. 多文件上传 multiple
6. 正则 pattern="正则表达式" 专门限制用户输入内容的一种规则
补充:
1. 四大内核及代表浏览器
Trident --代表ie浏览器
Gecko --代表 Mozilla 火狐
WebKit --苹果 & 谷歌旧版本
Blink --代表浏览器 谷歌 & 欧鹏
2. 各大浏览器的私有前缀(浏览器在解析c3属性的时候,可以给该属性添加自己浏览器的私有前缀,更好的解析出来)
谷歌 -webkit-box-shadow
欧鹏 -o-box-shadow
火狐 -moz-box-shadow
ie -ms-box-shadow
3. 移动端页面准备工作
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
viewport:视口 移动端
1. 布局视口: css所作用的区域,默认980
2. 可视视口: 能够看得到区域,设备宽的区域
3. width=device-width将布局视口的宽度和可视视口宽度设置为一样,实现一个完美视口
initial-scale=1.0 初始缩放
minimum-scale=1.0 最小缩放值
maximum-scale=1.0 最大缩放值
user-scalable="yes/no" 用户是否缩放
4. 权重值
!important 无限大 color:red !important
行内 1000
id 100
class/伪类/属性选择器 10
标签/伪元素 1
通用 0
继承 最小
5. 可以变化的单位
- px 固定像素
- % 百分比单位
- em 默认情况 1em=16px(字体大小) 如果font-size:20px; 1em=20px; 2em就是当前字体大小的倍数
- rem 默认情况 1rem=16px(字体大小) rem看的是根元素(html)的字体大小
- vw(viewport-width)/vh(viewport-height)
1vw = 1%视口宽
10vw = 10%视口宽
100vw=100%视口宽
vh是等同的,拿的是当前视口的高度
<7..响应式页面: 根据浏览器窗口大小的改变,然后显示不同的页面效果>
媒体查询
@media 媒体类型 and (媒体特性){
选择器{
声明
}
}
媒体类型
1. all 所有设备
2. screen 显示器
3. print 打印机
媒体特性
1. 宽度 width 浏览器是当前该宽度的时候
2. 最大宽 max-width 浏览器宽度低于该值的时候
3. 最小宽 min-width 浏览器宽度高于该值的时候
注意:如果min-width和max-width同时存在的话,需要放在两括号中 用and连接
max-width:宽度可以跟随父元素不断变大,但是不超过该值
min-width:宽度可以跟随父元素不断变小,但是不低于该值
max-height:高度可以无限由内容撑大,但是不超过该值,依然会存在溢出
min-height:内容较少的时候,高度不能低于该值