一、link与@import区别
应用:
<head> <!-- link是标签，引入外部样式表 --> <link rel="stylesheet" href="./a.css"> <style> /* @import 在css环境中 导入外部css */ @import url('./b.css'); .box{ width: 100px; height: 100px; background: green; } </style> </head>两者都可以用于在CSS中引用外部样式表，但它们有以下不同之处：
语法不同：@import规则必须写在CSS文件的顶部，而link元素可以出现在文档的任何位置。
加载方式不同：@import是在页面渲染时再加载外部CSS文件。而link元素会在页面加载时同时加载外部样式表。
兼容性不同：@import在IE5以下的版本不被支持，而link元素没有兼容性问题。
权重不同: link方式的样式权重高于@import
- javascript支持: link 支持使用javascript改变样式（
document.styleSheets），后者不可因此，一般建议使用link元素来引用外部样式表，以提高网站的性能和兼容性。
二、css3/H5新特性
css3新特性
1.选择器
① 常规选择器：
:last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ :nth-child(even) /* 按照偶数 */ :nth-child(odd) /* 按照奇数 */ :disabled /* 选择每个禁用的dom元素 */ :checked /* 选择每个被选中的dom元素 */ :not(selector) /* 选择非 selector 元素的每个元素 */ ::selection /* 选择被用户选取的元素部分 */② 伪类：
用于向某些选择器添加特殊的效果（没有创建新元素）
:last-child /* 选择元素最后一个孩子 */ :first-child /* 选择元素第一个孩子 */ :nth-child(1) /* 按照第几个孩子给它设置样式 */ a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */③伪元素：
创建了 html 中不存在的元素，用于将特殊的效果添加到某些选择器
::before {} /* 选择器在被选元素的前面插入内容和定义css，使用 content 属性来指定要插入的内容。 */ ::after {} /* 选择器在被选元素的后面插入内容和定义css，使用 content 属性来指定要插入的内容。 */ :first-letter /* 选择该元素内容的首字母 */ :first-line /* 选择该元素内容的首行 */ ::selection /* 选择被用户选取的元素部分 */根本区别在于它们是否创造了新的元素（抽象）
2.背景和边框
背景：
background-size：规定背景图片的尺寸（cover：填充；100% 100%：拉伸）
background-origin：规定背景图片的定位区域 对于 background-origin 属性，有如下属性 背景图片可以放置于content-box、padding-box 或 border-box 区域边框：
border-radius：圆角
box-shadow / text-shadow：阴影
border-image：边框图片3.文本效果
属性 描述 text-shadow 向文本添加阴影 text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法 text-emphasis 向元素的文本应用重点标记以及重点标记的前景色 text-outline 规定文本的轮廓 text-overflow 规定当文本溢出包含元素时发生的事情 text-wrap 规定文本的换行规则 word-break 规定非中日韩文本的换行规则 word-wrap 允许对长的不可分割的单词进行分割并换行到下一行 text-decoration 文本修饰符：overline、line-through、underline 分别是上划线、中划线、下划线
4.2D/3D 转换
1.变形（transform）
rotate旋转、scale缩放、translate位移、skew倾斜
2.过渡(transtion)
transition-property、transition-duration、transition-timing-function、transition-delay子属性值
3.动画(animation)
首先通过@（-webkit-)keyframes 定义动画名称及动画的行为，再通过animation属性设置动画特征相关值进行调用
这些新属性大多在新版浏览器得到了支持，有些需要添加浏览器前缀（-webkit-、-moz-、-ms-、-o-）
H5 新特性
1. h5新增特性：
语义化标签：header、footer、section、nav、aside、article
增强型表单：input 的多个 type
新增表单属性：placehoder、required、min 和 max
音频视频：audio、video
canvas 画布
地理定位
拖拽
本地存储：
localStorage 没有时间限制的数据存储；
sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除
新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
WebSocket：建立持久通信协议2. 语义化标签
header 定义了文档的头部区域 footer 定义了文档的尾部区域 nav 定义文档的导航 section 定义文档中的节（section、区段） article 定义页面独立的内容区域 aside 定义页面的侧边栏内容 dialog 定义对话框，比如提示框 3. 表单类型增强
input 的 type 描述 color 主要用于选取颜色 date 从一个日期选择器选择一个日期 datetime 选择一个日期（UTC 时间） 包含 e-mail 地址的输入域 month 选择一个月份 number 数值的输入域 range 一定范围内数字值的输入域 search 用于搜索域 tel 定义输入电话号码字段 time 选择一个时间 url URL 地址的输入域 4. html5 新增的表单属性
表单属性 描述
placehoder 简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失
required 是一个 boolean 属性。要求填写的输入域不能为空
pattern 描述了一个正则表达式用于验证 input 元素的值
min 和 max 设置元素最小值与最大值
step 为输入域规定合法的数字间隔
height 和 width 用于 image 类型的 input 标签的图像高度和宽度
autofocus 是一个 boolean 属性。规定在页面加载时，域自动地获得焦点
multiple 是一个 boolean 属性。规定 input 元素中可选择多个值5. html5 新事件
事件 描述 onresize 当调整窗口大小时触发 ondrag 当拖动元素时触发 onscroll 当滚动元素滚动元素的滚动条时触发 onmousewheel 当转动鼠标滚轮时触发 onerror 当错误发生时触发 onplay 当媒介数据将要开始播放时触发 onpause 当媒介数据暂停时触发
三、浏览器兼容性问题
不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容
浏览器 内核（渲染引擎） Chrome谷歌 之前Webkit，已改Blink内核 FireFox火狐 Gecko Safari苹果 Webkit IE Trident Opera欧朋 现已改用Google Chrome的Blink内核
一.css兼容
1. 不同浏览器的标签默认的margin和padding不同
解决方案：
CSS里 *{margin:0;padding:0;} 但是性能不好
一般我们会引入reset.css样式重置；
2. css3新属性，加浏览器前缀兼容早期浏览器
-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */
3. 块属性标签float后，又有横行的margin情况下，IE 浏览器margin加倍的问题
解决方案： 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
解决方案：
给超出高度的标签设置overflow:hidden;
或者设置行高line-height 小于你设置的高度。
备注： 这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
5. 行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，IE6间距bug
解决方案： 在display:block;后面加入display:inline;display:table;
备注： 行内属性标签，为了设置宽高，我们需要设置display:block;(除了input/img标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe
6. IE浏览器div最小宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个最小宽度是比较重要的。要解决这个问题，可以这样：
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}
7. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序:
L-V-H-A<style type="text/css"> a:link {} a:visited {} a:hover {} a:active {} </style>
8. 图片默认有间距
问题症状： 几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。
解决方案： 使用float属性为img布局(所有图片左浮)
备注： 因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
9. css hack解决浏览器兼容性
不同浏览器，识别不同的样式，csshack本身就是处理浏览器兼容的。
下面是css hack写法：background-color:yellow0; 0 是留给ie8的 +background-color:pink; + ie7定了； _background-color:orange; _专门留给神奇的ie6；
二.js兼容
1. 事件绑定
IE: dom.attachEvent();
标准浏览器： dom.addEventListener(‘click',function(event){},false);
标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值默认false，表示事件冒泡方式。
如果浏览器不支持 addEventListener()方法, 你可以使用 attachEvent()方法替代。
2. event.srcElement(事件源对象)问题
IE： event对象有srcElement属性，但是没有target属性；
Firefox: event对象有target属性，但是没有srcElement属性。
解决方法：
srcObj = event.srcElement?event.srcElement:event.target;
3. 获取元素的非行间样式值：
IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器： window.getComputedStyle(obj, null)['width'];
// 获取元素属性值的兼容写法
function getStyle(obj,attr){
if(obj.currentStyle){
//兼容IE
obj.currentStyle[attr];
return obj.currentStyle[attr];
}else{
//非IE，
return window.getComputedStyle(obj, null)[attr];
}
}
4. 阻止事件冒泡传播：
//js阻止事件传播，这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}
5. 阻止事件默认行为：
//js阻止默认事件 一般阻止a链接href，form表单submit提交
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}
6. ajax兼容问题(跨域)
IE： ActiveXObject
其他： xmlHttpReuest
在IE6以前不是用XMLHttpRequest创建的，所以我们要兼容ie6以前的浏览器要判断他有没有XMLHttpRequest()
跨浏览器兼容解决方法：
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
//1.创建ajax对象
//只支持非IE6浏览器
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
//alert(new XMLHttpRequest());
}else{
//只支持IE6浏览器
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但
// 但服务器那端是不解析这个时间的
oAjax.open("get","a.txt?t=" + new Date().getTime(),true);
//3.发送
oAjax.send(null);
//4.接受信息
oAjax.onreadystatechange = function(){
//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了
if(oAjax.readyState==4){
//状态码,只有等于200,代表接受完成,并且成功了
if(oAjax.status==200){
alert("成功" + oAjax.responseText);
}else{
alert("失败");
}
}
};
};
};
</script>
四、原型与原型链
1. prototype
每个函数都有一个prototype属性，被称为显示原型2._ _proto_ _
每个实例对象都会有_ _proto_ _属性,其被称为隐式原型每一个实例对象的隐式原型_ _proto_ _属性指向自身构造函数的显式原型prototype
3. constructor
每个prototype原型都有一个constructor属性，指向它关联的构造函数。4. 原型链
获取对象属性时，如果对象本身没有这个属性，那就会去他的原型__proto__上去找，如果还查不到，就去找原型的原型，一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。这里需要注意的是Object是属于原型链的顶层，所有构造函数的的prototype都指向 Object.prototype
function Fun(){ } // 我创造了一个函数Fn // 这个函数由Function生成（Function作为构造函数） var fn=new Fun() // 我创建了一个函数fn // 这个函数由构造函数Fun生成 console.log(fn.__proto__===Fun.prototype) //true // fn的__proto__指向其构造函数Fun的prototype console.log(Fun.__proto__===Function.prototype) //true // Fun的__proto__指向其构造函数Function的prototype console.log(Function.__proto__===Function.prototype) //true // Function的__proto__指向其构造函数Function的prototype // 构造函数自身是一个函数，他是被自身构造的 console.log(Function.prototype.__proto__===Object.prototype) //true // Function.prototype的__proto__指向其构造函数Object的prototype // Function.prototype是一个对象,同样是一个方法,方法是函数,所以它必须有自己的构造函数也就是Object console.log(Fun.prototype.__proto__===Object.prototype) //true // 与上条相同 // 此处可以知道一点,所有构造函数的的prototype方法的__都指向__Object.prototype(除了....Object.prototype自身) console.log(Object.__proto__===Function.prototype) //true // Object作为一个构造函数(是一个函数对象!!函数对象!!),所以他的__proto__指向Function.prototype console.log(Object.prototype.__proto__===null) //true // Object.prototype作为一切的源头,他的__proto__是null // 下面是一个新的,额外的例子 var obj={} // 创建了一个obj console.log(obj.__proto__===Object.prototype) //true // obj作为一个直接以字面量创建的对象，所以obj__proto__直接指向了Object.prototype，而不需要经过Function了！！ // 下面是根据原型链延伸的内容 // 还有一个上文并未提到的constructor, constructor在原型链中,是作为对象prototype的一个属性存在的,它指向构造函数（由于主要讲原型链，这个就没在意、）； console.log(obj.__proto__.__proto__===null) //true console.log(obj.__proto__.constructor===Object) //true console.log(obj.__proto__.constructor.__proto__===Function.prototype) //true console.log(obj.__proto__.constructor.__proto__.__proto__===Object.prototype) //true console.log(obj.__proto__.constructor.__proto__.__proto__.__proto__===null) //true console.log(obj.__proto__.constructor.__proto__.__proto__.constructor.__proto__===Function.prototype) //true // 以上，有兴趣的可以一一验证
————————————————
版权声明：本文为CSDN博主「star@星空」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
Css3与H5新特性
原文链接：https://blog.csdn.net/weixin_43638968/article/details/109194480
原型与原型链
原文链接：https://blog.csdn.net/weixin_43638968/article/details/107615232
1859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
