Web相关知识

目录

浏览器兼容性

数据链接

INPUT类型

新添加的元素

---

浏览器兼容性

问题产生原因：
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>