Web前端的基礎知識什麼是web？
WEB標準是一系列標準的總稱，包括HTML4.0、XHTML1.1、CSS2.1、XML1.0、RSS2.0、ECMAScript1.1、DOM1.0等等。WEB標準不僅僅是大家常說的DIV+CSS。
一、HTML部分
合理的結構
Html4.0的時候我們基本都是用table來佈局，但是web2.0時代也是如大家所知道的那樣用div+css來佈局，table佈局幾乎不必用到css來影響web的表現，但是卻要一層套一層的table，td，tabel…，如此頁面相當難以維護，且不易控制表現；而使用div+css來佈局就顯得更加合理，它使得html結構層與css表現層分離，便於維護，但是它也帶來可怕的相容性問題，特別是ie系列瀏覽器，它有自己的一套解析和渲染頁面的方式與w3c標準實現有著一系列的差異，不過這些差異可以通過hack來解決，而且一旦你掌握了合理的結構，相容的css，標準的寫法這些差異其實完全可以避免產生。html標籤通常由尖括號包圍的關鍵詞<html>，其標籤通常是成對出現的 和開始和結束標籤也被稱為開放標籤和閉合標籤。
後設資料（metadata）是關於資料的資訊。
<meta> 標籤提供關於 HTML 文件的後設資料。後設資料不會顯示在頁面上，但是對於機器是可讀的。
典型的情況是，meta 元素被用於規定頁面的描述、關鍵詞、文件的作者、最後修改時間以及其他後設資料。
<meta> 標籤始終位於 head 元素中。
後設資料可用於瀏覽器（如何顯示內容或重新載入頁面），搜尋引擎（關鍵詞），或其他 web 服務。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //指明文字編碼
<meta http-equiv="Content-Language" content="zh-CN" /> //指明採用的語法
<meta name="author" content="Csdn" /> //指明作者
<meta name="Copyright" content="Csdn" /> //指明版權
<meta name="description" content=" " /> //對網站的簡單描述
<meta name="keywords" content=" " /> //說明了本網站的關鍵字。
<html>
<head>
<meta http-equiv="Refresh" content="5;url=www.baidu.com" />
<body>
<p>
對不起。我們已經搬家了。您的 URL 是 <a href="www.baidu.com">http://www.baidu.com</a>
</p>
<p>您將在 5 秒內被重定向到新的地址。</p>
<p>如果超過 5 秒後您仍然看到本訊息，請點選上面的連結。</p>
</body>
後面2行主要是被百度這些搜尋網站檢索的時候用到的，非常重要。
html連結： 標籤進行定義的。
例子：<a href="http://www.baidu.com"> baidu </a> href:在href屬性中指定連連結的地址，是超文字引用的意思。
style=”text-decoration:none”建立一個沒有下劃線的超連結
定義沒有下劃線
html影像：<img>標籤來進行定義的。
<img src=” ” width=”104″ height=”142″/> 影像的名稱和尺寸是以屬性的形式提供的。
tppabs：該軟體是離線瀏覽器。
<body background=”../i/eg_background.jpg” ，在網頁中插入背景影像。
替換文字屬性（Alt）
alt 屬性用來為影像定義一串預備的可替換的文字。替換文字屬性的值是使用者定義的。
<img src=”boat.gif” alt=”Big Boat”>
在瀏覽器無法載入影像時，替換文字屬性告訴讀者她們失去的資訊。此時，瀏覽器將顯示這個替代性的文字而不是影像。為頁面上的影像都加上替換文字屬性是個好習慣，這樣有助於更好的顯示資訊，並且對於那些使用純文字瀏覽器的人來說是非常有用的。
<img src=”xx” alt=”向左轉” />
設定影像的對齊方式：
<p>影像 <img src=”xxoo” align=”bottom”> 在文字中</p>，，，使圖片底部與網頁中的字的下劃線對齊，若不指定，預設的也是這項。 align=”top”> 在文字中</p> 使影像頂部與文字對齊； align=”middle”>居中對齊。
設定影像的浮動方式：
<img src =”XX” align =”left”>
帶有影像的一個段落。影像的 align 屬性設定為 “left”。影像將浮動到文字的左側。
</p>
<p>
<img src =”XXOO” align =”right”>
帶有影像的一個段落。影像的 align 屬性設定為 “right”。影像將浮動到文字的右側。
</p>
某些html元素具有空內容
就是沒有關閉標籤的空元素。 （
)標籤定義換行，在開始標籤中新增斜槓<br/>,是關閉空元素的方法。使用空的段落標記 <p></p> 去插入一個空行是個壞習慣。用
標籤代替它！
html（提示：使用小寫標籤）
屬性為html元素提供附加資訊。 屬性總是以名稱/值對的形式出現。Name=value 屬性總是在html元素的開始標籤中規定。
<meta charset=”utf-8″/> 設定在html中字型的格式。
<h1 align=”center”> 擁有關於對齊 方式的附加資訊，居中排列標題。
標籤在 HTML 頁面中建立水平線。
html註釋
可以將註釋插入 HTML 程式碼中，這樣可以提高其可讀性，使程式碼更易被人理解。瀏覽器會忽略註釋，也不會顯示它們。
註釋是這樣寫的：
例項
<!– This is a comment –> 註釋列表
html拆行
如果您希望在不產生一個新段落的情況下進行換行（新行），請使用 <br /> 標籤：<p>This is
a para
graph with line breaks</p>
瀏覽器忽略了原始碼中的排版（省略了多餘的空格和換行）
始終為屬性值加引號。屬性值應該始終被包括在括號內。雙引號是最常用的，若屬性值本身含有雙引號，則必須使用單引號。
1、標頭元素<head>定義title，搜尋引擎關鍵字
2、標題元素<h n (n=1:6)>
3、段落元素<p>
4、字形元素 定義一個粗體字形元素。
5、下劃線字型<u> :</u>
6、定義斜體字型
7、連結元素定義一個錨元素，也就是連結元素
8、影像元素 <img src=url>定義個影像元素。
9、表格元素<table> </table>
<thead>定義表頭元素，需要加入rules=groups
<tbody> 定義表主體元素
<tfoot>定義表尾中的元素。
建立頁面表格：都以畫素作為單位；width：設定表格的寬度。
10、列表元素：html中的列表：無序列表以及有序列表
<ul>:無序列表 若需要更改列表項的標誌，type的屬性可是disc、square 、circle中的任意一個。
<li>每一個列表<ol>：有序列表
<li> 每一個列表
11、表單元素：
表單元素一般作為資料，提交給後臺伺服器做處理。它是由<form> </form>來定義的。如果要在表單中包括一個或多個檔案選擇欄位，必須把<form>標籤的enctype屬性設定為multipart/form-data。
最常用的表單標籤<input> 標籤的型別由標籤屬性type決定。
<input type=”text” 定義文字輸入框
"password" 定義密碼輸入框。
"radio"用來定義單選按鈕。
"checkbox"定義個核取方塊。
"submit"定義個提交按鈕。
input：accpet屬性：可約束瀏覽器允許使用者選擇的檔案型別。<input accpet=image>
<form>的主要屬性：action以及method:
action:用來指定表單資料被提交後，處理這些資料的程式的地址 <form action=”login.php”>
Method: 1 post:將表單資料放在http資料的正文部分進行傳遞。將與action中指定的表單處理伺服器連線；瀏覽器按分段傳輸的方法將資料傳給伺服器。
2 get:將表單資料加到action所指的地址之後進行傳遞。瀏覽器先與表單處理伺服器建立連結，在一個步驟中傳送所有的表單資料。
get：從伺服器上獲取資料；
post：向伺服器傳送資料。 其中get是form的預設方法。
<option>標籤：定義一個select表單控制中的每個條目，瀏覽器將<option>標籤中的內容作為<Select>標籤的選單或是滾動列表中的一個元素顯示，其內容只能是純文字，不能有任何裝飾。
<html>
<body>
<select multiple="multiple" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
selected屬性：在option標籤中包含selected屬性後，就能預定一個或多個選項。
二、CSS部分
對於一條css如何定義，不用多講，但是在定義css的時候我們最好考慮一下是否有必要加上這個className，因為定義css我們完全可以使用標籤來定義，比如上面的例子裡，我們想給span裡的文字加粗或者換成紅色字型，沒有必要給這個span標籤特意加上一個className，可以直接這樣來定義
.topbar p span{font-weight:bold;color:red;}
這樣我們可以節約很多className名字，避免因為相同的樣式名而覆蓋了之前的屬性，而且層次結構也足夠的清晰。
行內元素和塊級元素
塊級元素生成一個元素框，（預設地）它會填充其父級元素的內容，旁邊不能有其他元素。換句話說，他在元素框之前和之後生成了“分隔”符。我們最熟悉的HTML元素就是是p和div.
行內元素在一個文字行內生成元素框，而不會打斷這行文字。行內元素最好的例子就是XHTML中的a,span元素。strong和em也屬於行內元素。這些元素不會在它本身之前或之後生成“分隔符”，所以可以出現在另一個元素的內容中，而不會破壞其顯示。
注意，儘管“塊”和“行內”這兩個詞與HTML和XHTML中的塊級和行內元素有很多共同點，但也存在一個重要的差別。在HTML和XHTML中，塊級元素不能繼承自行內元素（即不能巢狀在行內元素中）。但是CSS中，對於顯示內容如何巢狀不存在任何限制。
1、內部樣式表 內部樣式表只對所在的網頁有效。
當單個檔案需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標籤定義內部樣式表。style標籤用於為html文件定義樣式資訊。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
p.no2 {background-color: gray; padding: 20px;}
</style>
</head>
2、外部樣式表：將樣式寫在一個以.css為字尾的css檔案裡面。
當樣式需要被應用到很多頁面的時候。外部樣式將是理想的選擇，使用外部樣式表，可以通過更改一個檔案來改變整個站點的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
rel 屬性規定當前文件與被連結文件之間的關係
你的例子裡rel 屬性指示被連結的文件是一個樣式表只有 rel 屬性的 “stylesheet” 值得到了所有瀏覽器的支援。其他值只得到了部分地支援。
3、內嵌樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下例項顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px"> ，用style定義內嵌的。
This is a paragraph
</p>
<style>:定義樣式定義
<link>:定義資源引用
<div>：定義文件中的節或區域<塊集>
使用影像作為超連結：1 a href: 設定超連結的地址；
2 img src:設定超連結的圖片；
html連結：-target屬性；
使用target屬性，可定義被連結的文件在何處顯示。Target=”_blank” ，在空白處建立一個新的連結。
連結到同一個文字的其他地方：檢視 Chapter 4。，其中C4是本段程式碼中的一個段落。 <target=”_top”>跳出框架之外。
郵件連結：
<p>這是郵件連結：傳送郵件
</p>，只有使用20%，才能正確的顯示文字。
什麼是設計模式？
設計模式（Design pattern）是一套被反覆使用、多數人知曉的、經過分類的、程式碼設計經驗的總結。使用設計模式是為了可重用程式碼、讓程式碼更容易被他人理解、保證程式碼可靠性。 毫無疑問，設計模式於己於他人於系統都是多贏的；設計模式使程式碼編制真正工程化；設計模式是軟體工程的基石脈絡，如同大廈的結構一樣。
既然要對CSS進行設計，那麼肯定是它本身存在一些問題或者缺陷，其中，一個最明顯的就是，它的任何一個規則，都是全域性性的宣告，會對引入它的頁面當中所有相關元素起作用，不管那是不是你想要的。而獨立及可組合的模組是一個可維護系統的關鍵所在。下面，我們就從多個層面來探討一下，到底該怎樣寫CSS，才是更科學的。
剛開始，我們只是去定義規則，能用對了屬性，語法正確，把頁面實現出來了，就好。慢慢地，就會發現，頁面也是有結構的，我們按照頁面的結構去組織程式碼，會不會更好？比如，分成頭部、導航、側邊欄、banner區、主內容區、底部等。
然而這樣貌似還是不夠，因為還有一些東西，複用度是很高的，又不好把它歸為任何一個固有模組，比如：麵包屑、分頁、彈窗等，它們不適合被放到某一個固有模組的程式碼中，就可以單獨的分出一段專屬的css和js，或許，這就是元件化的由來~
瀏覽器在解析CSS規則的時候，是從右向左，一層層的去遍歷尋找，如果層級太多，必然增加了渲染時間，影響渲染速度。另外，如果選擇器層級過多，也就間接反應了，你的HTML結構可能寫得不夠簡潔。那麼具體多少層合適？一般建議是不超過4層，但話又說回來，超過4層會怎樣嗎？不會有多明顯的影響，除非你寫到很恐怖的數量，或者專案極其龐雜，可能看出來影響，其實從我們日常需求來看，4層以內足可以解決絕大多數問題，故而，是合理的。
檔案引入的數量和順序
對於剛接觸網頁的朋友來說，這兩點也是容易忽視的，因為它們看起來沒什麼大影響，多幾次請求，樣式是否已經載入，都沒那麼容易把人逼瘋。但是出於對使用者體驗的極致追求，我們還是希望檔案請求次數儘量少，內容的顯示有個優先順序，檔案載入有個先後順序。這樣，在實在難以縮減檔案大小的時候，讓使用者先看到更重要的，正常展示的內容。
三、JavaScript部分
前面講到結構，表現，現在來看看最為重要的行為層，也是一門比較熱門的程式語言，ie下面也有自己的一套叫做Jscript，當然我們一般提到Javascript是指對標準文件規範ECMA v262的一個實現。
它是一門獨立的語言，跟java沒有任何關係，目前主要工作在瀏覽器端，而一旦涉及到瀏覽器則不可避免的遇到讓人頭疼的相容問題，且不說dom部分的相容就是語法解析，容錯也是各有千秋，所以為了填平這些坑坑窪窪js框架應用而生，最具典型的代表莫過於JQuery了，JQuery有官方API文件這裡就不作講述。雖然有了方法類庫但還是有必要了解原生語法以及語言特性等等。
在前端中，有一個很重要的概念就是事件。對於事件的理解就是使用者對瀏覽器進行的一個動作，或者說一個操作。
Javascript繫結事件的方式
非傳統的事件繫結
非常傳統的事件的繫結方式，是在一個元素上直接繫結方法，element.onclick = function(e){}。這是傳統的事件繫結，它非常簡單而且穩定，適應不同瀏覽器。e表示事件，this指向當前元素。但是這樣的繫結只會在事件冒泡中執行，捕獲不行。一個元素一次只能繫結一個事件函式。
W3C方式的事件繫結
W3C中推薦使用的事件繫結是用addEventListener()函式，element.addEventListener(`click`,function(e){…},false)。這種繫結同時支援捕獲和冒泡，addEventListener()函式最後的參數列達了事件處理的階段——false(冒泡)，true(捕獲)。這種方式最重要的好處就是對同一元素的同一個型別事件做繫結不會覆蓋，會全部生效。比如對上面程式碼bt元素在進行一次click的繫結，那麼兩次繫結的事件處理函式都會執行，按照程式碼書寫順序。
但是IE瀏覽器不支援addEventListener()函式，只能在IE9以上(包括IE9)可以使用，IE瀏覽器相應的要使用attachEvent()函式代替。
編寫JS程式碼需要注意的問題
程式碼的可維護性：1、可理解性：其他人可接手程式碼能理解其意圖以及途徑，無需開發人員的完整解釋。
2、直觀性：程式碼中的東西一看就能明白。
3、 可適應性：程式碼以一種資料的變化不要求完全重寫的方法撰寫.
4、可擴充套件性：在程式碼架構上已考慮到在未來允許對核心功能進行擴充套件。
5、可除錯性：當程式碼出錯時，程式碼可以給予足夠的資訊來儘可能確定問題所在。
程式碼約定： 1、可讀性：通常會使用若干空格而非製表符來縮排；對每個方法的註釋都視為一個可行的實踐；每個 函式或方法都應該包含一個註釋。大段程式碼：用於完成單個任務的多行程式碼應該在前面放一個描述任務的註釋。複雜的演算法：hack因為存在瀏覽器差異，Js程式碼一般會包含一些hack。
2、命名規則：變數名應該為名詞如car或person。 函式名應該以動詞開始getName（）；返回布林型別的值一般以is開頭 isEnable（）；
3、變數型別透明：
1、初始化 var someone= " ";
2、使用匈牙利標記法： "o"：物件； "s"：字串；i：整數。 f：浮點數； b：布林值。
最後一種指定變數型別的方式是使用型別註釋。型別註釋放在變數名右邊。
JavaScript的構建過程；
1、智慧財產權問題：不能把帶有完整註釋的程式碼放到線上。
2、檔案大小：書寫程式碼要保證容易閱讀，但對於效能是不利的。
3、程式碼組織：考慮到可維護性並不一定是傳送給瀏覽器的最好方式。
JS程式碼應該用來定義行為，而HTML應該定義內容。css應該定義外觀。
DOM互動開銷很大，故需限制DOM操作次數。瀏覽器是如何呈現一張頁面的
一個瀏覽器有許多模組，其中負責呈現頁面的是渲染引擎模組，比較熟悉的有WebKit和Gecko等，這裡也只會涉及這個模組的內容。
瀏覽器會解析三個東西：
一個是 HTML/SVG/XHTML，事實上，Webkit 有三個 C++ 的類對應這三類文件。解析這三種檔案會產生一個 DOM Tree。
CSS，解析 CSS 會產生 CSS 規則樹。
Javascript，指令碼，主要是通過 DOM API 和 CSSOM API 來操作 DOM Tree 和 CSS Rule Tree.
火星時代教育
一個小胖子