web前端學(xué)習(xí)報告

1、精選優(yōu)質(zhì)文檔-傾情為你奉上web前端學(xué)習(xí)報告 篇一：web前端學(xué)習(xí)總結(jié) Web總結(jié) 一.名詞解釋 1. 橫切 在固定頁面的寬度并且對高度沒有限制的容器稱為一個標準橫切 2. 留白 兩個容器或碎片之間的上、下、左、右的空白距離 3. 繼承 元素可以從其父級元素中獲得一些可為自己使用的屬性或值。 4. 圖片定位 把圖片元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中，利用CSS中對圖片進行遮罩屬性，多用于頁面中的修飾圖 5. 底圖 頁面中在標簽中使用的背景圖 6. 齊底線 用于區(qū)分橫切或碎片結(jié)束的線或圖 7. 頁面結(jié)構(gòu) 頁面的基礎(chǔ)框架，由橫切、布局元素組成 8. 焦點區(qū) 最易注意的區(qū)域 9.

2、導(dǎo)航 在頁面中具有導(dǎo)向性的鏈接集合 10. 頭圖 頁面主題圖片 11. 間距 碎片或文字間的距離 12. 行高 文字段落中行與行之間的距離 13. 首行縮進 文字段落首行縮進 14. 浮動 使被定義的區(qū)域脫離正常的頁面文檔流 15. 碎片 由文字、圖片組合成的內(nèi)容區(qū)域 16. 通欄廣告 與頁面內(nèi)容區(qū)同寬的廣告區(qū)域 17. 功能按鈕 具有交互屬性的按鈕 18. 私有樣式 當(dāng)前頁面獨立使用的樣式，不具備公用性 19. 水平居中 在頁面中的某個元素處于父級的上下或左右的相同距離 20. 標準頭 定義相同的頁面頭或尾元素集合二.文本格式化 1. 段落：p 2. 斜體：address（聯(lián)系信息）em（強

3、調(diào)）i（突出不同）cite（引用）dfn（首次定義術(shù)語） 3. 粗體：strong（重要）b（提醒） 4. 圖片塊：figure 5. 引述文段，段落縮進：blockquote 6. 背景顏色：mark 7. 虛線下劃線：abbr 8. 上標下標：sub/sup 9. 下劃線：ins 10. 刪除線：del（標記已刪除內(nèi)容）s（標記不準確內(nèi)容） 11. 等寬字體：code 12. 預(yù)格式化：pre 13. 字號減小，表注釋：small 14. 時間：time 15. 換行：br 16. html5定義區(qū)塊：header nav article section aside footer div

4、span 三.表單表格 1. . 2. 表單元素的組織：. 3. 創(chuàng)建各種框: 注：textpassword/url/tel/email Id:為了讓對應(yīng)的標簽識別，添加CSS Name：為了讓服務(wù)器和腳本識別，通常與id設(shè)為一樣 Size：文本框大小 Maxlength：能輸入的最大字符數(shù) Pattern：正則表達式 4. 添加標簽： ? 5. 單選按鈕： 北京 上海 注：id各自唯一，name必須相同。checked：默認選擇 6. 下拉框： 北京 上海 成都 注：size:選擇框的高度 multiple：允許多選 selected：默認選擇 用?對選擇框進行分組7. 上傳文件： 注：si

5、ze：輸入路徑和文件名的字段的寬度 8. 禁用表單元素： 9. 創(chuàng)建提交按鈕： 創(chuàng)建帶圖像的提交按鈕：點擊這里 創(chuàng)建圖像按鈕： Submitreset重置 10. 文本區(qū)域：請在此輸入字符 11. 表格 : . . . . . 四.文本格式化 1. font：（斜體 粗體 小型大寫字母） 字體大小 行距 字體集（必有）; 2. 文本背景： background：#foc url（）repeat-x scroll 0 0； 3. 字間距：word-spacing:12px; 4. 字偶距：letter-spacing:12px; 5. 縮進增加：text-indent:12px; 6. 小型大寫

6、字母: font-variant:small-caps; 7. 文本對齊：text-align:left；適用于block，inline-block 8. 單詞大小寫: text-transform:capitalize/uppercase/lowercase 9. 文本上的線：text-decoraion:underline/overline/line-through; 11. 空格：white-space:pre/nowrap（非斷行空格）； 12. h316px; h512px; verdana,Geneva,sans-serif; 13. 列表屬性： lilist-style:url

7、inside square; 五.CSS布局 1. width：不包括padding，border，margin；max-width設(shè)置外圍限制； 2. 浮動：float:left; 清除浮動：clear:both;3. 設(shè)置邊框： border:dotted 4px red; 4. 使元素對齊：vertical-align:baseline/middle/text-bottom. 5. 顯示：display:black/inline/inline-block; 6. 顯示：visibility:visible/hiddle; 7. 相對定位：position:relative; top:5p

8、x; 相對于該元素的原始位置 8. 絕對定位：position:absolute; top:5px; 相對于body或離他最近定位的祖先元素 9. 三維位置：z-index:50; 越大的在最上面 10. 廠商前綴：-webkit- moz- ms- o- 11. 創(chuàng)建圓角： -moz-border-radius-topleft:50px; -webkit-border-top-left-radius:50px; border-top-left-radius:50px; border-radius:50px; 12. 創(chuàng)建橢圓角：? ? border-radius:40px/20px; （x半

9、徑/y半徑） 13. 創(chuàng)建圓形：? ? border-radius:50px; 50px為元素半徑大小 14. 文本加陰影：text-shadow: 2px 5px 5px #999; x/y/模糊半徑 15. 元素加陰影：box-shadow:2px 5px 5px #999; 5px 10px 2px #555; 16. 多重背景：background:#000 url 50% 102% no-repeat,#222 url 12px -150px repeat-x; 17. 透明度： opacity:.5; 01 透明不透明 18. 漸變背景：background:linear-grad

10、ient; 六.html5視頻音頻 1. html5支持3種視頻：.ogg/.ogv .mp4/.m4v .webm 2. 添加視頻： 視頻屬性：src autoplay controls muted loop poster width height preload 3. 為視頻添加多個來源： /嵌入Flash動畫 下載該視頻 4. html5支持5中音頻：.ogg .mp3 .wav .aac .mp4 5.添加音頻： 音頻屬性：src autoplay controls muted loop preload 。多個來源同video。 七.一些約定 我們結(jié)合常用的一些命名習(xí)慣，再結(jié)合CSS的

11、實際應(yīng)用，整理出一些較好的命名習(xí)慣。 1. 樣式名稱首字母統(tǒng)一為小寫字母，不能為數(shù)字，下劃線及特殊字符；2. 樣式名盡量語義化或簡寫； 3. 樣式名需要組合拼寫時，采用全部小寫拼寫并使用下劃線連接，即：all_keyword； 4. 使用px為基本計量單位； 5. 頁面中空格的使用：全角：中文空格 半角； 6. 項目完成包中，文件夾及文件名稱全部采用小寫字母，不使用中文文件名； 7. 減少DIV的嵌套層數(shù)； 8. 給重要圖片加上alt屬性；給重要的元素和截斷的元素加上title； 9. 使用正確的注釋方法（詳見“注釋”章節(jié)）； 10. 特殊情況下要求表現(xiàn)和內(nèi)容分離，代碼中不要涉及任何表現(xiàn)的元素

12、，例如：style、font 等； 11. 雙標記簽都要有開始和結(jié)束標簽，單標記標簽的后面一定要加“ /”,例如：等， 并且有正確的層次； 12. 其它特殊符號： 1) 八.命名空間 外掛樣式名稱 全局： 全局樣式為全站公用，為頁面樣式基礎(chǔ)，頁面中必須包含。 結(jié)構(gòu)： 頁面結(jié)構(gòu)類型復(fù)雜，并且公用類型較多時使用。多用在首頁級頁面和產(chǎn)品類頁面中。 私有： 獨立頁面所使用的樣式文件，頁面中必須包含。 模塊 產(chǎn)品類頁面應(yīng)用，將可復(fù)用類模塊進行剝離后，可與其它樣式配合使用。 默認 文章 圖片 下載 主題 實現(xiàn)換膚功能時應(yīng)用。 補丁 基于以上樣式進行的私有化修補。 常用名稱 頁面結(jié)構(gòu) 容器: contain

13、er 頁頭：header 內(nèi)容：content/container/content 頁面主體：main 頁尾：footer 導(dǎo)航：nav 側(cè)欄：sidebar 欄目：column 頁面外圍控制整體布局寬度：wrapper篇二：web前端開發(fā)學(xué)習(xí)路線 首語：剛接觸前端的小伙伴可能會不理解，html是什么?html其實是web前端的基礎(chǔ)，下面會為大家講解什么是前端，以及如何才能把前端學(xué)好。 我們應(yīng)該怎么學(xué)習(xí)web前端開發(fā)這門技術(shù)呢 ？ 現(xiàn)在很多小伙伴喜歡在互聯(lián)網(wǎng)上找視頻資料學(xué)習(xí)網(wǎng)頁制作，但是光看視頻你是不可能學(xué)會網(wǎng)頁制作的，沒有人指導(dǎo)你，而且很多視頻已經(jīng)過時了 ，并沒有什么用! 如果你真的想學(xué)習(xí)網(wǎng)

14、頁制作這門技術(shù)，你可以來這個裙，前面是494，中間是六思，最后是久叁肆！ 在這里有最新的HTML課程 免費學(xué)習(xí) 也有很多人指導(dǎo)你進步，不需要你付出什么，只要你是真心想學(xué)習(xí)的，隨便看看的就不要加了，加了也是浪費大家的時間 。 Web前端的學(xué)習(xí)誤區(qū) 網(wǎng)頁制作是計算機專業(yè)同學(xué)在大學(xué)期間都會接觸到的一門課程，而學(xué)習(xí)網(wǎng)頁制作所用的第一個集成開發(fā)環(huán)境想必大多是Dreamweaver，這種所見即所得的“吊炸天”IDE為我們制作網(wǎng)頁帶來了極大的方便。 入門快、見效快讓我們在不知不覺中已經(jīng)深深愛上了網(wǎng)頁制作。此時，很多人會陷入一個誤區(qū)，那就是既然借助這么帥的IDE，通過鼠標點擊菜單就可以快速方便地制作網(wǎng)頁。 那

15、么我們?yōu)槭裁催€要去學(xué)習(xí)HTML、CSS、JavaScrpt、jQuery等這些苦逼的代碼呢?這不是舍簡求繁嗎? 但是隨著學(xué)習(xí)的深入，就會發(fā)現(xiàn)我們步入了一種窘境過分的依賴IDE導(dǎo)致我們不清楚其實現(xiàn)的本質(zhì)，知其然但不知其所以然。 因此在頁面效果出現(xiàn)問題時，我們便手足無措，更不用提如何進行頁面優(yōu)化以及完成一些更高級的應(yīng)用了。其原因是顯而易見的聰明的IDE成全了我們的惰性， 使我們忽略了華麗的網(wǎng)頁背后最本質(zhì)的內(nèi)容code。 青春是學(xué)習(xí)的季節(jié)，青春是奮斗的歲月，不要停止我們前進的步伐，因為青春的路正長。有空的時候靜下心來好好看看書，回頭想想自己走過的路，為自己的人生做好一個規(guī)劃，把自己的理想銘刻在心中，

16、做一個甘于寂寞，敢于創(chuàng)新、干勁十足的年青人。我們要抓住金色青春，讓人生中留下永恒的光輝！ 前端開發(fā)前景怎么樣？ 行業(yè)發(fā)展好 從我們身邊的方方面面考慮，互聯(lián)網(wǎng)行業(yè)無疑是現(xiàn)在發(fā)展前景最好的行業(yè)之一。潭州教育致力于改變中國IT實踐教學(xué)模式，引領(lǐng)中國IT教學(xué)技術(shù)標準與人才培養(yǎng)標準。讓想學(xué)習(xí)的人隨時隨地都可以進行學(xué)習(xí)！ 人才需求大 互聯(lián)網(wǎng)對人們的影響越來越大，各類職業(yè)也需求更多，前端的人才需求比以前也有了質(zhì)的飛躍。我們希望從業(yè)者：“我們不是為了學(xué)技術(shù)而去學(xué)技術(shù)，我們學(xué)技術(shù)是為了能更好去做產(chǎn)品”。最后引用喬布斯的話，Web就是未來，我們作為前端開發(fā)工作者也是未來。相信Web前端開發(fā)的明天會更好。篇三：最新

17、web前端學(xué)習(xí)路線 最新web前端的學(xué)習(xí)路線 程序設(shè)計之道無遠弗屆，御晨風(fēng)而返。 杰佛瑞 · 詹姆士 很多前端初學(xué)者總會問以下兩個問題： 第一種一直在問：如何學(xué)習(xí)前端？ 第二種總說：前端很簡單，就那么一點東西。 我從沒有聽到有人問：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師。 詳細了解成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？ 何為前端工程師 前端工程師，也叫Web前端開發(fā)工程師。他是隨著web發(fā)展，細分出來的行業(yè)。Web前端開發(fā)技術(shù)主要包括三個要素：HTML、CSS和JavaScript!HTML 甚至不是一門語言，他僅僅是簡單的標記語言! CSS 只是無類型的樣式修飾語言。當(dāng)

18、然可以勉強算作弱類型語言。Javascript 的基礎(chǔ)部分相對來說不難，入手還算快。 此篇文章中就HTML、CSS、JS都有哪些區(qū)別？進行了全面的解讀！前端開發(fā)的入門門檻其實很低，與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。也正因為如此，前端開發(fā)領(lǐng)域有很多自學(xué)成“才”的同行，但大多數(shù)人都停留在會用的階段，因為后面的學(xué)習(xí)曲線越來越陡峭，每前進一步都很難。 現(xiàn)在市場很需要優(yōu)秀的、高級的前端工程師。 一方面是因為這是一個比較新的細分行業(yè)，而且前端程序員大都自學(xué)一部分，知識結(jié)構(gòu)不系統(tǒng);另一方面，大學(xué)里面沒有這種課程，可以加入web前端學(xué)習(xí)君羊：前面數(shù)字是五一四，中間數(shù)字是一六七

19、，后面三位數(shù)字是六七八，將數(shù)字串聯(lián)起來，了解學(xué)習(xí)更多在學(xué)校學(xué)不到的技術(shù)干貨。 如何學(xué)習(xí)前端知識 我們生活在一個充滿規(guī)則的宇宙里面。社會秩序按照規(guī)則運行，計算機語言幾乎全部是規(guī)則的集合。計算機前輩們定義規(guī)則，規(guī)則約束我們，我們用規(guī)則控制數(shù)據(jù)。大部分時候，對數(shù)據(jù)的合理控制，來自于你對規(guī)則的掌握。 學(xué)習(xí) HTML，CSS 應(yīng)該先跟著書仔細、扎實的學(xué)一遍。然后就需要做大量的練習(xí)，做各種常規(guī)的、奇怪的、大量的布局練習(xí)來捆固、理解自己的知識。而學(xué)習(xí) Javascript 首先要知道這門語言可以做什么，不能做什么，擅長做什么，不擅長做什么! 如果你只想當(dāng)一個普通的前端程序員，你只需要記住大部分 Javasc

20、ript 函數(shù)，做一些練習(xí)就可以了。 如果你想當(dāng)深入了解Javascript，你需要了解 Javascript 的原理、機制。需要知道他們的本源，需要深刻了解 Javascript 基于對象的本質(zhì)。還需要深刻了解瀏覽器宿主下的 Javascript 的行為、特性。 初學(xué)者全面了解JavaScript，用心讀這篇文章 掌握六大JavaScript框架，薪水就是比同級別高！ 作為一個優(yōu)秀的前端工程師還需要深入了解、以及學(xué)會處理 Javascript 的這些缺陷。 優(yōu)秀的前端工程師應(yīng)具備什么條件 首先，優(yōu)秀的Web前端開發(fā)工程師要在知識體系上既要有廣度和深度!做到這兩點，其實很難。所以很多大公司即使

21、出高薪也很難招聘到理想的前端開發(fā)工程師。技術(shù)非黑即白，只有對和錯，而技巧則見仁見智。 在以前，會一點Photoshop和Dreamweaver的操作，就可以制作網(wǎng)頁。 成為一個優(yōu)秀的前端工程師，都需要具備哪些特質(zhì)？ 現(xiàn)在，只掌握這些已經(jīng)遠遠不夠了。無論是開發(fā)難度上，還是開發(fā)方式上，現(xiàn)在的網(wǎng)頁制作都更接近傳統(tǒng)的網(wǎng)站后臺開發(fā)，所以現(xiàn)在不再叫網(wǎng)頁制作，而是叫Web前端開發(fā)。 Web前端開發(fā)在產(chǎn)品開發(fā)環(huán)節(jié)中的作用變得越來越重要，而且需要專業(yè)的前端工程師才能做好，它的主要職能就是把網(wǎng)站的界面更好地呈現(xiàn)給用戶。優(yōu)秀的Web前端開發(fā)工程師應(yīng)該具備快速學(xué)習(xí)能力 Web發(fā)展的很快，甚至可以說這些技術(shù)幾乎每天都在

22、變化!如果沒有快速學(xué)習(xí)能力，就跟不上 Web發(fā)展的步伐。前端工程師必須不斷提升自己，不斷學(xué)習(xí)新技術(shù)、新模式;僅僅依靠今天的知識無法適應(yīng)未來。Web的明天與今天必將有天壤之別，而前端工程師的工作就是要搞清楚如何通過自己的Web應(yīng)用程序來體現(xiàn)這種翻天覆地的變化。 說到這里，我想起了一個大師說過的一句話：對于新手來說，新技術(shù)就是新技術(shù)。 對于一個高手來說，新技術(shù)不過是就技術(shù)的延伸。 優(yōu)秀的前端工程師需要具備良好的溝通能力 因為前端工程師至少都要滿足四類客戶的需求： 1、產(chǎn)品經(jīng)理。這些是負責(zé)策劃應(yīng)用程序的一群人。他們會想出很多新鮮的、奇怪的、甚至是不可是實現(xiàn)的應(yīng)用。一般來說，產(chǎn)品經(jīng)理都追求豐富的功能。

23、 2、UI設(shè)計師。這些人負責(zé)應(yīng)用程序的視覺設(shè)計和交互模擬。他們關(guān)心的是用戶對什么敏感、交互的一貫性以及整體的好用性。一般來說，UI設(shè)計師于流暢靚麗、但并不容易實現(xiàn)的用戶界面，而且他們經(jīng)常不滿前端工程師造成 1px 的誤差。 3、項目經(jīng)理。這些人負責(zé)實際地運行和維護應(yīng)用程序。項目管理的主要關(guān)注點，無外乎正常運行時間、應(yīng)用程序始終正?？捎玫臅r間、性能和截止日期。項目經(jīng)理追求的目標往往是盡量保持事情的簡單化，以及不在升級更新時引入新問題。 4、最終用戶。指的是應(yīng)用程序的主要消費者。盡管前端工程師不會經(jīng)常與最終用戶打交道，但他們的反饋意見至關(guān)重要。最終用戶要求最多的就是對個人有用的功能，以及競爭性產(chǎn)品

24、所具備的功能。 總結(jié) 要做優(yōu)秀的前端工程師，還需要繼續(xù)努力：高性能網(wǎng)站建設(shè)指南、Yahoo工程師的網(wǎng)站性能優(yōu)化的建議、“YSLOW”性能優(yōu)化建議、網(wǎng)站重構(gòu)、Web開發(fā)敏捷之道、“ jQuery 庫”、“前端框架”、“HTML5”、“CSS3” 這些都要深入研究! 萬事開頭難！如果你能到這個境界，剩下的路自己就可以走下去了。人們常說：不想當(dāng)裁縫的司機，不是個好廚師。 在成為一個優(yōu)秀的前端工程師的道路上，充滿了汗水和辛勞，如果你對前端開發(fā)有更多的見解以及不同的意見，歡迎留言將您的見解分享給所有web前端開發(fā)愛好者。 程序設(shè)計之道無遠弗屆，御晨風(fēng)而返。 杰佛瑞 · 詹姆士 現(xiàn)在互聯(lián)網(wǎng)的大環(huán)

25、境的發(fā)展如日中天，網(wǎng)絡(luò)已經(jīng)深入到每個人生活的的各個方面，各種項目層出不窮，以及各種定制化的ui風(fēng)格神馬的，PC端、手機端、mobile端，各種兼容問題真的很浪費時間，大家在不斷的摸索中發(fā)現(xiàn)，把html+css+js這部分工作獨立出來一個新的崗位來處理。發(fā)展前景我是看好的，對于一個技術(shù)行業(yè)，我認為首先如何提升自己的個人能力是保持行業(yè)發(fā)展的源動力。沒有真是過硬的技術(shù)，前景發(fā)展都是免談。 那么很多情況又是這樣： 第一種一直在問：如何學(xué)習(xí)前端？ 第二種總說：前端很簡單，就那么一點東西。 我從沒有聽到有人問：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師。 詳細了解成為一個優(yōu)秀的前端工程師，都需要具備哪些特

26、質(zhì)？ 何為前端工程師 前端工程師，也叫Web前端開發(fā)工程師。他是隨著web發(fā)展，細分出來的行業(yè)。Web前端開發(fā)技術(shù)主要包括三個要素：HTML、CSS和JavaScript! HTML 甚至不是一門語言，他僅僅是簡單的標記語言! CSS 只是無類型的樣式修飾語言。當(dāng)然可以勉強算作弱類型語言。Javascript 的基礎(chǔ)部分相對來說不難，入手還算快。 此篇文章中就HTML、CSS、JS都有哪些區(qū)別？進行了全面的解讀！ 前端開發(fā)的入門門檻其實很低，與服務(wù)器端語言先慢后快的學(xué)習(xí)曲線相比，前端開發(fā)的學(xué)習(xí)曲線是先快后慢。也正因為如此，前端開發(fā)領(lǐng)域有很多自學(xué)成“才”的同行，但大多數(shù)人都停留在會用的階段，因為后面的學(xué)習(xí)曲線越來越陡峭，每前進一步都很難。 現(xiàn)在市場很需要優(yōu)秀的、高級的前端工程師。 一方面是因為這是一個比較新的細分行業(yè)，而且前端程序員大都自學(xué)一部分，知識結(jié)構(gòu)不系統(tǒng);另一方面，大學(xué)里面沒有這種課程，可以加入web前端學(xué)習(xí)君羊：前面數(shù)字是五一四，中間數(shù)字是一六七，后面三位數(shù)字是六七八，將數(shù)字串聯(lián)起來，了解學(xué)習(xí)更多在學(xué)校學(xué)不到的技術(shù)干貨。 如何學(xué)習(xí)前端知識 我們生活在一個充滿規(guī)則的宇宙里面。社會秩序按照規(guī)則運行，計算機語言幾乎全部是規(guī)則的集合。計算機前輩們定義規(guī)