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

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

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

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

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

項目效果：

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

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

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

「HTML 簡介」

實驗介紹

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

知識點

什么是 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 是如何工作的

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

具體來講：

當(dā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 標(biāo)簽

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

head 元素

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

title 標(biāo)簽

作用：設(shè)置文檔的標(biāo)題或者名稱。瀏覽器通常將該標(biāo)簽的內(nèi)容顯示在窗口頂部或者標(biāo)簽頁上。每個 HTML 文檔只能有一個，必須有一個 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 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1>我是一級標(biāo)題</h1>
    <h2>我是二級標(biāo)題</h2>
    <h3>我是三級標(biāo)題</h3>
    <h4>我是四級標(biāo)題</h4>
    <h5>我是五級標(biāo)題</h5>
    <h6>我是六級標(biāo)題</h6>
  </body>
</html>

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

然后輸入上面的代碼。

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

最終效果為：

2.p 標(biāo)簽

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

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

3. 圖片標(biāo)簽

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

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

4.a 標(biāo)簽

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

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

點擊文字：

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

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

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

TML 或超文本標(biāo)記語言 允許 Web 用戶使用元素、標(biāo)簽和屬性創(chuàng)建和構(gòu)造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因為它不能創(chuàng)建動態(tài)功能。

HTML有很多用例，即：

網(wǎng)頁開發(fā)。開發(fā)人員使用 HTML 代碼來設(shè)計瀏覽器如何顯示網(wǎng)頁元素，例如文本、超鏈接和媒體文件。
互聯(lián)網(wǎng)導(dǎo)航。由于 HTML 被大量用于嵌入超鏈接，因此用戶可以輕松地在相關(guān)頁面和網(wǎng)站之間導(dǎo)航和插入鏈接。
網(wǎng)絡(luò)文檔。HTML 使組織和格式化文檔成為可能，類似于 Microsoft Word。
還值得注意的是，HTML 現(xiàn)在被視為官方 Web 標(biāo)準(zhǔn)。萬維網(wǎng)聯(lián)盟 (W3C)維護和開發(fā) HTML 規(guī)范，同時提供定期更新。

本文將介紹 HTML 的基礎(chǔ)知識，包括它的工作原理、優(yōu)缺點以及它與 CSS 和 JavaScript 的關(guān)系。

什么是 HTML？

HTML（代表超文本標(biāo)記語言）是構(gòu)成大多數(shù)網(wǎng)頁和在線應(yīng)用程序的計算機語言。超文本是用于引用其他文本片段的文本，而標(biāo)記語言是告訴 Web 服務(wù)器文檔的樣式和結(jié)構(gòu)的一系列標(biāo)記。

HTML 是如何工作的

在國內(nèi)的網(wǎng)站上找了一圈，這應(yīng)該是介紹歷史最細致的，長按保存手機里翻譯

html文件

平均每個網(wǎng)站包含幾個不同的信息 HTML 頁面。例如，主頁、關(guān)于頁面和聯(lián)系頁面都將具有單獨的 HTML 文件。

HTML 文檔是以 .html 或 .htm 擴展名結(jié)尾的文件。Web 瀏覽器讀取 HTML 文件并呈現(xiàn)其內(nèi)容，以便互聯(lián)網(wǎng)用戶可以查看它。

html元素的三個部分

所有 HTML 頁面都有一系列 HTML 元素，由一組標(biāo)簽和屬性組成。HTML 元素是網(wǎng)頁的構(gòu)建塊。標(biāo)簽告訴 Web 瀏覽器元素在哪里開始和結(jié)束，而屬性描述元素的特征。

元素的三個主要部分是：

開始標(biāo)簽 - 用于說明元素開始生效的位置。標(biāo)簽用左尖括號和右尖括號包裹。例如，使用開始標(biāo)簽 <p> 創(chuàng)建一個段落。
內(nèi)容——這是其他用戶看到的輸出。
結(jié)束標(biāo)簽 - 與開始標(biāo)簽相同，但在元素名稱前有一個正斜杠。例如，</p> 結(jié)束一個段落。

這三個部分的組合將創(chuàng)建一個 HTML 元素：

<p>這是在HTML中添加段落的方法。</p>

HTML 元素的另一個關(guān)鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標(biāo)識用戶想要添加的附加信息，并且屬性值給出進一步的說明。

例如，添加紫色和 font-family verdana 的樣式元素將如下所示：

< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >

另一個屬性，HTML 類，對于開發(fā)和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。例如，我們將對標(biāo)題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現(xiàn)相同的樣式，請在每個開始標(biāo)記后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多數(shù)元素都有一個開始標(biāo)簽和一個結(jié)束標(biāo)簽，但有些元素不需要結(jié)束標(biāo)簽即可工作，例如空元素。這些元素不使用結(jié)束標(biāo)簽，因為它們沒有內(nèi)容：

< img src= "/" alt= "圖像" >

這個圖像標(biāo)簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內(nèi)容，也沒有結(jié)束標(biāo)簽。

最后，每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：

< !DOCTYPE html >

最常用的 HTML 標(biāo)簽和 HTML 元素

目前，有 142 個 HTML 標(biāo)簽可以用于創(chuàng)建各種元素。盡管現(xiàn)代瀏覽器不再支持其中一些標(biāo)簽，但學(xué)習(xí)所有可用的不同元素仍然是有益的。

第二節(jié)將討論最常用的 HTML 標(biāo)簽和兩個主要元素——塊級元素和內(nèi)聯(lián)元素。

塊級元素

塊級元素占據(jù)頁面的整個寬度。它總是在文檔中開始一個新行。例如，標(biāo)題元素將位于與段落元素不同的行中。

每個 HTML 頁面都使用這三個標(biāo)簽：

<html>標(biāo)簽是定義整個 HTML 文檔的根元素。
<head> 標(biāo)簽保存頁面標(biāo)題和字符集等元信息。
<body>標(biāo)簽包含了頁面上出現(xiàn)的所有內(nèi)容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的塊級標(biāo)簽包括：

標(biāo)題標(biāo)簽 - 這些范圍從 <h1> 到 <h6>，其中標(biāo)題 h1 的大小最大，當(dāng)它們向上移動到 h6 時變得越來越小。
段落標(biāo)簽——全部使用 <p> 標(biāo)簽括起來。
列表標(biāo)簽——有不同的變體。<ol> 標(biāo)簽用于有序列表，<ul> 用于無序列表。然后，使用 <li> 標(biāo)記將各個列表項括起來。

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素格式化塊級元素的內(nèi)部內(nèi)容，例如添加鏈接和強調(diào)的字符串。內(nèi)聯(lián)元素最常用于在不破壞內(nèi)容流的情況下格式化文本。

例如，一個 <strong> 標(biāo)簽會以粗體呈現(xiàn)一個元素，而 <em> 標(biāo)簽會以斜體顯示它。超鏈接也是使用 <a> 標(biāo)記和 href 屬性來指示鏈接目標(biāo)的內(nèi)聯(lián)元素：

<a href="https://www.icodingdeu.com/" >點我！</a>

HTML 演變——HTML 和 HTML5 有什么區(qū)別？

HTML 的第一個版本由 18 個標(biāo)簽組成。從那時起，每個新版本都帶有添加到標(biāo)記中的新標(biāo)簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區(qū)別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標(biāo)簽，可以清楚地描述內(nèi)容，例如 <article>、<header> 和 <footer>。

HTML 的優(yōu)點和缺點

就像任何其他計算機語言一樣，HTML 有其優(yōu)點和局限性。以下是 HTML 的優(yōu)缺點：

優(yōu)點：

初學(xué)者友好: HTML 具有干凈且一致的標(biāo)記，以及較淺的學(xué)習(xí)曲線。
支持領(lǐng)域廣：該語言被廣泛使用，擁有大量資源和龐大的社區(qū)。
無障礙：它是開源的并且完全免費。HTML 在所有 Web 瀏覽器中本機運行。
靈活的：HTML很容易與PHP和 Node.js等后端語言集成。

就像任何其他計算機語言一樣，HTML 有其優(yōu)點和局限性。以下是 HTML 的優(yōu)缺點：

缺點：

靜止的 該語言主要用于靜態(tài)網(wǎng)頁。對于動態(tài)功能，您可能需要使用 JavaScript 或 PHP 等后端語言。
單獨的 HTML 頁面用戶必須為 HTML 創(chuàng)建單獨的網(wǎng)頁，即使元素相同。
瀏覽器兼容性 一些瀏覽器采用新特性的速度很慢。有時較舊的瀏覽器并不總是呈現(xiàn)較新的標(biāo)簽。

HTML、CSS 和 Javascript 是如何相關(guān)的

HTML 用于添加文本元素并創(chuàng)建內(nèi)容結(jié)構(gòu)。然而，僅僅建立一個專業(yè)的和完全響應(yīng)的網(wǎng)站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創(chuàng)建絕大多數(shù)網(wǎng)站內(nèi)容。

CSS 負責(zé)樣式，例如背景、顏色、布局、間距和動畫。
JavaScript 添加了動態(tài)功能，例如滑塊、彈出窗口和照片庫。這三種語言是前端開發(fā)的基礎(chǔ)。

結(jié)論

HTML 是 Internet 上的主要標(biāo)記語言。每個 HTML 頁面都有一系列創(chuàng)建網(wǎng)頁或應(yīng)用程序內(nèi)容結(jié)構(gòu)的元素。

HTML 是一種對初學(xué)者友好的語言，有很多支持，主要用于靜態(tài)網(wǎng)站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我們還向您展示了一些在線教學(xué)課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。

如果您有任何其他喜歡的資源來學(xué)習(xí) HTML，請在評論部分告訴我們。

程簡介:

HTML (英文全稱：HyperText Markup Language)：即超文本標(biāo)記語言，標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用。那么，HTML 和 Web 前端開發(fā)有什么關(guān)系呢？HTML 是通向 WEB 技術(shù)世界大門的鑰匙。在本 HTML 教程中，您將學(xué)習(xí)如何使用 HTML 來創(chuàng)建站點， HTML 非常容易學(xué)習(xí)，只要多看本教程，相信你會喜歡它的！

什么是“超文本標(biāo)記語言”呢？“超文本”就是指頁面內(nèi)包括文本及超過文本以外的其它元素，可以包含圖片、鏈接，甚至音樂、程序等非文字元素。在WWW上的一個超媒體文檔稱之為一個頁面，Web頁面也就是通常所說的網(wǎng)頁，在這里不作區(qū)分。

HTML結(jié)構(gòu)：

HTML 的結(jié)構(gòu)一般包括 <head> 標(biāo)簽和 <body> 標(biāo)簽，<head> 和 <body> 這2個標(biāo)記符分別表示網(wǎng)頁的頭部和正文。頭部中可包含頁面的標(biāo)題、關(guān)鍵詞、描述說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。<body> </body> 當(dāng)中是網(wǎng)頁實際顯示的內(nèi)容，正文標(biāo)記符又被稱為實體標(biāo)記。頁面當(dāng)中通常包含有很多指向其他相關(guān)頁面或其他節(jié)點的指針，通過點擊，可以很方便地獲取新的網(wǎng)頁，這是 HTML 獲得廣泛推廣運用最重要的原因之一，而由這些相互之間存在關(guān)聯(lián)的頁面組成的有機集合便是網(wǎng)站。究竟 HTML 為什么會被普及?這就要歸功于互聯(lián)網(wǎng)的高速發(fā)展，對于編程語言的需求直線上升。而 HTML5 具有超集方式的簡易性、運用廣泛的可拓展性、靈活應(yīng)變的平臺適應(yīng)性以及簡單的通用性。憑借著這些特性，HTML 越來越受到人們的喜愛。

以下是最簡單的html文檔結(jié)構(gòu)：

本文為 HTML 基礎(chǔ)教程第一章，下一章：HTML 教程導(dǎo)讀

【小提示】tips:本文由數(shù)據(jù)微學(xué)院作者原創(chuàng)，轉(zhuǎn)載請注明來源或聯(lián)系作者。更多優(yōu)秀參考好文請關(guān)注【數(shù)據(jù)微學(xué)院】個人圖書館。

在線咨詢

上一篇：HTML知識點！趕緊碼住
下一篇：給我一個瀏覽器，我就能寫代碼-幾個在線編輯器網(wǎng)站推薦

您的項目需求

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

整合營銷服務(wù)商