在今天，前端工程師已經成為研發體系中的重要崗位之一。

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

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

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

項目效果：

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

訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”就能學習全部課程內容。

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

「HTML 簡介」

實驗介紹

本實驗是對 HTML 進行學習，并且較詳細的說明了 Web 是如何工作的。主要內容有：HTML 常見標簽、HTML 文檔結構、HTML 表格和表單、HTML 有序列表和無序列表。通過本節學習，可以構建簡單的 HTML 網頁。

知識點

• 什么是 HTML
• Web 是如何工作的
• 文檔結構
• 常見標簽
• 表格
• 表單
• 有序列表和無序列表

什么是 HTML

HTML(超文本標記語言)是一種用于創建網頁的標準標記語言。HTML 不需要編譯，可以直接由瀏覽器執行，它的解析依賴于瀏覽器的內核。它不是一種編程語言，而是一種標記語言。

Web 是如何工作的

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

具體來講：

當用戶通過瀏覽器輸入網址后，瀏覽器先在 DNS 服務器上找到它，然后對它進行解析。

解析完成后，瀏覽器給服務器發送 http 請求。

服務器同意這個請求，就把 HTML 文件發送回瀏覽器。

瀏覽器拿到 HTML 文件，對其解析執行，顯示在用戶屏幕上。

HTML 文檔結構

首先我們來看一個例子：

HTML 簡介

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

文檔類型聲明

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

html 標簽

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

head 元素

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

title 標簽

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

meta 標簽

聲明字符的編碼格式為 utf-8。

body 標簽

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

常見標簽

1.h 系類標簽

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

HTML 簡介

我是一級標題

我是二級標題

我是三級標題

我是四級標題

我是五級標題

我是六級標題

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

然后輸入上面的代碼。

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

最終效果為：

2.p 標簽

p 標簽是我們的文本標簽，p 標簽會自動在其兩個標簽之間創建一些空白。刪掉上段代碼

標簽里的內容，把下面的內容放到 標簽里面去。

我是第一段文字，實驗樓，做實驗，學編程

我是第二段文字，實驗樓，做實驗，學編程

3. 圖片標簽

HTML 的圖像是通過標簽 來定義的。語法: 刪掉上段代碼

標簽里的內容，把下面的內容放到 標簽里面去。

實驗樓圖片：

4.a 標簽

標簽是超鏈接標簽，意思就是我們點擊它可以跳轉到一個網頁。刪掉上段代碼

標簽里的內容，把下面的內容放到 標簽里面去。實驗樓

點擊文字：

跳轉到指定網頁：

篇幅有限，后續的課程內容，請在“實驗樓”邊敲代碼邊學習～

訪問“實驗樓”官網，搜索“從 0 到 1 構建待辦事項應用”，就能找到課程，繼續學習啦！

總結

以上是生活随笔為你收集整理的包含html语言的超链接标记的网页_零基础入门 HTML 的 8 分钟极简教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。