HTML教程（看完這篇就夠了）

TML教程

超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學(xué)習(xí)如何使用 HTML 來創(chuàng)建站點。

HTML 很容易學(xué)習(xí)！相信您能很快學(xué)會它！

本教程包含了數(shù)百個 HTML 實例。

使用本站的編輯器，您可以輕松實現(xiàn)在線修改 HTML，并查看實例運行結(jié)果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標(biāo)題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<body>
<h1>這是我的標(biāo)題</h1>
<p>這是我的段落</p>
</body>
</html>

實例解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset=“utf-8”> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 元素描述了文檔的標(biāo)題
<body> 元素包含了可見的頁面內(nèi)容
<h1> 元素定義一個大標(biāo)題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標(biāo)記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標(biāo)記語言
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容
HTML文檔也叫做 web 頁面
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML

標(biāo)簽

HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如 <html>

HTML 標(biāo)簽通常是成對出現(xiàn)的，比如 <b> 和 </b>

標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽

開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽

<標(biāo)簽>內(nèi)容</標(biāo)簽>

html元素

“HTML 標(biāo)簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴(yán)格來講, 一個 HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，F(xiàn)irefox，Safari）是用于讀取HTML文件，并將其作為網(wǎng)頁顯示。

瀏覽器并不是直接顯示的HTML標(biāo)簽，但可以使用標(biāo)簽來決定如何展現(xiàn)HTML頁面的內(nèi)容給用戶

html網(wǎng)頁結(jié)構(gòu)

<html>
    <head>
        <title>頁面標(biāo)題</title>
    </head>
    <body>
        <h1>這是一個標(biāo)題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網(wǎng)頁。

網(wǎng)絡(luò)上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網(wǎng)頁內(nèi)容。

doctype 聲明是不區(qū)分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現(xiàn)中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

TML是超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

.HTML指的是超文本標(biāo)記語言

.HTML不是編程語言，而是一種標(biāo)記語言

.標(biāo)記語言是一套標(biāo)記標(biāo)簽

.HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

.HTML文檔包含了HTML標(biāo)簽和文本內(nèi)容

.HTML文檔也叫做web頁面

HTML實例：

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
    <title> HTML教程實例</title>
  </head>
<body>
  <h1>我的第一個標(biāo)題</h1>
<p>我的第一個段落</p>
  </body>
  </html>

注意：對于中文網(wǎng)頁需要使用<meta charset="udf-8">聲明編碼，否則出現(xiàn)亂碼。有些瀏覽器(如 360 瀏覽器)會設(shè)置 GBK 為默認編碼，則你需要設(shè)置為 <meta charset="gbk">。

實例解析：

<!DOCTYPE html>聲明為HTML5文檔

<html>元素是HTML頁面的根元素

<head>元素包含了文檔的元數(shù)據(jù)

<title>元素描述了文檔的標(biāo)題

<body>元素包含了可見的頁面內(nèi)容

<h1>元素定義一個大標(biāo)題

<p>元素定義一個段落

今天，前端工程師已經(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í)啦！

在線咨詢

上一篇：網(wǎng)站響應(yīng)速度怎么優(yōu)化幾個方面進行
下一篇：「玩轉(zhuǎn)前端」如何創(chuàng)建完美的HTML郵件

您的項目需求

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

整合營銷服務(wù)商