dev html

一些关于HTML的基础知识（三）

多媒体标签

<area>、<map>相互配合用于制作带点击区域的，可以跳转到外部链接地址的图片。

<audio>、<video> 用于音视频输出，可以使用audio api来使用js来制作音频输出；<audio>中可以包含多个<source>标签用于提示音频源，浏览器会依次选择可用的音频源；音频源也可以使用跨域策略，具体可以看系列文章的第一篇中的描述。

1
2
3
4
5
6
7
8
9
var elem = document.querySelector("audio");

elem.audioTrackList.onaddtrack = function(event) {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = function(event) {
  trackEditor.removeTrack(event.track);
};

<img> 用于展示图片，<img>的alt属性既可以让视觉障碍用户获取图片展示的信息，也可以在图片无法加载的情况下显示文本信息。

<img>支持多种格式的图片，比如可以用apng(Animated Portable Network Graphics) 格式替代gif（性能较差）来展示动画图片，效果更好；AVIF (AV1 Image File Format) 既可以显示普通图片也可以显示动画图片；webp也可以显示动画图片；webp和avif是推荐格式，大部分情况下比gif、png、jpeg有更好的性能。

<img>图片加载错误会执行onerror回调，也会触发error事件，比如src为null或者“”时、图片格式不支持时、图片损坏、图片中不包含分辨率信息而又没有提供width和height属性时。

<img>可用于绘制在<canvas>画布上，但是当不满足跨域安全策略的情况下，绘制<img>在<canvas>画布将导致画布污染（”tainted”）而引起canvas无法导出或者下载。当不指定crossorigin是，浏览器的图片请求不携带origin头，即是污染的情况。当指定crossorigin时，后端的响应头Access-Control-Allow-Origin不包含origin域时则会在devtools中报错，crossorigin有两种取值：anonymous代表不携带cookie等信息，use-credentials代表携带cookie等信息，但是后端必须配合响应Access-Control-Allow-Credentials。referrerpolicy可以参考前面的文章。

<img>中的decoding属性，可以用于提示浏览器预期希望的图片解码方式：sync同步解码，async异步解码，auto默认值有浏览器自己决定。

<img>中的ismap属性，用于提示当前的图片是server-side-map，在被<a>包裹的情况会项服务端回送点击位置的座标信息。

1
<a href="/imagemapper"><img src="image.png" ismap /></a>

<img>中的loading属性可以实现懒加载图片，配置为eager时立即加载，配置为lazy图片在viewport中显示位置时加载（此提醒仅在启用javascript的情况下可用，为了避免安全风险）。

<img>还支持多倍屏幕的自动适配，sizes配合srcset兼容使用多种尺寸的图片。Responsive images 对高分片屏幕的图片展示有很好的效果。可以参考：https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

<track>标签用于给<video>添加字幕。

嵌入内容标签

<embed> 嵌入外部内容，可能是借助浏览器的扩展插件或者浏览器实现来加载外部内容，而非标准；src用于指定来源，type用于指定类型，比如"video/quicktime"

<iframe> 添加一个嵌套的浏览器上下文，其中allow属性用于定义iframe内容所能使用的功能，比如麦克风、摄像头；allowfullscreen用于定义是否允许iframe使用requestFullscreen()来使用全屏；loading参数可以指定iframe的懒加载；referrerpolicy加载外部资源可以指定并使用；sandbox参数可以指定一下沙箱配置，比如是否允许下载等；srcdoc可以让iframe跳过加载外部资源，使用srcdoc传入的字符串来显示和渲染内容；

<iframe> 在脚本编程时， window.frames可以遍历文档内的所有frame， iframe.contentWindow 可以获取iframe中的window对象，iframe.contentWindow.document即为document对象；在iframe中可以通过window.parent获取父亲的window对象；当跨域时，大部分信息都是无法获取的，父子的通信可以通过Window.postMessage()来完成。

<object>/<param> 用于引用外部对象，可以是图片、嵌套的浏览上下文，或者受浏览器插件支持的其他格式；

1
2
3
4
5
<object type="application/pdf"
    data="/media/examples/In-CC0.pdf"
    width="250"
    height="200">
</object>

<picture>用于显示图片，包含多个<source>以及一个<img>,浏览器会根据内容选择合适的图片资源显示，在不支持<picture>的情况下使用<img>来显示图片；<picture>的使用场景可以用于选择最优格式 、节省流量，支持高分辨率屏幕。

<portal>可以用来作为内容的预览，以实现无法的跳转，和iframe显示的内容一样但是使用上比iframe更加严格。

svg和math

<svg>用于绘制位图，内容复杂，后面要单独列文来展示；

<math> 用于书写公式，但是大部分浏览器还都没实现；

脚本类标签

<canvas> 绘图

Browser Maximum height Maximum width Maximum area
Chrome 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384)
Firefox 32,767 pixels 32,767 pixels 472,907,776 pixels (i.e., 22,528 x 20,992)
Safari 32,767 pixels 32,767 pixels 268,435,456 pixels (i.e., 16,384 x 16,384)

<noscript>用于当浏览器不支持或者禁用script时的提示信息展示；

<script>标签除了可以加载javascript语言，还支持其他语言，比如wwebgl或者json。

<script>的async属性如果配置，那么脚本会异步获取，脚本下载完成立马执行，如果是esm的资源，其所有的依赖也都是一样的处理策略；可以避免脚本加载阻塞页面渲染；

<script>的crossorigin和其他标签的策略一样；

<script>的defer属性如果配置，那么脚本会异步获取，在文档parse后、DOMContentLoaded之前执行脚本，defer的脚本在执行完毕之前，浏览器不会触发DOMContentLoaded事件；对于esm的资源，配置此属性无效，esm的资源就是默认defer的，也就是说type=module的script一定是在DOMContentLoaded前触发的。defer的脚本是按照顺序执行的；

<script>的nomodule参数用于提示浏览器以非esm的模式执行；

表格元素

<caption>用于支持表格的表头，可以通过caption-side: bottom;来指定表头在表内的位置；<caption>必须是<table>的第一个直接子元素。

<col>和<colgroup>配合使用可以定义表格的样式，按列定义样式。

1
2
3
4
5
<colgroup>
    <col>
    <col span="2" class="batman">
    <col span="2" class="flash">
</colgroup>

<thead>、<tbody>、<tfoot>、<th>、<td>、<tr>

<th>用于指定表头单元格，colspan用于横向合并单元格，rowspan用于纵向合并单元格，scope用于说明是横向头还是纵向头；