HTML+CSS课程2-分支：从MDN网站学HTML

k

一、HTML基础知识

（1）文档与网站架构

1、文档的基本组成部分

每个页面上只能用一次 <main>，且直接位于中。最好不要把它嵌套进其他元素。<section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。

• <header> ：页眉
• <nav>：导航栏
• <main>：主内容。主内容中还可以有各种子内容区段，可用<artical>、<section>和<div>等元素表示。
• <aside>：侧边栏，经常嵌套在<main>中。
• <footer>：页脚

2、其他标签

div 元素非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。

<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素。（MDN编辑人员怎么颠颠的，如下图，笑死我了）

<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）。一般就是一条水平的直线。例如：

（我受不了了，这里面的草图也太“草”了，好随意😂😂）

（2）HTML调试

HTML 本身不容易出现语法错误，因为浏览器是以宽松模式运行的，这意味着即使出现语法错误浏览器依然会继续运行。浏览器通常都有内建规则来解析书写错误的标记，所以即使与预期不符，页面仍可显示出来。

让界面通过The W3C Markup Validation Service，由W3C创立并维护的标记验证服务。

W3C 的主要职责包括：

1. 制定和推广网络标准：W3C 为 HTML、CSS、XML、SVG、DOM 等核心网络技术制定了标准，这些技术确保了万维网的开放性和可访问性。
2. 确保互操作性：通过发布标准，W3C 确保不同的浏览器、设备和平台可以正确处理和显示网页内容。
3. 支持网络无障碍设计：W3C 还特别关注使得互联网可被所有人使用，包括残障人士（如通过 WCAG 标准）。
4. 开发安全性和隐私性相关技术：确保网络用户数据的隐私和安全。

二、多媒体与嵌入

（1）HTML中的图像

未经许可，绝不要将 src 属性指向其他网站上的图像。这被称为“热链接（hotlinking）”。大多数人认为这是不道德的，因为这会导致每当有人访问你的页面，都会有另一些不知情的人为图像交付带宽费用。这也导致你无法掌控图像，图像有可能在你不知情的情况下，被删除或替换为尴尬的内容。

1、大小设置

HTML 属性：用于指定图片的原始尺寸（height和width），帮助浏览器预留空间，提升布局稳定性。防止出现CLS：累计布局偏移。

不要用 HTML 属性调整大小：因为这可能导致图片模糊或变形，且浪费带宽。

使用 CSS 调整图片大小：更灵活，可以配合响应式设计，而不会影响图片的质量或性能。

正确的图片处理：在将图片上传到网页之前，应使用图像编辑器将其调整为合适的大小，以避免过大的图片影响加载速度。

2、title

给图片指定title特性可以让鼠标悬停时显示出title内容。

但是title 有很多无障碍问题，这些问题主要是基于这样一个事实，即屏幕阅读器的支持并不完善，除此之外大多数浏览器都不会显示它，除非你将鼠标悬停在上面

3、说明文字

HTML专门提供了这样的语义容器，旨在说明文字和图片之间的关联。（不一定仅是图片）

<figcaption>元素告诉浏览器和辅助技术工具，这段说明文字描述了<figure>元素的内容。

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth" />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

4、许可

自由许可的图片网站：https://picryl.com/和https://thenounproject.com/

绘制图像：

Canvas API - Web API | MDN (mozilla.org)

SVG：可缩放矢量图形 | MDN (mozilla.org)

WebGL：web 中的 2D 的 3D 图形 - Web API | MDN (mozilla.org)

WebRTC API - Web API | MDN (mozilla.org)

（2）音频和视频

1、<video>元素

示例：

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

• src：指向你想要嵌入到网页中的视频资源
• controls：使用 controls 属性来让视频或音频包含浏览器自带的控制界面，或者使用适当的 JavaScript API 构建自己的界面。（对于患有癫痫的人来说很重要）
• <p>内的内容：这个叫做后备内容，当浏览器不支持 <video> 元素的时候，就会显示这段内容，借此我们能够对旧的浏览器提供回退。你可以添加任何后备内容，在这个例子中我们提供了一个指向这个视频文件的链接，从而使用户至少可以访问到这个文件，而不会局限于浏览器的支持。

2、使用多个播放源提高兼容性

容器格式定义了构成媒体文件的音频轨道和视频轨道的储存结构，其中还包含描述这个媒体文件的元数据，以及使用什么编解码器对其通道进行编码等等。

• WebM 容器通常包括了 Vorbis 或 Opus 音频和 VP8/VP9 视频。这在所有的现代浏览器中都支持，除了某些老版本浏览器。
• MP4 容器通常包括 AAC 或 MP3 音频和 H.264 视频。这在所有的现代浏览器中都支持。
• Ogg 容器倾向于使用 Vorbis 音频和 Theora 视频。其在 Firefox 和 Chrome 当中受到完美的支持，不过这个容器已经被更强大的 WebM 格式所取代。

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

移除src属性，而是添加几个单独的source元素，分别指向各自的资源。浏览器会检查<source>元素，并且播放第一个与其自身 codec 相匹配的媒体。

WebM 和 MP4 这两种格式在目前已经足够，只要视频支持这两种格式，那么其在大多数平台和浏览器上都能正确播放。

建议添加type属性，它包含了<source>中指定的MIME类型，同时浏览器也会通过检查这个属性来迅速的跳过那些不支持的格式。如果你没有添加 type 属性，浏览器会尝试加载每一个文件，直到找到一个能正确播放的格式，但是这样会消耗掉大量的时间和资源。

Multipurpose Internet Mail Extensions，多用途互联网邮件扩展，不仅用于电子邮件系统，还广泛应用于 HTTP 协议中，用来描述网络传输中文件的类型或格式