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。

HTML標簽相關的字符串格式化

string nl2br ( string $string )

nl2br() 就是將\n 替換成 //javascript對\n才能夠執行換行,對是不能執行換行

htmlspecialchars() 把一些預定義的字符轉換為 HTML 實體。

string htmlspecialchars(string,quotestyle,[character-set])

轉換以下字符及對應的實體

& （和號） 成為 &
" （雙引號） 成為 "
' （單引號） 成為 '
< （小于） 成為 <
> （大于） 成為 >

第二個參數: ENT_COMPAT 只轉換雙引號, 保留單引號, 為默認值 compat: 兼容性

ENT_QUOTES 同時轉換兩種引號 quotes: 引號

ENT_NOQUOTES 不對引號進行轉換

<html>
<body>
<?php
$str = "John & \" 'Adams'";
echo htmlspecialchars($str, ENT_COMPAT);
echo "<br />";
echo htmlspecialchars($str, ENT_QUOTES);
echo "<br />";
echo htmlspecialchars($str, ENT_NOQUOTES);
?>
</body>
</html>

輸出結果:John & " 'Adams'

John & " 'Adams'

htmlentities() 可以將所有的非ASCII碼字符轉換為對應的實體代碼;除字母、數字、\外, 漢字和鍵盤上其他字符都轉換

<?php
$str = "A 'quote' \" is <b>bold</b>" ;
echo htmlentities ( $str ); // 輸出后源代碼: A 'quote' is <b>bold</b>
echo htmlentities ( $str , ENT_QUOTES ); // 輸出后源代碼: A 'quote' is <b>bold</b>
?>

返回的結果:A 'quote' "is bold

A 'quote' "is bold

注意: htmlspecialchars()和htmlentities作用直接輸出HTML腳本

htmlspecialchars()和htmlentities()函數對于轉義字符"\"處理,不會轉義實體代碼,要么當轉義字符對待,要么原樣輸出;

PHP中htmlentities和htmlspecialchars的區別

這兩個函數的功能都是轉換字符為HTML字符編碼, 特別是url和代碼字符串。防止字符標記被瀏覽器執行。

使用中文時沒什么區別, 但htmlentities會格式化中文字符使得中文輸入是亂碼。

htmlentities轉換所有的html標記, htmlspecialchars只格式化& ' " < 和 > 這幾個特殊符號

addslashes() 在指定的預定義字符前添加反斜杠。

這些預定義字符是：單引號 (') 雙引號 (") 反斜杠 (\) NULL字符(\x00)

提示：該函數可用于為存儲在數據庫中的字符串以及數據庫查詢語句準備合適的字符串。

注釋：默認情況下，PHP 指令 magic_quotes_gpc 為 on，對所有的 GET、POST 和 COOKIE數據自動運行 addslashes()。

不要對已經被magic_quotes_gpc轉義過的字符串使用 addslashes()，因為這樣會導致雙層轉義。

遇到這種情況時可以使用函數 get_magic_quotes_gpc() 進行檢測。(如:$c=(!get_magic_quotes_gpc())?addslashes($c):$c;)

在本例中，我們要向字符串中的預定義字符添加反斜杠：

<?php
$str = "Who's John Adams?";
echo $str . " This is not safe in a database query.<br />";
echo addslashes($str) . " This is safe in a database query.";
?>

輸出：

Who's John Adams? This is not safe in a database query.

Who\'s John Adams? This is safe in a database query.

<?php
header("Content-type:text/html; charset=utf-8");
$str = "wo are \x0a studying \x00 php";
echo $str;
echo "<br>";
echo addslashes($str);
?>

輸出:

wo are studying php

wo are studying >wo are studying \0 php< php

stripslashes() 刪除反斜線（"\"）

在提交的表單數據中 ' " \ 等字符前被自動加上一個\ ,這是配置文件php.ini中選項magic_quotes_gpc在起作用，

默認是打開的，如果不處理則將數據保存到數據庫時，有可能會被數據庫誤當成控制符號而引起錯誤。

通常htmlspecialchars()和stripslashes()函數復合的方式，聯合處理表單中的提交的數據htmlspecialchars(stripslashes())

strip_tags()

string strip_tags ( string $str [, string $allowable_tags ] )

剝去 HTML、XML 以及 PHP 的標簽。

<?php
echo strip_tags("Hello <b><i>world!</i></b>","<b>");
?>

輸出結果:Hello world!

實例:

<?php
$str = "<b>webserver;</b> & \ 'Linux' & Apache";
echo "$str"; //直接輸出
echo "<br/>";
echo htmlspecialchars($str,ENT_COMPAT); //只轉換雙引號,為默認參數
echo "<br />";
echo htmlspecialchars($str,ENT_NOQUOTES); //不對引號進行轉換
echo "<br />";
echo htmlspecialchars($str,ENT_QUOTES); //同時轉換單引號和雙引號
echo "<br />";
echo htmlentities($str); //將所有的非ASCII碼字符轉換為對應的實體代碼
echo "<br />";
echo addslashes($str); //將" ' \ 字符前添加反斜線
echo "<br />";
echo stripslashes($str); //刪除反斜線
echo "<br />";
echo strip_tags($str); //刪除<html>標記
?>

輸出結果:

webserver; & \ 'Linux' & Apache

題來源：

在微信公眾號開發指定回復消息為文本格式的時候，嘗試了幾種換行方式都不行，最終了解即 XML 的換行應使用：

是字符實體編號（16進制），可以用于處理XML中文本的換行。

對應的正確代碼在第9行（部分文字有修改）：

<xml>
 <ToUserName><![CDATA[<%= toUserName %>]]></ToUserName>
 <FromUserName><![CDATA[<%= fromUserName %>]]></FromUserName>
 <CreateTime><% createTime %></CreateTime>
 <MsgType><![CDATA[<%= msgType %>]]></MsgType>
 <% if (msgType === 'text') { if(content!=="zs") { %>
 <Content><![CDATA[<%= content %>]]></Content>
 <% } else { %>
 <Content>歡迎來到報名圖書館暑假工！
報名步驟：
①將招聘推文轉發至朋友圈或者40人以上的群，讓更多同學了解本招聘。為招聘方宣傳以找到更多優質學生員工。
→<a >點此進入招聘推文</a>
②回復你的資料：報名+姓名+電話號碼+深圳哪個區+可上班時間
</Content>
 <% }} else if (msgType === 'zs') { %>
 <Content><a >ddwadwada</a></Content>
 <% } else if (msgType === 'image') { %>
 <Image>
 <MediaId><![CDATA[<%= content.mediaId %>]]></MediaId>
 </Image>
 ...
</xml>

由這個問題，我們想到web開發中還有一些類似的“亂碼”，這些亂碼又有哪些規律呢？

字符實體

字符實體是XML和HTML中的字符編碼方式，也就是上面事例中提到的，格式為：

& + 實體名稱 + ;
& + (# + unicode編碼) + ;

實體名稱一般是有意義的詞，方便大家記憶，比如小于號<的實體名稱是lt，也就是less than的縮寫。只有部分符號是有實體名稱的，使用unicode編碼是更通用的寫法。

像文字類一般不會采用這種編碼方式，主要用于在HTML或XML文檔中輸出一些保留字符和空格，比如我想在HTML中展示一段html代碼就需要使用字符實體

比如我們要展示`<p>情深深雨蒙蒙</p>` 以下兩種表示是等效的
?
<pre>
 <p>情深深雨蒙蒙</p>
 <p>情深深雨蒙蒙</p>
</pre>

總而言之，字符實體是HTML和XML中的編碼方式，比如在HTML文檔中寫入：我，那么最終頁面上看到的是我這個漢字。

unicode字符

編程語言中的unicode字符的格式為：

\u + 16進制unicode編碼

絕大多數編程語言，包括CSS中都支持unicode字符，不過HTML和XML是不支持的。那么什么時候使用unicode字符呢？一般來說有兩種場景：

避免文件保存時采用不同編碼導致的亂碼，因為\u已經聲明了是unicode。
正則匹配中的一些應用：Unicode編碼及在正則表達式中的使用

在JS中可以使用charCodeAt()獲取字符串的10進制unicode編碼

URL編碼

類似%E6%88%91這樣的，叫做URL編碼，在鏈接的參數里非常常見

網絡標準RFC 1738做了硬性規定：

“只有字母和數字[0-9a-zA-Z]、一些特殊符號”$-_.+!*'(),”[不包括雙引號]、以及某些保留字，才可以不經過編碼直接用于URL。”

所以像漢字，空格這些都必須經過轉碼。上面講的unicode字符，字符實體用的都是unicode編號，而URL編碼用的則是utf-8, 規則是將utf-8編碼每隔兩個字符加一個%

UTF 是英文 Unicode Transformation Format 的縮寫，意為把 Unicode 字符轉換為某種格式。unicode和utf-8并不是同一種東西，但是又存在著聯系：unicode是信源編碼，對字符集數字化; utf-8，utf-16這些是信道編碼，為更好的存儲和傳輸。

簡單說，unicode就是一組數字，每一個數字對應一個字符。utf-8就是對字符的傳輸和保存時的規則。比如說“我”這個字，unicode碼（16進制）是6211，utf-8是E68891, 那么對應的URL編碼就是%E6%88%91;

{
 Unicode編碼: 0x6211,
 UTF8編碼: E68891,
 UTF16編碼: FEFF6211,
 UTF32編碼: 0000FEFF00006211
 URL編碼: %E6%88%91
}

更多細節可以參考《阮一峰：關于URL編碼》

總結

Web開發中常見的幾種亂碼包括：Unicode字符、字符實體、URL編碼。如以下情況都表示“我”：

Unicode字符： \u6211
字符實體編號（16進制）：我
字符實體編號（10進制）：我
URL編碼：%E6%88%91

這些編碼規則的本質都是一些特殊符號 + Unicode編碼 所組成。

希望本文能幫助到您！

點贊+轉發，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓-_-）

關注｛我｝，享受文章首發體驗！

每周重點攻克一個前端技術難點。更多精彩前端內容私信我回復“教程”

原文鏈接：http://eux.baidu.com/blog/fe/web%E5%BC%80%E5%8F%91%E4%B8%AD%E5%B8%B8%E8%A7%81%E7%9A%84%E4%B9%B1%E7%A0%81

作者：鄭佳潤

在線咨詢

上一篇：精美html個人主頁
下一篇：使用HTML添加表格1（基本元素）-零基礎自學網頁制作

您的項目需求

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

整合營銷服務商