前端学习记录~2023.6.15~HTML杂记

---

前言

由于有很多知识非常符合直觉或者和其他语言有通用性，因此个人觉得不需要全部记下来，本篇只记录一些个人觉得需要注意或单独记忆的知识点

---

实体引用：在 HTML 中包含特殊字符

在 HTML 中，字符 <、>、"、' 和 & 是特殊字符。它们是 HTML 语法自身的一部分，那么如何将这些字符包含进你的文本中呢，比如说如果真的想要在文本中使用符号 & 或者小于号，而不想让它们被浏览器视为代码并被解释？

我们必须使用字符引用——表示字符的特殊编码，它们可以在那些情况下使用。每个字符引用以符号 & 开始，以分号（;）结束。

原义字符	等价字符引用
<	&lt;
>	&gt;
"	&quot;
'	&apos;
&	&amp;

---

超链接指向文档片段

超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）。要做到这一点，你必须首先给要链接到的元素分配一个 id 属性。

例如目标片段为：

<h2 id="Mailing_address">邮寄地址</h2>

为了链接到那个特定的 id，要将它放在 URL 的末尾，并在前面包含井号（#），例如：

<p>
  要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。
</p>

甚至可以在同一份文档下，通过链接文档片段，来链接到当前文档的另一部分

<p>
  本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。
</p>

---

在下载链接时使用 download 属性

当你链接到要下载的资源而不是在浏览器中打开时，你可以使用 download 属性来提供一个默认的保存文件名

下面是一个 Firefox 的 Windows 最新版本下载链接的示例：

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

---

电子邮件链接

当点击一个链接或按钮时，可能会开启新的邮件的发送而不是连接到一个资源或页面。这种场景可以使用 <a> 元素和 mailto: URL 协议实现。

其最基本和最常用的使用形式为一个指明收件人电子邮件地址的 mailto: 链接。例如：

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

实际上，电子邮件地址是可选的。如果你省略了它（也就是说，你的 href 属性仅仅只是简单的mailto:），发送新的电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以给他们选择的地址发送邮件。

除了电子邮件地址，你还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到你提供的 mailto URL 中。其中最常用的是主题（subject）、抄送（cc）和主体（body）（这不是一个真正的标头字段，但允许你为新邮件指定一个简短的内容消息）。每个字段及其值被指定为查询项。

<a
  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email">
  发送含有 cc、bcc、主题和主体的邮件
</a>

每个字段的值必须使用 URL 编码，即使用百分号转义的非打印字符（不可见字符如制表符、换行符、分页符）和空格。同时注意使用问号（?）来分隔主 URL 与参数值，以及使用 & 符来分隔 mailto: URL 中的各个参数。这是标准的 URL 查询标记方法。阅读 GET 方法以了解哪种 URL 查询标记方法是更常用的

---

引用

1. 块引用

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，你应该把它用 <blockquote> 元素包裹起来表示，并且在 cite 属性里用 URL 来指向引用的资源

2. 行内引用

使用<q>元素，浏览器默认将其作为普通文本放入引号内表示引用。

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

效果如下：

The quote element — <q> — is intended for short quotations that don't require paragraph breaks.

---

音视频内容

最基础的类似下面：

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

controls：包含了浏览器提供的控件界面，使用户能够控制视频和音频的回放功能，同时也可以使用合适的 JavaScript API 创建自己的界面。界面中至少要包含开始、停止以及调整音量的功能。

<video>标签内的内容：这个叫做后备内容 — 当浏览器不支持 <video> 标签的时候，就会显示这段内容，这使得我们能够对旧的浏览器提供回退内容。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。

由于不同的媒介可能支持不同的多种格式，因此可以像如下这样引入<source>和<type>标签来增加兼容性

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

<audio>与<video>标签使用方式大致基本相同

---

嵌入类型

1.<iframe>

现在较常使用的就是<iframe>

该元素旨在允许你将其他 Web 文档嵌入到当前文档中。这很适合将第三方内容嵌入你的网站，你可能无法直接控制，也不希望实现自己的版本——例如来自在线视频提供商的视频。

e.g

<iframe src="https://developer.mozilla.org/zh-CN/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/zh-CN/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

frameborder：如果设置为 1，则会告诉浏览器在此框架和其他框架之间绘制边框，这是默认行为。0 删除边框。不推荐这样设置，因为在 CSS 中可以通过border：none更好地实现相同的效果

allowfullscreen：如果设置则可以通过全屏API设置为全屏模式

备选内容：与 <video> 等其他类似元素相同，你可以在 <iframe></iframe> 标签之间包含备选内容，如果浏览器不支持 <iframe>，将会显示备选内容，这种情况下，我们已经添加了一个到该页面的链接。现在你几乎不可能遇到任何不支持 <iframe> 的浏览器。

sandbox：该属性需要在已经支持其他 <iframe> 功能（例如 IE 10 及更高版本）但稍微更现代的浏览器上才能工作，该属性可以提高安全性设置。

一个允许包含在其里的代码以适当的方式执行或者用于测试，但不能对其他代码库（意外或恶意）造成任何损害的容器称为沙盒。未沙盒化（Unsandboxed）内容可以做得太多（执行 JavaScript，提交表单，弹出窗口等）默认情况下，你应该使用没有参数的 sandbox 属性来强制执行所有可用的限制，如我们前面的示例所示。
如果绝对需要，你可以逐个添加权限（sandbox=""属性值内）。
其中重要的一点是，你永远不应该同时添加 allow-scripts 和 allow-same-origin 到你的 sandbox属性中——在这种情况下，嵌入式内容可以绕过阻止站点执行脚本的同源安全策略，并使用 JavaScript 完全关闭沙盒。

2. <embed> 和 <object> 元素

<embed> 和 <object> 元素的功能不同于 <iframe>——这些元素是用来嵌入多种类型的外部内容的通用嵌入工具，其中包括像 Java 小程序和 Flash，PDF（可在浏览器中显示为一个 PDF 插件）这样的插件技术，甚至像视频，SVG 和图像的内容。

但现在基本都不再使用了，因为上面提到的很多功能都不再符合当时的条件，比如现在pdf更倾向于指向链接，以及逐渐更倾向于不依赖于其他插件

---

矢量图

使用 svg

---

响应式图片

响应式图片技术，通过让浏览器提供多个图像文件，比如使用相同显示效果的图片但包含多个不同的分辨率（分辨率切换），或者使用不同的图片以适应不同的空间分配（美术设计），来解决美术设计或分辨率切换问题

在本节中我们将专注于 HTML 的 <img> 元素，但网站头部的图片仅是装饰性的，实际上应该要用 CSS 的背景图片来实现。CSS 是比 HTML 更好的响应式设计的工具，我们会在未来的 CSS 模块中讨论

使用srcset 和 sizes属性

1. 分辨率切换：不同的尺寸

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

srcset 定义了浏览器可选择的图片设置以及每个图片的大小。这里的固有宽度w指的是真实大小
sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择。最后一个槽没有媒体条件，当前面都不为真时默认生效

有了这些属性后，浏览器会：

• 检查设备宽度
• 检查 sizes 列表中哪个媒体条件是第一个为真
• 查看给予该媒体查询的槽大小
• 加载 srcset 列表中引用的最接近所选的槽大小的图像

2. 分辨率切换：相同的尺寸，不同的分辨率

如果你要支持多分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以使用 srcset 结合 x 语法——一种更简单的语法——而不用 sizes，来让浏览器选择合适分辨率的图片

<img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg"
     alt="Elva dressed as a fairy" />

在这个例子中，下面的 CSS 会应用在图片上，所以它的宽度在屏幕上是 320 像素（也称作 CSS 像素）：

img {
  width: 320px;
}

在这种情况下，就不用到 sizes 属性——浏览器计算出正在显示的显示器的分辨率，然后显示 srcset 引用的最适合的图片。因此，如果访问页面的设备具有标准/低分辨率显示，用一个设备像素表示一个 CSS 像素，那么会加载 elva-fairy-320w.jpg（1x 是默认值，所以你不需要写出来）。如果设备有高分辨率，用两个或更多的设备像素表示一个 CSS 像素，会加载 elva-fairy-640w.jpg。640px 的图像大小为 93KB，320px 的图像的大小仅仅有 39KB。

3. 美术设计

美术设计问题涉及到更改显示的图像以适应不同的显示尺寸。<picture> 元素允许我们这样实现

例如，如果在桌面浏览器上的一个网站上显示一张大的、横向的照片，照片中央有个人，然后当在移动端浏览器上浏览这个网站时，照片会缩小，这时照片上的人会变得非常小，看起来会很糟糕。这种情况可能在移动端显示一个更小的、聚焦到这个人的肖像图会更好

比如对于

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />

改用 <picture>来进行改变，就像 <video> 和 <audio>，<picture> 元素包含了一些 <source> 元素，它使浏览器在不同资源间做出选择，紧跟着的是最重要的 <img> 元素

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

• <source> 元素包含一个 media 属性，这一属性包含一个媒体条件——就像第一个 srcset 例子，这些条件来决定哪张图片会显示——第一个条件返回真，那么就会显示这张图片。在上述示例中，如果视窗的宽度为 799px 或更少，第一个 <source> 元素的图片就会显示。如果视窗的宽度是 800px 或更大，就显示第二张图片
• srcset 属性包含要显示图片的路径。请注意，正如我们在 <img> 上面看到的那样，<source> 可以使用引用多个图像的 srcset 属性，还有 sizes 属性。所以你可以通过一个 <picture> 元素提供多个图片，不过也可以给每个图片提供多分辨率的图片。实际上，你可能不想经常做这样的事情
• 在任何情况下，你都必须在 </picture> 之前正确提供一个 <img> 元素以及它的 src 和 alt 属性，否则不会有图片显示。当媒体条件都不返回真的时候（你可以在这个例子中删除第二个 <source> 元素），它会显示默认图片；如果浏览器不支持 <picture> 元素时，它可以作为后备方案。

---

表格

<table></table>：每一个表格的内容都包含在这两个标签中
<td>：table data，单元格
<tr>：table row，进入下一行。用于包含住每一行
<th>：table head，标题
colspan：<td>和<th>的可选属性，控制宽度是几单元格
rowspan：<td>和<th>的可选属性，控制高度是几单元格

e.g

<table>
	<tr>
    	<th colspan="2">Animals</th>
  	</tr>
  	<tr>
    	<th colspan="2">Hippopotamus</th>
  	</tr>
  	<tr>
    	<th rowspan="2">Horse</th>
    	<td>Mare</td>
  	</tr>
  	<tr>
    	<td>Stallion</td>
  	</tr>
  	<tr>
    	<th colspan="2">Crocodile</th>
  	</tr>
  	<tr>
    	<th rowspan="2">Chicken</th>
    	<td>Hen</td>
  	</tr>
  	<tr>
    	<td>Rooster</td>
  	</tr>
</table>

效果如下：

Animals
Hippopotamus
Horse	Mare
	Stallion
Crocodile
Chicken	Hen
	Rooster

此外还有：
<colgroup>：放在<table>标签下面，定义列的样式
<col>：对于table的每一列都要有一个该标签，用于每一列的样式
span：也可通过在<col>中添加该属性来应用到多列
<caption>：放在<table>标签下面，表格标题
<thead>、<tfoot> 和 <tbody>：这些元素允许你把表格中的部分标记为表头、表尾、表体三部分
scope：可以添加在 <th> 元素中，以告诉屏幕阅读器该表头的类型——它是所在行的表头，还是所在列的表头。值可以为 col 或 row

---

总结

只记录了 html 的部分内容