JavaScript：06 HTML &am

JavaScript：06 HTML & CSS Crash Course

63 Section Intro

為了跟上下一節的項目，以及本課程中的其他項目，熟悉HTML和CSS的基礎知識，它將會是非常有幫助的。

這就是這一節的全部內容，這是一個非常簡單的HTML和CSS的速成課程。只是為了讓你開始使用這些技術。

現在，如果你已經知道HTML和CSS，那么請跳過這一部分，但如果沒有，那我們現在就繼續吧。

064 Basic HTML Structure and Elements

本講主要學習HMTL結構和元素。

HTML是超文本標記語言的縮寫，我們基本上用它來描述網頁的內容。HTML文檔是由元素組成的。元素用一個開始和結束標簽。所有HTML文檔中的主要元素始終是HTML元素。

每個HTML文檔都必須以標簽開始，然后用HTML關閉標簽。

在HTML元素里面，總是有標題和正文。

head里面是有關頁面的設置，還有CSS樣式和href圖標。href圖標就是在瀏覽器標簽上出現的小圖標。

body體內可以使用h1標簽，表示一級標題。

還有h2，h3，......，h6等，代表不同的樣式。

p元素描述一個段落。

在VS Code的index.html上輸入！和tab，可以自動生成html。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

DOCTYPE文檔類型，說明這個文件是html5。

html語言是en英語。

065 Attributes, Classes and IDs

本講主要學習屬性、類和ID。

在HTML中，有些元素可以有屬性，這些屬性基本上是描述元素的。

元素可以嵌套。p元素、h1和h2元素在body體內，作為body的子元素。

href是Hypertext Reference的縮寫。意思是指定超鏈接目標的URL。href 屬性的值可以是任何有效文檔的相對或絕對URL，包括片段標識符和JavaScript代碼段。

<a href="網址">網址描述</a>

鏈接和前面的文字是一樣的，所以錨點元素a稱為內聯元素。

h2元素是塊元素。標題與前一個元素的文本不一致，它創建了一個新行，其中只包含此標題的內容。

圖像元素，使用img標簽，然后指定src源屬性，也就是指定圖像的路徑。路徑可以是當前文件夾，也可以是網絡地址。img沒有結束標簽，在img標簽末尾使用斜杠來閉環標簽。

我們使用類和id來命名元素，也使用類和id選擇元素，類和id是識別元素的關鍵。

id和類的區別，id必須是唯一的。id很少使用，用來設置元素樣式或從javascript中選擇它們。

接下來學習div元素。div指通用框。可以給div指定id屬性名稱。id的命名使用短橫線來分隔兩個不同的詞。

<input type="text" placeholder="Your name" />
<button>OK!</button>

文本框和OK按鈕就顯示出來了。

表單需要使用form元素。將div替換為form即可。

066 Basic Styling with CSS

本講主要學習CSS樣式。

通過CSS來讓網頁更加好看。

CSS應用于head標簽內。

使用style標簽來寫CSS樣式。

在style標簽內，可以針對body元素來設置樣式。這叫body元素選擇器。在body后面的大括號內，可以寫CSS的聲明，每個CSS聲明都有一個屬性名稱。例如，設置背景顏色為綠色，這是一個簡單的聲明。查看index.html頁面顏色為綠色。

<style>
body{
    background-color:green;
}
</style>

這就是CSS樣式。

創建單獨的style.css文件，和index.html相結合來實現CSS樣式。

在style.css文件中將CSS的聲明放過來。

在index.html文件中將style標簽及內容改為link到style.css文件。

<link href="style.css" rel="stylesheet" />

查看index.html頁面顏色為綠色。

在style.css文件中，我們繼續探索更多的CSS屬性。

body {
    background-color:rgb(255, 247, 201);
    font-family: Arial;
    font-size: 20px;
}

字體設置會在整個body體內的部分子元素上生效。因為有些元素沒有繼承能力。

字體大小設置也會在body體內部分子元素上生效。h1和h2這種元素的字體大小有預定義，所以不會受影響。

除了body元素選擇器，還可以定義其他元素選擇器。對于h1元素，可以單獨設置字體大小。

對于類和id，如何在style.css中設置？

對于first類，設置字體顏色。

.first {
    color: red;
}

對于表格id的設置背景顏色和邊框樣式。

在style.css文件中如下：

#your-name {
    background-color: rgb(255, 220, 105);
    border: 5px solid #444;
}

邊界屬性不會繼承屬性。

查看index.html頁面變化如下。

067 Introduction to the CSS Box Model

本講主要學習CSS盒子模型。

盒子模型是CSS最基本的部分。

這是因為它是定義元素如何在網頁上顯示以及如何調整大小的主要因素。

圖中，所有描述都可以使用CSS屬性來表示。

這些描述是可選的。可以沒有這個，或者沒有那個。

內容：文字、圖像等；

填充物：盒子周圍透明區域，盒子內部；

邊框：環繞填充物和內容；

頁邊：盒子之間的空隙；

填充區：被填充的區域。

接下來，我們做全局重置，涉及到以上屬性的設置，需要用到所有元素。

在style.css文件中，需要引入“\*”符號，像通配符一樣，表示選擇頁面上的所有元素。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

將margin和padding設置為0后，查看index.html頁面少了很多空行。

盒子大小屬性設置為邊框。

在body內增加一些空間。

padding: 50px;

在h1內增加邊框。

padding-bottom: 25px;

在h2內增加文本對齊方式。

text-align: center;

在圖像之間增加空白空間。

padding: 25px;
margin-top: 30px;

在style.css文件中，注釋使用/* */來完成。

將box-sizing: border-box;注釋后，查看your-name的寬度在400的基礎上增加了25和5，實際達到了460.

取消box-sizing: border-box;注釋后，查看your-name的寬度嚴格限制在400，同時內容寬度自動調整為340。

P選擇器，可以對所有段落進行樣式設置。

P {
    margin-bottom: 20px;
}

輸入框和按鈕也可以進行樣式設置。

input, button {
    padding: 10px;
    font-size: 16px;
}

對于鏈接也可以設置樣式，改變默認的藍色。

a {
    background-color: yellowgreen;
}

在CSS中的常用選擇器，首先是點，然后是id。

還有一種情況，index.html中有2個h2元素，只對第2個h2元素設置樣式。

#your-name h2 {
    color: olivedrab;
}

還有最常用的設置是關于圖像的尺寸設置。

#course-image {
    width: 200px;
}

圖像的長按照寬度的變化，成比例變化。

0 課前準備

00.01 索引

01 知了學習社課程簡介
02 本課程適用人群
03 課程的學習意義
04 課程設計模式
05 HTML工作環境
06 第一個網頁“Hello,World”
07 課程作業

00.02 課前提問

我們日常瀏覽的網頁是怎樣實現的？

01 知了學習社教程簡介

知了學習社是一個交互式學習平臺。課程學習資料均由專業人員及志愿者根據學科權威書目及熱門公開課編寫，第一版內容涵蓋計算機、經濟以及心理學等基礎課程。全部課程的學習資料都以交互學習的形式，共享在知了學習社APP（Android&IOS）。部分課程會以文章的形式預覽給大家！

02 本課程適用人群

想要拓寬視野，提升技能，脫離舒適區的人
有興趣接觸互聯網Web的相關知識
沒有編寫HTML代碼的經驗或者沒有系統的接觸過HTML
每周有3個小時以上的時間用來學習及實踐HTML

如果，你符合以上要求，那么這一系列課程將是你通往Web網絡世界的關鍵鑰匙。這門課程足夠基礎，哪怕你之前從來沒有學習過任何編程知識。只要你勤于思考，你仍然可以輕松應付課程中的全部內容。

03 本課程的學習意義

在學習完本課程后，你將收獲哪些？

技能——構建網頁的能力

我們每天都在瀏覽著網頁，我們的視線被網頁中紛繁復雜的圖片和文字所吸引。但是，可能你是否想象過，這一個個網頁背后的模樣?它們是如何實現的？是怎樣一個過程讓這些網頁散發著魅力，讓我們深陷其中？

在學習完本課程后，這一系列的問題，你都可以找到答案！

2. 視角——更規則的世界

計算機沒有類似于人類的智能，他們只能按照人類制定下的規矩來運行。如果，你給出的規定不足夠的明確，你就會發現計算機的行為完全不符合你的預期，它沒有辦法足夠靈活的處理你的指令。同時，只要你的指令足夠正確清楚，計算機也絕不會出錯。

這樣一個完全基于規則的程序世界，與我們日常生活的世界的運行規律完全不同。在學習本課程后，你將從另一個視角來審視自己的學習生活、人際關系甚至愛情。這個視角難以言狀，非要概括的話可以說這種視角“更抽象、更細致、更系統化”。

04 教學模式

本課程的教學模式來源于“PQ4R”學習理論，即預覽（Preview），設問（Question）、閱讀（Read）、反思（Reflect）、背誦（Recite）和回顧（Review）。知了學習社的課程內容都是基于以上的流程進行設計，通過這樣的流程來學習，將會大幅提高你的學習效率。

預覽（Preview），課程第一部分，將展示本章學習內容的索引，以便清晰快速的了解學習內容的架構
設問（Question），課程第二部分，會向你提出2-3個相關問題，即帶著問題去閱讀
閱讀（Read），即課程正文
反思（Reflect），在閱讀之后，你需要回答課前提出的幾個問題，試試自己能否說出令人滿意的答案。
背誦（Recite），這個部分需要同學們根據自身情況來選擇背誦內容。
回顧（Review），課后練習

PQ4R學習理論

話不多說，讓我們開始今天的課程把。

05 HTML簡介

HTML

HTML的全稱是超文本標記語言 (Hyper Text Markup Language)，這套標記語言是通過一套標記標簽進行工作的。這種標記的意義在于將文本以及文本相關的其他信息結合起來，從而展現出關于文檔結構和數據處理的細節。

你可能不是很理解什么叫做文檔結構和數據處理，讓我們以古詩《春曉》舉個例子你就明白了！

通常，我們看到的《春曉》應該是這個樣子的。

春曉

孟浩然

春眠不覺曉，處處聞啼鳥。

夜來風雨聲，花落知多少。

對于，人類來講確實已經足夠了，但是對于計算機來講，這樣的文本顯然還不夠結構化。比如，我想讓計算機回答我這首詩的題目是什么？作者是誰？計算機顯然沒有辦法給我正確的答案。如果，我想讓計算機把所有古詩的題目加粗顯示，作者用斜體顯示，那就更為難它了！

但是，聰明的程序員們，為了解決這個問題。就發明了一種叫做HTML的標記語言來為文本附加一些信息，從而完成上述的艱巨任務。這套標記語言大概長成這個樣子：

<題目> 春曉 </題目>

<作者> 孟浩然 </作者>

<詩句> 春眠不覺曉，處處聞啼鳥。</詩句>

<詩句> 夜來風雨聲，花落知多少。</詩句>

這樣一來，當我們想要計算機告訴我們古詩的題目時，它只要返還包含在<題目>和</題目>之間的內容就可以了，修改樣式也是同樣的道理。當然，這只是HTML標記語言強大功能的冰山一角。

好了，關于HTML的簡介就先到這里，還有更有意思的等待著我們！

06 HTML工作環境

“工欲善其事，必先利其器”

其實，HTML的代碼只要在文本編輯器中就可以了，我們不需要下載安裝任何軟件。只要你的電腦能創建txt文本文檔就可以了。

但是為了有更好的編碼體驗，你也可以使用類似于sublime3這樣的軟件（無限期免費）來幫助我們。不過，如果你使用知了APP甚至可以在手機上交互式體驗HTML編碼。

07 第一個網頁“Hello,World”

07.01 網頁的構成

一個簡單的HTML網頁的構成，就像我們之前的那篇“春曉”一樣，有標記和內容就可以了。

HTML的標記方式就是使用HTML標簽(HTML tag)來進行標記的，因為HTML的規則制定者為了使其更廣泛的被接受，所以這些標簽都是以英文命名的。

這些標簽具有普遍的規律，總結起來就是：

HTML標簽是由尖括號包圍的關鍵詞，比如 <html>、<p>
HTML標簽通常是成對出現的，比如 <html> 和 </html>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始標簽&閉合標簽

記住這樣的規律后，我們就可以開始編寫我們的第一個網頁了。

07.02 <html>標簽

讓我們先認識第一個標簽<html>，這個標簽用來標記整個HTML文檔，所以我們的每一個網頁的開始和結束時都要分別寫上<html>標簽和</html>的結束標簽。你可以將其理解為是一種聲明，“我要開始寫HTML代碼了”和“我代碼寫完了”。

07.03 <body>標簽

<body>標簽是用來標記正文內容的，這個正文指的是顯示在頁面上面的信息。你可能會問，難道還有信息是不展示在頁面上面的嗎？答案是：是的。舉個簡單的例子，我們在瀏覽網頁時，會發現每個網頁的題目都不同，這個內容就沒有顯示在網頁的頁面上，而是顯示在網頁標簽中！

正文內容區

所以，記得在你想要展現在頁面上的內容前加上<body>標簽，結束時加上</body>標簽。

07.04 Hello,world!

現在，我們在這一章需要用到的標簽都已經學習完了，那么我們就開始運用它們吧！

讓我們一起做一個網頁，和世界打個招呼吧！（和世界打招呼，是每一個編程入門的傳統）

由于，同學們可能是第一次接觸HTML，所以在第一次實踐的時候，教程會盡可能的詳細。在之后的課程，就需要同學們勤于思考了！

打開文本編輯器，txt即可。
鍵入<html>，用來標記我們的文本是HTML編碼。
鍵入<body>，用來標記我們展現在頁面上的內容。
鍵入 Hello，World！，和世界打一個招呼。
鍵入</body>，標記內容結束。
鍵入</html>，標記HTML編碼結束。
將txt文件保存格式為.html,并用瀏覽器打開。

TXT下的代碼

sublime下的代碼

Chrome渲染后的代碼

08 課程作業

寫一個HTML網頁，用來做一個自我介紹！

昨天了解計算機基礎知識后，小編今天帶大家學習前端三大腳手架之一的HTML，從常用程度上，HTML可以簡單的分為：基礎HTML、核心HTML。今天將學習基礎HTML（一），因為只有把地基打扎實了，才能建高樓。

首先，什么是HTML？書本上稱為HTML(Hyper Text Markup Language),超級文本標記語言，說白了就是編寫一個網頁的語言；可以想象因為要講話，所以我們學會了文字，同理，因為要編輯網頁，所以我們要學習HTML；HTML是有一系列標記組成，同時也具有自己獨特的語法。通過標記和語法組成后，最終會由瀏覽器負責解釋，瀏覽器中有兩大解析器，html渲染解析器，js解析器（這塊后續會提到）。

HTML的發展進程，從最開始的HTML2.0>HTML3.2>HTML4.0>HTML4.01>XHTML1.0>HTML5；目前HTML已經更新到了HTML5了，HTML5給我們帶來了很多新玩意兒，后面會陸續把好東西分享給大家。

HTML5 質的發展

在今日學習之前，先分析一些開發工具，作為新手，不建議使用具有代碼提示補全的工具，建議使用EditPlus，記事本之類的工具，只有把代碼寫扎實了，再進階到高級工具。

下面進入HTML標簽的學習，也有叫標記的。

一、標簽語法

1、所有的標簽都必須使用尖括號擴起來，例如 <a>,<div> ... <A>,<a>

2、有封閉類型的標簽，也有非封閉類型的標簽

2.1、封閉類型，也稱作雙標記，則必須成對出現；語法規則： <標記>文本內容</標記>；不同的標記，決定了"文本內容"的不同表現形式；常見的封閉類型標記有:<a></a>,<p></p>,<div></div>

2.2、非封閉類型，也稱作單標記、空標記；語法規則： <標記>或者<標記/> 常見的非封閉類型標記有: <hr>,<br>,<img>

區別封閉類型和非封閉類型標簽，就看這標簽是一對出現的，還是單個出現的。

3、標簽嵌套

標簽之間可以相互嵌套，形成復雜的語法結構，簡單的例子如下：

<body>

<p>

<a></a>

</p>

</body>

4、標簽屬性，標簽屬性是指出現在開始標記中的內容，作用是修飾元素，如 <div 屬性名="屬性值"></div>

標準屬性：就是每個元素與生俱來就具備的通用屬性，常見的標準屬性有：

id ：定義每個標簽的唯一標識

title：提示文本

class：樣式相關，類樣式

style：樣式相關，行內樣式

現在可以和小編一個編寫一個簡單的標簽，同時設置這個標簽的id屬性為myDIv。（屬性命名方式：駝峰命名，后續會分享給大家）

實戰：第一步：先定義一個標簽div，即<div></div>

第二步：添加id屬性，即<div id="myDIv"></div>

疑問：如果存在多個屬性值怎么辦？怎么添加屬性值是編碼規范的？

答：如果是多屬性的，那么直接在前一個屬性值后繼續編寫，不需要用“，”或者“；”分開，直接寫就對了！而且，多個屬性排名不分先后的，舉個栗子： <div id="myDiv" title="myTitle"></p>

二、文檔結構

1、文檔類型聲明：即聲明使用的HTML版本和風格，HTML5中使用聲明為： <!doctype html>

2、html頁面

2.1、文檔根元素，每個文檔有且僅有一對根元素 , html

2.2、在根元素的內部，包含兩對子元素；

2.2.1、head : 頁面的頭部內容，定義頁面全局信息包含的內容有：

<title></title> ;網頁標題，就是網頁地址上面顯示的名稱；

2.2.2、body : 頁面的主體內容，任何一個標簽，都可能會出現在body中；<body>也是標簽，它也可以定義自己的屬性，比如網頁背景有綠色，那么就是<body bgcolor="green"></body>；

3、文本標記

3.1、特殊的文本，除了正常文字外，在一些特定的情況下會需要有特別的標點符號等，小編舉例幾個常見的特殊符號的標記，如空格對應的是“ ”、 <對應的是 “<” 可以理解為less than 、> 對應的是 “> ”理解為greater than、版權標識對應的是 “&copy”，這里需要特別特別注意的一點是每個特殊字符有需要“；”

3.2、文本標記

3.2.1、文本樣式

<b>...</b>：加粗文本；

<i>...</i>：斜體文本；

<u>...</u>：下劃線；

<s>...</s>：刪除線；

<sup>...</sup>：上標；

<sub>...</sub>：下標；

3.2.2、標題元素， 1-6級6個標題 <hn></hn> n：1-6 其中一級是最大的，六級是最小的；

3.2.3、段落元素，提供了結構化文本的表現方式，語法：<p></p>，注意：每對p標簽單獨成一個段落，常用屬性:

align：水平對齊方式取值：left center right；

4、換行元素，在代碼的任何位置處，實現回車的效果 <br />，是非封閉類型標記；

5、水平線，又叫分割線， <hr /> 也是非封閉類型標記，常用屬性；

5.1、size ：水平線的粗細，通常以像素(px)為單位；

5.2、width：寬度；

5.3、align：水平線的水平對齊方式；

5.4、color：顏色；

6、分區元素目的：為元素進行分組，多數用在布局中；

塊分區元素：<div></div> ；

行內分區元素：<span></span>；

注意：

div ：主要用在布局上；

span：修改其內部內容的樣式；

7、預格式化，保留源文檔中的空格和回車 <pre>文本內容 </pre>；

8、注釋

可以寫在html源碼中，但不被瀏覽器解釋的文本；

語法：

！！！特別注意：行內元素與塊級元素

塊級元素：默認情況下，塊級元素獨占一行，元素的前后都會自動換行 div、hn、hr、p等主要用于布局。

行內元素:默認情況，多個元素位于同一行，不會換行，span、文本標記... .主要行內元素作用:修改內部內容的樣式。

最后，小編建議多多打代碼！

預告：下一篇前端教程之HTML（二）

在線咨詢

上一篇：PS辦公技巧：如何設置圖層中的文字在畫布中居中對齊？
下一篇：CSS樣式大全

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript：06 HTML &amp;am