日,有不少的程序員問w3cschool這邊,前端開發應該怎么學?
有個小白程序員表示,自己走了很多彎路,學java開發沒學透不能就業,現在學前端又不知道如何下手,前后算起來浪費了不少的時間。
針對此問題,下面w3cschool就給程序員小伙伴們答疑解惑,并分享一些干貨。
前端有三架馬車你一定要學會“駕馭”,HTML+CSS+Javascript。
照目前看來,網上各種前端學習資料又多又雜,確實讓不少入門前端的小伙伴不知所措。要選什么學習資料?如何入門前端開發?
關于視頻的選擇,直接網上搜“30 Days to Learn HTML & CSS”這個視頻來看。
這個視頻是國外的前端開發特產,大小有1G多吧!
前端開發可以照前端開發的視頻進行實戰訓練,建議可以一邊開著NotePad++?,一邊看視頻,一邊敲代碼。
另外,可以用有道云,或者是印象筆記稍微做點記錄,這會加快你對html、css的學習。
當你咨詢了很多的前端工程師,他們都會推薦你從經典的w3cschool基礎教程開始,把上面的課程刷一遍。
通過前面兩步的學習,你基本上算是入門html啦。
但相信也會有些程序員覺得很枯燥,那不妨可以嘗試w3cschool新開發的html微課。
比如之前的《刀塔傳奇》,很多人每天刷副本都可以樂此不疲,因為游戲升級通關是比較有趣的。
w3cschool微課同樣采用了闖關刷副本的模式,你通過每天有趣的刷副本闖關,就可以掌握html重點的概念和編程技能。
會有些前輩會給你推薦《DOM編程藝術》、《Javascript權威指南》、《Javascript高級程序設計》、《鋒利的JQuery》等,但對于新手來說似乎略難。
不妨去看Head first html, xhtml & CSS這兩本簡直是神書,真心經典!
HP是世界上最好的語言,這是一個老梗。
有不少學習PHP的程序員后來去做了前端開發,畢竟近些年前端開發還是蠻吃香的。
學習PHP不僅僅要學習html,而且還要學習CSS。
CSS是萬維網聯盟在 HTML 4.0 之外提出,目的是為了讓CSS完成樣式與內容的分離。
那么,CSS如何入門呢?w3cschool在這里分享幾個方法:
w3cschool官方本身就有CSS教程,我們看教程的目的主要還是要了解CSS到底是干什么用的。
其實,用一句簡單的話來說,改變我們看的網頁的樣子.。
w3cschool新開發了CSS微課,這可能是很多程序員小伙伴所需要的。
CSS直接抓住了CSS教程中比較核心的一些概念和語法,并且有實戰的訓練習題。
其內容包括了CSS基礎、CSS文本樣式、CSS屬性、CSS定位和布局,讓你系統、立體地全面認識CSS。
CSS微課實現了游戲化的編程體驗,關卡是循序漸進的,這迫使你不能跳躍而忽略一些重要的編程知識。
其中,習題類型包含了判斷題、選擇題、實戰訓練題。
理論離不開實戰,CSS微課做到了例子多,概括技術全面。
當你可以通關的時候,你已經對CSS算是有一個比較深刻的認識,也掌握了一定的CSS編程技能。
學編程一定要讓編程本身變得有趣,所以大可以先玩編程。
用CSS微課學習是一種有趣化的方法。
另外,閱讀《css禪意花園》,就當成一本故事書看,隨便翻翻你會發現css確實很好玩的。
文本標記語言 (英語:Hypertext Markup Language,簡稱:HTML ) 是一種用來結構化 Web 網頁及其內容的標記語言。網頁內容可以是:一組段落、一個重點信息列表、也可以含有圖片和數據表。正如標題所示,本文將對 HTML 及其功能做一個基本介紹。
HTML 不是一門編程語言,而是一種用于定義內容結構的標記語言。HTML 由一系列的元素(elements)組成,這些元素可以用來包圍不同部分的內容,使其以某種方式呈現或者工作。 一對標簽( tags)可以為一段文字或者一張圖片添加超鏈接,將文字設置為斜體,改變字號,等等。 例如,鍵入下面一行內容:
學前端,關注艾編程
可以將這行文字封裝成一個段落(paragraph)元素來使其在單獨一行呈現:
<p>學前端,關注艾編程</p>
讓我們深入探索一下這個段落元素。
這個元素的主要部分有:
屬性應該包含:
注:不包含 ASCII 空格(以及 " ' ``=<>` )的簡單屬性值可以不使用引號,但是建議將所有屬性值用引號括起來,這樣的代碼一致性更佳,更易于閱讀。
也可以將一個元素置于其他元素之中 —— 稱作嵌套。要表明貓咪非常暴躁,可以將 “艾編程” 用 <strong> 元素包圍,爆字將突出顯示:
<p>學編程,關注<strong>艾編程</strong>:)</p>
必須保證元素嵌套次序正確:本例首先使用 <p>標簽,然后是<strong>標簽,因此要先結束<strong>標簽,最后再結束</p>標簽。以下這個示例就是一個錯誤的示范,這樣是不對的:
<p>學編程,關注<strong>艾編程</p></strong>
元素必須正確地開始和結束,才能清楚地顯示出正確的嵌套層次。否則瀏覽器就得自己猜測,雖然它會竭盡全力,但很大程度不會給你期望的結果。所以一定要避免!
不包含任何內容的元素稱為空元素。比如 `` 元素:
<img src="images/icodingedulgo.png" alt="艾編程logo">
本元素包含兩個屬性,但是并沒有 </img> 結束標簽,元素里也沒有內容。這是因為圖像元素不需要通過內容來產生效果,它的作用是向其所在的位置嵌入一個圖像。
以上介紹了一些基本的 HTML 元素,但孤木不成林。現在來看看單個元素如何彼此協同構成一個完整的 HTML 頁面。回顧 文件處理 小節中創建的 index.html 示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入門學前端的博客,艾編程博客</title>
</head>
<body>
<img src="images/icodingedulgo.png" alt="艾編程logo">
</body>
</html>
這里有:
重溫一下 `` 元素:
<img src="images/icodingedulogo.png" alt="艾編程logo">
像之前所講,該元素通過包含圖像文件路徑的地址屬性 src,可在所在位置嵌入圖像。
該元素還包括一個替換文字屬性 alt,是圖像的描述內容,用于當圖像不能被用戶看見時顯示,不可見的原因可能是:
1、用戶有視覺障礙。視障用戶可以使用屏幕閱讀器來朗讀 alt 屬性的內容。
2、有些錯誤使圖像無法顯示。可以試著故意將 src 屬性里的路徑改錯。保存并刷新頁面就可以在圖像位置看到:
alt 屬性的關鍵字即“描述文本”。alt 文本應向用戶完整地傳遞圖像要表達的意思。用 "測試圖片" 來描述 Firefox 標志并不合適,修改成 "Firefox 標志:一只盤旋在地球上的火狐" 就好多了。
可以試著為圖像編寫一些更好的 alt 文本。
本段包含了一些最常用的文本標記 HTML 元素。
標題元素可用于指定內容的標題和子標題。就像一本書的書名、每章的大標題、小標題,等。HTML 文檔也是一樣。HTML 包括六個級別的標題, <H1> (en-US)–<h6> (en-US) ,一般最多用到 3-4 級標題。
<h1>主標題</h1>
<h2>頂層標題</h2>
<h3>子標題</h3>
<h4>次子標題</h4>
可以嘗試在 `` 元素上面添加一個合適的標題。
注:可以發現 MDN 網站上 第一級標題的主題是隱藏的。不要使用標題元素來加大、加粗字體,因為標題對于 無障礙訪問 和 搜索引擎優化 等問題非常有意義。要保持頁面結構清晰,標題整潔,不要發生標題級別跳躍。
如上文所講,<P> 元素是用來指定段落的。通常用于指定常規的文本內容:
<p>這是一個段落</p>
試著添加一些文本(在 設計網站的外觀 小節)到一個或幾個段落中,并把它們放在你的 `` 元素下方。
Web 上的許多內容都是列表,HTML 有一些特別的列表元素。標記列表通常包括至少兩個元素。最常用的列表類型為:
1、無序列表(Unordered List)中項目的順序并不重要,就像購物列表。用一個 <ul> 元素包圍。
2、有序列表(Ordered List)中項目的順序很重要,就像烹調指南。用一個 <ol> 元素包圍。
列表的每個項目用一個列表項目(List Item)元素 <li> 包圍。
比如,要將下面的段落片段改成一個列表:
<p>艾編程是一個綜合性的web前端編程學習網站,
包含了html、css、JavaScript等系列知識……</p>
可以這樣更改標記:
<p>Mozilla 艾編程是一個綜合性的web前端編程學習網站。包含了</p>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript</li>
</ul>
<p>等系列知識……</p>
試著在示例頁面中添加一個有序列表和無序列表。
鏈接非常重要 — 它們賦予 Web 網絡屬性。要植入一個鏈接,我們需要使用一個簡單的元素 — <a> — a 是 "anchor" (錨)的縮寫。要將一些文本添加到鏈接中,只需如下幾步:
如果網址開始部分省略了 https:// 或者 http://,可能會得到錯誤的結果。在完成一個鏈接后,可以試著點擊它來確保指向正確。
href 這個名字可能開始看起來有點令人費解,代表超文本引用( hypertext reference)。
現在就為頁面添加一個鏈接吧。
如果你一直跟著這篇文章里的指導做的話,你應該完成了一個像下面這樣的頁面:
代碼部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>艾編程前端</title>
</head>
<body>
<h1>艾編程前端示例頁面</h1>
<img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png" alt="艾編程logo整體以盾型為外輪廓設計,以代碼符號””為基礎圖形進行抽象畫變形,中間的“/”符號用首字母“i”替代,同時也是諧音“愛”,象征著美好">
<p>艾編程是一個綜合性的web前端編程學習網站。包含了</p>
<ul>
<li>html</li>
<li>css</li>
<li>JavaScript </li>
</ul>
<p>等系列知識……</p>
<p>為了讓您更好的學好前端編程,請參閱 <a href="https://www.icodingedu.com/">艾編程</a></p>
</body>
</html>
你學到了嗎?如果有幫助記得關注收藏點贊哦!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。