HTML | Last Stand

HTML 5 新特性

HTML5 新特性语义标签增强型表单视频和音频 Canvas绘图 SVG绘图地理定位拖拽API WebWorker WebStorage WebSocket 语义标签语义化标签使得页面的内容结构化，可以使开发者更方便清晰地构建页面的布局标签描述 <header> 定义了文档的头部区域 <footer> 定义了文档的尾部区域 <nav> 定义文档的导航 <section> 定义文档中的书 <acticle> 定义页面独立的内容区域 <aside> 定义页面侧边栏内容 <details> 定义用户可以看到或隐藏的额外细节 <summary> 标签包含details元素的标题 <dialog> 定义对话框 <figure> 定义自包含内容，如图表 <main> 定义文档主内容增强型表单 HTML5新增input输入特性，改善更好的输入控制和验证输入类型描述 color 主要用于选取颜色 date 选取日期 datetime 选取日期（UTC时间） datetime-local 选取日期（无时区） month 选择一个月份 week 选择周和年 time 选择一个时间 email 包含email地址的输入域 number 数值的输入域 url url地址的输入域 tel 定义输入电话号码的字段 search 用于搜索域 range 一个范围内数字值的输入域 HTML5也新增了五个表单元素 ...

DOCTYPE

DOCTYPE 是一个声明，位于 HTML 文档的最顶部，指示浏览器使用哪种 HTML 或 XHTML 版本来渲染页面。它的主要作用是确保浏览器以标准模式解析文档，从而避免不同浏览器间的渲染差异。正确使用 DOCTYPE 可以提升页面的兼容性和可访问性。 <!DOCTYPE>声明应该位于HTML文档的第一行，紧接着是<html>标签。例如，对于 HTML5 文档，你只需写： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document Title</title> </head> <body>  </body> </html> 这个声明告诉浏览器该文档是一个HTML5文档。HTML5是最新的HTML标准，它包括了许多现代化的功能，如语义元素、表单控件、音频和视频等。 DOCTYPE 的作用有以下几个方面：指定 HTML 版本：浏览器根据 DOCTYPE 的声明来确定使用哪个 HTML 版本来渲染页面，从而保证页面在不同的浏览器上显示一致性。触发标准模式：在 HTML 中，如果省略了 DOCTYPE 声明，浏览器会进入混杂模式（Quirks mode），这种模式下浏览器的渲染方式与早期的浏览器相同，可能导致页面的显示出现不可预测的错误。而指定了 DOCTYPE 声明，则会触发标准模式（Standards mode），使得浏览器按照 HTML 规范的要求进行页面渲染，从而保证页面的稳定性和可靠性。供浏览器和开发人员参考：DOCTYPE 声明还包含了有关 HTML 文档的元信息，例如所使用的 DTD（文档类型定义），以及其他的元数据信息，这些信息可以供浏览器和开发人员参考，帮助开发人员更好地了解和掌握 HTML 语言的特点和规范。提高网页加载速度：指定 DOCTYPE 声明可以帮助浏览器更快地加载网页，因为浏览器知道要使用哪种渲染模式，从而更快地解析 HTML 文档。避免代码错误：指定 DOCTYPE 声明可以帮助开发人员在编写 HTML 代码时遵循标准，避免一些常见的代码错误，例如忘记关闭标签或者使用非法的属性和元素等等。除了HTML5的<!DOCTYPE>声明之外，还有一些其他版本的HTML和XHTML文档类型声明。这里是一些例子： 1. HTML 4.01 Strict： ...

语义化

HTML 语义化是什么？ HTML 语义化是指使用 HTML 标签来正确地表示文档的结构和内容的方式。通过使用正确的标签和元素，可以使网页的结构更加清晰、易于理解，并且对搜索引擎和辅助技术（如屏幕阅读器）更友好。 CSS 命名的语义化指的是在给 CSS 类名、选择器和 ID 命名时，使用具有语义的名称来描述元素的用途和功能。这样的命名方式可以使代码更具可读性、可维护性和可拓展性。为什么需要语义化？有利于搜索引擎优化（SEO）：搜索引擎依赖于网页的结构和语义来识别和理解网页内容。使用语义化的 HTML 标签可以提高网页在搜索引擎结果的排名，从而提高页面的 SEO（搜索引擎优化）。可读性和可维护性：使用语义化的代码可以增强代码的可读性和可维护性，有利于开发人员理解和维护代码。同时，遵循 W3C 标准的团队可以遵循相同的标准，减少差异化，提高团队的效率和协调能力。提高可访问性：语义化可以提高网页的可访问性，让页面更容易被搜索引擎、辅助技术（如屏幕阅读器）解析和理解，让更多的人能访问和理解网页。可间接提升网页的性能：在传统的 HTML 代码中，有时候会存在一些重复的标签和属性，导致代码冗余。使用语义化的 HTML 代码，可以减少这种冗余，让代码更加简洁和高效。面向未来的 HTML ，浏览器在未来可能提供更丰富的支持。一些常用的语义化标签及使用场景布局相关的语义化标签： <header> 标签：用于定义文档或一个节的头部区域。通常包含网页的标题、导航栏、logo 或其他相关信息；作用是为页面提供附加的信息或功能，以帮助用户更好地理解或导航网页内容。适用于表示网页或一个节的顶部区域。 <aside> 标签：用于定义与页面内容相关但可以被视为独立于主要内容的部分。它通常用于侧边栏、广告、导航链接、附加信息或其他类似的内容。 <section> 标签：用于表页面中的一个独立部分，具有明确的主题或目的。例如文章、评论、产品列表、产品规格及描述等。一个页面可以包含多个不同主题的 section ；并且这个标签可以包含标题、段落、列表、表格等其他HTML元素。 <nav> 标签：用于表示导航菜单，包括主导航、子导航、面包屑导航等。这个标签通常包含链接（<a> 标签）来指向其他页面或网站的部分。 <footer> 标签：用于表示文档的页脚，通常包含版权信息、联系方式、法律声明等内容。它通常出现在页面的底部，并且只应该出现一次。 <main> 标签：用于表示页面中的主要内容区域，是所有主要内容（包括头部、尾部和侧边栏）的容器。每个<main>元素都应该包含独特的内容，这部分内容在页面上是唯一的，且对整个页面来说是重要的。<main>标签不能包含在页面其它区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。 <address> 标签：用于表示联系信息，通常包含地址、电子邮件地址、电话号码等。这个标签通常用于定义页面或其部分内容的作者或拥有者的联系信息。举个栗子🌰： <body>  <header> <h1>欢迎来到我的网站</h1> <p>这是网站的标题，用于展示网站的核心信息。</p> </header>  <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品</a></li> <li><a href="#">联系我们</a></li> </ul> </nav>  <main>  <section></section>  <section> <aside></aside> <aside></aside> </section> </main>  <address> <p><strong>联系信息：</strong></p> <p>电话：(123) 456-7890</p> <p><a href="mailto:example@email.com">example@email.com</a></p> </address>  <footer> © 2023 My Website. All rights reserved. | 设计：北冥有锅 </footer> </body> 文本相关语义化标签： figure 和 figcaption、del 和 ins <figure> 标签：用于处理带有某些嵌入式内容的一组图，照片，代码清单等。表示独立的内容单元，它可以包含任何与主内容相关的附加内容，包括但不限于：文本内容、媒体文件、交互式内容等。使用<figure>标签时应当注意内容的独立性和相关性，确保它与主内容是相关的，并且不依赖于主内容而存在。 <figcaption> 标签：<figcaption>标签是<figure>元素的一部分，并且它是可选的。它应该包含在<figure>标签内部，作为其第一个或最后一个子元素。一个<figure>标签中只能有一个<figcaption>标签。 <del> & <ins> 标签： <del> 用作已删除内容的标签。浏览器通常通过在已删除的文本上打一行删除线来呈现它。 <ins> 用于表示HTML文档中新添加的文本。它通常在文本上带有下划线。 <ins> 与<del> 一起使用时更有用，他们都可以使用CSS属性进行更改。 <ins> 与<del> 的特定属性： cite:URL => 它指定资源的URL，该URL解释更改或删除文本的原因。 datetime:YYYYMMDD || HH:MM:SS => 它指定更改或删除文本的日期和时间。举个栗子🌰： ...

HTML 元素分类

根据标签的功能和表现，HTML 标签主要分为以下几类： 1. 块级元素（Block-level Elements）块级元素通常独占一行，并且可以包含其他块级元素或内联元素，能够扩展至父容器的全部宽度。特点：独占一行，默认情况下会在前后产生换行。宽度默认是父元素的 100%。可以设置 width、height、margin、padding 等布局属性。常见的块级元素： <div>：无特定语义的容器，常用于布局。 <p>：段落标签。 <h1> 到 <h6>：标题标签，按重要性递减。 <ul>、<ol>、<li>：无序、有序列表及其项。 <header>、<footer>、<section>、<article>：HTML5 语义化标签，分别表示页头、页尾、内容区块等。示例： <div> <h1>标题</h1> <p>这是一个段落。</p> </div> 2. 内联元素（Inline Elements）内联元素与其他元素排列在同一行，且只占用其内容所需的宽度。它们不会独占一行，不能包含块级元素。特点：与相邻的内联元素排列在同一行。仅占据自身内容的宽度，不会在前后产生换行。不能设置 width、height（无效），但可以设置 padding 和 margin，只影响水平方向。常见的内联元素： <span>：无特定语义的容器，常用于局部样式。 <a>：超链接。 <strong>：表示强调的文本，通常加粗显示。 <em>：表示强调的文本，通常斜体显示。 <img>：图像标签。 <input>：表单输入元素。示例： <p>这是一个段落，<a href="#">点击这里</a> 了解更多。</p> 3. 内联块元素（Inline-block Elements）内联块元素是同时具备内联元素和块级元素特性的元素。它们在布局上是内联的，但表现为块状元素，因此可以设置宽高。特点：与其他元素排列在同一行，但可设置宽度和高度。不会自动换行。常见的内联块元素： <img>：虽然图像显示在行内，但可以设置 width 和 height。 <button>：按钮。 <input type="text">：文本输入框。 CSS 设置为 display: inline-block 的元素。示例： <span style="display: inline-block; width: 100px; height: 100px; background: red;"></span> 4. 自闭合元素（Self-closing Elements）自闭合元素是没有闭合标签的元素，因为它们没有任何内容。这类标签通常用于插入内容或进行控制，而不包含其他内容。 ...

HTML 常见属性

HTML 元素的属性是用于控制元素行为或样式的附加信息。以下是一些常见的 HTML 属性： 1. 通用属性（Global Attributes）这些属性几乎可以应用于所有 HTML 元素： id：元素的唯一标识符，用于 JavaScript 或 CSS 选择。 <div id="main"></div> class：为元素指定一个或多个类名，用于 CSS 样式或 JavaScript 操作。 <div class="container header"></div> style：为元素设置内联样式。 <div style="color: red;"></div> title：为元素提供额外信息，当鼠标悬停在元素上时显示。 <button title="Click me!">Click</button> data-*：自定义属性，用于存储私有数据，以 data- 为前缀，可以通过 JavaScript 访问。 <div data-user-id="123"></div> 2. 事件属性（Event Attributes）这些属性用于处理元素上的事件： onclick：定义单击事件处理函数。 <button onclick="alert('Clicked!')">Click me</button> onmouseover：鼠标悬停时触发的事件。 <div onmouseover="console.log('Mouse over')"></div> onkeydown：按下键盘时触发的事件。 <input type="text" onkeydown="handleKeyDown(event)"> 3. 表单相关属性 type：定义输入框类型，例如 text、password、email 等。 <input type="text"> name：定义表单元素的名称，用于表单提交。 <input type="text" name="username"> value：定义表单元素的默认值。 <input type="text" value="Default value"> placeholder：为输入框提供占位符文本，提示用户输入。 <input type="text" placeholder="Enter your name"> disabled：禁用输入元素，使其不可交互。 <input type="text" disabled> required：标记表单元素为必填项。 <input type="text" required> 4. 链接和资源加载属性 href：用于指定超链接的目标 URL。 <a href="https://example.com">Go to example.com</a> src：指定图像、脚本或其他资源的路径。 <img src="image.jpg" alt="Image description"> alt：为图像提供替代文本，图像无法加载时显示。 <img src="image.jpg" alt="Alternative text"> rel：指定链接与目标文档的关系，常用于 link 标签和 a 标签。 <link rel="stylesheet" href="style.css"> target：定义链接的打开方式，常用值包括 _self（当前窗口）和 _blank（新窗口）。 <a href="https://example.com" target="_blank">Open in new tab</a> 5. 多媒体属性 controls：为 <audio> 或 <video> 元素添加播放控件。 <video src="video.mp4" controls></video> autoplay：自动播放音频或视频。 <audio src="audio.mp3" autoplay></audio> loop：音频或视频播放完后重新开始播放。 <video src="video.mp4" loop></video> muted：自动静音视频或音频。 <audio src="audio.mp3" muted></audio> 6. 图像和媒体相关属性 width 和 height：定义图像或视频的宽度和高度。 <img src="image.jpg" width="200" height="100"> 7. iframe 属性 src：定义嵌入的网页 URL。 <iframe src="https://example.com"></iframe> sandbox：为嵌入内容提供更严格的限制，控制 iframe 的行为。 <iframe src="https://example.com" sandbox></iframe> 8. 语义化属性 role：为屏幕阅读器和辅助技术提供语义化描述。 <div role="navigation"></div> 9. 布局和可访问性属性 hidden：隐藏元素，元素不会显示在页面中。 <div hidden>This content is hidden</div> tabindex：定义元素的 tab 键导航顺序。 <button tabindex="1">First</button> <button tabindex="2">Second</button> 常见考点 1. 全局属性（Global Attributes） class：用于给元素指定样式类，如何使用多个类？有哪些常见用法？ id：唯一标识元素，id 的作用和注意事项。 style：内联样式的作用及其优先级。 title：为元素提供额外信息（鼠标悬停时显示）。 data- 属性*：自定义数据属性，如何在 JavaScript 中访问 data-* 属性？ 2. 事件属性（Event Attributes） onclick、onmouseover 等事件处理属性。如何使用事件属性进行事件绑定？事件属性和 JavaScript 事件监听器（addEventListener）的区别和应用场景。 3. 表单属性 name：用于提交表单数据时作为键名。 action：表单提交的目标 URL。 method：表单的提交方式（GET 或 POST）。 autocomplete：是否启用表单自动填充。 required、pattern、min/max 等 HTML5 校验属性。 4. 输入控件相关属性 value：为输入控件设置默认值。 placeholder：为输入框提供提示文本。 disabled：禁用输入控件。 readonly：只读属性，控件不能被修改。 maxlength/minlength：输入字符长度的限制。 accept：文件上传时，限制允许的文件类型（适用于 <input type="file">）。 5. 媒体元素属性 src：媒体文件的路径（适用于 <img>、<audio>、<video> 等）。 alt：图片无法加载时显示的替代文本。 controls：是否为媒体文件显示默认控制条。 autoplay：媒体文件是否自动播放。 loop：媒体文件是否循环播放。 muted：媒体文件是否静音。 6. 超链接相关属性 href：链接目标的 URL。 target：定义链接打开的方式（如 _blank 打开新窗口）。 download：允许下载链接资源，而不是导航到资源。 rel：定义链接与当前文档的关系（如 nofollow、noopener）。 7. iframe 属性 src：嵌入的文档或网页的 URL。 sandbox：启用或禁用特定行为（如禁止脚本、表单提交等）。 allow：控制 iframe 内的权限（如允许摄像头、麦克风访问）。 8. 图像和图形属性 srcset：为不同设备提供不同分辨率的图像资源。 sizes：配合 srcset，定义不同视口下图像显示的尺寸。 usemap：指定图片使用的图像映射。 height/width：定义图片或其他元素的高度和宽度。 9. meta 标签属性 charset：指定文档的字符编码（如 UTF-8）。 name 和 content：为文档提供元信息（如 description, viewport）。 http-equiv：配合 content，定义 HTTP 头信息（如 refresh, Content-Type）。 10. 无障碍相关属性 aria- 属性*：为无障碍工具（如屏幕阅读器）提供更多语义信息。 role：指定元素的功能角色，增强无障碍性。 11. iframe 和图片的懒加载 loading=“lazy”：为图片和 iframe 启用懒加载。 12. 语言和方向属性 lang：指定元素或页面的语言（如 lang="en"）。 dir：指定文本的书写方向（如 ltr 左到右，rtl 右到左）。

表单控件

01、<form>表单表单是比较重要的HTML元素，主要作用是向服务端提交数据。比如结合表单元素input使用，通过内部的button按钮提交（type=“submit”）表单数据。元素/属性描述值/备注 <form> 表单元素 action 提交表单的目标（服务端）地址url method 提交数据的方式，就是数据传输的方式 get：通过URL提交数据 url?uname=1&age=2；post，通过HTTP表单数据提交，键值格式。 target 提交数据时打开action url的方式 _self：当前窗口（默认值）；_blank：新窗口 enctype 编码类型（encode type），规定了form表单在发送到服务器时候编码方式，不常用。 application/x-www-form-urlencoded：编码所有字符（默认）；multipart/form-data ：混合类型，表单中有文件上传时使用；text/plain：纯文体，空格转换为 “+” 加号，不对特殊字符编码 submit() 提交表单数据，通过js代码调用 <fieldset> 表单分组，默认样式：一个框便于表单样式管理的语义化元素 form from的id，当<fieldset>不在form中时 disabled 整个分组都不可用 <legend> 作为<fieldset>的标题，显示在框上（legend /ˈledʒənd/ 铭文、图例） <style> #form fieldset { border: 1px solid skyblue; padding: 20px 10px; border-radius: 5px; text-align: center; margin: 10px 0px; } #form fieldset legend { font-size: 1em; border: 1px solid rgb(236, 175, 43); border-radius: 1em; padding: 3px 15px; } </style> <form id="form" action="#" target="_self" method="post"> <fieldset> <legend>登录</legend> <input type="text" name="uname" placeholder="请输入用户名" required maxlength="36"> <input type="password" name="upwd" required maxlength="12" placeholder="输入密码"> <input type="submit" value="submit-登录"> </fieldset> </form> 📢注意：<form>提交数据时参数名为表单元素的name，因此表单控件须设置name属性。 ...

meta 标签

概览 meta标签一般放在整个html页面的head部分，在MDN中对他这样定义： meta是文档级元数据元素，用来表示那些不能由其它 HTML 元相关元素（<base>、<link>, <script>、<style>或 <title>）之一表示的任何元数据。是不是感觉看起来很抽象？说白了就是为了传达信息。先看看meta 元素定义的元数据的类型：如果设置了 name属性，meta 元素提供的是文档级别的元数据，应用于整个页面。如果设置了 http-equiv属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。如果设置了 charset属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。 name属性 name和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。 author 用来表示网页的作者的名字，例如某个组织或者机构。 <meta name="author" content="aaa@mail.abc.com"> description 是一段简短而精确的、对页面内容的描述。以头条和taobao的description标签为例： keywords 与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。还是以头条和taobao为例 viewpoint 为 viewport（视口）的初始大小提供指示。目前仅用于移动设备。可能你也发现了，我们在vscode中自动生成html的代码片段时，会自动生成： <meta name="viewport" content="width=device-width, initial-scale=1.0"> width用来设置 viewport 的宽度为设备宽度; initial-scale为设备宽度与 viewport 大小之间的缩放比例。 robots 表示爬虫对此页面的处理行为，或者说，应当遵守的规则，是用来做搜索引擎抓取的。它的content可以为： all:搜索引擎将索引此网页，并继续通过此网页的链接索引文件将被检索 none:搜索引擎讲忽略此网页 index:搜索引擎索引此网页 follow:搜索引擎继续通过此网页的链接索引搜索其它的网页 renderer 用来指定双核浏览器的渲染方式，比如360浏览器，我们可以通过这个设置来指定360浏览器的渲染方式 <meta name="renderer" content="webkit"> //默认webkit内核 <meta name="renderer" content="ie-comp"> //默认IE兼容模式 <meta name="renderer" content="ie-stand"> //默认IE标准模式 http-equiv http-equiv也是和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值。 http-equiv 所有允许的值都是特定 HTTP 头部的名称， ...

响应式图片

响应式是指实现不同屏幕分辨率的终端上浏览网页的不同展示方式。本知识点的主要内容有：为什么要使用响应式图片怎么实现响应式图片 1、为什么要使用响应式图片假如有一张图片的显示宽度为200px，那么，它在 1x（即设备像素比为 1 的显示器）的显示器上，是占了 200 个物理像素（即实际所占的像素）；它在 2x 的显示器上，实际上是占了 400 个物理像素；在 3x 的显示器上，实际上是占了 600 个物理像素；在 4x 的显示器上就是占了 800 个物理像素。如果这个图片只提供 200 像素的尺寸，那么在 2x~4x 的显示器上看起来就很模糊。如果只提供 800 像素的版本，那么在 1x~3x 的设备上会显得多余，因为加载时间会相较长，所以我们要使用响应式图片。再比如一个场景，相同的banner，在电脑上需要使用大图，但是手机上面使用小图，不然会造成手机上加载慢浪费流量等问题，这也可以使用响应式图片来解决。 2、实现方法 css3 media query 一个办法是使用backgound-image结合媒体查询，如下所示： .banner{ background-image: url(/static/large.jpg); } @media screen and (max-width: 767px){ background-image: url(/static/small.jpg); } 这种方法的缺点是对SEO不太友好，因为如果使用img标签还可以写个alt属性。 picture标签 <picture> <source srcset="banner_w1000.jpg" media="(min-width: 801px)"> <source srcset="banner_w800.jpg" media="(max-width: 800px)"> <img src="banner_w800.jpg" alt=""> </picture> 如上，如果页面宽度大于800px（PC），则加载大图，而在手机上加载小图。这样写浏览器就只会加载source里面的一张图片。但是如果是用js动态插进去的，它还是会去加载两张，只有写在html里面加载初始化页面的时候才只加载一张。 picture必须要写img标签，否则无法显示，对picture的操作最后都是在img上面，例如onload事件是在img标签触发的，picture和source是不会进行layout的，它们的宽和高都是0。另外使用source，还可以对图片格式做一些兼容处理： <picture> <source type="image/webp" srcset="banner.webp"> <img src="banner.jpg" alt=""> </picture> webp在保持同等清晰度的情况下，体积可以减少一半，但是目前只有Chrome支持，Safari和firefox一直处于实验阶段，所以其它的浏览器如firefox将会加载jpg格式的照片： ...

多媒体技术

对于大多数前端工程师来说，音视频技术是一个比较少涉足的领域，本知识点主要介绍流媒体技术中的文本、图形、图像、音频和视频多种理论知识，涉及到播放器、web媒体技术、主流框架等内容。一、音视频基础 1.1 视频 1.1.1 基础概念码率单位时间内取样率越大，精度就越高，处理出来的文件就越接近原始文件。帧率对视频来说，帧率对应这观看卡顿。帧率越高，流畅度越高，低帧率会造成视觉卡顿。压缩率经过压缩后文件的大小 / 原始文件的大小 * 100% = 压缩率。编码压缩越小越好，但压得越小，解压时间分辨率用于度量图像内数据量多少的一个参数，和视频清晰度息息相关。 1.1.2 视频容器格式容器格式相信大家经常见到： MP4、AVI、FLV、TS/M3U8、WebM、OGV、MOV… 1.1.2 视频编码格式 H.264 目前最流行的编码格式。 H.265 新型的编码格式，高效的视频编码。用来以替代H.264/AVC编码标准。 VP9 VP9是WebM Project开发的下一代视频编码格式。VP9支持从低比特率压缩到高质量超高清的所有Web和移动用例，并额外支持10/12位编码和HDR AV1 AOM（Alliance for Open Media，开放媒体联盟）制定的一个开源、免版权费的视频编码格式。AV1是google制定的VP9标准的继任者，也是H265强有力的竞争者。 1.2 音频 1.2.1 基础概念采样率音频采样率是指录音设备在一秒钟内对声音信号的采样次数，采样频率越高声音的还原就越真实越自然。采样大小一秒钟所采的样本数为比特率，每个样本中信息的比特数就是位深，即采样精度，单位为Bit。比特率指每秒传送的比特(bit)数，又称数据信号速率。单位为比特/秒、千比特/秒或兆比特/秒。比特率越高，表示单位时间传送的数据就越多。压缩率原始音频数据与通过PCM等压缩编码技术压缩后的数据大小的比率 1.2.2 音频容器格式音频格式也比较常见：WAV、AIFF、AMR、MP3、Ogg… 1.2.3 音频编码格式 PCM 脉冲编码调制(Pulse Code Modulation,PCM)，PCM是数字通信的编码方式之一。 AAC-LC(MPEG AAC Low Complexity) 低复杂度编码解码器（AAC-LC — 低复杂度高级音频编码）是低比特率、优质音频的高性能音频编码解码器。 AAC-LD （又名AAC低延迟或MPEG-4低延迟音频编码器），为电话会议和OTT服务量身打造的低延迟音频编解码器 LAC（Free Lossless Audio Codec）免费无损音频编解码器。是一套著名的自由音频压缩编码，其特点是无损压缩。 2012年以来它已被很多软件及硬件音频产品（如CD等）所支持。 1.3 常见标签 1.3.1 <audio> 元素 1.3.1.1 基本用途 <audio> 元素用于在网页中嵌入音频内容。它可以播放音乐、播客、音效等。 ...

Canvas 和 SVG

1.Canvas Canvas 是 HTML5 中新增的一个元素，它提供了一种通过 JavaScript 来绘制图形的方式，使用笔刷绘制2D图案。通过 Canvas，我们可以在网页中动态地绘制出各种图形、图表、动画等内容，实现更丰富的交互效果。工作方式 Canvas 的工作方式是，我们首先在 HTML 页面中添加一个 <canvas> 元素，并指定其宽度和高度，然后在 JavaScript 中获取该元素的上下文对象，并通过调用它的方法来绘制图形。Canvas 的上下文对象有多种，包括 2D 上下文、WebGL 上下文等，我们可以根据需求选择相应的上下文对象来进行绘制。常用属性属性效果 fillStyle 填充颜色。默认为黑色 strokeStyle 描边颜色。默认为黑色 lineWidth 线条宽度。默认为 1 像素 lineCap 线条末端的样式,可选值有 butt、round 和 square。默认为 butt lineJoin 线条相交处的样式,可选值有 miter、round 和 bevel。默认为 miter。 miterLimit 线条相交处的最大斜接长度。默认为 10 像素 globalAlpha 绘制的透明度。默认为 1（不透明） shadowColor 阴影颜色。默认为黑色 shadowOffsetX、shadowOffsetY 阴影的偏移量和模糊程度 shadowBlur 模糊程度优缺点优点基于矢量绘制，图形可以自由缩放而不失真具有良好的跨浏览器兼容性通过 JavaScript 动态生成图形，可以更加灵活地控制图形的显示和交互缺点无法处理复杂的交互事件、不支持跨域图像等使用实例这个实例中，我们使用了一个 HTML5 的 Canvas 元素，它的宽度和高度分别为 200 像素。在 JavaScript 中，我们获取了这个元素，并通过 getContext 方法获取了它的上下文对象。然后，我们使用 fillStyle 属性设置了矩形的填充颜色为红色，并使用 fillRect 方法绘制了一个起点坐标为 (50,50)，宽度为 100 像素，高度为 100 像素的矩形。 ...