|
市場缺口 前端程序員缺口非常大，因?yàn)樗匠蔀橐粋€(gè)崗位才幾年，國內(nèi)最早出現(xiàn)前端招聘崗位在2012年左右，在此之前，前端工作基本上都是由服務(wù)端工程師包辦的，或者是由設(shè)計(jì)師來產(chǎn)出HTML頁面。隨著現(xiàn)代互聯(lián)網(wǎng)應(yīng)用的火爆，前端難度加大，導(dǎo)致后臺程序員不能完全搞定，所以企業(yè)們急切需要真正懂前端技術(shù)的“前端人員”。 發(fā)展前景 現(xiàn)在市場上的前端程序員魚龍混雜，很多自稱是前端的人實(shí)際上只會(huì)頁面制作，他們搭著“前端”的順風(fēng)車，和企業(yè)要著高薪，卻應(yīng)付不了更復(fù)雜的工作。這是導(dǎo)致企業(yè)對前端需求大的原因，不是缺少前端，而是缺優(yōu)秀的前端。 職業(yè)發(fā)展路線 前端頁面制作、前端開發(fā)、前端架構(gòu)師 我們的課程體系是每一名前端開發(fā)人員都要牢牢掌握的，這些知識如果由頁面制作人員摸索學(xué)習(xí)成為開發(fā)人員，可能需要若干年的時(shí)間。在這里需要你4個(gè)月學(xué)完，所以壓力可想而知，代碼量可想而知！ 前端頁面制作：利用html+css完成頁面的搭建 前端開發(fā)：更多的要求javascript技術(shù) 前端架構(gòu)師：要求知識面、實(shí)際項(xiàng)目經(jīng)驗(yàn)、對技術(shù)的整體把控。 誰和前端人員打交道？ 產(chǎn)品經(jīng)理把用戶可能的需求提出來，和前端還有后端交涉，這個(gè)東西如何實(shí)現(xiàn)。確定可行后，由設(shè)計(jì)設(shè)計(jì)出UI圖，前端把它做出來，第一步可能是靜態(tài)的，純htmlcss，然后我們再用angularjs、js實(shí)現(xiàn)一些業(yè)務(wù)方面的功能，最后和后臺的接口進(jìn)行聯(lián)調(diào)，一般會(huì)是這么一個(gè)過程。那運(yùn)營呢？有時(shí)候會(huì)需要你配合他們的營銷方案對產(chǎn)品做一些調(diào)整，比如圣誕節(jié)到了，它要求你對公司的官網(wǎng)加一些雪花的特效。這也是需要你配合的。
IDE集成開發(fā)環(huán)境 用于提供程序開發(fā)環(huán)境的應(yīng)用軟件，一般包括代碼編輯器、編譯器、調(diào)試器和圖形用戶界面工具。集成了代碼編寫功能、分析功能、編譯功能、調(diào)試功能等一體化的開發(fā)軟件服務(wù)套。 它和單純的編碼工具不同，它不僅包含了編輯器，還有分析、編譯等功能。它集成了一系列軟件開發(fā)所需的功能，所以稱為“集成開發(fā)環(huán)境”。
調(diào)試工具： chrome自帶的開發(fā)者工具、firebug、IE有HttpWatch
推薦使用的瀏覽器：需要考慮兼容的瀏覽器
前兩者都非常的優(yōu)秀，它們比其它瀏覽器優(yōu)先之處在于 1.速度快，不是指打開的速度，而是指解析頁面CSS、JS的速度 2.支持更多新的功能，比如最新的標(biāo)準(zhǔn)html5、css3的一些新功能 3.插件化開發(fā)，chrome和firefox提示了應(yīng)用商店，你可以安裝自己喜歡的插件，定制自己的瀏覽器。 當(dāng)打開了一個(gè)項(xiàng)目的時(shí)候，WebStorm會(huì)顯示主窗口，包含有六個(gè)部分，分別是菜單欄、工具欄 、導(dǎo)航欄、狀態(tài)欄 、編輯器、WebStorm 工具窗口，如下圖所示，圖中已用紅色標(biāo)示。 常用操作 1.創(chuàng)建項(xiàng)目 file-->newproject-->指定路徑-->點(diǎn)擊上面的新建按鈕創(chuàng)建一個(gè)文件夾，然后ok，創(chuàng)建好項(xiàng)目后，項(xiàng)目文件夾中會(huì)帶有.idea這樣一個(gè)文件 2.創(chuàng)建文件 右擊項(xiàng)目-->new-->htmlfile-->輸入文件名-->下面的下拉框可以選擇h5還是h4或是xhtml類型的文檔，我們選擇h5，也就是默認(rèn)的。寫名字的時(shí)候不用加html后綴，webstrom會(huì)自動(dòng)為我們加。 3.重命名 右擊html文件-->refactor-->rename---改好后回車 4.刪除文件 右擊html文件-->delete-->ok（或者直接按電腦上的del鍵，回車） 菜單欄常用 FILE下（通常操作關(guān)于文件、工程） New Project創(chuàng)建工程 New 會(huì)彈出一個(gè)列表供選擇要?jiǎng)?chuàng)建的類型 Open 打開一個(gè)項(xiàng)目 Save As 將當(dāng)前頁面另存為 Reopen Project 近幾次打開的項(xiàng)目列表 Close Project 點(diǎn)擊后回到歡迎頁面上 Rename Project 它修改的不是當(dāng)前項(xiàng)目的文件夾名，而是文件夾目錄下.idea的以iml結(jié)尾的文件，這個(gè)是項(xiàng)目的名字。rename后觀察iml文件名的變化。 settings 常用設(shè)置 Exit 退出Webstorm
常用操作 鼠標(biāo)滑到編輯區(qū)的右上角，會(huì)顯示出一排瀏覽器的圖標(biāo)，如果你電腦中安裝了相應(yīng)瀏覽器，webstorm會(huì)自動(dòng)關(guān)聯(lián)它，在你想看當(dāng)前文檔的效果時(shí)，點(diǎn)擊瀏覽器按鈕即會(huì)打開 右擊編輯區(qū)的左邊欄，點(diǎn)擊showLine Number，可以顯示出行號，幫助我們快速定位代碼 點(diǎn)擊狀態(tài)欄右下角的clickto go to line 可以快速跳到你要找到行，當(dāng)代碼量過千時(shí)，這個(gè)功能非常有用 webstorm常用配置 1.如何更改主題（字體&配色） file->setting->editor->colors&fonts->scheme選擇你的主題（darcula） 2.如何讓webstorm啟動(dòng)的時(shí)候不打開工程文件 file->settings->Appearance&Behavior->Systemsettings 去掉reopen last project on startup（在啟動(dòng)的時(shí)候總是打開最后的工程） 3.如何完美顯示中文 file->settings->appearance中勾選overridedefault fonts by(not recommended)，設(shè)置name:NsimSum,Size:12 (appearance外觀選項(xiàng)，選中“重寫默認(rèn)字體”，設(shè)置名字為NsimSum，它是windows下的宋體字，字號12)。這里設(shè)置的是整個(gè)IDE顯示的文字，包括菜單列表的字。你可以試著把它改成英文，那樣再在菜單項(xiàng)中看，中文有的會(huì)不正常顯示，變成小方塊了。 webstorm常用配置 4.如何顯示行號 在代碼顯示區(qū)的左邊右擊選擇“show line number”。 5.如何代碼自動(dòng)換行 file-settings-editor->general->"use soft wraps in editor" 打上鉤，代碼就自動(dòng)換行了。 你先試下，在一行中寫很長的句子，看會(huì)不會(huì)換行。 webstorm快捷鍵 1.TAB 自動(dòng)補(bǔ)全 * 2.復(fù)制當(dāng)前行 ctrl+d > 3.刪除當(dāng)前行 Ctrl+y 4.注釋當(dāng)前行|取消注釋 ctrl+/ 5.注釋多行|取消注釋 ctrl+shift+/ 6.撤銷 ctrl+z 7.同時(shí)編輯 alt 8.新建多個(gè) 9.包含關(guān)系 HTML是什么 1.超文本標(biāo)記語言（HyperText Mark-up Language ） 2.用來設(shè)計(jì)網(wǎng)頁的標(biāo)記語言 3.用該語言編寫的文件，以 .html或 .htm為后綴 4.由瀏覽器解釋執(zhí)行 5.不區(qū)分大小寫，建議小寫 HTML標(biāo)簽標(biāo)簽 1.HTML用于描述功能的符號成為“標(biāo)簽” 2.標(biāo)簽都封裝在一對尖括號“<...>”之中,如<html>就是一個(gè)標(biāo)簽 3.封閉類型標(biāo)記（也叫雙標(biāo)記），必須成對出現(xiàn),如<p></p> 4.非封閉類型標(biāo)記，也叫作空標(biāo)記，或者單標(biāo)記，如<br/> Web瀏 HTML元素 指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（endtag）的所有代碼 HTML 元素語法 HTML 元素以開始標(biāo)簽起始 HTML 元素以結(jié)束標(biāo)簽終止 元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容 某些 HTML 元素具有空內(nèi)容（empty content） 空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束） 大多數(shù) HTML 元素可擁有屬性 Web瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來解釋頁面的內(nèi)容 HTML屬性與值 1.屬性是用來修飾元素的屬性必須位于開始標(biāo)簽里一個(gè)元素的屬性可能不止一個(gè)，多個(gè)屬性之間用空格隔開多個(gè)屬性之間不區(qū)分先后順序。 2.每個(gè)屬性都有值屬性和屬性的值之間用等號鏈接、屬性的值包含在引號當(dāng)中、屬性總是以名稱/值對的形式出現(xiàn)。
注釋 1.為代碼添加適當(dāng)?shù)淖⑨屖且环N良好的編程習(xí)慣 2.注釋只在編輯文本情況下可見，在瀏覽器展示頁面是并不會(huì)顯示 3.注釋標(biāo)簽不支持任何屬性 4.語法： <!--注釋的文本內(nèi)容 -->
HTML的基本結(jié)構(gòu)
<head lang="en"> lang是language的意思，lang=”en”屬性對每張頁面中的主要語言進(jìn)行聲明，en代表了英文，只是個(gè)聲明，聲明了它，對搜索引擎和瀏覽器更友好，并不會(huì)更改顯示內(nèi)容。它還有常見的值是zh-CN，代表了中文。（搜索引擎不會(huì)判斷該站點(diǎn)是中文還是英文，它讓搜索引擎知道你的站點(diǎn)是中文站，這些都是html規(guī)范，越規(guī)范，越容易被收錄） <metacharset="UTF-8"> META標(biāo)簽用來描述一個(gè)HTML網(wǎng)頁文檔的屬性，此處的charset=”utf-8”是說當(dāng)前使用的是utf-8編碼格式，GBK是在國家標(biāo)準(zhǔn)GB2312基礎(chǔ)上擴(kuò)容后兼容GB2312的標(biāo)準(zhǔn),GBK編碼專門用來解決中文編碼的,是雙字節(jié)的。UTF－8 編碼是用以解決國際上字符的一種多字節(jié)編碼。 搜索引擎 根據(jù)一定算法搜集數(shù)據(jù)的平臺，比如谷歌、百度。 什么是DTD文檔模型，為什么寫在HTML當(dāng)中？ DTD文檔模型也稱DOCTYPE文檔聲明，它是DocumentTypeDefinition的英文縮寫，意思是文檔類型定義，在HTML文檔中，用來指定頁面所使用的HTML（或者XHTML）的版本。要想制作符合標(biāo)準(zhǔn)的頁面，一個(gè)必不可少的關(guān)鍵組成部分就是DOCTYPE聲明。只有確定了一個(gè)正確的DOCTYPE，HTML里的標(biāo)識和CSS才能正常生效。它一般被定義在頁面的第一行，html標(biāo)簽之前。 它不是HTML標(biāo)簽。 什么是DTD文檔模型，為什么寫在HTML當(dāng)中？ 我們寫好一份HTML文檔，這時(shí)候全是代碼，用戶看不懂，是不是得用瀏覽器里的引擎給翻譯一下？用戶才看得到界面。關(guān)鍵是HTML有好多個(gè)版本，瀏覽器怎么知道按哪個(gè)版本解釋？你老爸讓你去掃地，你老媽讓你去洗碗，你是聽誰的，都是長輩，這時(shí)候如果你們家規(guī)定好了，凡事都聽你老爸的，這個(gè)就很好解決了，去掃地。這個(gè)DTD文檔模型就是這個(gè)意思，管它多少個(gè)HTML版本，我規(guī)定好我寫的這個(gè)HTML文檔以哪個(gè)為準(zhǔn)就行，那我就知道我最終頁面會(huì)被解釋成一個(gè)什么樣子。 DTD文檔模型=DOCTYPE=DOCTYPE文檔聲明 DOCTYPE聲明 HTML 5 <!DOCTYPE html> HTML 4.01 Strict 嚴(yán)格 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN" "http://www./TR/html4/strict.dtd"> 該 DTD 包含所有HTML 元素和屬性，但不包括展示性的和棄用的元素（比如font）。不允許框架集（Framesets） DOCTYPE聲明 HTML 4.01 Transitional 過渡 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Transitional//EN" "http://www./TR/html4/loose.dtd"> 該DTD 包含所有HTML 元素和屬性，包括展示性的和棄用的元素（比如font）。不允許框架集 HTML 4.01 Frameset 框架 <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.01 Frameset//EN""http://www./TR/html4/frameset.dtd">該DTD 等同于HTML 4.01 Transitional，但允許框架集內(nèi)容。 DOCTYPE聲明 XHTML中的DTD文檔模型 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.0 Transitional//EN" " http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 該 DTD包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。必須以格式正確的 XML 來編寫標(biāo)記。 xhtml和html的區(qū)別 XHTML是HTML向XML的一個(gè)過渡語言，在最初W3C組織希望把HTML變成更為嚴(yán)謹(jǐn)?shù)臉?biāo)記語言（比如XML），但HTML的已經(jīng)應(yīng)用的太為廣泛，全部換掉不太現(xiàn)實(shí)。因此產(chǎn)生了XHTML這樣一種過度形式。它比HTML更嚴(yán)謹(jǐn)，基本標(biāo)簽都還是沿用了HTML，但廢除了“表現(xiàn)層”的標(biāo)簽，同時(shí)要求標(biāo)簽的嚴(yán)格嵌套，標(biāo)簽結(jié)束等等。 <html> 定義HTML 文檔，這個(gè)元素我們?yōu)g覽器看到后就明白這是個(gè)HTML文檔了，所以你的其它元素要包裹在它里面，標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn)，在它們之間是文檔的頭部和主體。 <html> <head> <title>我的第一個(gè)HTML 頁面</title> </head> <body> <p>body元素的內(nèi)容會(huì)顯示在瀏覽器中。</p> </body> </html>
<head> 標(biāo)簽用于定義文檔的頭部，它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表。文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標(biāo)題、在 Web 中的位置以及和其他文檔的關(guān)系等。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會(huì)真正作為內(nèi)容顯示給讀者。 下面這些標(biāo)簽可用在 head 部分： <title>、<meta>、<link>、<style>、 <script>。 應(yīng)該把 <head> 標(biāo)簽放在文檔的開始處，緊跟在 <html> 后面，并處于 <body> 標(biāo)簽之前。 文檔的頭部經(jīng)常會(huì)包含一些 <meta> 標(biāo)簽，用來告訴瀏覽器關(guān)于文檔的附加信息。
<meta> 元素可提供有關(guān)頁面的元信息（meta-information），用來向?yàn)g覽器或搜索引擎描述頁面。比如文檔的描述和關(guān)鍵詞。它只可以放在head中。屬于元信息標(biāo)簽。 常見的meta有 Keywords(關(guān)鍵字) keywords用來告訴搜索引擎你網(wǎng)頁的關(guān)鍵字是什么。 <meta name="keywords"content="web前端,尚學(xué)堂培訓(xùn)"> description(網(wǎng)站內(nèi)容描述) description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。 <meta name="description"content="北京尚學(xué)堂,web前端培訓(xùn)"> author作者 標(biāo)注網(wǎng)頁的作者 <metaname="author" content="root,root@xxxx.com"> 標(biāo)簽嵌套 標(biāo)簽之間可以相互嵌套，但要注意嵌套順序
語義化標(biāo)簽 語義化：明白每個(gè)標(biāo)簽的用途（在什么情況下使用此標(biāo)簽合理）比如，網(wǎng)頁上文章的標(biāo)題就可以用標(biāo)題標(biāo)簽h1-h6,段落用p,地址用address等 好處： 1.更容易被搜索引擎收錄 2. 更容易讓屏幕閱讀器讀出網(wǎng)頁內(nèi)容 HTML中常用標(biāo)簽
HTML中常用標(biāo)簽 1.使用<img>元素將圖像添加到頁面 2.空標(biāo)記 3.必須屬性：src（存儲(chǔ)圖像的位置） 4.常用屬性：width，height，alt，title <imgsrc="URL"width="300" alt=”替換文本屬性”/> title定義了鼠標(biāo)經(jīng)過圖片時(shí)顯示的內(nèi)容，搜索引擎抓取圖片時(shí)，是根據(jù)title定義的內(nèi)容來分析圖片是什么的 alt當(dāng)圖片未能正常顯示時(shí)，用于給用戶的提示信息 超鏈接 1.使用<a></a>元素創(chuàng)建一個(gè)超鏈接 2.語法： <ahref="" target="" title=””>文本</a> href屬性：鏈接URL target屬性：目標(biāo)，可取值_blank,_self等 name屬性：錨點(diǎn)名稱 title屬性：定義了鼠標(biāo)經(jīng)過時(shí)的提示文字 |
|
|
