整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
63 Section Intro
為了跟上下一節(jié)的項目，以及本課程中的其他項目，熟悉HTML和CSS的基礎(chǔ)知識，它將會是非常有幫助的。
這就是這一節(jié)的全部內(nèi)容，這是一個非常簡單的HTML和CSS的速成課程。只是為了讓你開始使用這些技術(shù)。
現(xiàn)在，如果你已經(jīng)知道HTML和CSS，那么請?zhí)^這一部分，但如果沒有，那我們現(xiàn)在就繼續(xù)吧。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
064 Basic HTML Structure and Elements
本講主要學(xué)習(xí)HMTL結(jié)構(gòu)和元素。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
HTML是超文本標記語言的縮寫，我們基本上用它來描述網(wǎng)頁的內(nèi)容。HTML文檔是由元素組成的。元素用一個開始和結(jié)束標簽。所有HTML文檔中的主要元素始終是HTML元素。
每個HTML文檔都必須以標簽開始，然后用HTML關(guān)閉標簽。
在HTML元素里面，總是有標題和正文。
head里面是有關(guān)頁面的設(shè)置，還有CSS樣式和href圖標。href圖標就是在瀏覽器標簽上出現(xiàn)的小圖標。
body體內(nèi)可以使用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
本講主要學(xué)習(xí)屬性、類和ID。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
在HTML中，有些元素可以有屬性，這些屬性基本上是描述元素的。
元素可以嵌套。p元素、h1和h2元素在body體內(nèi)，作為body的子元素。
href是Hypertext Reference的縮寫。意思是指定超鏈接目標的URL。href 屬性的值可以是任何有效文檔的相對或絕對URL，包括片段標識符和JavaScript代碼段。
<a href="網(wǎng)址">網(wǎng)址描述</a>鏈接和前面的文字是一樣的，所以錨點元素a稱為內(nèi)聯(lián)元素。
h2元素是塊元素。標題與前一個元素的文本不一致，它創(chuàng)建了一個新行，其中只包含此標題的內(nèi)容。
圖像元素，使用img標簽，然后指定src源屬性，也就是指定圖像的路徑。路徑可以是當(dāng)前文件夾，也可以是網(wǎng)絡(luò)地址。img沒有結(jié)束標簽，在img標簽?zāi)┪彩褂眯备軄黹]環(huán)標簽。
我們使用類和id來命名元素，也使用類和id選擇元素，類和id是識別元素的關(guān)鍵。
id和類的區(qū)別，id必須是唯一的。id很少使用，用來設(shè)置元素樣式或從javascript中選擇它們。
接下來學(xué)習(xí)div元素。div指通用框。可以給div指定id屬性名稱。id的命名使用短橫線來分隔兩個不同的詞。
<input type="text" placeholder="Your name" />
<button>OK!</button>文本框和OK按鈕就顯示出來了。
表單需要使用form元素。將div替換為form即可。
066 Basic Styling with CSS
本講主要學(xué)習(xí)CSS樣式。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
通過CSS來讓網(wǎng)頁更加好看。
CSS應(yīng)用于head標簽內(nèi)。
使用style標簽來寫CSS樣式。
在style標簽內(nèi)，可以針對body元素來設(shè)置樣式。這叫body元素選擇器。在body后面的大括號內(nèi)，可以寫CSS的聲明，每個CSS聲明都有一個屬性名稱。例如，設(shè)置背景顏色為綠色，這是一個簡單的聲明。查看index.html頁面顏色為綠色。
<style>
body{
background-color:green;
}
</style>這就是CSS樣式。
創(chuàng)建單獨的style.css文件，和index.html相結(jié)合來實現(xiàn)CSS樣式。
在style.css文件中將CSS的聲明放過來。
在index.html文件中將style標簽及內(nèi)容改為link到style.css文件。
<link href="style.css" rel="stylesheet" />查看index.html頁面顏色為綠色。
在style.css文件中，我們繼續(xù)探索更多的CSS屬性。
body {
background-color:rgb(255, 247, 201);
font-family: Arial;
font-size: 20px;
}字體設(shè)置會在整個body體內(nèi)的部分子元素上生效。因為有些元素沒有繼承能力。
字體大小設(shè)置也會在body體內(nèi)部分子元素上生效。h1和h2這種元素的字體大小有預(yù)定義，所以不會受影響。
除了body元素選擇器，還可以定義其他元素選擇器。對于h1元素，可以單獨設(shè)置字體大小。
對于類和id，如何在style.css中設(shè)置？
對于first類，設(shè)置字體顏色。
.first {
color: red;
}對于表格id的設(shè)置背景顏色和邊框樣式。
在style.css文件中如下：
#your-name {
background-color: rgb(255, 220, 105);
border: 5px solid #444;
}邊界屬性不會繼承屬性。
查看index.html頁面變化如下。
067 Introduction to the CSS Box Model
本講主要學(xué)習(xí)CSS盒子模型。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
盒子模型是CSS最基本的部分。
這是因為它是定義元素如何在網(wǎng)頁上顯示以及如何調(diào)整大小的主要因素。
圖中，所有描述都可以使用CSS屬性來表示。
這些描述是可選的。可以沒有這個，或者沒有那個。
內(nèi)容：文字、圖像等；
填充物：盒子周圍透明區(qū)域，盒子內(nèi)部；
邊框：環(huán)繞填充物和內(nèi)容；
頁邊：盒子之間的空隙；
填充區(qū)：被填充的區(qū)域。
接下來，我們做全局重置，涉及到以上屬性的設(shè)置，需要用到所有元素。
在style.css文件中，需要引入“\*”符號，像通配符一樣，表示選擇頁面上的所有元素。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}將margin和padding設(shè)置為0后，查看index.html頁面少了很多空行。
盒子大小屬性設(shè)置為邊框。
在body內(nèi)增加一些空間。
padding: 50px;在h1內(nèi)增加邊框。
padding-bottom: 25px;在h2內(nèi)增加文本對齊方式。
text-align: center;在圖像之間增加空白空間。
padding: 25px;
margin-top: 30px;在style.css文件中，注釋使用/* */來完成。
將box-sizing: border-box;注釋后，查看your-name的寬度在400的基礎(chǔ)上增加了25和5，實際達到了460.
取消box-sizing: border-box;注釋后，查看your-name的寬度嚴格限制在400，同時內(nèi)容寬度自動調(diào)整為340。
P選擇器，可以對所有段落進行樣式設(shè)置。
P {
margin-bottom: 20px;
}輸入框和按鈕也可以進行樣式設(shè)置。
input, button {
padding: 10px;
font-size: 16px;
}對于鏈接也可以設(shè)置樣式，改變默認的藍色。
a {
background-color: yellowgreen;
}在CSS中的常用選擇器，首先是點，然后是id。
還有一種情況，index.html中有2個h2元素，只對第2個h2元素設(shè)置樣式。
#your-name h2 {
color: olivedrab;
}還有最常用的設(shè)置是關(guān)于圖像的尺寸設(shè)置。
#course-image {
width: 200px;
}圖像的長按照寬度的變化，成比例變化。
00.01 索引
01 知了學(xué)習(xí)社課程簡介
02 本課程適用人群
03 課程的學(xué)習(xí)意義
04 課程設(shè)計模式
05 HTML工作環(huán)境
06 第一個網(wǎng)頁“Hello,World”
07 課程作業(yè)
00.02 課前提問
我們?nèi)粘g覽的網(wǎng)頁是怎樣實現(xiàn)的？
知了學(xué)習(xí)社是一個交互式學(xué)習(xí)平臺。課程學(xué)習(xí)資料均由專業(yè)人員及志愿者根據(jù)學(xué)科權(quán)威書目及熱門公開課編寫，第一版內(nèi)容涵蓋計算機、經(jīng)濟以及心理學(xué)等基礎(chǔ)課程。全部課程的學(xué)習(xí)資料都以交互學(xué)習(xí)的形式，共享在知了學(xué)習(xí)社APP（Android&IOS）。部分課程會以文章的形式預(yù)覽給大家！
想要拓寬視野，提升技能，脫離舒適區(qū)的人
有興趣接觸互聯(lián)網(wǎng)Web的相關(guān)知識
沒有編寫HTML代碼的經(jīng)驗或者沒有系統(tǒng)的接觸過HTML
每周有3個小時以上的時間用來學(xué)習(xí)及實踐HTML
如果，你符合以上要求，那么這一系列課程將是你通往Web網(wǎng)絡(luò)世界的關(guān)鍵鑰匙。這門課程足夠基礎(chǔ)，哪怕你之前從來沒有學(xué)習(xí)過任何編程知識。只要你勤于思考，你仍然可以輕松應(yīng)付課程中的全部內(nèi)容。
在學(xué)習(xí)完本課程后，你將收獲哪些？
技能——構(gòu)建網(wǎng)頁的能力
我們每天都在瀏覽著網(wǎng)頁，我們的視線被網(wǎng)頁中紛繁復(fù)雜的圖片和文字所吸引。但是，可能你是否想象過，這一個個網(wǎng)頁背后的模樣?它們是如何實現(xiàn)的？是怎樣一個過程讓這些網(wǎng)頁散發(fā)著魅力，讓我們深陷其中？
在學(xué)習(xí)完本課程后，這一系列的問題，你都可以找到答案！
2. 視角——更規(guī)則的世界
計算機沒有類似于人類的智能，他們只能按照人類制定下的規(guī)矩來運行。如果，你給出的規(guī)定不足夠的明確，你就會發(fā)現(xiàn)計算機的行為完全不符合你的預(yù)期，它沒有辦法足夠靈活的處理你的指令。同時，只要你的指令足夠正確清楚，計算機也絕不會出錯。
這樣一個完全基于規(guī)則的程序世界，與我們?nèi)粘Ｉ畹氖澜绲倪\行規(guī)律完全不同。在學(xué)習(xí)本課程后，你將從另一個視角來審視自己的學(xué)習(xí)生活、人際關(guān)系甚至愛情。這個視角難以言狀，非要概括的話可以說這種視角“更抽象、更細致、更系統(tǒng)化”。
本課程的教學(xué)模式來源于“PQ4R”學(xué)習(xí)理論，即預(yù)覽（Preview），設(shè)問（Question）、閱讀（Read）、反思（Reflect）、背誦（Recite）和回顧（Review）。知了學(xué)習(xí)社的課程內(nèi)容都是基于以上的流程進行設(shè)計，通過這樣的流程來學(xué)習(xí)，將會大幅提高你的學(xué)習(xí)效率。
預(yù)覽（Preview），課程第一部分，將展示本章學(xué)習(xí)內(nèi)容的索引，以便清晰快速的了解學(xué)習(xí)內(nèi)容的架構(gòu)
設(shè)問（Question），課程第二部分，會向你提出2-3個相關(guān)問題，即帶著問題去閱讀
閱讀（Read），即課程正文
反思（Reflect），在閱讀之后，你需要回答課前提出的幾個問題，試試自己能否說出令人滿意的答案。
背誦（Recite），這個部分需要同學(xué)們根據(jù)自身情況來選擇背誦內(nèi)容。
回顧（Review），課后練習(xí)
PQ4R學(xué)習(xí)理論
話不多說，讓我們開始今天的課程把。
HTML
HTML的全稱是超文本標記語言 (Hyper Text Markup Language)，這套標記語言是通過一套標記標簽進行工作的。這種標記的意義在于將文本以及文本相關(guān)的其他信息結(jié)合起來，從而展現(xiàn)出關(guān)于文檔結(jié)構(gòu)和數(shù)據(jù)處理的細節(jié)。
你可能不是很理解什么叫做文檔結(jié)構(gòu)和數(shù)據(jù)處理，讓我們以古詩《春曉》舉個例子你就明白了！
通常，我們看到的《春曉》應(yīng)該是這個樣子的。
春曉
孟浩然
春眠不覺曉，處處聞啼鳥。
夜來風(fēng)雨聲，花落知多少。
對于，人類來講確實已經(jīng)足夠了，但是對于計算機來講，這樣的文本顯然還不夠結(jié)構(gòu)化。比如，我想讓計算機回答我這首詩的題目是什么？作者是誰？計算機顯然沒有辦法給我正確的答案。如果，我想讓計算機把所有古詩的題目加粗顯示，作者用斜體顯示，那就更為難它了！
但是，聰明的程序員們，為了解決這個問題。就發(fā)明了一種叫做HTML的標記語言來為文本附加一些信息，從而完成上述的艱巨任務(wù)。這套標記語言大概長成這個樣子：
<題目> 春曉 </題目>
<作者> 孟浩然 </作者>
<詩句> 春眠不覺曉，處處聞啼鳥。</詩句>
<詩句> 夜來風(fēng)雨聲，花落知多少。</詩句>
這樣一來，當(dāng)我們想要計算機告訴我們古詩的題目時，它只要返還包含在<題目>和</題目>之間的內(nèi)容就可以了，修改樣式也是同樣的道理。當(dāng)然，這只是HTML標記語言強大功能的冰山一角。
好了，關(guān)于HTML的簡介就先到這里，還有更有意思的等待著我們！
“工欲善其事，必先利其器”
其實，HTML的代碼只要在文本編輯器中就可以了，我們不需要下載安裝任何軟件。只要你的電腦能創(chuàng)建txt文本文檔就可以了。
但是為了有更好的編碼體驗，你也可以使用類似于sublime3這樣的軟件（無限期免費）來幫助我們。不過，如果你使用知了APP甚至可以在手機上交互式體驗HTML編碼。
07.01 網(wǎng)頁的構(gòu)成
一個簡單的HTML網(wǎng)頁的構(gòu)成，就像我們之前的那篇“春曉”一樣，有標記和內(nèi)容就可以了。
HTML的標記方式就是使用HTML標簽(HTML tag)來進行標記的，因為HTML的規(guī)則制定者為了使其更廣泛的被接受，所以這些標簽都是以英文命名的。
這些標簽具有普遍的規(guī)律，總結(jié)起來就是：
HTML標簽是由尖括號包圍的關(guān)鍵詞，比如 <html>、<p>
HTML標簽通常是成對出現(xiàn)的，比如 <html> 和 </html>
標簽對中的第一個標簽是開始標簽，第二個標簽是結(jié)束標簽
開始標簽&閉合標簽
記住這樣的規(guī)律后，我們就可以開始編寫我們的第一個網(wǎng)頁了。
07.02 <html>標簽
讓我們先認識第一個標簽<html>，這個標簽用來標記整個HTML文檔，所以我們的每一個網(wǎng)頁的開始和結(jié)束時都要分別寫上<html>標簽和</html>的結(jié)束標簽。你可以將其理解為是一種聲明，“我要開始寫HTML代碼了”和“我代碼寫完了”。
07.03 <body>標簽
<body>標簽是用來標記正文內(nèi)容的，這個正文指的是顯示在頁面上面的信息。你可能會問，難道還有信息是不展示在頁面上面的嗎？答案是：是的。舉個簡單的例子，我們在瀏覽網(wǎng)頁時，會發(fā)現(xiàn)每個網(wǎng)頁的題目都不同，這個內(nèi)容就沒有顯示在網(wǎng)頁的頁面上，而是顯示在網(wǎng)頁標簽中！
正文內(nèi)容區(qū)
所以，記得在你想要展現(xiàn)在頁面上的內(nèi)容前加上<body>標簽，結(jié)束時加上</body>標簽。
07.04 Hello,world!
現(xiàn)在，我們在這一章需要用到的標簽都已經(jīng)學(xué)習(xí)完了，那么我們就開始運用它們吧！
讓我們一起做一個網(wǎng)頁，和世界打個招呼吧！（和世界打招呼，是每一個編程入門的傳統(tǒng)）
由于，同學(xué)們可能是第一次接觸HTML，所以在第一次實踐的時候，教程會盡可能的詳細。在之后的課程，就需要同學(xué)們勤于思考了！
打開文本編輯器，txt即可。
鍵入<html>，用來標記我們的文本是HTML編碼。
鍵入<body>，用來標記我們展現(xiàn)在頁面上的內(nèi)容。
鍵入 Hello，World！，和世界打一個招呼。
鍵入</body>，標記內(nèi)容結(jié)束。
鍵入</html>，標記HTML編碼結(jié)束。
將txt文件保存格式為.html,并用瀏覽器打開。
TXT下的代碼
sublime下的代碼
Chrome渲染后的代碼
08 課程作業(yè)
寫一個HTML網(wǎng)頁，用來做一個自我介紹！
昨天了解計算機基礎(chǔ)知識后，小編今天帶大家學(xué)習(xí)前端三大腳手架之一的HTML，從常用程度上，HTML可以簡單的分為：基礎(chǔ)HTML、核心HTML。今天將學(xué)習(xí)基礎(chǔ)HTML（一），因為只有把地基打扎實了，才能建高樓。
首先，什么是HTML？書本上稱為HTML(Hyper Text Markup Language),超級文本標記語言，說白了就是編寫一個網(wǎng)頁的語言；可以想象因為要講話，所以我們學(xué)會了文字，同理，因為要編輯網(wǎng)頁，所以我們要學(xué)習(xí)HTML；HTML是有一系列標記組成，同時也具有自己獨特的語法。通過標記和語法組成后，最終會由瀏覽器負責(zé)解釋，瀏覽器中有兩大解析器，html渲染解析器，js解析器（這塊后續(xù)會提到）。
HTML的發(fā)展進程，從最開始的HTML2.0>HTML3.2>HTML4.0>HTML4.01>XHTML1.0>HTML5；目前HTML已經(jīng)更新到了HTML5了，HTML5給我們帶來了很多新玩意兒，后面會陸續(xù)把好東西分享給大家。
HTML5 質(zhì)的發(fā)展
在今日學(xué)習(xí)之前，先分析一些開發(fā)工具，作為新手，不建議使用具有代碼提示補全的工具，建議使用EditPlus，記事本之類的工具，只有把代碼寫扎實了，再進階到高級工具。
下面進入HTML標簽的學(xué)習(xí)，也有叫標記的。
一、標簽語法
1、所有的標簽都必須使用尖括號擴起來，例如 <a>,<div> ... <A>,<a>
2、有封閉類型的標簽，也有非封閉類型的標簽
2.1、封閉類型，也稱作雙標記，則必須成對出現(xiàn)；語法規(guī)則： <標記>文本內(nèi)容</標記>； 不同的標記，決定 了"文本內(nèi)容"的不同表現(xiàn)形式；常見的封閉類型標記有:<a></a>,<p></p>,<div></div>
2.2、非封閉類型，也稱作單標記、空標記；語法規(guī)則： <標記>或者<標記/> 常見的非封閉類型標記有: <hr>,<br>,<img>
區(qū)別封閉類型和非封閉類型標簽，就看這標簽是一對出現(xiàn)的，還是單個出現(xiàn)的。
3、標簽嵌套
標簽之間可以相互嵌套，形成復(fù)雜的語法結(jié)構(gòu)，簡單的例子如下：
<body>
<p>
<a></a>
</p>
</body>
4、標簽屬性，標簽屬性是指出現(xiàn)在開始標記中的內(nèi)容，作用是修飾元素，如 <div 屬性名="屬性值"></div>
標準屬性：就是每個元素與生俱來就具備的通用屬性，常見的標準屬性有：
id ：定義每個標簽的唯一標識
title：提示文本
class：樣式相關(guān)，類樣式
style：樣式相關(guān)，行內(nèi)樣式
現(xiàn)在可以和小編一個編寫一個簡單的標簽，同時設(shè)置這個標簽的id屬性為myDIv。（屬性命名方式：駝峰命名，后續(xù)會分享給大家）
實戰(zhàn)：第一步：先定義一個標簽div，即<div></div>
第二步：添加id屬性，即<div id="myDIv"></div>
疑問：如果存在多個屬性值怎么辦？怎么添加屬性值是編碼規(guī)范的？
答：如果是多屬性的，那么直接在前一個屬性值后繼續(xù)編寫，不需要用“，”或者“；”分開，直接寫就對了！而且，多個屬性排名不分先后的，舉個栗子： <div id="myDiv" title="myTitle"></p>
二、文檔結(jié)構(gòu)
1、文檔類型聲明：即聲明使用的HTML版本和風(fēng)格，HTML5中使用聲明為： <!doctype html>
2、html頁面
2.1、文檔根元素，每個文檔有且僅有一對根元素 , html
2.2、在根元素的內(nèi)部，包含兩對子元素；
2.2.1、head : 頁面的頭部內(nèi)容，定義頁面全局信息 包含的內(nèi)容有：
<title></title> ;網(wǎng)頁標題，就是網(wǎng)頁地址上面顯示的名稱；
<meta />:聲明元數(shù)據(jù)(編碼,關(guān)鍵字,描述)，最重要的搜索引擎SEO主要是寫這部分；同時也可以定義一些網(wǎng)頁屬性，比如說，中文顯示 <meta charset="utf-8" />；
<style></style>:聲明內(nèi)部樣式表，聲明當(dāng)前網(wǎng)頁所用到的樣式，這種方式的樣式定義只能運用在當(dāng)前頁面，其他頁面不能使用這里定義的樣式；
<link />:引入外部樣式表，引入外部定義好的樣式，只要是這個頁面想要用到某一個外部樣式表，就直接引入就可以用了，這種樣式表定義運用彌補上面<style></style>不能共享的缺陷，是的代碼達到了重用的優(yōu)勢；
<script></script>:定義或引入腳本文件，主要是引入一些js腳本語言，完成這個頁面所需要的交互；
2.2.2、body : 頁面的主體內(nèi)容，任何一個標簽，都可能會出現(xiàn)在body中；<body>也是標簽，它也可以定義自己的屬性，比如網(wǎng)頁背景有綠色，那么就是<body bgcolor="green"></body>；
3、文本標記
3.1、特殊的文本，除了正常文字外，在一些特定的情況下會需要有特別的標點符號等，小編舉例幾個常見的特殊符號的標記，如 空格對應(yīng)的是“ ”、 <對應(yīng)的是 “<” 可以理解為less than 、> 對應(yīng)的是 “> ”理解為greater than、 版權(quán)標識對應(yīng)的是 “©”，這里需要特別特別注意的一點是 每個特殊字符有需要“；”
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、段落元素，提供了結(jié)構(gòu)化文本的表現(xiàn)方式， 語法：<p></p>， 注意：每對p標簽單獨成一個段落，常用屬性:
align：水平對齊方式 取值：left center right；
4、換行元素，在代碼的任何位置處，實現(xiàn)回車的效果 <br />，是非封閉類型標記；
5、水平線， 又叫分割線， <hr /> 也是非封閉類型標記，常用屬性；
5.1、size ：水平線的粗細，通常以像素(px)為單位；
5.2、width：寬度；
5.3、align：水平線的水平對齊方式；
5.4、color：顏色；
6、分區(qū)元素目的：為元素進行分組，多數(shù)用在布局中；
塊分區(qū)元素：<div></div> ；
行內(nèi)分區(qū)元素：<span></span>；
注意：
div ：主要用在布局上；
span：修改其內(nèi)部內(nèi)容的樣式；
7、預(yù)格式化，保留源文檔中的空格和回車 <pre>文本內(nèi)容 </pre>；
8、注釋
可以寫在html源碼中，但不被瀏覽器解釋的文本；
語法： <!-- 注釋內(nèi)容 -->
！！！特別注意：行內(nèi)元素與塊級元素
塊級元素：默認情況下，塊級元素獨占一行，元素的前后都會自動換行 div、hn、hr、p等 主要用于布局。
行內(nèi)元素:默認情況，多個元素位于同一行，不會換行，span、文本標記... .主要行內(nèi)元素作用:修改內(nèi)部內(nèi)容的樣式。
最后，小編建議多多打代碼！
預(yù)告：下一篇 前端教程之HTML（二）
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
