【前端:Html】--1.3.基礎語法

1.Html--文件路徑

2.Html--頭部元素

2.1.head元素

2.2.title元素

2.3.style元素

2.4.link元素

2.5.meta元素

2.6.script元素

2.7.base

3.Html--布局技巧

3.1.CSS Float 浮動布局

3.2.CSS Flexbox 布局

3.3.CSS Grid 網格布局

3.Html--響應式web設計

3.1.設置 Viewport

3.2.響應式圖片

3.3.響應文式文本

3.4.媒體查詢

4.Html--計算機元素

4.1.代碼--code

4.2.鍵盤--kbd

4.3.數字--var

5.Html-- 語義元素

6.Html--樣式指南

6.1.文檔類型

6.2.小寫元素

6.3.有開有閉

6.4.title元素

7.Html--實體

7.1.字符實體

7.2.音標符

7.3.數學符號

7.4.其他符號

7.5.表情符號

1.Html--文件路徑

文件路徑描述文件在網站文件夾結構中的位置。

文件路徑實例

文件路徑會在鏈接外部文件時被用到:

網頁
圖像
樣式表
JavaScripts

路徑	描述
<img src="picture.jpg">	picture.jpg 位于與當前網頁相同的文件夾
<img src="images/picture.jpg">	picture.jpg 位于當前文件夾的 images 文件夾中
<img src="/images/picture.jpg">	picture.jpg 當前站點根目錄的 images 文件夾中
<img src="../picture.jpg">	picture.jpg 位于當前文件夾的上一級文件夾中

相對路徑：?

<!DOCTYPE html>
<html>
<body><h2>使用相對文件路徑</h2>
<img src="/images/picture.jpg" alt="山" style="width:300px"></body>
</html>

絕對路徑：?

<!DOCTYPE html>
<html>
<body><h2>使用完整的 URL 文件路徑</h2>
<img src="https://www.w3schools.cn/images/picture.jpg" alt="山" style="width:300px"></body>
</html>

好習慣

使用相對路徑是個好習慣（如果可能）。

如果使用了相對路徑，那么您的網頁就不會與當前的基準 URL 進行綁定。所有鏈接在您的電腦上 (localhost) 或未來的公共域中均可正常工作。

2.Html--頭部元素

HTML?<head>?頭部元素是以下元素的容器:?<title>,?<style>,?<meta>,?<link>,?<script>, and?<base>.

2.1.head元素

<head>?元素是 metadata 的容器，位于?<html>?標簽和?<body>?標簽中間

HTML metadata 元數據是關于 HTML 文檔的數據。不在網頁顯示。

Metadata 元數據通常定義文檔標題、字符集、樣式、腳本和其他元信息。

2.2.title元素

<title>?元素定義文檔的標題。標題只能是文本，并且顯示在瀏覽器的標題欄或頁面的選項卡中。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>有意義的頁面標題</title>
</head>
<body><p>body 元素的內容顯示在瀏覽器窗口中。</p>
<p>title 元素的內容顯示在瀏覽器選項卡、收藏夾和搜索引擎結果中。</p></body>
</html>

2.3.style元素

<style>?標簽用于為 HTML 文檔定義樣式信息。

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><style>body {background-color: powderblue;}h1 {color: red;}p {color: blue;}</style>
</head>  
<body><h1>這是一個標題</h1>
<p>這是一個段落。</p></body>
</html>

也就是說，style里可以聲明這些：

選擇器類型	格式示例	描述
標簽選擇器	`p { color: blue; }`	針對所有指定標簽的元素應用樣式。
類選擇器	`.note { font-size: 0.8em; }`	可以應用于任何元素，并在同一頁面中多次使用。
ID選擇器	`#header { background-color: yellow; }`	針對具有特定ID屬性的單個元素應用樣式。
屬性選擇器	`input[type="text"] { width: 150px; }`	根據元素的屬性和/或屬性值匹配元素。
偽類選擇器	`a:hover { color: red; }`	定義元素在其處于某個狀態（如鼠標懸停）時的外觀。
偽元素選擇器	`p::first-line { font-weight: bold; }`	用于定義元素的一部分（如段落的第一行）的樣式。
后代選擇器	`div p { color: green; }`	選擇包含在另一元素內的所有元素。
子選擇器	`ul > li { color: purple; }`	僅當一個元素是另一個元素的直接子元素時才應用樣式。
相鄰兄弟選擇器	`h2 + p { margin-top: 0; }`	選擇緊接在另一元素之后的所有元素。
普通兄弟選擇器	`h2 ~ p { color: gray; }`	選擇與另一元素同級別的所有后續元素。

2.4.link元素

<link>?標簽定義文檔與外部資源之間的關系。

<link>?標簽最常用于連接樣式表:

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><link rel="stylesheet" href="mystyle.css">
</head>
<body><h1>這是一個標題</h1>
<p>這是一個段落。</p></body>
</html>

2.5.meta元素

<meta>?標簽提供關于 HTML 文檔的元數據。元數據不會顯示在頁面上，但是對于機器是可讀的。

<meta>?元素通常用于規定頁面的描述、關鍵詞、文檔的作者、最后修改時間以及其他元數據。

<meta>?標簽始終位于 head 元素中。

元數據（metadata）是關于數據的信息。元數據可用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他 web 服務。

針對搜索引擎的關鍵詞

一些搜索引擎會利用 meta 元素的 name 和 content 屬性來索引您的頁面。

定義使用的字符集:

為搜索引擎定義關鍵字:

定義網頁的描述:

定義頁面的作者:

<!DOCTYPE html>
<html>
<head><title>頁面標題</title><script>function myFunction() {document.getElementById("demo").innerHTML = "Hello JavaScript!";}</script>
</head>
<body><h1>我的網頁</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">試一試</button></body>
</html>

Doe">

每30秒刷新一次文檔:

設置視窗使您的網站在所有設備上良好適用:

2.6.script元素

<script>?標簽用于定義客戶端腳本，比如 JavaScript。

script--n.腳本

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>頁面標題</title><script>function myFunction() {document.getElementById("demo").innerHTML = "Hello JavaScript!";}</script>
</head>
<body><h1>我的網頁</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">試一試</button></body>
</html>

2.7.base

<base>?定義頁面上所有鏈接的默認地址或默認目標。

<base>?標記必須具有 href 或 target 屬性，或者兩者都存在。

一個文檔中只能有一個?<base>?元素！

<!DOCTYPE html>
<html>
<head><base href="https://www.w3schools.cn/" target="_blank">
</head>
<body><h1>base 元素</h1><p><img src="images/stickman.gif" width="24" height="39" alt="火柴人"> - 請注意，我們只為圖像指定了一個相對地址。 由于我們在頭部部分指定了一個基本 URL，瀏覽器將在"https://www.w3schools.cn/images/stickman.gif"中查找圖像。</p><p><a href="tags/tag_base.asp">HTML base 標簽</a> - 請注意，鏈接會在新窗口中打開，即使它沒有 target="_blank" 屬性。 這是因為 base 基本元素的目標屬性設置為"_blank"。</p></body>
</html>

3.Html--布局技巧

網站常常以多列顯示內容（就像雜志和報紙）。

HTML5 Semantic Elements

<header>?- 定義文檔或節的頁眉
<nav>?- 定義導航鏈接的容器
<section>?- 定義文檔中的節
<article>?- 定義獨立的自包含文章
<aside>?- 定義內容之外的內容（比如側欄）
<footer>?- 定義文檔或節的頁腳
<details>?- 定義額外的細節
<summary>?- 定義 details 元素的標題
?

創建多列布局有四種不同的技術。每種技術都有其優缺點:

CSS frame 框架
CSS float 浮動布局
CSS flexbox 盒子
CSS grid 網格

3.1.CSS Float 浮動布局

使用 CSS? float?屬性進行整個 web 布局是很常見的。

float?很容易學習-您只需要記住:float和 clear屬性是如何工作的。

缺點:?浮動元素與文檔流綁定，這可能會損害靈活性。

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 模板</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;
}body {font-family: Arial, Helvetica, sans-serif;
}/* 樣式表頭 */
header {background-color: #666;padding: 30px;text-align: center;font-size: 35px;color: white;
}/* Create two columns/boxes that floats next to each other */
nav {float: left;width: 30%;height: 300px; /* only for demonstration, should be removed */background: #ccc;padding: 20px;
}/* Style the list inside the menu */
nav ul {list-style-type: none;padding: 0;
}article {float: left;padding: 20px;width: 70%;background-color: #f1f1f1;height: 300px; /* only for demonstration, should be removed */
}/* 清除列后的浮點數 */
section:after {content: "";display: table;clear: both;
}/* 樣式頁腳 */
footer {background-color: #777;padding: 10px;text-align: center;color: white;
}/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {nav, article {width: 100%;height: auto;}
}
</style>
</head>
<body><h2>CSS 布局 Float 浮動</h2>
<p>在此示例中，我們創建了一個頁眉、兩個列/框和一個頁腳。 在較小的屏幕上，這些列將相互堆疊。</p>
<p>調整瀏覽器窗口大小以查看響應效果（您將在我們的下一章 - HTML 響應中了解更多相關信息。）</p><header><h2>城市</h2>
</header><section><nav><ul><li><a href="#">倫敦</a></li><li><a href="#">巴黎</a></li><li><a href="#">東京</a></li></ul></nav><article><h1>倫敦</h1><p>倫敦是英格蘭的首都。 它是英國人口最多的城市， 擁有超過 1300 萬居民的大都市區。</p><p>倫敦坐落在泰晤士河畔，兩千年來一直是一個重要的定居點，其歷史可以追溯到羅馬人建立之時，羅馬人將其命名為倫迪尼姆 (Londinium)。</p></article>
</section><footer><p>頁腳</p>
</footer></body>
</html>

3.2.CSS Flexbox 布局

當頁面布局必須適應不同的屏幕尺寸和不同的顯示設備時，使用 flexbox 可以確保元素的行為是可預測的。

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS 模板</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;
}body {font-family: Arial, Helvetica, sans-serif;
}/* 樣式表頭 */
header {background-color: #666;padding: 30px;text-align: center;font-size: 35px;color: white;
}/* 彈性盒子的容器 */
section {display: -webkit-flex;display: flex;
}/* Style the navigation menu */
nav {-webkit-flex: 1;-ms-flex: 1;flex: 1;background: #ccc;padding: 20px;
}/* Style the list inside the menu */
nav ul {list-style-type: none;padding: 0;
}/* 樣式化內容 */
article {-webkit-flex: 3;-ms-flex: 3;flex: 3;background-color: #f1f1f1;padding: 10px;
}/* 樣式頁腳 */
footer {background-color: #777;padding: 10px;text-align: center;color: white;
}/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */
@media (max-width: 600px) {section {-webkit-flex-direction: column;flex-direction: column;}
}
</style>
</head>
<body><h2>CSS Layout Flexbox</h2>
<p>在此示例中，我們創建了一個頁眉、兩個列/框和一個頁腳。 在較小的屏幕上，這些列將相互堆疊。</p>
<p>調整瀏覽器窗口大小以查看響應效果。</p>
<p><strong>注意：</strong> Internet Explorer 10 及更早版本不支持 Flexbox。</p><header><h2>城市</h2>
</header><section><nav><ul><li><a href="#">倫敦</a></li><li><a href="#">巴黎</a></li><li><a href="#">東京</a></li></ul></nav><article><h1>倫敦</h1><p>倫敦是英格蘭的首都。 它是英國人口最多的城市， 擁有超過 1300 萬居民的大都市區。</p><p>倫敦坐落在泰晤士河畔，兩千年來一直是一個重要的定居點，其歷史可以追溯到羅馬人建立之時，羅馬人將其命名為倫迪尼姆 (Londinium)。</p></article>
</section><footer><p>頁腳</p>
</footer></body>
</html>

3.3.CSS Grid 網格布局

CSS 網格布局模塊提供了一個基于網格的布局系統，具有行和列，使得設計網頁更容易，而不必使用浮動和定位。

3.Html--響應式web設計

響應式 Web 設計讓你的網頁能在所有設備上有好顯示。

網頁應該根據設備的大小自動調整內容。

響應式 Web 設計是指使用 HTML 和 CSS 自動調整、隱藏、縮小或放大網站，使其在所有設備（臺式機、平板電腦和手機）上看起來都很好:?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;
}
.menu {float: left;width: 20%;
}
.menuitem {padding: 8px;margin-top: 7px;border-bottom: 1px solid #f1f1f1;
}
.main {float: left;width: 60%;padding: 0 20px;overflow: hidden;
}
.right {background-color: lightblue;float: left;width: 20%;padding: 10px 15px;margin-top: 7px;
}@media only screen and (max-width:800px) {/* For tablets: */.main {width: 80%;padding: 0;}.right {width: 100%;}
}
@media only screen and (max-width:500px) {/* For mobile phones: */.menu, .main, .right {width: 100%;}
}
</style>
</head>
<body style="font-family:Verdana;"><div style="background-color:#f1f1f1;padding:15px;"><h1>五漁村</h1><h3>調整瀏覽器窗口大小</h3>
</div><div style="overflow:auto"><div class="menu"><div class="menuitem">步行</div><div class="menuitem">交通</div><div class="menuitem">歷史</div><div class="menuitem">圖庫</div></div><div class="main"><h2>步行</h2><p>從蒙特羅索步行到里奧馬焦雷大約需要兩個小時，根據天氣情況和您的體型，可能需要一個小時。</p><img src="img_5terre.jpg" style="width:100%"></div><div class="right"><h2>是什么</h2><p>五漁村由五個村莊組成：蒙特羅索、韋爾納扎、科爾尼利亞、馬納羅拉和里奧馬焦雷。</p><h2>在哪里？</h2><p>位于意大利里維埃拉的西北海岸，拉斯佩齊亞市以北。</p><h2>價格？</h2><p>步行是免費的！</p></div>
</div><div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> 該網頁是 w3schools.cn 制作的流暢網頁設計的一部分演示。 調整瀏覽器窗口大小以查看內容對調整大小的響應。</div></body>
</html>

3.1.設置 Viewport

要創建響應性網站，請在所有網頁中添加以下?<meta>?標簽:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

這將設置頁面的 viewport，這將為瀏覽器提供有關如何控制頁面尺寸和縮放的說明。

下面是一個不帶 viewport 標記的網頁示例，以及一個帶 viewport 標記的網頁示例:

沒有 viewport 元標記:

有 viewport 元標記:

3.2.響應式圖片

html 代碼測試 | html 在線編輯器

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><h2>響應式圖片</h2>
<p>當 CSS 寬度屬性設置為百分比值時，圖像將在調整瀏覽器窗口大小時縮放。 調整瀏覽器窗口大小以查看效果。</p><img src="img_girl.jpg" style="width:100%;"></body>
</html>

請注意，在上面的示例中，可以將圖像放大到大于其原始大小。在許多情況下，更好的解決方案是改用?max-width?屬性。

根據瀏覽器寬度顯示不同的圖像

html 代碼測試 | html 在線編輯器

HTML?<picture>?元素允許您為不同的瀏覽器窗口大小定義不同的圖像。

調整瀏覽器窗口的大小，以查看下面的圖像如何隨寬度變化:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><h2>根據瀏覽器寬度顯示不同的圖像</h2>
<p>調整瀏覽器寬度，圖像將在 600px 和 1500px 處發生變化。</p><picture><source srcset="img_smallflower.jpg" media="(max-width: 600px)"><source srcset="img_flowers.jpg" media="(max-width: 1500px)"><source srcset="flowers.jpg"><img src="img_flowers.jpg" alt="鮮花" style="width:auto;">
</picture></body>
</html>

3.3.響應文式文本

文本大小可以用 "vw" 單位設置，即 "viewport width".

這樣，文本大小將跟隨瀏覽器窗口的大小:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body><h1 style="font-size:10vw;">響應式文本</h1><p style="font-size:5vw;">調整瀏覽器窗口大小以查看文本大小如何縮放。</p><p style="font-size:5vw;">調整文本大小時使用“vw”單位。 10vw 會將尺寸設置為視口寬度的 10%。</p><p>視口是瀏覽器窗口的大小。 1vw = 視口寬度的 1%。 如果視口為 50cm 寬，則 1vw 為 0.5cm。</p></body>
</html>

3.4.媒體查詢

除了調整文本和圖像的大小外，在響應性網頁中使用媒體查詢也很常見。

通過媒體查詢，您可以為不同的瀏覽器大小定義完全不同的樣式。

示例:調整瀏覽器窗口的大小，以查看以下三個div元素將在大屏幕上水平顯示，并在小屏幕上垂直堆疊:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing:border-box;
}.left {background-color:#2196F3;padding:20px;float:left;width:20%; /* The width is 20%, by default */
}.main {background-color:#f1f1f1;padding:20px;float:left;width:60%; /* The width is 60%, by default */
}.right {background-color:#4CAF50;padding:20px;float:left;width:20%; /* The width is 20%, by default */
}/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {.left, .main, .right {width:100%; /* The width is 100%, when the viewport is 800px or smaller */}
}
</style>
</head>
<body><h2>媒體查詢</h2>
<p>調整瀏覽器窗口的大小。</p><p>確保在調整此框架大小時到達 800px 處的斷點。</p><div class="left"><p>左側菜單</p>
</div><div class="main"><p>主要內容</p>
</div><div class="right"><p>右側的內容</p>
</div></body>
</html>

4.Html--計算機元素

HTML 包含幾個用于定義用戶輸入和計算機代碼的元素。

4.1.代碼--code

<!DOCTYPE html>
<html>
<body><h2>計算機代碼</h2>
<p>一些編程代碼：</p><code>
x = 5;<br>
y = 6;<br>
z = x + y;
</code></body>
</html>

4.2.鍵盤--kbd

HTML?<kbd>?元素定義鍵盤輸入。其中的內容以瀏覽器的默認單空格字體顯示。

<!DOCTYPE html>
<html>
<body><h2>kbd元素</h2><p>kbd 元素用于定義鍵盤輸入：</p><p>按 <kbd>Ctrl + S</kbd> 保存文檔</p></body>
</html>

4.3.數字--var

HTML?<var>?元素定義數學變量:

<!DOCTYPE html>
<html>
<body><h2>var 元素</h2><p>三角形的面積是：1/2 x <var>b</var> x <var>h</var>，其中<var>b</var>是底邊，<var>h</var > 是垂直高度。</p></body>
</html>

5.Html-- 語義元素

語義元素=有意義的元素。

語義學（源自古希臘）可定義為對語言意義的研究。

什么是語義元素?

語義元素清楚地向瀏覽器和開發者描述其意義。

非語義元素的例子:?<div>?,?<span>?- 無法提供關于其內容的信息。

語義元素的例子:?<form>,?<table>,?<article>?- 清晰地定義其內容。

標簽	描述
<article>	定義文章。
<aside>	定義頁面內容以外的內容。
<details>	定義用戶能夠查看或隱藏的額外細節。
<figcaption>	定義 <figure> 元素的標題。
<figure>	規定自包含內容，比如圖示、圖表、照片、代碼清單等。
<footer>	定義文檔或節的頁腳。
<header>	規定文檔或節的頁眉。
<main>	規定文檔的主內容。
<mark>	定義重要的或強調的文本。
<nav>	定義導航鏈接。
<section>	定義文檔中的節。
<summary>	定義 <details> 元素的可見標題。
<time>	定義日期/時間。

6.Html--樣式指南

一致、干凈、整潔的 HTML 代碼使其他人更容易閱讀和理解您的代碼。

下面是一些創建格式良好的 HTML 代碼的指導方針和技巧。

6.1.文檔類型

請始終在文檔的首行聲明文檔類型:

HTML 的正確文檔類型是:

<!DOCTYPE html>

6.2.小寫元素

HTML 允許在元素名中使用混合大小寫字母。

我們推薦使用小寫元素名:

混合大小寫名稱并不好
開發者習慣使用小寫名（比如在 XHTML 中）
小寫更起來更純凈
小寫更易書寫

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

6.3.有開有閉

在 HTML5 中，您不必關閉所有元素（例如?<p>?元素）。

我們建議關閉所有 HTML 元素:

看起來不錯:

<section>
??<p>這是一個段落。</p>
??<p>這是一個段落。</p>
</section>

6.4.title元素

HTML 中需要?<title>?元素。

頁面標題的內容對于搜索引擎優化（SEO）非常重要！搜索引擎算法使用頁面標題來決定在搜索結果中列出頁面的順序。

<title>?元素能夠:

定義瀏覽器工具欄中的標題
提供頁面被添加到收藏夾時顯示的標題
顯示在搜索引擎結果中的頁面標題

所以，盡量要讓標題準確而有意義！

<title>HTML 樣式指南和編碼約定</title>

7.Html--實體

7.1.字符實體

HTML 中的預留字符必須被替換為字符實體。

在 HTML 中，某些字符是預留的。

在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。

如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。

字符實體類似這樣:

&entity_name;

或者:

&#entity_number;

結果	描述	實體名稱	實體編號（十進制）
	不間斷空格
<	小于	<	<
>	大于	>	>
&	符號	&	&
"	雙引號	"	"
'	單引號（撇號）	'	'
￠	cent	¢	¢
￡	英鎊	£	£
￥	元	¥	¥
€	歐元	€	€
?	版權	©	©
?	注冊商標	®	®

?使用實體編號，十進制或十六進制的引用。

<!DOCTYPE html>
<html>
<body><p>我會顯示 &euro;</p>
<p>我會顯示 &#8364;</p>
<p>我會顯示 &#x20AC;</p></body>
</html>

7.2.音標符

音標符是加在字母 "字形" 。

一些音標符，如 grave (? ?) 和 acute (? ?) 被稱為重音。

音標符可以出現在字母的上方和下方、字母內部以及兩個字母之間。

音標符可以與字母數字字符結合使用，以生成頁面中使用的字符集（編碼）中不存在的字符。

以下是一些實例:

音標符	字符	實體	結果
??	a	à	a?
??	a	á	a?
?	a	â	a?
??	a	ã	a?
??	O	Ò	O?
??	O	Ó	O?
?	O	Ô	O?
??	O	Õ	O?

7.3.數學符號

字符	數字	實體	描述
?	∀	∀	FOR ALL
?	∂	∂	PARTIAL DIFFERENTIAL
?	∃	∃	THERE EXISTS
?	∅	∅	EMPTY SETS
?	∇	∇	NABLA
∈	∈	∈	ELEMENT OF
?	∉	∉	NOT AN ELEMENT OF
?	∋	&ni;	CONTAINS AS MEMBER
∏	∏	∏	N-ARY PRODUCT
∑	∑	∑	N-ARY SUMMATION

7.4.其他符號

字符	數字	實體	描述
?	©	©	COPYRIGHT SIGN
?	®	®	REGISTERED SIGN
€	€	€	EURO SIGN
?	™	™	TRADEMARK
←	←	←	LEFTWARDS ARROW
↑	↑	↑	UPWARDS ARROW
→	→	→	RIGHTWARDS ARROW
↓	↓	↓	DOWNWARDS ARROW
?	♠	&spades;	BLACK SPADE SUIT
?	♣	&clubs;	BLACK CLUB SUIT
?	♥	&hearts;	BLACK HEART SUIT
?	♦	&diams;	BLACK DIAMOND SUIT

7.5.表情符號

表情符號（Emoji）是來自 UTF-8 字符集的字符: 😄 😍 💗

什么是 Emoji?

表情符號（Emoji）類似圖像或圖標，但它們并不是。

它們是來自 UTF-8 (Unicode) 字符集的字母（字符）。

UTF-8 幾乎涵蓋世界上所有字符和符號。

表情符號也是來自 UTF-8 字母的字符:

😄 是 128516
😍 是 128525
💗 是 128151

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body><h1>大號表情符號</h1><p style="font-size:48px">
&#128512; &#128516; &#128525; &#128151;
</p></body>
</html>