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

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

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

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

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

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

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

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

實例解析

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

什么是HTML？

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

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 和

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

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

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

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

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

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

html的版本：

<!DOCTYPE>聲明

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

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

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

<!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">

中文編碼

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

來看下常用的標簽列表，后文會一一介紹：

<!DOCTYPE html>

<head>

</head>

基本標簽

使用 HTML5 doctype，不區分大小寫。

<!DOCTYPE html>

聲明文檔使用的字符編碼

更加標準的 lang 屬性寫法 http://zhi.hu/XyIa

簡體中文
<html lang="zh-cmn-Hans">
繁體中文
<html lang="zh-cmn-Hant">

很少情況才需要加地區代碼，通常是為了強調不同地區漢語使用差異，例如：

菠蘿和鳳梨其實是同一種水果。只是大陸和臺灣稱謂不同，且新加坡、馬來西亞一帶的稱謂也是不同的，稱之為黃梨。

優先使用 IE 最新版本和 Chrome

SEO 優化

頁面描述

每個網頁都應有一個不超過 150 個字符且能準確反映網頁內容的描述標簽。文檔

頁面關鍵詞

定義頁面標題

定義網頁作者

定義網頁搜索引擎索引方式，robotterms是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。文檔

可選標簽

為移動設備添加 viewport

content 參數：

width viewport 寬度(數值/device-width)
height viewport 高度(數值/device-height)
initial-scale 初始縮放比例
maximum-scale 最大縮放比例
minimum-scale 最小縮放比例
user-scalable 是否允許用戶縮放(yes/no)
minimal-ui iOS 7.1 beta 2 中新增屬性（注意：iOS8 中已經刪除），可以在頁面加載時最小化上下狀態欄。這是一個布爾值，可以直接這樣寫：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

iOS 設備

添加到主屏后的標題（iOS 6 新增）

是否啟用 WebApp 全屏模式

設置狀態欄的背景顏色

content 參數：

default 默認值。
black 狀態欄背景是黑色。
black-translucent 狀態欄背景是黑色半透明。

如果設置為 default 或 black ,網頁內容從狀態欄底部開始。

如果設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

禁止數字識自動別為電話號碼

iOS 圖標

rel 參數：

apple-touch-icon 圖片自動處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統自動添加效果，直接顯示設計原圖。

iPhone 和 iTouch，默認 57x57 像素，必須有

iPad，72x72 像素，可以沒有，但推薦有

Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有

Retina iPad，144x144 像素，可以沒有，但推薦有

iOS 啟動畫面

官方文檔：https://developer.apple.com/library/ios/qa/qa1686/_index.html

參考文章：http://wxd.ctrip.com/blog/2013/09/ios7-hig-24/

iPad 的啟動畫面是不包括狀態欄區域的。

iPad 豎屏 768 x 1004（標準分辨率）

iPad 豎屏 1536x2008（Retina）

iPad 橫屏 1024x748（標準分辨率）

iPad 橫屏 2048x1496（Retina）

iPhone 和 iPod touch 的啟動畫面是包含狀態欄區域的。

iPhone/iPod Touch 豎屏 320x480 (標準分辨率)

iPhone/iPod Touch 豎屏 640x960 (Retina)

iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)

添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）文檔

Android

Android Lollipop 中的 Chrome 39 增加 theme-color meta 標簽，用來控制選項卡顏色。

http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

Windows 8

Windows 8 磁貼顏色

Windows 8 磁貼圖標

其他

添加 RSS 訂閱

添加 favicon icon

禁止 Chrome 瀏覽器中自動提示翻譯

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

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

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

今天我們就帶來一門適合前端初學者的課程，可以帶你從零入門 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 文檔結構

首先我們來看一個例子：

<!DOCTYPE html>
<html>
  <head>
    <title>HTML 簡介</title>
    <meta charset="utf-8" />
  </head>
  <body></body>
</html>

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

文檔類型聲明

<!DOCTYPE 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 標簽會自動在其兩個標簽之間創建一些空白。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

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

3. 圖片標簽

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

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

4.a 標簽

<a> 標簽是超鏈接標簽，意思就是我們點擊它可以跳轉到一個網頁。刪掉上段代碼 <body> 標簽里的內容，把下面的內容放到 <body> 標簽里面去。

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

點擊文字：

跳轉到指定網頁：

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

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

在線咨詢

上一篇：13條高效實用的JavaScript單行代碼，關注收藏哦
下一篇：Javascript全屏模式的切換

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商