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

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

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

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

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

項(xiàng)目效果：

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

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

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

「HTML 簡(jiǎn)介」

實(shí)驗(yàn)介紹

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

知識(shí)點(diǎn)

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

什么是 HTML

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

Web 是如何工作的

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

具體來講：

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

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

首先我們來看一個(gè)例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡(jiǎn)介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

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

文檔類型聲明

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

html 標(biāo)簽

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

head 元素

head 標(biāo)簽下面所包含的標(biāo)簽由 title、meta、link、style、script 等（后面會(huì)講到）。

title 標(biāo)簽

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

meta 標(biāo)簽

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

body 標(biāo)簽

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

常見標(biāo)簽

1.h 系類標(biāo)簽

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

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡(jiǎn)介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級(jí)標(biāo)題</h1>
    <h2>我是二級(jí)標(biāo)題</h2>
    <h3>我是三級(jí)標(biāo)題</h3>
    <h4>我是四級(jí)標(biāo)題</h4>
    <h5>我是五級(jí)標(biāo)題</h5>
    <h6>我是六級(jí)標(biāo)題</h6>
  </body>
</html>

為了大家能更有效的學(xué)習(xí)，請(qǐng)使用實(shí)驗(yàn)樓的環(huán)境。首先我們新建一個(gè)文件，點(diǎn)擊 File，然后 New File，命名為 index.html。

然后輸入上面的代碼。

讓我們來看一下運(yùn)行效果吧。鼠標(biāo)右鍵 index.html 文件，點(diǎn)擊 Open With，然后點(diǎn)擊 Preview。

最終效果為：

2.p 標(biāo)簽

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

<p>我是第一段文字，實(shí)驗(yàn)樓，做實(shí)驗(yàn)，學(xué)編程</p>
<p>我是第二段文字，實(shí)驗(yàn)樓，做實(shí)驗(yàn)，學(xué)編程</p>

3. 圖片標(biāo)簽

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

<p>實(shí)驗(yàn)樓圖片：</p>
<img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />

4.a 標(biāo)簽

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

<a href="https://www.shiyanlou.com/">實(shí)驗(yàn)樓</a>

點(diǎn)擊文字：

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

篇幅有限，后續(xù)的課程內(nèi)容，請(qǐng)?jiān)?strong>“實(shí)驗(yàn)樓”邊敲代碼邊學(xué)習(xí)～

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

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

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

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

前端有三架馬車你一定要學(xué)會(huì)“駕馭”，HTML+CSS+Javascript。

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

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

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

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

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

另外，可以用有道云，或者是印象筆記稍微做點(diǎn)記錄，這會(huì)加快你對(duì)html、css的學(xué)習(xí)。

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

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

2、html微課

通過前面兩步的學(xué)習(xí)，你基本上算是入門html啦。

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

比如之前的《刀塔傳奇》，很多人每天刷副本都可以樂此不疲，因?yàn)橛螒蛏?jí)通關(guān)是比較有趣的。

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

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

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

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

HP是世界上最好的語言，這是一個(gè)老梗。

有不少學(xué)習(xí)PHP的程序員后來去做了前端開發(fā)，畢竟近些年前端開發(fā)還是蠻吃香的。

學(xué)習(xí)PHP不僅僅要學(xué)習(xí)html，而且還要學(xué)習(xí)CSS。

CSS是萬維網(wǎng)聯(lián)盟在 HTML 4.0 之外提出，目的是為了讓CSS完成樣式與內(nèi)容的分離。

那么，CSS如何入門呢?w3cschool在這里分享幾個(gè)方法：

0、研究w3cschool CSS教程

w3cschool官方本身就有CSS教程，我們看教程的目的主要還是要了解CSS到底是干什么用的。

其實(shí)，用一句簡(jiǎn)單的話來說，改變我們看的網(wǎng)頁的樣子.。

1、CSS微課游戲化編程體驗(yàn)

w3cschool新開發(fā)了CSS微課，這可能是很多程序員小伙伴所需要的。

CSS直接抓住了CSS教程中比較核心的一些概念和語法，并且有實(shí)戰(zhàn)的訓(xùn)練習(xí)題。

其內(nèi)容包括了CSS基礎(chǔ)、CSS文本樣式、CSS屬性、CSS定位和布局，讓你系統(tǒng)、立體地全面認(rèn)識(shí)CSS。

CSS微課實(shí)現(xiàn)了游戲化的編程體驗(yàn)，關(guān)卡是循序漸進(jìn)的，這迫使你不能跳躍而忽略一些重要的編程知識(shí)。

其中，習(xí)題類型包含了判斷題、選擇題、實(shí)戰(zhàn)訓(xùn)練題。

理論離不開實(shí)戰(zhàn)，CSS微課做到了例子多，概括技術(shù)全面。

當(dāng)你可以通關(guān)的時(shí)候，你已經(jīng)對(duì)CSS算是有一個(gè)比較深刻的認(rèn)識(shí)，也掌握了一定的CSS編程技能。

2、CSS看什么書呢?

學(xué)編程一定要讓編程本身變得有趣，所以大可以先玩編程。

用CSS微課學(xué)習(xí)是一種有趣化的方法。

另外，閱讀《css禪意花園》，就當(dāng)成一本故事書看，隨便翻翻你會(huì)發(fā)現(xiàn)css確實(shí)很好玩的。

在線咨詢

上一篇：一篇文章帶你了解CSS3圓角知識(shí)
下一篇：一篇文章帶你了解CSS3圓角知識(shí)

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商