零基础入门 HTML 的 8 分钟极简教程
在今天，前端工程師已經成為研發體系中的重要崗位之一。
可是與此相對的是，極少大學的計算機專業愿意開設前端課，大部分前端工程師的知識，也都是在實踐和工作中不斷學習的。
最近收到很多同學的后臺留言，說希望多推出一些前端方向的教程。
今天我們就帶來一個適合前端初學者的教程，可以帶你從零入門 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 是如何工作的
下面我們來演示用戶是如何看到一個網頁顯示的。
具體來講：
HTML 文檔結構
首先我們來看一個例子：
<!DOCTYPE html> <html><head><title>HTML 簡介</title><meta charset="utf-8" /></head><body></body> </html>這是一個 HTML 的基本骨架，我們將逐步介紹這些是什么意思。
文檔類型聲明
是我們的文檔聲明頭。他告訴了瀏覽器，本文檔處理的是 HTML 文檔。html 標簽
html 標簽即根元素，此處表示文檔的開始，該標簽包含兩個子標簽：head 和 body。
head 元素
head 標簽下面所包含的標簽由 title、meta、link、style、script 等（后面會講到）。
title 標簽
作用：設置文檔的標題或者名稱。瀏覽器通常將該標簽的內容顯示在窗口頂部或者標簽頁上。每個 HTML 文檔只能有一個，必須有一個 title 標簽。
meta 標簽
<metacharset=“UTF-8”> 聲明字符的編碼格式為 utf-8。
body 標簽
body 標簽定義文檔的主體，也就是我們的主要內容（比如文本、超鏈接、圖像、表格和列表等）。
常見標簽
1.h 系類標簽
h 標簽有六種 h1，h2，h3，h4，h5，h6，它代表著我們的標題。
<!DOCTYPE html> <html><head><title>HTML 簡介</title><meta charset="utf-8" /></head><body><h1>我是一級標題</h1><h2>我是二級標題</h2><h3>我是三級標題</h3><h4>我是四級標題</h4><h5>我是五級標題</h5><h6>我是六級標題</h6></body> </html>為了大家能更有效的學習，請使用實驗樓的環境。首先我們新建一個文件，點擊 File，然后 New File，命名為 index.html。
然后輸入上面的代碼。
讓我們來看一下運行效果吧。鼠標右鍵 index.html 文件，點擊 Open With，然后點擊 Preview。
最終效果為：
2.p 標簽
p 標簽是我們的文本標簽，p 標簽會自動在其兩個標簽之間創建一些空白。刪掉上段代碼 標簽里的內容，把下面的內容放到 標簽里面去。
<p>我是第一段文字，實驗樓，做實驗，學編程</p> <p>我是第二段文字，實驗樓，做實驗，學編程</p>3. 圖片標簽
HTML 的圖像是通過標簽 來定義的。語法: <imgsrc=“圖片地址”/> 刪掉上段代碼 標簽里的內容，把下面的內容放到 標簽里面去。
<p>實驗樓圖片：</p> <img src="https://static.shiyanlou.com/frontend/dist/img/9f43b00.svg" />4.a 標簽
標簽是超鏈接標簽，意思就是我們點擊它可以跳轉到一個網頁。刪掉上段代碼 標簽里的內容，把下面的內容放到 標簽里面去。
<a href="https://www.shiyanlou.com/">實驗樓</a>點擊文字：
跳轉到指定網頁：
篇幅有限，后續內容，在 “從 0 到 1 構建待辦事項應用” 就能繼續學習。
總結
以上是生活随笔為你收集整理的零基础入门 HTML 的 8 分钟极简教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 推荐 10 个有趣的 Python 项目
- 下一篇： 代码编辑器揭露性格，你是哪一种？