HTML

1.解释 HTML 中<DOCTYPE>标签的作用？

<DOCTYPE>标签用于告知浏览器文档类型，它是 HTML 文档的第一行，帮助浏览器正确地渲染页面。常见的如<DOCTYPE html>表示这是一个 HTML5 文档。

2.列举 HTML 中常见的语义化标签，并说明其用途（如<header>、<main>、<footer>等）。

语义化标签有助于提高 HTML 文档的可读性和可维护性，同时也有助于搜索引擎优化（SEO）。常见的语义化标签包括：

• <header>：定义文档或节的头部，通常包含标题、导航链接等。
• <main>：定义文档的主要内容，每个页面只能有一个<main>标签。
• <footer>：定义文档或节的尾部，通常包含版权信息、链接等。
• <article>：定义独立的内容块，如文章、博客帖子等。
• <section>：用于对页面内容进行分区。
• <aside>：通常表示与主要内容相关但可以独立存在的侧边栏内容。

3.谈谈你对 HTML 表单中<input>标签的type属性的理解，列举一些常见的值及用途。

<input>标签的type属性用于指定输入字段的类型，常见的值包括：

• text：单行文本输入框。
• password：密码输入框，输入内容会被隐藏。
• checkbox：复选框，可以选中多个选项。
• radio：单选按钮，只能选中一个选项。
• submit：提交按钮，用于提交表单数据。
• reset：重置按钮，用于重置表单数据。
• file：文件上传控件，允许用户选择文件。
• number：用于输入数字。
• email：用于输入电子邮件地址，浏览器会进行格式验证。
• url：用于输入电子邮件地址，浏览器会进行格式验证。

4.如何在 HTML 中实现图片懒加载？

在 HTML 中实现图片懒加载（Lazy Loading）有几种方法，主要包括使用原生 HTML 属性、JavaScript，以及结合 Intersection Observer API。以下是一些常见的方法：

方法1：使用原生HTML loading属性

从 HTML5 开始，浏览器支持 loading 属性，可以轻松实现懒加载。

<img src="image.jpg" alt="Description" loading="lazy">

方法2：使用JavaScript和Intersection Observer API

Intersection Observer API 是一种现代的 JavaScript API，允许检测元素是否在视口中。 步骤：

1. HTML 结构：将图片的真实 URL 存储在自定义属性中，如 data-src。
2. JavaScript 代码：使用 Intersection Observer API 懒加载图片。

    <img data-src="image.jpg" alt="Description" class="lazy">

    document.addEventListener("DOMContentLoaded", function() {
        let lazyImages = document.querySelectorAll('img.lazy');
   
        if ("IntersectionObserver" in window) {
            let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                let lazyImage = entry.target;
                lazyImage.src = lazyImage.dataset.src;
                lazyImage.classList.remove("lazy");
                lazyImageObserver.unobserve(lazyImage);
                }
            });
            });
   
            lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
            });
        } else {
            // Fallback for browsers without IntersectionObserver support
            let lazyLoad = function() {
            lazyImages.forEach(function(lazyImage) {
                if (lazyImage.getBoundingClientRect().top < window.innerHeight && lazyImage.getBoundingClientRect().bottom > 0 && getComputedStyle(lazyImage).display !== "none") {
                lazyImage.src = lazyImage.dataset.src;
                lazyImage.classList.remove("lazy");
                }
            });
   
            if (lazyImages.length == 0) {
                document.removeEventListener("scroll", lazyLoad);
                window.removeEventListener("resize", lazyLoad);
                window.removeEventListener("orientationchange", lazyLoad);
            }
            };
   
                document.addEventListener("scroll", lazyLoad);
                window.addEventListener("resize", lazyLoad);
                window.addEventListener("orientationchange", lazyLoad);
            }
        });

3. 方法三：使用第三方库 有很多第三方库可以帮助实现懒加载，如 lazysizes。

5.描述 HTML 中<a>标签的href属性的作用，以及常见的取值。

• 绝对 URL：如https://www.example.com，指向其他网站的页面。
• 相对 URL：如/page.html或../folder/page.html，相对于当前页面的地址。
• #加上元素的id值：如#section1，用于页面内的锚点跳转。
• javascript:void(0)：用于阻止链接的默认行为，通常结合 JavaScript 事件使用。

6.什么是 HTML5 的本地存储（LocalStorage 和 SessionStorage），它们之间的区别是什么？

LocalStorage 提供了一种持久存储数据的方法。它的特点和使用方式如下：

• 持久性：存储的数据不会过期，除非通过代码明确删除或用户手动清除浏览器缓存。
• 存储范围：每个域（origin，包括协议、主机和端口）的存储是独立的。
• 容量：一般来说，每个域名的存储容量在 5MB 左右（不同浏览器可能略有不同）。
• 访问方式：可以通过 localStorage 对象来进行读写操作。

SessionStorage 提供了一种会话级别的存储方法。它的特点和使用方式如下：

• 会话级别持久性：数据仅在页面会话期间可用，当页面会话结束（例如，标签页或浏览器关闭）后，存储的数据将被清除。
• 存储范围：每个页面会话独立，数据仅在同一个标签页或窗口中共享，不同标签页或窗口即使访问相同的页面也无法共享数据。
• 容量：每个页面会话的存储容量一般也是 5MB 左右（不同浏览器可能略有不同）。
• 访问方式：可以通过 sessionStorage 对象来进行读写操作。

7.解释 HTML 中的<iframe>标签的用途和可能带来的问题。

<iframe>标签用于在当前页面中嵌入另一个页面。用途包括嵌入第三方内容、在同一页面中显示不同来源的页面等。可能带来的问题包括：

• 性能问题，因为它需要加载额外的页面。
• 安全风险，嵌入的页面可能不受信任。
• 影响搜索引擎优化，因为搜索引擎可能难以正确索引嵌入的内容。

8.如何在 HTML 中优化页面加载速度（从 HTML 结构方面考虑）？

• 压缩 HTML 文件，减少文件大小。
• 合理使用语义化标签，使页面结构清晰，便于浏览器解析和渲染。
• 减少不必要的嵌套和空元素。
• 异步加载非关键的 HTML 部分，如通过 JavaScript 动态插入。
• 将 CSS 和 JavaScript 引用放在<head>标签底部，避免阻塞页面渲染。

9.简述 HTML 中的多媒体元素（如<audio>、<video>）的使用方法及常见属性。

• <audio>标签用于嵌入音频文件。常见属性包括src（音频文件的路径）、controls（显示播放控件）、autoplay（自动播放）等。
• <video>标签用于嵌入视频文件。常见属性与<audio>类似，还包括width、height（设置视频的宽高）、poster（视频封面图片）等。

10.HTML 中的<meta>标签有哪些常见用途（如设置字符编码、视口等）？

• 设置字符编码：<meta charset="UTF-8">
• 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">
• 关键词和描述：<meta name="keywords" content="关键词列表"> <meta name="description" content="页面描述">
• 刷新和重定向：<meta http-equiv="refresh" content="5;url=https://www.example.com">

11.解释 HTML 中的<canvas>元素的用途及基本用法。

<canvas>元素用于通过 JavaScript 动态绘制图形、图表、动画等。基本用法包括获取canvas元素的上下文（2D 或 3D），然后使用相关的绘图方法进行绘制。

12.如何确保 HTML 页面在不同浏览器中的兼容性？

1. 使用标准的 HTML 和 CSS 语法，避免使用过时的标签和属性。
2. 使用浏览器兼容性测试工具，如 BrowserStack，来测试页面在不同浏览器中的表现。
3. 使用 CSS 前缀和 polyfills 来支持旧版本的浏览器。
4. 使用 CSS 重置（reset）或规范化（normalize）样式表，以确保不同浏览器之间的默认样式一致。
5. 使用 JavaScript 的特性检测（feature detection）和功能回退（feature fallback）来确保在不支持某些特性的浏览器中也能提供基本的功能。

13.说说 HTML 中的<link>标签和@import在引入 CSS 样式表时的区别。

• <link>标签是 HTML 规范推荐的引入 CSS 样式表的方式，它在页面加载时同时加载样式表，不会阻塞页面渲染。
• @import是 CSS 中的指令，它在 CSS 文件内部使用，会在 CSS 解析时加载，可能会阻塞页面渲染，尤其是在多个@import嵌套使用时。