1褒傅、WEB前端是神馬
Web前端開發(fā)是從網(wǎng)頁(yè)制作演變而來(lái)的弃锐，名稱上有很明顯的時(shí)代特征。在互聯(lián)網(wǎng)的演化進(jìn)程中殿托，網(wǎng)頁(yè)制作是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)頁(yè)不再只是承載單一的文字和圖片目尖，各種富媒體讓網(wǎng)頁(yè)的內(nèi)容更加生動(dòng)，網(wǎng)頁(yè)上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)扎运，這些都是基于前端技術(shù)實(shí)現(xiàn)的瑟曲。 以前會(huì)Photoshop和Dreamweaver就可以制作網(wǎng)頁(yè)，現(xiàn)在只掌握這些已經(jīng)遠(yuǎn)遠(yuǎn)不夠了绪囱。無(wú)論是開發(fā)難度上测蹲，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁(yè)制作都更接近傳統(tǒng)的網(wǎng)站后臺(tái)開發(fā)鬼吵，所以現(xiàn)在不再叫網(wǎng)頁(yè)制作扣甲，而是叫Web前端開發(fā)。Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來(lái)越重要齿椅，而且需要專業(yè)的前端工程師才能做好琉挖。Web前端開發(fā)是一項(xiàng)很特殊的工作，涵蓋的知識(shí)面非常廣，既有具體的技術(shù)，又有抽象的理念碴巾。簡(jiǎn)單地說(shuō)断楷，它的主要職能就是把網(wǎng)站（Web App網(wǎng)頁(yè)應(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)頁(yè)主要由三部分組成：結(jié)構(gòu)（Structure）险耀、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括HTML玖喘，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS甩牺，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如W3C DOM）、ECMAScript等累奈。
簡(jiǎn)單來(lái)說(shuō)就是： html（結(jié)構(gòu)） + css（表現(xiàn)） + js（行為）
學(xué)習(xí)資源：http://www.w3school.com.cn/
名詞解釋：W3C——萬(wàn)維網(wǎng)聯(lián)盟（World Wide Web Consortium）
HTML——WEB應(yīng)用的基石
HyperText Markup Language 超文本標(biāo)記語(yǔ)言贬派。超文本是用超鏈接的方法，將各種不同空間的信息組織在一起的網(wǎng)狀文本澎媒。信息可以包含圖片搞乏、鏈接，甚至音樂(lè)戒努、程序等非文字元素查描。
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)該使用什么樣的文檔類型定義來(lái)解析文檔缘缚。示例中所示的文檔類型是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)頁(yè)面的元信息（meta-information），比如針對(duì)搜索引擎的關(guān)鍵詞唬血，文件編碼類型望蜡，瀏覽器版本等。
- title：文檔標(biāo)題拷恨，瀏覽器的標(biāo)簽頁(yè)顯示的內(nèi)容脖律。
- link：<link>標(biāo)簽定義文檔與外部資源的關(guān)系，最常見的用途是鏈接樣式表（css文件）腕侄，ICON小泉。
- script：<script>標(biāo)簽用于定義客戶端腳本，比如 JavaScript冕杠。既可以包含腳本語(yǔ)句微姊，也可以通過(guò) 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)簽被用來(lái)組合文檔中的行內(nèi)元素界逛。
- a:<a> 標(biāo)簽定義超鏈接，用于從一張頁(yè)面鏈接到另一張頁(yè)面纺座，最重要的屬性是 href 屬性息拜，它指示鏈接的目標(biāo)。
- button：<button> 標(biāo)簽定義一個(gè)按鈕。
- img：img 元素向網(wǎng)頁(yè)中嵌入一幅圖像少欺。
- input：<input> 標(biāo)簽用于搜集用戶信息喳瓣。根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式赞别。輸入字段可以是文本字段畏陕、復(fù)選框、單選按鈕仿滔、按鈕等等惠毁。
其他更多標(biāo)簽，請(qǐng)見：http://www.w3school.com.cn/tags/tag_doctype.asp
文檔流
冷知識(shí)：W3C規(guī)范中沒有document flow這個(gè)概念崎页，只有normal-flow, 文檔流的叫法主要還是多數(shù)中文譯者的翻譯方式問(wèn)題鞠绰。據(jù)說(shuō)來(lái)源于報(bào)紙的排版。
什么是文檔流飒焦？簡(jiǎn)單說(shuō)就是元素按照其在HTML中決定標(biāo)簽位置順序排布的過(guò)程蜈膨。并且這種過(guò)程遵循標(biāo)準(zhǔn)的描述。html的文檔流規(guī)則是將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素荒给。
塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽
HTML中的標(biāo)簽主要是塊級(jí)標(biāo)簽或內(nèi)聯(lián)標(biāo)簽丈挟。塊級(jí)標(biāo)簽一般是其他標(biāo)簽的容器標(biāo)簽，能容納其他塊標(biāo)簽或內(nèi)聯(lián)標(biāo)簽志电。簡(jiǎn)單來(lái)說(shuō)曙咽，塊標(biāo)簽就好比一個(gè)四方塊，可以放其他的四方塊挑辆，并可以呈現(xiàn)在頁(yè)面上任何地方例朱。默認(rèn)情況下塊標(biāo)簽，是獨(dú)占一行的鱼蝉。常見的塊標(biāo)簽：div洒嗤、h1-h6標(biāo)題、form（只能用來(lái)容納其他塊標(biāo)簽）魁亦、hr渔隶、p、table洁奈、ul间唉、ol等。內(nèi)聯(lián)標(biāo)簽也叫內(nèi)嵌標(biāo)簽或行內(nèi)標(biāo)簽利术，一般都是基于語(yǔ)義級(jí)(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ū)別被冒？
- 塊級(jí)標(biāo)簽军掂，總是在新行上開始；內(nèi)聯(lián)標(biāo)簽昨悼，和其他標(biāo)簽都在一行上蝗锥。
- 塊級(jí)標(biāo)簽，能容納其他塊標(biāo)簽或內(nèi)聯(lián)標(biāo)簽幔戏；內(nèi)聯(lián)標(biāo)簽玛追，只能容納文本或者其他內(nèi)聯(lián)標(biāo)簽。
- 塊級(jí)標(biāo)簽中高度闲延，行高以及頂和底邊距都可控制；內(nèi)聯(lián)標(biāo)簽中高韩玩，行高及頂和底邊距不可改變垒玲。
在實(shí)際應(yīng)用中，可以通過(guò)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àn)維網(wǎng)聯(lián)盟灰殴。
注：WHATWG 指 Web Hypertext Application Technology Working Group敬特，Web超文本應(yīng)用技術(shù)工作組掰邢。
HTML5建立的一些規(guī)則：
- 新特性應(yīng)該基于 HTML、CSS伟阔、DOM 以及 JavaScript辣之。
- 減少對(duì)外部插件的需求（比如 Flash）
- 更優(yōu)秀的錯(cuò)誤處理
- 更多取代腳本的標(biāo)記
- HTML5應(yīng)該獨(dú)立于設(shè)備
HTML5中的新特性
- 用于繪畫的 canvas 元素
- 用于多媒體的 video 和 audio 元素
- 對(duì)本地離線存儲(chǔ)的更好的支持
- 新的特殊內(nèi)容元素，比如 article皱炉、footer怀估、header、nav合搅、section
- 新的表單控件多搀，比如 calendar、date灾部、time康铭、email、url赌髓、search
瀏覽器支持
最新版本的 Chrome从藤、Firefox、Safari 以及 Opera 基本上完全支持 HTML5 特性锁蠕。IE9開始支持某些 HTML5 特性夷野。詳細(xì)對(duì)比：
http://caniuse.com/#comparison
http://html5test.com/compare/browser/firefoxmobile-35/chrome-39/ie-8.html
HTML4.01和HTML5結(jié)構(gòu)區(qū)別
HTML5新特性簡(jiǎn)單示例
canvas
canvas標(biāo)簽使用 JavaScript 在網(wǎng)頁(yè)上繪制圖像。畫布是一個(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）對(duì)應(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)頁(yè)中嵌入在線觀看的視頻藏古，一般都需要使用Flash視頻流增炭，通過(guò)使用 <object> 和 <embed> 標(biāo)簽，就可以通過(guò)瀏覽器播放swf拧晕、flv等格式視頻文件隙姿，但是前提是瀏覽器必須安裝第三方插件：Adobe Flash Player。而現(xiàn)代智能手機(jī)和iPad等一般都不支持Flash厂捞，所以無(wú)法瀏覽網(wǎng)頁(yè)上的視頻输玷。而 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
拖放是一種常見的特性，即抓取對(duì)象以后拖到另一個(gè)位置赔嚎。在 HTML5 中膘盖，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放尤误。只需要簡(jiǎ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è)定對(duì)所接受的數(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ǔ)
說(shuō)到本地存儲(chǔ)，真是歷盡千辛萬(wàn)苦才走到HTML5這一步霸株，之前的歷史大概如下圖所示：
最早的Cookies大小約4KB雕沉，而且IE6只支持每個(gè)域名20個(gè)cookies。優(yōu)勢(shì)就是大家都支持去件，而且支持得還比較好坡椒。后來(lái)IE又推出了userData扰路，現(xiàn)在用的比較多的是Flash，空間是Cookie的25倍肠牲，基本夠用幼衰。再之后Google推出了Gears，雖然沒有限制缀雳，但是要裝額外的插件渡嚣。到了HTML5把這些都統(tǒng)一了，官方建議是每個(gè)網(wǎng)站5MB肥印。所有支持的瀏覽器目前都采用的5MB识椰，盡管有一些瀏覽器可以讓用戶設(shè)置，但對(duì)于網(wǎng)頁(yè)制作者來(lái)說(shuō)深碱，目前的形勢(shì)就5MB來(lái)考慮是比較適合的腹鹉。
對(duì)于重復(fù)的數(shù)據(jù)，HTML5可以直接從本地存儲(chǔ)中讀取數(shù)據(jù)敷硅，不必每次都向服務(wù)器發(fā)起請(qǐng)求從服務(wù)器獲取功咒。從而大幅提高網(wǎng)站性能和支持離線運(yùn)行。對(duì)于不同的網(wǎng)站绞蹦，數(shù)據(jù)存儲(chǔ)于不同的區(qū)域力奋，并且一個(gè)網(wǎng)站只能訪問(wèn)其自身的數(shù)據(jù)。
HTML5 提供了兩種在客戶端存儲(chǔ)數(shù)據(jù)的方法：
- localStorage - 沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
- sessionStorage - 針對(duì)一個(gè) session 的數(shù)據(jù)存儲(chǔ)
HTML5 使用 JavaScript 來(lái)存儲(chǔ)和訪問(wèn)數(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)是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言景殷。CSS目前最新版本為CSS3，是能夠真正做到網(wǎng)頁(yè)表現(xiàn)與內(nèi)容分離的一種樣式設(shè)計(jì)語(yǔ)言澡屡。相對(duì)于傳統(tǒng)HTML的表現(xiàn)而言猿挚，CSS能夠?qū)W(wǎng)頁(yè)中的對(duì)象的位置排版進(jìn)行像素級(jí)的精確控制，支持幾乎所有的字體字號(hào)樣式驶鹉，擁有對(duì)網(wǎng)頁(yè)對(duì)象和模型樣式編輯的能力绩蜻，并能夠進(jìn)行初步交互設(shè)計(jì)，有較強(qiáng)的易讀性梁厉，被稱為程序員的畫筆辜羊。
如何使用樣式表？
有三種方法可以在網(wǎng)頁(yè)上使用樣式表：
- 外聯(lián)式Linking（也叫外部樣式）
當(dāng)樣式需要被應(yīng)用到很多頁(yè)面的時(shí)候词顾，外部樣式表將是理想的選擇八秃。使用外部樣式表，你就可以通過(guò)更改一個(gè)文件來(lái)改變整個(gè)站點(diǎn)的外觀肉盹。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 嵌入式Embedding（也叫內(nèi)頁(yè)樣式）
當(dāng)單個(gè)文件需要特別樣式時(shí)昔驱，就可以使用內(nèi)部樣式表。你可以在 head 部分通過(guò) <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)頁(yè)設(shè)計(jì)中常聽的屬性名：內(nèi)容(content)絮蒿、填充(padding)尊搬、邊框(border)、邊界(margin)土涝。這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻?lái)理解佛寿，日常生活中所見的盒子也就是能裝東西的一種箱子，也具有這些屬性但壮，所以叫它盒子模式冀泻。CSS盒子模型就是在網(wǎng)頁(yè)設(shè)計(jì)中經(jīng)常用到的CSS技術(shù)所使用的一種思維模型。盒模型的模型如下圖
display屬性
| 值 | 描述 |
|---|---|
| none | 此元素不會(huì)被顯示蜡饵。 |
| block | 此元素將顯示為塊級(jí)元素腔长，此元素前后會(huì)帶有換行符。 |
| inline | 默認(rèn)验残。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒有換行符巾乳。 |
| inline-block | 行內(nèi)塊元素您没。（CSS2.1 新增的值） |
| table | 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>），表格前后帶有換行符胆绊。 |
display 屬性規(guī)定了元素應(yīng)該生成的框的類型氨鹏。在上面html章節(jié)中我們提到了塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽，這只是默認(rèn)屬性压状，通過(guò)CSS中的display進(jìn)行修改仆抵。還可以通過(guò)display控制標(biāo)簽是否顯示。
display常見的屬性值如下：
| 值 | 描述 |
|---|---|
| none | 此元素不會(huì)被顯示种冬。 |
| block | 此元素將顯示為塊級(jí)元素镣丑，此元素前后會(huì)帶有換行符。 |
| inline | 默認(rèn)娱两。此元素會(huì)被顯示為內(nèi)聯(lián)元素莺匠，元素前后沒有換行符。 |
| inline-block | 行內(nèi)塊元素十兢。（CSS2.1 新增的值） |
| table | 此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>）趣竣，表格前后帶有換行符摇庙。 |
position屬性
| 值 | 描述 |
|---|---|
| absolute | 生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位遥缕。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定卫袒。 |
| fixed | 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位单匣。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定夕凝。 |
| relative | 生成相對(duì)定位的元素，相對(duì)于其正常位置進(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ī)制。任何元素都可以定位挑围，不過(guò)絕對(duì)或固定元素會(huì)生成一個(gè)塊級(jí)框礁竞，而不論該元素本身是什么類型。相對(duì)定位元素會(huì)相對(duì)于它在文檔流中的默認(rèn)位置偏移杉辙。
| 值 | 描述 |
|---|---|
| absolute | 生成絕對(duì)定位的元素模捂，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定蜘矢。 |
| fixed | 生成絕對(duì)定位的元素狂男，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定品腹。 |
| relative | 生成相對(duì)定位的元素岖食，相對(duì)于其正常位置進(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)用于圖像叙量，使文本圍繞在圖像周圍倡蝙，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)绞佩。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框寺鸥，而不論它本身是何種元素。如果浮動(dòng)非替換元素品山，則要指定一個(gè)明確的寬度胆建；否則，它們會(huì)盡可能地窄肘交。假如在一行之上只有極少的空間可供浮動(dòng)元素笆载，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止涯呻。
| 值 | 描述 |
|---|---|
| left | 元素向左浮動(dòng)凉驻。 |
| right | 元素向右浮動(dòng)。 |
| none | 默認(rèn)值复罐。元素不浮動(dòng)涝登，并會(huì)顯示在其在文本中出現(xiàn)的位置。 |
| inherit | 規(guī)定應(yīng)該從父元素繼承 float 屬性的值效诅。 |
示例：
-
正常文檔流
-
設(shè)置float胀滚，瀏覽器的寬度“不夠長(zhǎng)”時(shí) 圖片18.png
-
設(shè)置float，瀏覽器的寬度“足夠長(zhǎng)”時(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)先級(jí)
由于CSS選擇器可以有多種形式，可以繼承层宫，可以重復(fù)定義杨伙。所以具體哪個(gè)樣式生效需要計(jì)算優(yōu)先級(jí)。注意：優(yōu)先級(jí)相同時(shí)萌腿，晚定義的樣式有效限匣。
通常情況下，給每個(gè)選擇器設(shè)置一個(gè)數(shù)值毁菱，數(shù)值越大米死，優(yōu)先級(jí)越高锌历。實(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)先級(jí)也不同。排序規(guī)則如下：!important > inline >id > class > tag
CSS3
CSS3是CSS技術(shù)的升級(jí)版本物喷，CSS3語(yǔ)言開發(fā)是朝著模塊化發(fā)展的卤材。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以峦失，把它分解為一些小的模塊扇丛，更多新的模塊也被加入進(jìn)來(lái)。這些模塊包括： 盒子模型尉辑、列表模塊帆精、超鏈接方式 、語(yǔ)言模塊 材蹬、背景和邊框 实幕、文字特效 、多欄布局等堤器。
參考：http://www.w3school.com.cn/css3/
javascript
java ≠ javascript 就像 馬 ≠ 海馬
JavaScript是一種屬于網(wǎng)絡(luò)的腳本語(yǔ)言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來(lái)為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果昆庇。JavaScript是甲骨文公司的注冊(cè)商標(biāo)，最初由Netscape的Brendan Eich設(shè)計(jì)闸溃。Netscape在最初將其腳本語(yǔ)言命名為L(zhǎng)iveScript整吆，后來(lái)Netscape在與Sun合作之后將其改名為JavaScript。JavaScript最初受Java啟發(fā)而開始設(shè)計(jì)的辉川，目的之一就是“看上去像Java”表蝙，因此語(yǔ)法上有類似之處，一些名稱和命名規(guī)范也借自Java乓旗。但JavaScript的主要設(shè)計(jì)原則源自Self和Scheme府蛇。JavaScript與Java名稱上的近似，是當(dāng)時(shí)Netscape為了營(yíng)銷考慮與Sun微系統(tǒng)達(dá)成協(xié)議的結(jié)果屿愚。
JavaScript腳本語(yǔ)言具有以下特點(diǎn):
- 腳本語(yǔ)言汇跨。JavaScript是一種解釋型的腳本語(yǔ)言,C、C++等語(yǔ)言先編譯后執(zhí)行,而JavaScript是在程序的運(yùn)行過(guò)程中逐行進(jìn)行解釋妆距。
- 基于對(duì)象穷遂。JavaScript是一種基于對(duì)象的腳本語(yǔ)言,它不僅可以創(chuàng)建對(duì)象,也能使用現(xiàn)有的對(duì)象。
- 簡(jiǎn)單娱据。JavaScript語(yǔ)言中采用的是弱類型的變量類型,對(duì)使用的數(shù)據(jù)類型未做出嚴(yán)格的要求,是基于Java基本語(yǔ)句和控制的腳本語(yǔ)言,其設(shè)計(jì)簡(jiǎn)單緊湊蚪黑。
- 動(dòng)態(tài)性。JavaScript是一種采用事件驅(qū)動(dòng)的腳本語(yǔ)言,它不需要經(jīng)過(guò)Web服務(wù)器就可以對(duì)用戶的輸入做出響應(yīng)。在訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí),鼠標(biāo)在網(wǎng)頁(yè)中進(jìn)行鼠標(biāo)點(diǎn)擊或上下移忌穿、窗口移動(dòng)等操作JavaScript都可直接對(duì)這些事件給出相應(yīng)的響應(yīng)抒寂。
- 跨平臺(tái)性。JavaScript腳本語(yǔ)言不依賴于操作系統(tǒng),僅需要瀏覽器的支持伴网。因此一個(gè)JavaScript腳本在編寫后可以帶到任意機(jī)器上使用蓬推，部署成本小。
不同于服務(wù)器端腳本語(yǔ)言澡腾，例如PHP與ASP沸伏，JavaScript主要被作為客戶端腳本語(yǔ)言在用戶的瀏覽器上運(yùn)行，不需要服務(wù)器的支持动分。所以在早期程序員比較青睞于JavaScript以減少對(duì)服務(wù)器的負(fù)擔(dān)毅糟，而與此同時(shí)也帶來(lái)另一個(gè)問(wèn)題：安全性。
而隨著服務(wù)器的強(qiáng)壯澜公，雖然程序員更喜歡運(yùn)行于服務(wù)端的腳本以保證安全姆另，但JavaScript仍然以其跨平臺(tái)、容易上手等優(yōu)勢(shì)大行其道坟乾。同時(shí)迹辐，有些特殊功能（如AJAX）必須依賴Javascript在客戶端進(jìn)行支持。隨著引擎如V8和框架如Node.js的發(fā)展甚侣，及其事件驅(qū)動(dòng)及異步IO等特性明吩，JavaScript逐漸被用來(lái)編寫服務(wù)器端程序。
JavaScript被Netscape公司提交給ECMA(European Computer Manufacturers Association)制定為標(biāo)準(zhǔn)殷费，稱之為ECMAScript印荔，標(biāo)準(zhǔn)編號(hào)ECMA-262。目前最新版為2015年發(fā)布的ECMAScript 6详羡。
下面對(duì)javascript的常用操作進(jìn)行舉例：
寫入 HTML 輸出
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph</p>");
對(duì)事件作出反應(yīng)
<button type="button" onclick="alert('Welcome!')">點(diǎn)擊這里</button>
alert() 函數(shù)在 JavaScript 中并不常用仍律，但它對(duì)于代碼測(cè)試非常方便。
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（文檔對(duì)象模型）是用以訪問(wèn) HTML 元素的正式 W3C 標(biāo)準(zhǔn)草则。
改變 HTML 樣式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改變樣式
驗(yàn)證輸入
if isNaN(x) {alert("Not Numeric")};
詳細(xì)的語(yǔ)言特性，參考：http://www.w3school.com.cn/js/index.asp
jQuery
JQuery一個(gè)優(yōu)秀的輕量級(jí)的Javascript庫(kù)登钥。它兼容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)勢(shì)是，它的文檔說(shuō)明很全轮纫，而且各種應(yīng)用也說(shuō)得很詳細(xì)腔寡，同時(shí)還有許多成熟的插件可供選擇。目前掌唾，絕大多數(shù)網(wǎng)站都在使用jQuery放前。
示例：
$("#h01").attr("style","color:red").html("Hello jQuery")
詳細(xì)的語(yǔ)言特性，參考：http://www.w3school.com.cn/jquery/
瀏覽器兼容
瀏覽器兼容性問(wèn)題又被稱為網(wǎng)頁(yè)兼容性或網(wǎng)站兼容性問(wèn)題糯彬，指網(wǎng)頁(yè)在各種瀏覽器上的顯示效果可能不一致而產(chǎn)生瀏覽器和網(wǎng)頁(yè)間的兼容問(wèn)題凭语。在網(wǎng)站的設(shè)計(jì)和制作中，做好瀏覽器兼容撩扒，才能夠讓網(wǎng)站在不同的瀏覽器下都正常顯示似扔。因?yàn)椴煌瑸g覽器使用內(nèi)核及所支持的HTML，JS搓谆，CSS標(biāo)準(zhǔn)不同炒辉；以及用戶客戶端的環(huán)境不同（如分辨率不同）造成的顯示效果不能達(dá)到理想效果。最常見的問(wèn)題就是網(wǎng)頁(yè)元素位置混亂泉手，錯(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ā)過(guò)程中一般會(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)庫(kù)答倡，例如：Font Awesome轰传，Glyphicons。（http://www.bootcss.com/p/font-awesome/）
上面提到的兼容性設(shè)計(jì)問(wèn)題瘪撇。如果要支持IE8這類古董瀏覽器获茬。再設(shè)計(jì)時(shí)很多新特性都無(wú)法支持港庄，如果一定要支持，成本會(huì)很大恕曲。
