在前端页面开发中所遇到的问题总结

1.常见的meta标签错误。

meta的使用既可以考虑了对于常见的浏览器兼容,也可以处理一些响应问题。 而问题主要存在于响应式布局和手机端页面开发中。

<meta http-equiv="X-UA-Compatible" content="IE=edge" />//IE兼容

<meta content="width=device-width, initial-scale=1.0" name="viewport">//响应式

<meta name="apple-mobile-web-app-capable" content="yes" />//WebApp全屏模式

<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">//中文字体识别

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />//禁止页面缩放

例如: 中各个属性值得内在含义

width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
width:宽度(数值 / device-width)(范围从200 到10,000,默认为980 像素)
height:高度(数值 / device-height)(范围从223 到10,000)
initial-scale:初始的缩放比例 (范围从>0 到10)
minimum-scale:允许用户缩放到的最小比例
maximum-scale:允许用户缩放到的最大比例
user-scalable:用户是否可以手动缩 (no,yes)
2.JavaScript引用的时候导致的全局污染

最佳解决方案:闭包的使用

最简单的闭包(立即执行函数)(function($){})(jQuery);
如果是想使用类级别的组件为: jQuery.函数名=function(){};
对象级组件 $.fn.函数名 = function(){};
注意:JavaScript的插件使用时一定要注意看是否是原生的js,上面的几种闭包都是属于jQuery的声明方式。

当在HTML页面中所用的标签非链接标签时的处理方式

可以在所需要的HTML标签里面添加 onclick="window.location.href = '#'";实现页面的超链接
或者 onclick="dianji();"在script标签里面声明function dianji(){ window.location.href = '#' };
this对象的理解

在jQuery和JavaScript中this对象一直是新手们的脑残点,所以每次都不敢大胆使用,

在JavaScript的理解

1.纯粹的函数调用
function test(){
this.x = 1;
alert(this.x);
}
test();//1
2.函数作为某个对象的方法进行调用,这是this就指向这个上级的对象。
function test()
{
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m();//1
3.作为构造函数进行调用
function test(){
this.x = 1;
}
var test1 = new test();
alert(test1.x);//1

为了证明此时this不是指向全局变量

var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x);//2
4.apply调用apply方法中第一个参数就是this指向的对象
var x = 2;
function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m.apply(o)
在jQuery中的理解

单纯的this使用表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性
$("#textbox").hover(
function() {
this.title = "Test";
},
fucntion() {
this.title = "OK”;
}
);
方法 $(this)的使用代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值,也就是说$(this)为jQuery的对象。
$("#textbox").hover(
function() {
$(this).title = "Test";
},
function() {
$(this).title = "OK";
}
);
3.标签使用的一些小细节问题

a标签中的target = “_blank” 用于在新窗口打开页面;
target = "_self" 在本窗口打开页面 ;
target = “_parent”在父窗口打开页面

在标签里面的alt、title的属性中最好填上相关的数据,这个是为了优化搜索引擎, 作为一个深谋远略的前端挨踢,这个引擎搜索优化是必须做的。

input框去掉光标readonly unselectable="on"。outline: none;

媒体查询的基本语句使用:@media (min- 768px) and (max- 979px) {} ;

在html5中新的标签在IE上的兼容比较麻烦,其实兼容一直以来都是程序员考虑的难点,当我们遇到新标签在IE9以上的浏览器无法兼容时我们可以采取:
DOM的方式来解决:document.createElement("header");
在JavaScript中去创建新标签。

对于浮动元素的使用也是一个小坑(主要针对新手),在使用完float的时候,元素处于浮动的形态,需要元素站位时,我们就要用到 
clear:left;表示左侧不能有浮动元素。
clear:right;表示右侧不能有浮动元素。
clear:both;表示左右两侧都不能有浮动元素。
来清除先前的浮动,不会改变当前元素的位置形态。

在标签上没有给具体的样式名的时候对标签的操作:
:nth-child(2) 获取每个元素下面的第几个子元素
:first-line 选择每个元素的首行。
:first-child 选择属于父元素的第一个子元素的每个元素。
:first 选取第一个元素

在项目搭建的时候大家都会去引进一个reset的重置样式,我建议如果项目较小的话可以自己构建,大的项目可以参考一下阿里、百度、腾讯的reset.css重置。这样会减少代码的冗长。

原文地址:https://www.cnblogs.com/Victory-peng/p/6043321.html