00 課前準(zhǔn)備
00.01 索引
- 01 知了學(xué)習(xí)社課程簡(jiǎn)介
- 02 本課程適用人群
- 03 課程的學(xué)習(xí)意義
- 04 課程設(shè)計(jì)模式
- 05 HTML工作環(huán)境
- 06 第一個(gè)網(wǎng)頁“Hello,World”
- 07 課程作業(yè)
00.02 課前提問
- 我們?nèi)粘g覽的網(wǎng)頁是怎樣實(shí)現(xiàn)的？
01 知了學(xué)習(xí)社教程簡(jiǎn)介
知了學(xué)習(xí)社是一個(gè)交互式學(xué)習(xí)平臺(tái)。課程學(xué)習(xí)資料均由專業(yè)人員及志愿者根據(jù)學(xué)科權(quán)威書目及熱門公開課編寫，第一版內(nèi)容涵蓋計(jì)算機(jī)、經(jīng)濟(jì)以及心理學(xué)等基礎(chǔ)課程。全部課程的學(xué)習(xí)資料都以交互學(xué)習(xí)的形式，共享在知了APP（Android&IOS）。部分課程會(huì)以文章的形式預(yù)覽給同學(xué)們！
02 本課程適用人群
- 想要拓寬視野，提升技能，脫離舒適區(qū)的同學(xué)
- 有興趣接觸互聯(lián)網(wǎng)Web的相關(guān)知識(shí)
- 沒有編寫HTML代碼的經(jīng)驗(yàn)或者沒有系統(tǒng)的接觸過HTML
- 每周有3個(gè)小時(shí)以上的時(shí)間用來學(xué)習(xí)及實(shí)踐HTML
如果，你符合以上要求，那么這一系列課程將是你通往Web網(wǎng)絡(luò)世界的關(guān)鍵鑰匙。這門課程足夠基礎(chǔ)，哪怕你之前從來沒有學(xué)習(xí)過任何編程知識(shí)。只要你勤于思考，你仍然可以輕松應(yīng)付課程中的全部?jī)?nèi)容。
03 本課程的學(xué)習(xí)意義
在學(xué)習(xí)完本課程后，你將收獲哪些？
- 技能——構(gòu)建網(wǎng)頁的能力
我們每天都在瀏覽著網(wǎng)頁，我們的視線被網(wǎng)頁中紛繁復(fù)雜的圖片和文字所吸引。但是，可能你是否想象過，這一個(gè)個(gè)網(wǎng)頁背后的模樣?它們是如何實(shí)現(xiàn)的？是怎樣一個(gè)過程讓這些網(wǎng)頁散發(fā)著魅力，讓我們深陷其中？
在學(xué)習(xí)完本課程后，這一系列的問題，你都可以找到答案！
- 視角——更規(guī)則的世界
計(jì)算機(jī)沒有類似于人類的智能，他們只能按照人類制定下的規(guī)矩來運(yùn)行。如果，你給出的規(guī)定不足夠的明確，你就會(huì)發(fā)現(xiàn)計(jì)算機(jī)的行為完全不符合你的預(yù)期，它沒有辦法足夠靈活的處理你的指令。同時(shí)，只要你的指令足夠正確清楚，計(jì)算機(jī)也絕不會(huì)出錯(cuò)。
這樣一個(gè)完全基于規(guī)則的程序世界，與我們?nèi)粘Ｉ畹氖澜绲倪\(yùn)行規(guī)律完全不同。在學(xué)習(xí)本課程后，你將從另一個(gè)視角來審視自己的學(xué)習(xí)生活、人際關(guān)系甚至愛情。這個(gè)視角難以言狀，非要概括的話可以說這種視角“更抽象、更細(xì)致、更系統(tǒng)化”。
04 教學(xué)模式
本課程的教學(xué)模式來源于“PQ4R”學(xué)習(xí)理論，即預(yù)覽（Preview），設(shè)問（Question）、閱讀（Read）、反思（Reflect）、背誦（Recite）和回顧（Review）。知了學(xué)習(xí)社的課程內(nèi)容都是基于以上的流程進(jìn)行設(shè)計(jì)，通過這樣的流程來學(xué)習(xí)，將會(huì)大幅提高你的學(xué)習(xí)效率。
- 預(yù)覽（Preview），課程第一部分，將展示本章學(xué)習(xí)內(nèi)容的索引，以便清晰快速的了解學(xué)習(xí)內(nèi)容的架構(gòu)
- 設(shè)問（Question），課程第二部分，會(huì)向你提出2-3個(gè)相關(guān)問題，即帶著問題去閱讀
- 閱讀（Read），即課程正文
- 反思（Reflect），在閱讀之后，你需要回答課前提出的幾個(gè)問題，試試自己能否說出令人滿意的答案。
- 背誦（Recite），這個(gè)部分需要同學(xué)們根據(jù)自身情況來選擇背誦內(nèi)容。
- 回顧（Review），課后練習(xí)
話不多說，讓我們開始今天的課程把。
05 HTML簡(jiǎn)介
HTML的全稱是超文本標(biāo)記語言 (Hyper Text Markup Language)，這套標(biāo)記語言是通過一套標(biāo)記標(biāo)簽進(jìn)行工作的。這種標(biāo)記的意義在于將文本以及文本相關(guān)的其他信息結(jié)合起來，從而展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理的細(xì)節(jié)。你可能不是很理解什么叫做文檔結(jié)構(gòu)和數(shù)據(jù)處理，讓我們以古詩《春曉》舉個(gè)例子你就明白了！
通常，我們看到的《春曉》應(yīng)該是這個(gè)樣子的。
春曉
孟浩然
春眠不覺曉，處處聞啼鳥。
夜來風(fēng)雨聲，花落知多少。
對(duì)于，人類來講確實(shí)已經(jīng)足夠了，但是對(duì)于計(jì)算機(jī)來講，這樣的文本顯然還不夠結(jié)構(gòu)化。比如，我想讓計(jì)算機(jī)回答我這首詩的題目是什么？作者是誰？計(jì)算機(jī)顯然沒有辦法給我正確的答案。如果，我想讓計(jì)算機(jī)把所有古詩的題目加粗顯示，作者用斜體顯示，那就更為難它了！
但是，聰明的程序員們，為了解決這個(gè)問題。就發(fā)明了一種叫做HTML的標(biāo)記語言來為文本附加一些信息，從而完成上述的艱巨任務(wù)。這套標(biāo)記語言大概長(zhǎng)成這個(gè)樣子：
<題目> 春曉 </題目>
<作者> 孟浩然 </作者>
<詩句> 春眠不覺曉，處處聞啼鳥。</詩句>
<詩句> 夜來風(fēng)雨聲，花落知多少。</詩句>
這樣一來，當(dāng)我們想要計(jì)算機(jī)告訴我們古詩的題目時(shí)，它只要返還包含在<題目>和</題目>之間的內(nèi)容就可以了，修改樣式也是同樣的道理。當(dāng)然，這只是HTML標(biāo)記語言強(qiáng)大功能的冰山一角。
好了，關(guān)于HTML的簡(jiǎn)介就先到這里，還有更有意思的等待著我們！
06 HTML工作環(huán)境
“工欲善其事，必先利其器”
其實(shí)，HTML的代碼只要在文本編輯器中就可以了，我們不需要下載安裝任何軟件。只要你的電腦能創(chuàng)建txt文本文檔就可以了。
但是為了有更好的編碼體驗(yàn)，你也可以使用類似于sublime3這樣的軟件（無限期免費(fèi)）來幫助我們。不過，如果你使用知了APP甚至可以在手機(jī)上交互式體驗(yàn)HTML編碼。
07 第一個(gè)網(wǎng)頁“Hello,World”
07.01 網(wǎng)頁的構(gòu)成
一個(gè)簡(jiǎn)單的HTML網(wǎng)頁的構(gòu)成，就像我們之前的那篇“春曉”一樣，有標(biāo)記和內(nèi)容就可以了。
HTML的標(biāo)記方式就是使用HTML標(biāo)簽(HTML tag)來進(jìn)行標(biāo)記的，因?yàn)镠TML的規(guī)則制定者為了使其更廣泛的被接受，所以這些標(biāo)簽都是以英文命名的。
這些標(biāo)簽具有普遍的規(guī)律，總結(jié)起來就是：
- HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>、<p>
- HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <html> 和 </html>
- 標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
記住這樣的規(guī)律后，我們就可以開始編寫我們的第一個(gè)網(wǎng)頁了。
07.02 <html>標(biāo)簽
讓我們先認(rèn)識(shí)第一個(gè)標(biāo)簽<html>，這個(gè)標(biāo)簽用來標(biāo)記整個(gè)HTML文檔，所以我們的每一個(gè)網(wǎng)頁的開始和結(jié)束時(shí)都要分別寫上<html>標(biāo)簽和</html>的結(jié)束標(biāo)簽。你可以將其理解為是一種聲明，“我要開始寫HTML代碼了”和“我代碼寫完了”。
07.03 <body>標(biāo)簽
<body>標(biāo)簽是用來標(biāo)記正文內(nèi)容的，這個(gè)正文指的是顯示在頁面上面的信息。你可能會(huì)問，難道還有信息是不展示在頁面上面的嗎？答案是：是的。舉個(gè)簡(jiǎn)單的例子，我們?cè)跒g覽網(wǎng)頁時(shí)，會(huì)發(fā)現(xiàn)每個(gè)網(wǎng)頁的題目都不同，這個(gè)內(nèi)容就沒有顯示在網(wǎng)頁的頁面上，而是顯示在網(wǎng)頁標(biāo)簽中！
所以，記得在你想要展現(xiàn)在頁面上的內(nèi)容前加上<body>標(biāo)簽，結(jié)束時(shí)加上</body>標(biāo)簽。
07.04 Hello,world!
現(xiàn)在，我們?cè)谶@一章需要用到的標(biāo)簽都已經(jīng)學(xué)習(xí)完了，那么我們就開始運(yùn)用它們吧！
讓我們一起做一個(gè)網(wǎng)頁，和世界打個(gè)招呼吧！（和世界打招呼，是每一個(gè)編程入門的傳統(tǒng)）
由于，同學(xué)們可能是第一次接觸HTML，所以在第一次實(shí)踐的時(shí)候，教程會(huì)盡可能的詳細(xì)。在之后的課程，就需要同學(xué)們勤于思考了！
- 打開文本編輯器，txt即可。
- 鍵入<html>，用來標(biāo)記我們的文本是HTML編碼。
- 鍵入<body>，用來標(biāo)記我們展現(xiàn)在頁面上的內(nèi)容。
- 鍵入 Hello，World！，和世界打一個(gè)招呼。
- 鍵入</body>，標(biāo)記內(nèi)容結(jié)束。
- 鍵入</html>，標(biāo)記HTML編碼結(jié)束。
- 將txt文件保存格式為.html,并用瀏覽器打開。
08 課程作業(yè)
寫一個(gè)HTML網(wǎng)頁，用來做一個(gè)自我介紹！
09 加入知了HTML&CSS學(xué)習(xí)社區(qū)
你在知了學(xué)習(xí)社區(qū)可以：
- 提交課后練習(xí)
- 課程內(nèi)容答疑
- 共享學(xué)習(xí)筆記
- 與更優(yōu)秀的人同行
添加知了學(xué)習(xí)君好友（internbird012），回復(fù)“學(xué)習(xí)社區(qū)”即可！
