零基礎(chǔ)入門 HTML 的 8 分鐘極簡教程

今天，前端工程師已經(jīng)成為研發(fā)體系中的重要崗位之一。

可是與此相對的是，極少大學的計算機專業(yè)愿意開設(shè)前端課程，大部分前端工程師的知識，也都是在實踐和工作中不斷學習的。

最近收到很多同學的后臺留言，說希望多推出一些前端方向的教程。

今天我們就帶來一門適合前端初學者的課程，可以帶你從零入門 HTML、CSS、JS、React 等前端核心技能，并創(chuàng)建一個待辦事項的管理應(yīng)用～

項目效果：

課程從最基礎(chǔ)的 HTML/ CSS/JS 講起，還包含了 TypeScript/React/Fabric 等常用技能的講解。由淺入深，層層遞進，如果你想快速上手 React 框架，這門課會是你非常好的選擇。

訪問“實驗樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項應(yīng)用”就能學習全部課程內(nèi)容。

以下是課程第一節(jié)的內(nèi)容 —— 「HTML 簡介」，帶你快速入門HTML，讓我們一起進入前端的大門看看吧：

「HTML 簡介」

實驗介紹

本實驗是對 HTML 進行學習，并且較詳細的說明了 Web 是如何工作的。主要內(nèi)容有：HTML 常見標簽、HTML 文檔結(jié)構(gòu)、HTML 表格和表單、HTML 有序列表和無序列表。通過本節(jié)學習，可以構(gòu)建簡單的 HTML 網(wǎng)頁。

知識點

什么是 HTML
Web 是如何工作的
文檔結(jié)構(gòu)
常見標簽
表格
表單
有序列表和無序列表

什么是 HTML

HTML（超文本標記語言）是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。HTML 不需要編譯，可以直接由瀏覽器執(zhí)行，它的解析依賴于瀏覽器的內(nèi)核。它不是一種編程語言，而是一種標記語言。

Web 是如何工作的

下面我們來演示用戶是如何看到一個網(wǎng)頁顯示的。

具體來講：

當用戶通過瀏覽器輸入網(wǎng)址后，瀏覽器先在 DNS 服務(wù)器上找到它，然后對它進行解析。
解析完成后，瀏覽器給服務(wù)器發(fā)送 http 請求。
服務(wù)器同意這個請求，就把 HTML 文件發(fā)送回瀏覽器。
瀏覽器拿到 HTML 文件，對其解析執(zhí)行，顯示在用戶屏幕上。

HTML 文檔結(jié)構(gòu)

首先我們來看一個例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

這是一個 HTML 的基本骨架，我們將逐步介紹這些是什么意思。

文檔類型聲明

<!DOCTYPE html> 是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。

html 標簽

html 標簽即根元素，此處表示文檔的開始，該標簽包含兩個子標簽：head 和 body。

head 元素

head 標簽下面所包含的標簽由 title、meta、link、style、script 等（后面會講到）。

title 標簽

作用：設(shè)置文檔的標題或者名稱。瀏覽器通常將該標簽的內(nèi)容顯示在窗口頂部或者標簽頁上。每個 HTML 文檔只能有一個，必須有一個 title 標簽。

meta 標簽

<metacharset="UTF-8"> 聲明字符的編碼格式為 utf-8。

body 標簽

body 標簽定義文檔的主體，也就是我們的主要內(nèi)容（比如文本、超鏈接、圖像、表格和列表等）。

常見標簽

1.h 系類標簽

h 標簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標題。

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級標題</h1>
    <h2>我是二級標題</h2>
    <h3>我是三級標題</h3>
    <h4>我是四級標題</h4>
    <h5>我是五級標題</h5>
    <h6>我是六級標題</h6>
  </body>
</html>

為了大家能更有效的學習，請使用實驗樓的環(huán)境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。

然后輸入上面的代碼。

讓我們來看一下運行效果吧。鼠標右鍵 index.html 文件，點擊 Open With，然后點擊 Preview。

最終效果為：

2.p 標簽

p 標簽是我們的文本標簽，p 標簽會自動在其兩個標簽之間創(chuàng)建一些空白。刪掉上段代碼 <body> 標簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標簽里面去。

<p>我是第一段文字，實驗樓，做實驗，學編程</p>
<p>我是第二段文字，實驗樓，做實驗，學編程</p>

3. 圖片標簽

HTML 的圖像是通過標簽 <img> 來定義的。語法: <imgsrc="圖片地址"/> 刪掉上段代碼 <body> 標簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標簽里面去。

<p>實驗樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 標簽

<a> 標簽是超鏈接標簽，意思就是我們點擊它可以跳轉(zhuǎn)到一個網(wǎng)頁。刪掉上段代碼 <body> 標簽里的內(nèi)容，把下面的內(nèi)容放到 <body> 標簽里面去。

<a href="https://www.shiyanlou.com/">實驗樓</a>

點擊文字：

跳轉(zhuǎn)到指定網(wǎng)頁：

篇幅有限，后續(xù)的課程內(nèi)容，請在“實驗樓”邊敲代碼邊學習～

訪問“實驗樓”官網(wǎng)，搜索“從 0 到 1 構(gòu)建待辦事項應(yīng)用”，就能找到課程，繼續(xù)學習啦！

avaScript（通常縮寫為JS）是一種解釋型、面向?qū)ο蟆⒍喾妒降母呒壘幊陶Z言。它被世界上的絕大多數(shù)網(wǎng)站所使用，也被世界主流瀏覽器（Chrome、IE、Firefox、Safari、Opera）支持。

JavaScript是世界上最流行的腳本語言，因為它很容易上手，而且學習到它的精髓之后還可以編寫高質(zhì)量的代碼，這就是我推薦給初學者學習的主要原因。今天就帶大家來學習JavaScript。這是當年我學習JavaScript的六大步驟，希望對你也有幫助：

1.學習JavaScript基礎(chǔ)語法：

古人常道：“萬丈高樓平地起”，意思大概是再高的大廈都要從平地開始修建，學習JavaScript也是一樣，想要學好它就一定要把基礎(chǔ)先打牢，學習JS的第一步是JavaScript基礎(chǔ)語法。

首先，你要了解async和defer之間的區(qū)別，然后，深入學習代碼語法知識，例如變量，數(shù)據(jù)類型，循環(huán)和條件語句，函數(shù)，匿名函數(shù)，閉包，陣列和關(guān)聯(lián)陣列，事件，正則表達式，promises。

注意語法順序一定要準確！上述舉例如果有遺漏的，大家可以在評論區(qū)留言。此外，我個人推薦你學習如何使用Chrome DevTools調(diào)試，因為Chrome DevTool是遠程調(diào)試JS最好的工具。

2.學習面向?qū)ο缶幊蹋?/span>

當你具備一定的JavaScript基礎(chǔ)語法后，你應(yīng)該轉(zhuǎn)向?qū)W習面向?qū)ο缶幊蹋∣OPs）。OOPs是JS和其他編程語言中最重要的概念。JS中的OOPs是基于原型繼承鏈上運行的，不像Java或C++是基于對象或類繼承。

然而，關(guān)于元數(shù)據(jù)，你可以在學習了OOPs之后再轉(zhuǎn)到學習元數(shù)據(jù)編程。雖然元數(shù)據(jù)很好學，但它并不是JS中最重要的部分。我相信，你可不會喜歡JS帶來的意外“驚喜”。

3.學習測試QA：

測試代碼和調(diào)試JS一樣重要！你可能聽說過TDD(測試驅(qū)動開發(fā))或BDD(行為驅(qū)動開發(fā))這樣的詞，但到底是什么意思呢？簡而言之，TDD是指寫一個未通過的測試用例，然后讓測試通過，最后重構(gòu)。

而BDD則是根據(jù)業(yè)務(wù)，編寫具體的例子和自動化的測試，通過探索，發(fā)現(xiàn)，定義，最后推出軟件所需的行為。BDD和TDD之間沒有本質(zhì)的區(qū)別。把它們組合在一起的是，它們都需要一群人，指定軟件在執(zhí)行之前應(yīng)該如何協(xié)同行動。

4.學習jQuery：

jQuery是一套跨瀏覽器的JavaScript庫，它的特點是動態(tài)性和互動性。它使用起來十分方便，就jquery本身而言，你經(jīng)常會遇到如何將AJAX與jQuery整合的問題。AJAX是什么？舉個例子來說吧，

「當你在百度瀏覽器中輸入一個關(guān)鍵詞，不用刷新便可得到關(guān)于詞條的一些內(nèi)容，這就是AJAX」

AJAX是Asynchronous JS and XML的縮寫，它主要處理的是與HTML和CSS不同步的請求而產(chǎn)生的問題。

5.學習框架

現(xiàn)在，你已經(jīng)了解了jQuery，JS基礎(chǔ)語法，AJAX，Chrome DevTools，測試QA。以下的是你們現(xiàn)在真正應(yīng)該學習的內(nèi)容——框架：

React：

React的前身是React.JS。React最初是由Facebook和少數(shù)個人以及一個小社區(qū)開發(fā)的，但隨著時間的推移，React進行了多次的優(yōu)化，現(xiàn)在它變成了很有意思而且功能很強大的代碼，也很容易學習。我個人是十分推薦你學習React的。日后，你可以用React以組件的形式在網(wǎng)頁中開發(fā)用戶界面。

Angular：

Angular在某方面和React非常相似，不過你可以用Angular以組件的形式編寫SPA。它是現(xiàn)在IT行業(yè)前端開發(fā)方面需求量最大的語言。Angular其實是JS框架，基本上意味著它是用JS編寫的。

你可以在每個瀏覽器的各個角落遇見JS，這也側(cè)面證實了JS功能十分強大，也十分有用。我強烈建議你既要學習React，也要學習Angular。

Node.JS：

Node.JS是在服務(wù)器端編寫JS的框架。用Node.JS寫的代碼或API的速度快得離譜，而且Node.JS還可以同時處理多個請求。不像其他后端語言，很少有公司在Node.JS上實現(xiàn)了他們的服務(wù)器。

它是服務(wù)器端語言的未來，在Node中實現(xiàn)的大型Web應(yīng)用程序的可擴展性和部署方面存在一些問題，所以現(xiàn)在我不會稱它為服務(wù)器端語言的主角。

Express.JS：

和上文所述的框架一致，它也是一個功能強大的框架。Express.JS簡稱Express，它是針對Node.JS的web應(yīng)用框架，在MIT許可證下作為自由及開放源代碼軟件發(fā)行。它被設(shè)計來建造web應(yīng)用和API。

同樣它也是由用JS編寫的，我個人建議如果你在學習Node.JS，那么一定要把Express.JS也掌握好。

6.學習庫

框架學習也結(jié)束了，下面正是學習JavaScript之路上至關(guān)重要的最后一點。學習一段時間后，你可能絞盡腦汁想寫好代碼，而且明明思路很清晰，卻只能寫出一點點代碼。這時候你就該使用這個庫了，我并沒有推廣庫的想法，而是真心希望你可以擁有非常有趣的學習和使用經(jīng)歷。

Coffee.Script：

Coffee.Script與JS功能類似，但它有一個好處就是沒有分號，括號，雙引號，甚至是大括號的雜亂和麻煩。當你學習了JS的基礎(chǔ)語法，搭建完眾多框架，再學習coffee.script，你就會意識到它有多么的很簡單。正因為它十分容易編寫，所以我真的很推薦你們進行學習。

當你開始學習時也可以使用JS文檔訪問JavaScript，并且不要害怕一路上承擔一些項目。完全不需要擔心，項目會給你帶來的挑戰(zhàn)，項目的一次次完成會帶給你不一樣的新鮮感和信心，只有突破重圍才會看到嶄新的自己。記住明天的你會感激現(xiàn)在拼命的自己，當你精通JS之時，任何挑戰(zhàn)都沒有辦法限制你學習。

如果你對這篇文章有任何感悟或想法，可以在評論區(qū)留言。我個人對編碼充滿了激情，我認為每個人都應(yīng)該學習它，而不是敬而遠之。衷心地祝原你在編碼的路上越走越穩(wěn)，越走越快，越走越遠。到那時你雖已是碼農(nóng)，但你仍要牢記學習，從中得到啟發(fā)，并走向更美好的明天。

日，有不少的程序員問w3cschool這邊，前端開發(fā)應(yīng)該怎么學?

有個小白程序員表示，自己走了很多彎路，學java開發(fā)沒學透不能就業(yè)，現(xiàn)在學前端又不知道如何下手，前后算起來浪費了不少的時間。

針對此問題，下面w3cschool就給程序員小伙伴們答疑解惑，并分享一些干貨。

前端有三架馬車你一定要學會“駕馭”，HTML+CSS+Javascript。

照目前看來，網(wǎng)上各種前端學習資料又多又雜，確實讓不少入門前端的小伙伴不知所措。要選什么學習資料?如何入門前端開發(fā)?

0、Come on，來點國外的土特產(chǎn)視頻!

關(guān)于視頻的選擇，直接網(wǎng)上搜“30 Days to Learn HTML & CSS”這個視頻來看。

這個視頻是國外的前端開發(fā)特產(chǎn)，大小有1G多吧!

前端開發(fā)可以照前端開發(fā)的視頻進行實戰(zhàn)訓練，建議可以一邊開著NotePad++?，一邊看視頻，一邊敲代碼。

另外，可以用有道云，或者是印象筆記稍微做點記錄，這會加快你對html、css的學習。

1、從經(jīng)典的w3cschool前端html教程學習

當你咨詢了很多的前端工程師，他們都會推薦你從經(jīng)典的w3cschool基礎(chǔ)教程開始，把上面的課程刷一遍。

2、html微課

通過前面兩步的學習，你基本上算是入門html啦。

但相信也會有些程序員覺得很枯燥，那不妨可以嘗試w3cschool新開發(fā)的html微課。

比如之前的《刀塔傳奇》，很多人每天刷副本都可以樂此不疲，因為游戲升級通關(guān)是比較有趣的。

w3cschool微課同樣采用了闖關(guān)刷副本的模式，你通過每天有趣的刷副本闖關(guān)，就可以掌握html重點的概念和編程技能。

3、前端開發(fā)神書推薦

會有些前輩會給你推薦《DOM編程藝術(shù)》、《Javascript權(quán)威指南》、《Javascript高級程序設(shè)計》、《鋒利的JQuery》等，但對于新手來說似乎略難。

不妨去看Head first html， xhtml & CSS這兩本簡直是神書，真心經(jīng)典!

在線咨詢

上一篇：CSS基礎(chǔ)知識（六）CSS字體樣式及文本樣式
下一篇：CSS自動換行、強制不換行、強制斷行、超出顯示省略號

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商