HTML学习05
学习参考来自 https://www.w3school.com.cn/
HTML 字符实体（character entities）
-
HTML 中的预留字符必须被替换为字符实体。
-
实体名称对大小写敏感
HTML 实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。
字符实体类似这样：
&entity_name;
或者
&#entity_number; //ASCII码
如需显示小于号，我们必须这样写：< 或 <
可以用a显示a，A显示A。
键盘上不存在的字符也可以由实体代替。
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |
  |
|
| < | 小于号 | < |
< |
| > | 大于号 | > |
> |
| & | 和号 | & |
& |
| " | 引号 | " |
" |
| ' | 撇号 | ' (IE不支持) |
' |
| ￠ | 分（cent） | ¢ |
¢ |
| £ | 镑（pound） | £ |
£ |
| ¥ | 元（yen） | ¥ |
¥ |
| € | 欧元（euro） | € |
€ |
| § | 小节 | § |
§ |
| © | 版权（copyright） | © |
© |
| ® | 注册商标 | ® |
® |
| ™ | 商标 | ™ |
™ |
| × | 乘号 | × |
× |
| ÷ | 除号 | ÷ |
÷ |
如需完整的实体符号参考，请访问我们的 HTML 实体符号参考手册。
符号实体
普通键盘上不存在众多数学、技术和货币符号。
如需将此类符号添加到 HTML 页面，您可以使用 HTML 实体名称（HTML entity name）。
如果不存在实体名称，则可使用实体编号，十进制或十六进制的引用。
实例
<p>我将显示 €</p>
<p>我将显示 €</p>
将显示为：
我将显示 €
我将显示 €
数学符号
| 字符 | 数字 | 实体 | 描述 |
|---|---|---|---|
| ∀ | ∀ |
∀ |
FOR ALL |
| ∂ | ∂ |
∂ |
PARTIAL DIFFERENTIAL |
| ∃ | ∃ |
∃ |
THERE EXISTS |
| ∅ | ∅ |
∅ |
EMPTY SETS |
| ∇ | ∇ |
∇ |
NABLA |
| ∈ | ∈ |
∈ |
ELEMENT OF |
| ∉ | ∉ |
∉ |
NOT AN ELEMENT OF |
| ∋ | ∋ |
∋ |
CONTAINS AS MEMBER |
| ∏ | ∏ |
∏ |
N-ARY PRODUCT |
| ∑ | ∑ |
∑ |
N-ARY SUMMATION |
希腊字母
| 字符 | 数字 | 实体 | 描述 |
|---|---|---|---|
| Α | Α |
Α |
GREEK CAPITAL LETTER ALPHA |
| Β | Β |
Β |
GREEK CAPITAL LETTER BETA |
| Γ | Γ |
Γ |
GREEK CAPITAL LETTER GAMMA |
| Δ | Δ |
Δ |
GREEK CAPITAL LETTER DELTA |
| Ε | Ε |
Ε |
GREEK CAPITAL LETTER EPSILON |
| Ζ | Ζ |
Ζ |
GREEK CAPITAL LETTER ZETA |
其他实体
| 字符 | 数字 | 实体 | 描述 |
|---|---|---|---|
| © | © |
© |
COPYRIGHT SIGN |
| ® | ® |
® |
REGISTERED SIGN |
| € | € |
€ |
EURO SIGN |
| ™ | ™ |
™ |
TRADEMARK |
| ← | ← |
← |
LEFTWARDS ARROW |
| ↑ | ↑ |
↑ |
UPWARDS ARROW |
| → | → |
→ |
RIGHTWARDS ARROW |
| ↓ | ↓ |
↓ |
DOWNWARDS ARROW |
| ♠ | ♠ |
♠ |
BLACK SPADE SUIT |
| ♣ | ♣ |
♣ |
BLACK CLUB SUIT |
| ♥ | ♥ |
♥ |
BLACK HEART SUIT |
| ♦ | ♦ |
♦ |
BLACK DIAMOND SUIT |
表情符号 Emoji
表情符号（Emoji）是来自 UTF-8 字符集的字符：😄 😍 💗
表情符号（Emoji）类似图像或图标，但它们并不是。它们是来自 UTF-8 (Unicode) 字符集的字母（字符）。
提示：UTF-8 几乎涵盖世界上所有字符和符号。
HTML charset 属性
为了正确显示 HTML 页面，Web 浏览器必须知道页面中使用的字符集。
这是在 <meta> 标签中规定的：
<meta charset="UTF-8">
提示：如果未规定，UTF-8 则是 HTML 中的默认字符集。
UTF-8 字符
很多 UTF-8 字符无法在键盘上键入，但始终可以使用数字（被称为实体编号）来显示它们：
- A 是 65
- B 是 66
- C 是 67
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<p>我将显示 A B C</p>
<p>我将显示 A B C</p>
</body>
</html>
例子解释
元素定义字符集。
字符 A、B、C 由数字 65、66 以及 67 来显示。
为了让浏览器了解您正在显示字符，您必须以 &# 开头并以 ;（分号）结束实体编号。
Emoji 字符
表情符号也是来自 UTF-8 字母的字符：
- 😄 是 128516
- 😍 是 128525
- 💗 是 128151
由于表情符号是字符，因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>我的第一个 Emoji</h1>
<p>😀</p>
<h1>放大的表情符号</h1>
<p style="font-size:48px">
😀 😄 😍 💗
</p>
</body>
</html>
UTF-8 中的一些 Emoji 符号
| Emoji | 值 |
|---|---|
| 🗻 | 🗻 |
| 🗼 | 🗼 |
| 🗽 | 🗽 |
| 🗾 | 🗾 |
| 🗿 | 🗿 |
| 😀 | 😀 |
| 😁 | 😁 |
| 😂 | 😂 |
| 😃 | 😃 |
| 😄 | 😄 |
| 😅 | 😅 |
HTML 编码（字符集）
为了正确显示 HTML 页面，Web 浏览器必须知道要使用哪个字符集。
从 ASCII 到 UTF-8
ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符：数字（0-9）、英文字母（A-Z）和一些特殊字符，比如：! $ + - ( ) @ < >。
ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8。
ANSI（Windows-1252）是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同，不同之处在于 ANSI 具有 32 个额外的字符。
HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集，该字符集涵盖了世界上几乎所有的字符和符号！
HTML charset 属性
为了正确显示 HTML 页面，Web 浏览器必须了解页面中使用的字符集。
这在 <meta> 标签中指定：
<meta charset="UTF-8">
HTML 编码（字符集）- 字符集之间的差异
统一资源定位器(URL)
URL 也被称为网址。
URL 可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆。
URL - Uniform Resource Locator
当您点击 HTML 页面中的某个链接时，对应的 <a> 标签指向万维网上的一个地址。
统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。
网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：
scheme://host.domain:port/path/filename
解释：
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机（http 的默认主机是 www）
- domain - 定义因特网域名，比如 w3school.com.cn
- :port - 定义主机上的端口号（http 的默认端口号是 80）
- path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
- filename - 定义文档/资源的名称
编者注：URL 的英文全称是 Uniform Resource Locator，中文也译为“统一资源定位符”。
URL Schemes
以下是其中一些最流行的 scheme：
| Scheme | 访问 | 用于... |
|---|---|---|
| http | 超文本传输协议 | 以 http:// 开头的普通网页。不加密。 |
| https | 安全超文本传输协议 | 安全网页。加密所有信息交换。 |
| ftp | 文件传输协议 | 用于将文件下载或上传至网站。 |
| file | 您计算机上的文件。 |
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
-
开发人员必须同时跟踪更多的HTML文档
-
很难打印整张页面
-
框架结构标签（
<frameset>）框架结构标签（
<frameset>）定义如何将窗口分割为框架每个 frameset 定义了一系列行或列rows/columns 的值规定了每行或每列占据屏幕的面积
编者注：frameset 标签也被某些文章和书籍译为框架集。
框架标签（Frame）
Frame 标签定义了放置在每个框架中的 HTML 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
基本的注意事项 - 有用的提示：
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。
为不支持框架的浏览器添加 <noframes> 标签。
重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于<body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）
<!-- 使用 noframes 标签 -->
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
<!-- 混合框架结构 -->
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
<!-- 框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。 -->
<frameset cols="50%,*,25%">
<frame src="/example/html/frame_a.html" noresize="noresize" />
<frame src="/example/html/frame_b.html" /> <~!-- 这里可拖动 -->
<frame src="/example/html/frame_c.html" />
</frameset>
两个框架。左侧的导航框架包含了一个链接列表，这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<frameset cols="120, *">
<frame src="/h07-summary.html">
<frame src="/h01.html" name="showframe">
</frameset>
</html>
h07-summary.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<p><a href="/h01.html" target ="showframe">h01</a></p>
<p><a href="/h01.html#table-head" target ="showframe">h01-表头</a></p>
<p><a href="h02.html" target ="showframe">h02</a></p>
<p><a href="h03.html" target ="showframe">h03</a></p>
<p><a href="h04.html" target ="showframe">h04</a></p>
<p><a href="h05.html" target ="showframe">h05</a></p>
<p><a href="h06.html" target ="showframe">h06</a></p>
</html>
iframe和frame的区别
iframe和frame的区别有：
1、frame不能脱离frameSet单独使用；
2、frame不能放在body中；
3、iframe可以自己控制高度；
4、iframe可以放到表格里面；
5、iframe是活动帧， 而frame是非活动帧。
背景（应该使用CSS实现，而非属性）
背景颜色和文字颜色搭配良好的例子<body bgcolor="#d0d0d0">
背景颜色和文字颜色搭配得不好的例子<body bgcolor="#ffffff" text="yellow">
<body> 拥有两个配置背景的标签
- bgcolor 将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
- background 将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
提示：如果你打算使用背景图片，你需要紧记一下几点：
- 背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
- 背景图像是否与页面中的其他图象搭配良好。
- 背景图像是否与页面中的文字颜色搭配良好。
- 图像在页面中平铺后，看上去还可以吗？
- 对文字的注意力被背景图像喧宾夺主了吗？
基本的注意事项 - 有用的提示：
<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。
应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。
URL 字符编码
URL 编码会将字符转换为可通过因特网传输的格式。
URL - 统一资源定位器
Web 浏览器通过 URL 从 web 服务器请求页面。
URL 是网页的地址，比如 http://www.w3school.com.cn。
URL 编码
URL 只能使用 ASCII 字符集来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
比如：2222+ttt+%E9%80%9A%E5%A4%A9%E5%A1%94
Web Server
HTML Web Server (w3school.com.cn)
文档类型<!DOCTYPE>
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
<!DOCTYPE> 声明
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。提示：W3School 即将升级为最新的 HTML5 文档类型。
从 Web 诞生早期至今，已经发展出多个 HTML 版本：
| 版本 | 年份 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
常用的声明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
