01 HTML

html5 新特性

HTML5 引入了许多新特性，使得 Web 开发更加强大和灵活。以下是一些主要的新特性：

1. 语义化标签：引入了一系列具有明确语义的标签，如 <header>、<footer>、<nav>、<article> 和 <section> 等，使得网页结构更加清晰，利于搜索引擎优化（SEO）和无障碍访问。

2. 多媒体支持：提供了内置的多媒体支持，包括 <audio> 和 <video> 标签，无需依赖第三方插件（如 Flash）即可在网页中嵌入音频和视频内容。

3. 图形绘制：引入了 <canvas> 标签，通过 JavaScript 可以在网页上绘制各种图形、图像和动画，适用于创建游戏、数据可视化和图形编辑等应用场景。

4. 本地存储：引入了 Web Storage（包括 localStorage 和 sessionStorage）和 IndexedDB 等新的存储机制，允许开发者在客户端存储数据，提高性能并支持离线访问。

5. 表单增强：新增了多种表单输入类型，如 email、url、date、time、number 和 range 等，提供了更友好的用户界面和输入验证。

6. Web Workers：允许在后台线程中执行 JavaScript 代码，不影响主线程的运行，从而实现多线程处理，提高网页应用的性能和响应速度。

7. Web Sockets：提供了一种在浏览器和服务器之间进行全双工通信的机制，允许服务器主动向客户端推送数据，实现实时的双向通信。

8. 地理定位：提供了地理定位 API，通过浏览器可以获取用户设备的地理位置信息，前提是用户允许。

href 和 src 的区别

href 和 src 是 HTML 中的两个常用属性，它们的主要区别如下：

1. href (Hypertext Reference):
   • 用于定义超链接的目标地址。
   • 常用于 <a> 标签、<link> 标签等。
   • 当浏览器遇到 href 属性时，会导航到指定的 URL 或加载指定的资源。

<a href="https://www.example.com">访问示例网站</a>
<link rel="stylesheet" href="styles.css" />

2. src（Source）：用于定义嵌入资源的 URL。常用于 、

示例：

<img src="image.jpg" alt="示例图片" />
<script src="script.js"></script>
<iframe src="https://www.example.com"></iframe>

对HTML语义化理解

根据内容来选择合适的标签

方便浏览器爬虫更好的识别内容。 有利于代码可读性，开发者能清晰的看出网页的结构，便于团队的开发与维护。

iframe 的优点和缺点

iframe 标签用于在网页中嵌入另一个 HTML 页面。它具有以下优点和缺点：

优点：

1. 内容隔离：iframe 可以将嵌入的内容与主页面隔离开来，避免样式和脚本的冲突。
2. 复用性：可以在多个页面中复用相同的内容，减少重复代码，提高开发效率。
3. 异步加载：iframe 内容可以异步加载，不会阻塞主页面的加载，提高页面的响应速度。
4. 安全性：通过设置 sandbox 属性，可以限制 iframe 内的内容执行特定的操作，提高安全性。

缺点：

1. SEO 不友好：搜索引擎爬虫可能无法有效索引 iframe 内的内容，不利于搜索引擎优化。
2. 性能问题：过多的 iframe 会增加页面的加载时间和资源消耗，影响性能。
3. 复杂性：嵌套的 iframe 可能导致代码复杂度增加，难以维护和调试。
4. 跨域限制：iframe 内的内容如果来自不同的域，可能会受到浏览器的跨域限制，无法进行某些操作。

script 标签中 defer 和 async 的区别

defer 和 async 是 <script> 标签的两个属性，用于控制外部 JavaScript 文件的加载和执行方式。它们的主要区别如下：

1. defer 属性:
   • 脚本会在 HTML 解析完成后执行。
   • 多个带有 defer 属性的脚本会按照它们在文档中的顺序依次执行。
   • 适用于依赖于 DOM 的脚本，确保在脚本执行时，整个文档已经完全解析。

<script src="script.js" defer></script>

2. async 属性:
   • 脚本会在下载完成后立即执行，而不会等待 HTML 解析完成。
   • 多个带有 async 属性的脚本执行顺序不确定，取决于各自的下载速度。
   • 适用于独立的脚本，不依赖于其他脚本或 DOM。

<script src="script.js" async></script>

总结:

• 使用 defer 可以确保脚本按照顺序执行，并且在 DOM 解析完成后执行，适合需要访问 DOM 的脚本。
• 使用 async 可以加快页面加载速度，但脚本执行顺序不确定，适合独立的、无需依赖其他脚本的代码。