前言
由于有很多知识非常符合直觉或者和其他语言有通用性,因此个人觉得不需要全部记下来,本篇只记录一些个人觉得需要注意或单独记忆的知识点
实体引用:在 HTML 中包含特殊字符
在 HTML 中,字符 <
、>
、"
、'
和 &
是特殊字符。它们是 HTML 语法自身的一部分,那么如何将这些字符包含进你的文本中呢,比如说如果真的想要在文本中使用符号 &
或者小于号,而不想让它们被浏览器视为代码并被解释?
我们必须使用字符引用——表示字符的特殊编码,它们可以在那些情况下使用。每个字符引用以符号 & 开始,以分号(;)结束。
原义字符 | 等价字符引用 |
---|---|
< | < |
> | > |
" | " |
' | ' |
& | & |
超链接指向文档片段
超链接除了可以链接到文档外,也可以链接到 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><q></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 的部分内容