整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          全程軟件測試(一零七):HTML 語言入門學習—讀書筆記

          、 HTML 語言

          1 HTML 簡介

          HyperText Markup Language(超文本標記語言)

          • 標記也稱標簽,放在< >中。
          • 標記是英文單詞或縮寫,有固定含義,能被瀏覽器識別和翻譯。

          2 HTML 文檔的結構

          二、 常用 HTML 標記

          1 特殊字符標記

          2 段落標記

          <p 屬性=值>
          ------段(paragraph) (可以看作是空行)
          ------align 屬性可設置段落的對齊方式,如左對齊、居中、右對齊。

          3 換行標記

          <br>

          4 居中標記

          <center>需要居中的內容</center>

          5 字體標記

          <font face="字體樣式" color=字體顏色 size=字體大小>文字</font>

          6 格式標記

          <b>加粗</b>
          <u>下劃線</u>
          <i>傾斜</i>

          7 圖像標記

          <img src="images/adv_2.jpg" width="300" height="150" alt="明星演唱會開幕">
          ------image:圖片/像
          ------source:來源
          ------alternative:交替、變換

          8 鏈接標記

          <a href="register/register.html">[免費注冊]</a>
          ------anchor:錨,鏈接
          ------http references:參考的 http 地址

          9 表格標記

          9.1 表格的結構

          9.2 表格標記

          9.3 合并行或列

          10 表單標記

          10.1 典型應用

          • 注冊用戶
          • 收集信息
          • 反饋信息

          10.2 表單由控件組成

          10.3 表單中的標記

          10.3.1 表單標記

          10.3.2 控件標記

          樣式表(Cascading Style Sheets,層疊/級聯樣式表)
          ------用于設置控件屬性格式。
          ------行內嵌入 css 樣式表:<標記 style="">

          10.3.3 文本框控件

          10.3.4 密碼框控件

          10.3.5 單選按鈕控件

          10.3.6 復選框控件

          10.3.7 下拉列表控件

          10.3.8 列表框控件

          10.3.9 多行文本框/文本區域控件

          10.3.10 按鈕控件

          按鈕類型可為 submit、reset、button

          10.3.11 框架標記

          10.3.11 .1 創建框架中的每個子頁面窗口

          top.html
          left.html
          main.html

          10.3.11 .2 創建框架集

          改變框架內的頁面顯示

          單擊 left.html 中不同的按鈕,在 rightframe 中顯示不同的頁面
          使用 target 目標窗口屬性
          <a href=url target="要顯示的框架名">

          三、 Session 和 Cookie

          1 http 無狀態

          http 協議是無狀態的,本次請求和上次請求無法判斷是不是同一個人操作的,從而 http本身不會記住"過去的"數據。

          2 Session

          用于解決 http 無狀態問題。一般稱為“會話控制”,瀏覽器在第一次訪問服務器時,服務器會創建一個 session,然后同時為該 session 生成一個唯一的會話 sessionid。

          Session 存儲特定用戶會話所需的屬性及配置信息,當用戶在應用程序的 Web 頁之間跳轉時,存儲在 Session 中的變量將不會丟失,而是在整個用戶會話中一直存在下去。當用戶請求來自應用程序的 Web 頁時,如果該用戶還沒有會話,則 Web 服務器將自動創建一個Session 對象。當會話過期或被放棄后,服務器將終止該會話。Session 最常見的一個用法就是存儲用戶的首選項。

          3 Cookie

          有時也用其復數形式 Cookies,指某些網站為了辨別用戶身份、進行 session 跟蹤而儲存在用戶本地終端上的數據(通常經過加密)。

          Cookie 技術誕生以來,它就成了廣大網絡用戶和 Web 開發人員爭論的一個焦點。有一些網絡用戶,甚至包括一些資深的 Web 專家也對它的產生和推廣感到不滿,這是因為 Cookie的使用對網絡用戶的隱私構成了危害。因為 Cookie 是由 Web 務器保存在用戶瀏覽器上的小文本文件,它包含有關用戶的信息。當 Web 服務器創建了 Cookies 后,只要在其有效期內,當用戶訪問同一個 Web 服務器時,瀏覽器首先要檢查本地的 Cookies,并將其原樣發送給 Web服務器。

          查看 Cookie:

          一章: 初識Javascript

          >>>>

          一、Javascript是什么?

          Javascrip誕生于1995年,是一種直譯式腳本語言,是一種動態類型、弱類型、基于原型的語言。

          當然和java是沒有半毛錢關系的,比如雷鋒塔和雷鋒有什么關系?顯然是沒有關系的。javascript最初的名字是livescript,用來處理以前由服務器端語言(如 Perl)負責的一些輸入驗證操作,而在其發布的前夕,Netscape 為了搭上媒體熱炒 Java 的順風車,臨時把 LiveScript 改名為 JavaScript。

          1997年,以 JavaScript 1.1 為藍本的建議被提交給了歐洲計算機制造商協會(ECMA),隨后 ECMAScript成為了Javascript腳本語言的標準。

          雖然 JavaScript 和 ECMAScript 通常都被人們用來表達相同的含義,但 JavaScript 的含義卻比 ECMA-262 中規定的要多得多。一個完整的Javascript是ECMAScript(語言核心標準)與DOM(文檔對象模型)、BOM(瀏覽器對象模型)的集合。

          2006年,XMLHttpRequest被W3C正式納入標準。John Resig發布了jQuery。

          于2008年問世的谷歌V8引擎改變了這一局面。現代瀏覽器的崛起終結了微軟的壟斷時代!

          2009年AngularJS誕生,隨后被谷歌收購。

          2009年Ryan Dahl發布了NODE,新的時代在這一天悄然開啟。

          2010年backbone.js誕生。

          2011年React和Ember誕生。

          2014年,第五代HTML標準發布。2014年Vue.js誕生……前后端分離可謂大勢所趨。

          2015年,ECMAScript6面世,掀起了Javascript浪潮。

          ……


          >>>>

          二、Javascript能做什么?

          如今JavaScript是最流行的腳本語言,在Web世界里,只有JavaScript能跨平臺、跨瀏覽器驅動網頁,與用戶交互。

          github上javascript活躍度:

          而WEB的演化也從后端走向了前端:

          那javascript到底能做什么呢?

          如果大家對于學習JavaScript有任何的疑問都可以來問我,可以關注我的頭條號,里面有“問題咨詢”按鈕,如果需要JavaScript學習視頻,可以私信我“學習資料”便會自動回復下載地址。

          操作HTML元素

          ???響應用戶的操作

          ???處理發送數據

          ???實現局部刷新(ajax)

          ???解決瀏覽器問題

          ???提升用戶體驗

          當然隨著NodeJS的問世,Javascript把大爪伸向了服務端,從此全棧工程師成為了大勢所趨!!而數據挖掘、智能家居、智能驅動、桌面應用、IDE開發、WEB APP等等也不在話下了。


          >>>>

          三、為什么要學好原生Javascript?

          2015年是前端行業的分水嶺,過去只需要會html、css、js和jquery就可以勝任前端開發的日子已經一去不復返了。大前端時代已然來臨,全棧化已是大勢所趨。PC端網頁開發、移動端開發、服務端開發、原生APP開發。前端如今已經脫離了茹毛飲血、刀耕火種的原始社會,開始步入了工業時代,工程化(npm、bower、grunt、gulp、webpack),模塊化(Commonjs( Node.js)、AMD(RequireJs)、CMD(Seajs)、ES6模塊),組件化(Vue.js、Angularjs、React、ReactNative)。組件化的概念在后端早已存在多年,只不過近幾年隨著前端的發展,這個概念在前端開始被頻繁提及,特別是在MV*的框架中。組件化極大提高開發效率和后期維護的效率。

          隨之而來的就是大批量“代碼的搬運工”(說的通俗一點就是“碼農”,說的高大上一點叫做“框架熟練工”)誕生。這一批人是做什么的呢?說的好聽點叫開發項目,說的直白點就是拿別人的現成工具來快速的搭建一個項目。說白了,四個現代化的誕生就是為了提高開發效率的,但是千萬不能認為企業需要的就是這樣的人。下面分享一個在知乎上看的的例子:

          這就是典型的框架熟練工,三五年之后終將被淘汰,因為你的學習速度更不上互聯網的發展速度了,而且當現有的框架滿足不了企業項目需求的時候,不能夠提供解決方案,所有終將沒有未來,只是曇花一現。

          那么什么才是長久之計呢?肯定是學好原生,學到能夠輪子,即自己能夠獨立封裝插件、架構框架的高度,我們不需要重復造輪子,但是需要懂得造輪子的方法。當你達到這樣的高度的時候,不管前端市場如何演變,其實都萬變不離宗,因為你的學習、吸收速度很快了,或者也可能你就是推進演變的人!


          >>>>

          四、怎么學習原生Javascript?

          對于很多初學者來說,原生javascript無疑是一座很難翻越的大山(“javascrip從入門到放棄”)。其實也能理解,因為現有的很多教條式的教學及字典式書籍讓大部分初學者莫不著頭腦,即使背完了一本書發現自己還是啥都寫不出來,然后寫不出來就等于不會。很多大家公認的經典書籍(出于對經典的尊重就不一一羅列了),其實也都只是對javascript基礎知識的羅列而已,而并沒有真正結合具體的項目案例進行講解,然而編程無疑是一個大量練習實踐的過程。

          本書《原生Javascript立體學習指南》將打破傳統的教學模式,通篇以知識點結合案例的形式,讓初學者吃透每個知識點,并能及時運用到實際項目中,真正的學以致用,進而鍛煉提高邏輯思維,最終達到封裝插件、開發框架的高度。

          明確一個概念什么才算入門?我的定位是能找到一份前端工作才叫入門。接下來我制定了一個自學前端的學習路徑,避免一些自學的朋友走彎路,大概能在4個月左右從小白到入門,如果你有基礎更好了。

          第一階段,牛刀小試(2周左右)

          都知道要學html,css,我說一下要掌握的核心點

          標簽:p,div,a,span,img,input,link,script,ul,li。其它的大概過一遍,有個印象就可以了。這幾個標簽能解決你工作95%以上的需要。

          理解塊元素/行類元素文本流盒子模型概念。

          css重點掌握選擇器,選擇器層級,浮動,清除浮動,定位,偽類,偽元素,背景,字體,顏色,寬高,margin,padding的設置。

          基本的概念搞定后,就可以仿造一些知名網站寫靜態demo,如美團優酷,大概寫兩個首頁,就可以進入第二階段了。

          或許到這里,你已經小有成就感,那就繼續加油吧!

          我自己是一名從事了多年開發的web前端老程序員,目前辭職在做自己的web前端私人定制課程,今年我花了一個月整理了一份最適合2020年學習的web前端學習干貨,各種框架都有整理,送給每一位前端小伙伴,想要獲取的可以關注我的頭條號并在后臺私信我:前端,即可免費獲取。

          第二階段,初入江湖(2周左右)

          這一階段是最為重要的階段,前端重頭戲JavaScript,決定你放不放棄自學,大部分同學在這個階段就退縮了。

          dom部分:dom選擇器,className,style,屬性操作。

          es部分:注釋,定義變量,數據類型(基本類型和引用類型),運算符,流程控制,函數,內置函數。

          這個階段如果你能學會斷點調試就會輕松很多。

          基礎掌握后,你可以寫個輪播,或者做個小游戲貪吃蛇。

          切記,切記,切記不要太在意一些花里花哨的東西,更多注重程序的邏輯。

          建議買本犀牛書打基礎。

          第三階段,小露鋒芒(1周左右)

          這個階段比較輕松,jquery + bootstrap不要刻意去背里面的東西,做的時候查文檔就可以了。用這兩個庫配合仿寫幾個頁面,或者自己寫幾個頁面。

          這時候你可能已經體會到庫給我們帶來的方便了,再也不想用原生js了,但我要告訴你,少年你的想法很危險,重點還是要放在原生js,框架都是浮云。

          第四階段,漸入佳境(3周左右)

          這個階段主要是學習前端的數據交互,可能你很難受,又想放棄了。

          我們需要服務器來提供數據才能真正感受到,這時候Node登場,首先學習express,具體怎么搞,自己去學習,核心知識請求,響應,路由,中間件。

          前端需要學習ajax,先理解原生的ajax,然后再使用jquery封裝好的ajax來請求數據,自己寫一些動態頁面,體會數據交互的過程。

          理解跨域httpjsonp的一些概念。

          第五階段,勢不可擋(1周左右)

          這個階段你可能也比較痛苦,挺過了你就漸漸比較舒服了。

          深入理解面向對象閉包this三座大山。

          自己嘗試封裝一些插件,像之前寫的輪播。

          第六階段,所向披靡(3天左右)

          git,svn,建議你開通一個github賬號。

          第七階段,爐火純青(6周)

          這個階段學的好不好,關系到找工作了。

          首先理解webpack,入口,出口,loader,plugin這些基礎概念要知道,不要求精通,大概知道什么配置干什么的。

          然后react、angular、vue里選擇一個深入學習,其他了解一下就可以了,建議選擇vue,上手快,文檔清晰,國內市場用的也比較多。先裝個vue-cli自己玩一下,然后照著文檔學習vue技術棧的東西

          指令

          方法

          計算屬性

          自定義組件

          組件通訊

          理解響應式

          vuex

          element-ui

          axios

          基礎過一遍后在github上找優秀項目學習,如vue2仿餓了么鏈接;https://github.com/bailicangdu/vue2-elm 然后自己寫一些demo。

          作者:大橙子思密達

          第八階段,登峰造極(2周)

          這個階段主要針對移動端,css3,和一些h5的新標簽,重點關注移動端適配,媒體查詢,移動端布局,flex。

          第九階段,備戰江湖(1周)

          準備面試,簡歷(項目經驗,不能少),前端面試題鏈接:https://www.jianshu.com/go-wild?ac=2&url=https%3A%2F%2Fyuchengkai.cn%2Fdocs%2Ffrontend%2F

          多投簡歷,多總結。

          祝好運,希望想入坑前端的同學,早日找到自己心儀的工作。



          作者:程序員的青春
          鏈接:https://www.jianshu.com/p/1dfc6b12c272


          主站蜘蛛池模板: 国内偷窥一区二区三区视频| 美女AV一区二区三区| 国产福利一区二区三区在线观看| 中文字幕亚洲乱码熟女一区二区| 色欲AV蜜臀一区二区三区| 精品人妻少妇一区二区三区不卡| 国产亚洲情侣一区二区无码AV| 黑人大战亚洲人精品一区| 福利在线一区二区| AV怡红院一区二区三区| 亚洲av无码一区二区三区观看 | 亚洲中文字幕一区精品自拍| 国产精品成人一区无码| 日本精品一区二区三区在线观看| 国产乱码精品一区二区三区| 久久亚洲综合色一区二区三区| 国产一区风间由美在线观看| 91午夜精品亚洲一区二区三区| 日韩一区二区三区在线观看| 亚洲一区二区三区在线观看网站| 午夜精品一区二区三区免费视频| 波多野结衣一区二区三区高清av| 一区二区亚洲精品精华液| 精品亚洲A∨无码一区二区三区| 免费一区二区三区在线视频| 精品国产AV无码一区二区三区| 国产美女一区二区三区| 秋霞无码一区二区| 麻豆亚洲av熟女国产一区二| 波多野结衣一区二区三区aV高清| 日韩av片无码一区二区三区不卡| 精品理论片一区二区三区| 久久精品日韩一区国产二区| 亚洲码欧美码一区二区三区| 一区二区三区在线观看| 国产一区二区好的精华液 | 亚洲爆乳精品无码一区二区三区| 国产一区二区电影| 久久精品黄AA片一区二区三区| 无码精品黑人一区二区三区| 亚洲第一区二区快射影院|