【前端: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>