目录
浏览器兼容性
问题产生原因:
1.市场竞争
2.标准版本的变化
厂商前缀
比如:box-sizing,谷歌旧版本浏览器中使用 -webkit-box-sizing
原因:
市场竞争,标准没有发布
标准仍在讨论中,浏览器厂商希望先支持
常见浏览器厂商前缀
IE:-ms-
Chrome , safari:-webkit-
opera: -o-
firefox: -moz-
浏览器在处理样式或元素时,使用如下的方式:
当浏览器遇到无法识别的代码时会直接略过
使用autoprefixer插件,当输入代码后,按F1会自动生成厂商前缀
1.谷歌浏览器的滚动条样式
::-webkit-scrollbar{}
::-webkit-scrollbar-track{} --轨道
::-webkit-scrollbar-thumb{} --滑块
::-webkit-scrollbar-botton{} --两端按钮
实际上,在开发中使用自定义的滚动条,往往是使用div+css+js实现的
2.多个背景图中选一个作为背景
background-image:image-set(url() 1x,url() 2x,……);
CSS hack
根据不同的浏览器(主要针对IE),设置不同的样式和元素
1.样式
IE中,CSS的特殊前缀
*属性,兼容IE5,IE6,IE7 *background:
_属性,兼容IE5~IE6
属性值\9,兼容IE5~IE11 background:red\9
属性值\0,兼容IE8~IE11
属性值\9\0,兼容IE9~IE10
IE5、6、7的外边距bug,浮动元素的左外边距翻倍
2.条件判断
<!--[if|IE]>
……
<![endif]-->
渐近增强 和 优雅降级
两种解决兼容问题的思路,会影响代码的书写风格
渐近增强:先适应大部分的浏览器,然后针对新版本浏览器加入新的样式
书写代码时,先尽量避免书写有兼容性问题的代码,完成之后,再逐步加入新标准中的代码
优雅降级:先制作完整的功能,然后针对低版本浏览器进行特殊处理
书写代码时,先不用特别在意兼容性,完成整个功能之后,再针对低版本浏览器处理样式
数据链接
如何书写
数据链接:将目标文件的数据直接书写到路径位置
语法:data:MIME,数据
data:image/png;base64,数据
意义
优点:
1.减少了浏览器中的请求,从而减少时间
2.有利于动态生成数据
缺点:
1.增加了资源的体积,导致了传输内容增加,从而增加了单个资源的传输时间
2.不利于浏览器的缓存(浏览器通常会缓存图片文件、css文件、js文件)
3.会增加原资源体积到原来的4/3
应用场景:
1.当请求单个图片体积较小,并且该图片以为各种原因,不适合制作雪碧图,可以使用数据链接
2.图片由其他代码动态生成,并且图片较小,可以使用数据链接
base64
表示一种编码方式
通常用于将一些二进制数据,用一个可书写的字符串表示
INPUT类型
1.color类型用在input字段主要用于选取颜色
<input type = "color">
2.data类型允许从一个日期选择器选择一个日期
<input type = "data">
3.datetime类型允许你选择一个日期(UTC时间)
<input type = "datetime">
4.datetime-local类型允许选择一个日期和时间(无时区)
<input type = "datetime-local">
5.email类型用于应该包含r-mail地址的输入域
<input type = "email">
6.month类型允许你选择一个月份
<input type = "month">
7.number类型用于应该包含数值的输入域,要对数字类型进行限定
<input type = "number" 数字类型限定>
数字类型限定:
disabled:规定输入字段是禁止的
max:规定允许的最大值(HTML5)
maxlength:规定输入字段的最大字符长度
min:规定允许的最小值(HTML5)
pattern:规定用于验证输入字段的模式(HTML5)
readonly:规定输入字段的值无法修改
required:规定输入字段的值是必需的(HTML5)
size:规定输入字段中的可见字符数
step:规定输入字段的合法数字间隔(HTML5)
value:规定输入字段的默认值
8.range类型用于应该包含一定范围内数字值的输入域,类型显示为滑动条
<input type = "range" 数字类型限定>
9.search类型用于搜索域
<input type = "search">
10.tel
11.time类型允许选择一个时间
<input type = "time">
12.url类型用于应该包含URL地址的输入域,会自动验证URL域的值
<input type = "url">
13.week类型允许选择周和年
<input type = "week">
新添加的元素
<canvas> 新元素
标签 描述
<canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
新多媒体元素
标签 描述
<audio> 定义音频内容
<video> 定义视频(video 或者 movie)
<source> 定义多媒体资源 <video> 和 <audio>
<embed> 定义嵌入的内容,比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
新表单元素
标签 描述
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。
<keygen> 规定用于表单的密钥对生成器字段。
<output> 定义不同类型的输出,比如脚本的输出。
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
标签 描述
<article> 定义页面独立的内容区域。
<aside> 定义页面的侧边栏内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义导航链接的部分。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>