1、HTML5
2. HTML5 tags
link label
<a href="https://www.baidu.com">打开百度，你就知道！</a>Link properties and functions
Attribute 1: href
Function: It is used to specify the url address of the link target. When the href attribute is applied to the label, it has the function of a hyperlink
Attribute 2: target
Function: used to specify the opening method of the link page, where _self is the default value, and _blank is the opening method in a new window
image tag
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
Both src and href are used to request resources.
Differences:
1. Different resource types are requested.
href: hypertext reference, used to establish a link between a document and a resource. The commonly used ones are: link, a.
src: download and apply the resources it points to to the current page, common ones include script and img.
2. The results are different
href: used to establish a link between documents and resources.
src: The requested resource replaces the current content.
3. Browsers parse different
hrefs: parse resources into css files and load requested resources in parallel without blocking the processing of the current document.
src: The processing of other resources will be suspended until the resource is loaded, parsed and executed, and the resource it points to will be applied to the current content. This is why the js file is placed at the bottom instead of the head to generate heat.
For other tabs visit the link above
3. Browser compatibility
css-compatible
1. The default margin and padding of labels in different browsers are different
Symptoms of the problem: Randomly write a few tags, without style control, the respective margins and paddings are quite different.
Encounter Frequency: 100%
solution:
Generally we will introduce reset.css style reset
html,body,div,span,applet,object,,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
font-weight:normal;
vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
ol,ul,li {
list-style:none;
}
blockquote,q {
quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after {
content:'';
content:none;
}
table {
border-collapse:collapse;
border-spacing:0;
}
th,td {
vertical-align:middle;
}
/* custom */
a {
outline:none;
color:#16418a;
text-decoration:none;
-webkit-backface-visibility:hidden;
}
a:focus {
outline:none;
}
input:focus,select:focus,textarea:focus {
outline:-webkit-focus-ring-color auto 0;
}
2. New properties of css3, add browser prefix to be compatible with earlier browsers
-moz- /* 火狐浏览器 /
-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o- / Opera浏览器(早期) /
-ms- / IE */Which css3 attributes need to be added:
定义关键帧动画 @keyframes
css3中的变形（transform）、过渡(transtion)、动画(animation)
border-radius 圆角
box-shadow 盒子阴影
flex 弹性布局
....
use:
.myClass {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
-ms-animation-name: fadeIn;
animation-name: fadeIn; /* 不带前缀的放到最后 */
}
/* 复杂属性 keyframes */
@-webkit-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
/* 不带前缀的放到最后 */
@keyframes fadeIn {
0% { opacity: 0; } 100% { opacity: 0; }
}
3. After the block attribute tag is float, and there is a horizontal margin, the margin of the IE browser is doubled.
Symptoms of the problem: The common symptom is that the last piece in IE6 is pushed to the next line
Solution : The margin set under ie will be doubled for the div set to float. This is a bug that exists in ie6.
The solution is: add display:inline to this div;
<divid=”imfloat”>
相应的css为
# imfloat{
float:left;
margin:5px;//IE下理解为10px
display:inline;//IE下再理解为5px}
4. Set a small height label (generally less than 10px), in IE6, IE7, the height exceeds the height you set in the tour.
Symptoms of the problem: set the height of the div to be less than 10px, and the height of the div in IE6, 7 and tour exceeds the 10px you set.
solution:
Set overflow:hidden for labels that exceed the height;
or set the line height line-height to be smaller than the height you set.
Remarks: This situation usually occurs in the label where we set the small rounded background. The reason for this problem is that browsers before IE8 will give the label a minimum default line height. Even if your label is empty, the height of this label will still reach the default line height.
5. Inline attribute label, after setting display: block, adopt float layout, and there are horizontal margins, IE6 spacing bug
Symptoms of the problem: The spacing ratio in IE6 exceeds the set spacing
Solution : Add display:inline;display:table; after display:block;
Remarks: For inline attribute tags, in order to set the width and height, we need to set display:block; (except the input/img tags are special). After using float layout and horizontal margin, under IE6, it has a bug of horizontal margin after block attribute float. But because it is an inline attribute tag, if we add display:inline, its height and width cannot be set. At this time, we also need to add display:talbe after display:inline
6. IE browser div minimum width and height problem
Symptoms of the problem: IE browser div minimum width and height does not take effect
IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This is a big problem. If only width and height are used, these two values in normal browsers will not change. If only min-width and min-height are used, the width and height are not set under IE.
For example, to set a background image, the minimum width is more important. To solve this problem, you can do this:
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}7. The hover style does not appear after the hyperlink is accessed
The hyperlink styles that have been clicked and visited no longer have hover and active. Many people should have encountered this problem. The solution is to change the order of the CSS properties: LVHA
<style type="text/css">
a:link {}
a:visited {}
a:hover {}
a:active {}
</style>8. Images have spacing by default
Symptoms of the problem: When several img tags are put together, some browsers will have a default spacing, and wildcards will not work to clear the spacing.
Solution: use the float attribute for the img layout (all images float to the left)
Remarks: Because the img tag is an inline attribute tag, as long as it does not exceed the width of the container, the img tags will be arranged in a row, but there will be a gap between the img tags of some browsers. It is the right way to remove this spacing and use float.
9. css hack to solve browser compatibility
Different browsers recognize different styles, and csshack itself handles browser compatibility.
Here's how to write the css hack:
background-color:yellow0; 0 是留给ie8的
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；Two, js compatibility
1. Event binding
IE: dom.attachEvent();
standard browser: dom.addEventListener('click', function(event){}, false);
The standard browser uses event capture to correspond to IE's event bubbling mechanism (that is, the standard goes from the outermost element to the innermost element or IE goes from the innermost element to the outermost element). Finally, the standard party also thinks that IE is more reasonable in this regard, so Event bubbling is included in the standard, which is also the origin of the third parameter of addEventListener, and event bubbling is used as the default value. The third value defaults to false, indicating the event bubbling method.
If the browser does not support the addEventListener() method, you can use the attachEvent() method instead.
The following example demonstrates a cross-browser workaround:
var x = document.getElementById("myBtn");
if (x.addEventListener) { //所有主流浏览器，ie9+
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早 IE 版本
x.attachEvent("onclick", myFunction);
}event event object problem
document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；
var e=ev;
console.log(e);
}
document.onclick=function(){//谷歌和IE支持，火狐不支持；
var e=event;
console.log(e);
}
document.onclick=function(ev){//兼容写法；
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
2. event.srcElement (event source object) problem
IE: event object has srcElement attribute, but no target attribute;
Firefox: event object has target attribute, but no srcElement attribute.
Solution:
srcObj = event.srcElement?event.srcElement:event.target;
3. Get the non-inline style value of an element:
IE: dom.currentStyle['width'] Get element height
Standard browser: window.getComputedStyle(obj, null)['width'];
Workaround for cross-browser compatibility:
// 获取元素属性值的兼容写法
function getStyle(obj,attr){
if(obj.currentStyle){
//兼容IE
obj.currentStyle[attr];
return obj.currentStyle[attr];
}else{
//非IE，
return window.getComputedStyle(obj, null)[attr];
}
}4. Prevent event bubbling propagation:
//js阻止事件传播，这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}5. Block event default behavior:
//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 compatibility issue
IE: ActiveXObject
Other: xmlHttpReuest
It was not created with XMLHttpRequest before IE6, so we need to be compatible with browsers before ie6 to judge whether he has XMLHttpRequest()
Workaround for cross-browser compatibility:
<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>