1、WEB前端是神馬
Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中，網(wǎng)頁制作是Web1.0時(shí)代的產(chǎn)物，那時(shí)網(wǎng)站的主要內(nèi)容都是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。2005年以后，互聯(lián)網(wǎng)進(jìn)入Web2.0時(shí)代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的。 以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好。Web前端開發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識面非常廣，既有具體的技術(shù)，又有抽象的理念。簡單地說，它的主要職能就是把網(wǎng)站（Web App網(wǎng)頁應(yīng)用和Hybrid App混合應(yīng)用）的界面更好地呈現(xiàn)給用戶。
2、前端技術(shù)
W3C標(biāo)準(zhǔn)
W3C標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括HTML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3C DOM）、ECMAScript等。
簡單來說就是： html（結(jié)構(gòu)） + css（表現(xiàn)） + js（行為）
學(xué)習(xí)資源：http://www.w3school.com.cn/
名詞解釋：W3C——萬維網(wǎng)聯(lián)盟（World Wide Web Consortium）
HTML——WEB應(yīng)用的基石
HyperText Markup Language 超文本標(biāo)記語言。超文本是用超鏈接的方法，將各種不同空間的信息組織在一起的網(wǎng)狀文本。信息可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
html文件示例如下：
標(biāo)簽的基本格式如下：
示例中的標(biāo)簽是個(gè)閉合標(biāo)簽，有部分標(biāo)簽不是閉合標(biāo)簽。例如：<input type="text" name="test" value="test"/>
一個(gè)標(biāo)準(zhǔn)的html文件主要包括如下常用的標(biāo)簽：
- !DOCTYPE:文檔類型聲明，它的目的是要告訴瀏覽器，它應(yīng)該使用什么樣的文檔類型定義來解析文檔。示例中所示的文檔類型是html5。文檔類型一般是向下兼容的，html5基本兼容html4.01.
- html：文檔的根節(jié)點(diǎn)。<html> 與 </html> 標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)，在它們之間是文檔的頭部和主體。
- head：<head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。
- meta：<meta> 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎的關(guān)鍵詞，文件編碼類型，瀏覽器版本等。
- title：文檔標(biāo)題，瀏覽器的標(biāo)簽頁顯示的內(nèi)容。
- link：<link>標(biāo)簽定義文檔與外部資源的關(guān)系，最常見的用途是鏈接樣式表（css文件），ICON。
- script：<script>標(biāo)簽用于定義客戶端腳本，比如 JavaScript。既可以包含腳本語句，也可以通過 src 屬性指向外部腳本文件。
- style：<style> 標(biāo)簽用于為 HTML 文檔定義樣式信息。
- body:body 元素定義文檔的主體。
- h1~h6：<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。
- div：<div> 可定義文檔中的分區(qū)或節(jié)，可以把文檔分割為獨(dú)立的、不同的部分
- p：<p> 標(biāo)簽定義段落。
- span：<span> 標(biāo)簽被用來組合文檔中的行內(nèi)元素。
- a:<a> 標(biāo)簽定義超鏈接，用于從一張頁面鏈接到另一張頁面，最重要的屬性是 href 屬性，它指示鏈接的目標(biāo)。
- button：<button> 標(biāo)簽定義一個(gè)按鈕。
- img：img 元素向網(wǎng)頁中嵌入一幅圖像。
- input：<input> 標(biāo)簽用于搜集用戶信息。根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、單選按鈕、按鈕等等。
其他更多標(biāo)簽，請見：http://www.w3school.com.cn/tags/tag_doctype.asp
文檔流
冷知識：W3C規(guī)范中沒有document flow這個(gè)概念，只有normal-flow, 文檔流的叫法主要還是多數(shù)中文譯者的翻譯方式問題。據(jù)說來源于報(bào)紙的排版。
什么是文檔流？簡單說就是元素按照其在HTML中決定標(biāo)簽位置順序排布的過程。并且這種過程遵循標(biāo)準(zhǔn)的描述。html的文檔流規(guī)則是將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素。
塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽
HTML中的標(biāo)簽主要是塊級標(biāo)簽或內(nèi)聯(lián)標(biāo)簽。塊級標(biāo)簽一般是其他標(biāo)簽的容器標(biāo)簽，能容納其他塊標(biāo)簽或內(nèi)聯(lián)標(biāo)簽。簡單來說，塊標(biāo)簽就好比一個(gè)四方塊，可以放其他的四方塊，并可以呈現(xiàn)在頁面上任何地方。默認(rèn)情況下塊標(biāo)簽，是獨(dú)占一行的。常見的塊標(biāo)簽：div、h1-h6標(biāo)題、form（只能用來容納其他塊標(biāo)簽）、hr、p、table、ul、ol等。內(nèi)聯(lián)標(biāo)簽也叫內(nèi)嵌標(biāo)簽或行內(nèi)標(biāo)簽，一般都是基于語義級(semantic)的基本標(biāo)簽。內(nèi)聯(lián)標(biāo)簽只能容納文本或者其他內(nèi)聯(lián)標(biāo)簽，常見內(nèi)聯(lián)標(biāo)簽有a和span。
塊標(biāo)簽與內(nèi)聯(lián)標(biāo)簽的區(qū)別？
- 塊級標(biāo)簽，總是在新行上開始；內(nèi)聯(lián)標(biāo)簽，和其他標(biāo)簽都在一行上。
- 塊級標(biāo)簽，能容納其他塊標(biāo)簽或內(nèi)聯(lián)標(biāo)簽；內(nèi)聯(lián)標(biāo)簽，只能容納文本或者其他內(nèi)聯(lián)標(biāo)簽。
- 塊級標(biāo)簽中高度，行高以及頂和底邊距都可控制；內(nèi)聯(lián)標(biāo)簽中高，行高及頂和底邊距不可改變。
在實(shí)際應(yīng)用中，可以通過CSS修改標(biāo)簽的display屬性轉(zhuǎn)變標(biāo)簽的性質(zhì)，進(jìn)行相互轉(zhuǎn)換。建議按照原始性質(zhì)使用，盡量不進(jìn)行轉(zhuǎn)換。
如何設(shè)計(jì)html？
如下圖，通常先設(shè)計(jì)好結(jié)構(gòu)圖，然后根據(jù)結(jié)構(gòu)圖再進(jìn)行標(biāo)簽的書寫。
HTML5
HTML4.01版本誕生于 1999 年。自從那以后，Web 世界已經(jīng)經(jīng)歷了巨變。多媒體的大量應(yīng)用，各類app不斷涌現(xiàn)。不同于HTML4.01完全由W3C制定。HTML5 是 W3C 與 WHATWG 合作的結(jié)果。WHATWG 致力于 web 表單和應(yīng)用程序，而 W3C 專注于 XHTML 2.0。HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。HTML5 的第一份正式草案已于2008年1月22日公布。最終在2014年定稿。
注：W3C 指 World Wide Web Consortium，萬維網(wǎng)聯(lián)盟。
注：WHATWG 指 Web Hypertext Application Technology Working Group，Web超文本應(yīng)用技術(shù)工作組。
HTML5建立的一些規(guī)則：
- 新特性應(yīng)該基于 HTML、CSS、DOM 以及 JavaScript。
- 減少對外部插件的需求（比如 Flash）
- 更優(yōu)秀的錯(cuò)誤處理
- 更多取代腳本的標(biāo)記
- HTML5應(yīng)該獨(dú)立于設(shè)備
HTML5中的新特性
- 用于繪畫的 canvas 元素
- 用于多媒體的 video 和 audio 元素
- 對本地離線存儲(chǔ)的更好的支持
- 新的特殊內(nèi)容元素，比如 article、footer、header、nav、section
- 新的表單控件，比如 calendar、date、time、email、url、search
瀏覽器支持
最新版本的 Chrome、Firefox、Safari 以及 Opera 基本上完全支持 HTML5 特性。IE9開始支持某些 HTML5 特性。詳細(xì)對比：
http://caniuse.com/#comparison
http://html5test.com/compare/browser/firefoxmobile-35/chrome-39/ie-8.html
HTML4.01和HTML5結(jié)構(gòu)區(qū)別
HTML5新特性簡單示例
canvas
canvas標(biāo)簽使用 JavaScript 在網(wǎng)頁上繪制圖像。畫布是一個(gè)矩形區(qū)域，您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。
代碼示例：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");//指定二維繪圖，目前只支持2D繪圖，后續(xù)可能會(huì)支持3D
cxt.moveTo(10,10);//繪制起點(diǎn)。（0，0）對應(yīng)左上角，向右和向下遞增
cxt.lineTo(150,50);//畫一條直線（10,10）到（150,50）
cxt.lineTo(10,50);//畫一條直線（150,50）到（10,50）
cxt.strokeStyle="green"; //指定線條顏色
cxt.stroke();//顯示繪圖結(jié)果
</script>
</body>
</html>
vedio/audio
在HTML5以前，如果您想在網(wǎng)頁中嵌入在線觀看的視頻，一般都需要使用Flash視頻流，通過使用 <object> 和 <embed> 標(biāo)簽，就可以通過瀏覽器播放swf、flv等格式視頻文件，但是前提是瀏覽器必須安裝第三方插件：Adobe Flash Player。而現(xiàn)代智能手機(jī)和iPad等一般都不支持Flash，所以無法瀏覽網(wǎng)頁上的視頻。而 HTML 5 改變了這一事實(shí)，Web開發(fā)者只需要使用 <video> 標(biāo)簽就可以輕松加載視頻文件，而不需要任何第三方插件。
vedio支持的視頻格式有三種：
- Ogg 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
- MPEG4（MP4）帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
- WebM 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件
代碼示例：
<video id="coures-video" class="vjs-tech" preload="none"
poster="http://demo.com/upload/course/20160104/1451886552971.jpg"
controls="controls" loop="loop" width="640px" height="480px;">
<source src="http://demo.com/upload/course/20160104/1451886551972.mp4" type="video/mp4">
</video>
audio與vedio基本相同,不再贅述。
Drag 和 Drop
拖放是一種常見的特性，即抓取對象以后拖到另一個(gè)位置。在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。只需要簡單的幾個(gè)屬性和響應(yīng)函數(shù)即可實(shí)現(xiàn)拖放。
代碼示例：
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="http://demo.com/images/11.jpg" draggable="true" ondragstart="drag(event)" id="drag1" />
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
//ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。
function allowDrop(ev){
ev.preventDefault();
}
//移動(dòng)響應(yīng)事件，獲取正在移動(dòng)的標(biāo)簽ID
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//進(jìn)行放置 響應(yīng)事件
function drop(ev) {
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
INPUT新類型
HTML5 擁有多個(gè)新的表單輸入類型，這些新特性提供了更好的輸入控制和驗(yàn)證。email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color 。
- email 類型用于應(yīng)該包含 e-mail 地址的輸入域，在提交表單時(shí)，會(huì)自動(dòng)驗(yàn)證 email 域的值：
<input type="email" name="user_email" /> - number 類型用于應(yīng)該包含數(shù)值的輸入域，還能夠設(shè)定對所接受的數(shù)字的限定：
<input type="number" name="points" min="1" max="10" /> - Date Pickers（日期選擇器）擁有多個(gè)可供選取日期和時(shí)間的新輸入類型：
date - 選取日、月、年
month - 選取月、年
week - 選取周和年
time - 選取時(shí)間（小時(shí)和分鐘）
datetime - 選取時(shí)間、日、月、年（UTC 時(shí)間）
datetime-local - 選取時(shí)間、日、月、年（本地時(shí)間）
<input type="date" name="user_date" />
本地存儲(chǔ)
說到本地存儲(chǔ)，真是歷盡千辛萬苦才走到HTML5這一步，之前的歷史大概如下圖所示：
最早的Cookies大小約4KB，而且IE6只支持每個(gè)域名20個(gè)cookies。優(yōu)勢就是大家都支持，而且支持得還比較好。后來IE又推出了userData，現(xiàn)在用的比較多的是Flash，空間是Cookie的25倍，基本夠用。再之后Google推出了Gears，雖然沒有限制，但是要裝額外的插件。到了HTML5把這些都統(tǒng)一了，官方建議是每個(gè)網(wǎng)站5MB。所有支持的瀏覽器目前都采用的5MB，盡管有一些瀏覽器可以讓用戶設(shè)置，但對于網(wǎng)頁制作者來說，目前的形勢就5MB來考慮是比較適合的。
對于重復(fù)的數(shù)據(jù)，HTML5可以直接從本地存儲(chǔ)中讀取數(shù)據(jù)，不必每次都向服務(wù)器發(fā)起請求從服務(wù)器獲取。從而大幅提高網(wǎng)站性能和支持離線運(yùn)行。對于不同的網(wǎng)站，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域，并且一個(gè)網(wǎng)站只能訪問其自身的數(shù)據(jù)。
HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的方法：
- localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
- sessionStorage - 針對一個(gè) session 的數(shù)據(jù)存儲(chǔ)
HTML5 使用 JavaScript 來存儲(chǔ)和訪問數(shù)據(jù)。使用方法如下：
if (localStorage.pagecount){
localStorage.pagecount=Number(localStorage.pagecount) +1;
} else {
localStorage.pagecount=1;
}
document.write("Visits: " + localStorage.pagecount + " time(s).");
CSS
層疊樣式表 (Cascading Style Sheets)是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語言。相對于傳統(tǒng)HTML的表現(xiàn)而言，CSS能夠?qū)W(wǎng)頁中的對象的位置排版進(jìn)行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網(wǎng)頁對象和模型樣式編輯的能力，并能夠進(jìn)行初步交互設(shè)計(jì)，有較強(qiáng)的易讀性，被稱為程序員的畫筆。
如何使用樣式表？
有三種方法可以在網(wǎng)頁上使用樣式表：
- 外聯(lián)式Linking（也叫外部樣式）
當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 嵌入式Embedding（也叫內(nèi)頁樣式）
當(dāng)單個(gè)文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表。你可以在 head 部分通過 <style> 標(biāo)簽定義內(nèi)部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 內(nèi)聯(lián)式Inline（也叫行內(nèi)樣式）
當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)，就可以使用內(nèi)聯(lián)樣式。 使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實(shí)例顯示出如何改變段落的顏色和左外邊距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
如何定義樣式表
CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。如下圖所示
選擇器類型：
- 標(biāo)簽選擇器 p <p></p>
- 類選擇器 .my-class <p class="my-class"></p>
- ID選擇器 #myDiv <div id="myDiv"></div>
- 屬性選擇器 [type="radio"] <input type="radio" />
- 偽類/偽元素選擇器 a:hover
- 以及上述各種選擇器的組合。
更多介紹，詳見：http://www.w3school.com.cn/cssref/css_selectors.asp
盒模型
網(wǎng)頁設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)。這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻砝斫?，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。CSS盒子模型就是在網(wǎng)頁設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。盒模型的模型如下圖
display屬性
| 值 | 描述 |
|---|---|
| none | 此元素不會(huì)被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前后會(huì)帶有換行符。 |
| inline | 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。 |
| inline-block | 行內(nèi)塊元素。（CSS2.1 新增的值） |
| table | 此元素會(huì)作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。 |
display 屬性規(guī)定了元素應(yīng)該生成的框的類型。在上面html章節(jié)中我們提到了塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽，這只是默認(rèn)屬性，通過CSS中的display進(jìn)行修改。還可以通過display控制標(biāo)簽是否顯示。
display常見的屬性值如下：
| 值 | 描述 |
|---|---|
| none | 此元素不會(huì)被顯示。 |
| block | 此元素將顯示為塊級元素，此元素前后會(huì)帶有換行符。 |
| inline | 默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。 |
| inline-block | 行內(nèi)塊元素。（CSS2.1 新增的值） |
| table | 此元素會(huì)作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。 |
position屬性
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
| relative | 生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。 |
| static | 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。 |
position 屬性規(guī)定元素的定位類型。這個(gè)屬性定義建立元素布局所用的定位機(jī)制。任何元素都可以定位，不過絕對或固定元素會(huì)生成一個(gè)塊級框，而不論該元素本身是什么類型。相對定位元素會(huì)相對于它在文檔流中的默認(rèn)位置偏移。
| 值 | 描述 |
|---|---|
| absolute | 生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。 |
| relative | 生成相對定位的元素，相對于其正常位置進(jìn)行定位。因此，"left:20" 會(huì)向元素的 LEFT 位置添加 20 像素。 |
| static | 默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值。 |
示例：
參考資料：http://blog.jobbole.com/49320/
float屬性
| 值 | 描述 |
|---|---|
| left | 元素向左浮動(dòng)。 |
| right | 元素向右浮動(dòng)。 |
| none | 默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 float 屬性的值。 |
float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級框，而不論它本身是何種元素。如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過程會(huì)持續(xù)到某一行擁有足夠的空間為止。
| 值 | 描述 |
|---|---|
| left | 元素向左浮動(dòng)。 |
| right | 元素向右浮動(dòng)。 |
| none | 默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 float 屬性的值。 |
示例：
-
正常文檔流
-
設(shè)置float，瀏覽器的寬度“不夠長”時(shí) 圖片18.png
-
設(shè)置float，瀏覽器的寬度“足夠長”時(shí)
圖片19.png
參考資料：http://www.cnblogs.com/polk6/archive/2013/07/25/3142187.html
浮動(dòng)子標(biāo)簽撐開父標(biāo)簽
子標(biāo)簽如果都設(shè)置為float，會(huì)導(dǎo)致父標(biāo)簽沒有高度值。導(dǎo)致結(jié)構(gòu)錯(cuò)亂。
如下兩種方法可以解決：
-
添加一個(gè)空的div，設(shè)置clear屬性為both
-
父標(biāo)簽增加偽類，設(shè)置clear屬性為both
圖片21.png
其他常用屬性
background-color: gray; /*背景顏色*/
border: 2px solid #e4e4e4; /*邊框尺寸、類型、顏色*/
font-family: 宋體; /*字體*/
color: #234567; /*文字顏色*/
font-size: 13px; /*文字大小*/
width: 70px; /*寬度*/
height: 70px; /*高度*/
CSS優(yōu)先級
由于CSS選擇器可以有多種形式，可以繼承，可以重復(fù)定義。所以具體哪個(gè)樣式生效需要計(jì)算優(yōu)先級。注意：優(yōu)先級相同時(shí)，晚定義的樣式有效。
通常情況下，給每個(gè)選擇器設(shè)置一個(gè)數(shù)值，數(shù)值越大，優(yōu)先級越高。實(shí)際沒有這個(gè)數(shù)值，只是一種近似。
html標(biāo)簽 （1）
class （10）
id （100）
計(jì)算示例：
div p 1+1 = 2
span.test 1+10 = 11
id.test 100 + 10 = 110
不同引入方式引入的CSS，優(yōu)先級也不同。排序規(guī)則如下：!important > inline >id > class > tag
CSS3
CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。
參考：http://www.w3school.com.cn/css3/
javascript
java ≠ javascript 就像 馬 ≠ 海馬
JavaScript是一種屬于網(wǎng)絡(luò)的腳本語言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁添加各式各樣的動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。JavaScript是甲骨文公司的注冊商標(biāo)，最初由Netscape的Brendan Eich設(shè)計(jì)。Netscape在最初將其腳本語言命名為LiveScript，后來Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開始設(shè)計(jì)的，目的之一就是“看上去像Java”，因此語法上有類似之處，一些名稱和命名規(guī)范也借自Java。但JavaScript的主要設(shè)計(jì)原則源自Self和Scheme。JavaScript與Java名稱上的近似，是當(dāng)時(shí)Netscape為了營銷考慮與Sun微系統(tǒng)達(dá)成協(xié)議的結(jié)果。
JavaScript腳本語言具有以下特點(diǎn):
- 腳本語言。JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯后執(zhí)行,而JavaScript是在程序的運(yùn)行過程中逐行進(jìn)行解釋。
- 基于對象。JavaScript是一種基于對象的腳本語言,它不僅可以創(chuàng)建對象,也能使用現(xiàn)有的對象。
- 簡單。JavaScript語言中采用的是弱類型的變量類型,對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,是基于Java基本語句和控制的腳本語言,其設(shè)計(jì)簡單緊湊。
- 動(dòng)態(tài)性。JavaScript是一種采用事件驅(qū)動(dòng)的腳本語言,它不需要經(jīng)過Web服務(wù)器就可以對用戶的輸入做出響應(yīng)。在訪問一個(gè)網(wǎng)頁時(shí),鼠標(biāo)在網(wǎng)頁中進(jìn)行鼠標(biāo)點(diǎn)擊或上下移、窗口移動(dòng)等操作JavaScript都可直接對這些事件給出相應(yīng)的響應(yīng)。
- 跨平臺(tái)性。JavaScript腳本語言不依賴于操作系統(tǒng),僅需要瀏覽器的支持。因此一個(gè)JavaScript腳本在編寫后可以帶到任意機(jī)器上使用，部署成本小。
不同于服務(wù)器端腳本語言，例如PHP與ASP，JavaScript主要被作為客戶端腳本語言在用戶的瀏覽器上運(yùn)行，不需要服務(wù)器的支持。所以在早期程序員比較青睞于JavaScript以減少對服務(wù)器的負(fù)擔(dān)，而與此同時(shí)也帶來另一個(gè)問題：安全性。
而隨著服務(wù)器的強(qiáng)壯，雖然程序員更喜歡運(yùn)行于服務(wù)端的腳本以保證安全，但JavaScript仍然以其跨平臺(tái)、容易上手等優(yōu)勢大行其道。同時(shí)，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進(jìn)行支持。隨著引擎如V8和框架如Node.js的發(fā)展，及其事件驅(qū)動(dòng)及異步IO等特性，JavaScript逐漸被用來編寫服務(wù)器端程序。
JavaScript被Netscape公司提交給ECMA(European Computer Manufacturers Association)制定為標(biāo)準(zhǔn)，稱之為ECMAScript，標(biāo)準(zhǔn)編號ECMA-262。目前最新版為2015年發(fā)布的ECMAScript 6。
下面對javascript的常用操作進(jìn)行舉例：
寫入 HTML 輸出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
對事件作出反應(yīng)
<button type="button" onclick="alert('Welcome!')">點(diǎn)擊這里</button>
alert() 函數(shù)在 JavaScript 中并不常用，但它對于代碼測試非常方便。
onclick 鼠標(biāo)點(diǎn)擊事件。
改變 HTML 內(nèi)容
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改變內(nèi)容
var img=document.getElementById("myImg") //查找元素
img.src="/i/eg_bulbon.gif";
您會(huì)經(jīng)?？吹?document.getElementByID("some id")。這個(gè)方法是 HTML DOM 中定義的。DOM（文檔對象模型）是用以訪問 HTML 元素的正式 W3C 標(biāo)準(zhǔn)。
改變 HTML 樣式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改變樣式
驗(yàn)證輸入
if isNaN(x) {alert("Not Numeric")};
詳細(xì)的語言特性，參考：http://www.w3school.com.cn/js/index.asp
jQuery
JQuery一個(gè)優(yōu)秀的輕量級的Javascript庫。它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。目前，絕大多數(shù)網(wǎng)站都在使用jQuery。
示例：
$("#h01").attr("style","color:red").html("Hello jQuery")
詳細(xì)的語言特性，參考：http://www.w3school.com.cn/jquery/
瀏覽器兼容
瀏覽器兼容性問題又被稱為網(wǎng)頁兼容性或網(wǎng)站兼容性問題，指網(wǎng)頁在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁間的兼容問題。在網(wǎng)站的設(shè)計(jì)和制作中，做好瀏覽器兼容，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示。因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML，JS，CSS標(biāo)準(zhǔn)不同；以及用戶客戶端的環(huán)境不同（如分辨率不同）造成的顯示效果不能達(dá)到理想效果。最常見的問題就是網(wǎng)頁元素位置混亂，錯(cuò)位，動(dòng)態(tài)效果失效等等。
舉例：
- IE的盒模型與W3C標(biāo)準(zhǔn)不符。
- IE8不支持html5的vedio，只能使用flash播放視頻。
- IE8不支持圖片圓角
- DOM 個(gè)別操作不一致
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();'); //FIREFOX支持，IE不支持
obj.onclick=function(){fucntionname();}; //都支持
前端調(diào)試工具
推薦使用Chrome devtools。
關(guān)于UX和前端
在前端開發(fā)過程中一般會(huì)引入比較成熟的前端框架，例如：Bootstarp（http://v3.bootcss.com/getting-started/）。所以在UI設(shè)計(jì)時(shí)需要進(jìn)行溝通，一旦選擇了框架，盡量能和框架風(fēng)格保持一致。當(dāng)然也可以完全重新定義風(fēng)格和自己開發(fā)。
同樣在圖標(biāo)使用上，一般也會(huì)選擇成熟的圖標(biāo)庫，例如：Font Awesome，Glyphicons。（http://www.bootcss.com/p/font-awesome/）
上面提到的兼容性設(shè)計(jì)問題。如果要支持IE8這類古董瀏覽器。再設(shè)計(jì)時(shí)很多新特性都無法支持，如果一定要支持，成本會(huì)很大。
