在前端頁面開發中所遇到的問題總結

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-width: 768px) and (max-width: 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重置。這樣會減小代碼的冗長。