HTML面试题（持续收集并更新中...）行级元素和块级元素分别有哪些及怎么转换？一、行级元素和块级元素分类行级元素（

一、行级元素和块级元素分别有哪些及怎么转换？

1.行级元素和块级元素分类

行级元素（内联元素）

特点：在一行内显示，不独占一行，设置宽高无效，默认宽度由内容撑开

常见行级元素：

html

<span>、<a>、<strong>、<em>、<i>、<b>
<img>、<input>、<textarea>、<select>
<label>、<button>、<code>、<sup>、<sub>
<br>、<small>、<q>、<cite>

块级元素

特点：独占一行，默认宽度撑满父容器，可以设置宽高

常见块级元素：

html

<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>
<table>、<form>、<section>、<article>
<header>、<footer>、<nav>、<aside>
<main>、<figure>、<figcaption>、<hr>

行内块元素（特殊）

html

<img>、<input>、<button>、<textarea>

特点：可以设置宽高，但又能在行内排列

2.转换方法（通过CSS display属性）

1）行级 → 块级

css

.inline-to-block {
    display: block;
    /* 现在可以设置宽度、高度、上下边距 */
    width: 200px;
    height: 100px;
    margin: 10px 0;
}

应用场景：让链接<a>变成块级，点击区域更大

2）块级 → 行级

css

.block-to-inline {
    display: inline;
    /* 宽度高度设置无效，元素在一行排列 */
}

应用场景：让列表项<li>水平排列（传统导航栏做法）

3）转换为行内块

css

.to-inline-block {
    display: inline-block;
    /* 既能设置宽高，又能在一行显示 */
    width: 100px;
    height: 50px;
    vertical-align: middle; /* 垂直对齐很重要 */
}

应用场景：导航菜单、按钮组、图片列表

4）其他display值

css

.hide-element {
    display: none;      /* 完全隐藏，不占空间 */
}

.invisible-box {
    visibility: hidden; /* 隐藏但占空间 */
}

.flex-layout {
    display: flex;      /* 弹性布局 */
}

.grid-layout {
    display: grid;      /* 网格布局 */
}

3.实际应用示例

示例1：水平导航菜单

html

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">关于</a></li>
</ul>

css

.nav li {
    display: inline-block;  /* 块级转行内块 */
    margin: 0 15px;
}

.nav a {
    display: block;         /* 行级转块级 */
    padding: 10px 20px;
}

示例2：表单元素布局

css

label {
    display: inline-block;  /* 让label能设置宽度 */
    width: 80px;
    text-align: right;
}

input {
    display: inline-block;
    width: 200px;
}

4.重要注意事项

1） 转换后的影响：

-   `display: block`后，元素会换行
-   `display: inline`后，宽高设置失效
-   `inline-block`元素间可能有空白间隙（可通过父元素设置`font-size: 0`解决）

2） 兼容性：

css

```
/* 旧版IE hack */
.element {
    display: inline-block;
    *display: inline;    /* IE7 */
    *zoom: 1;            /* IE6/7 */
}
```

3） 替代方案：

-   **浮动**：`float: left`也能实现类似`inline-block`的效果
-   **Flexbox**：`display: flex`实现更灵活的布局

5.总结对比

属性值	特点	常见用途
`inline`	行内排列，不可设宽高	文本修饰、小图标
`block`	独占一行，可设宽高	容器、段落、标题
`inline-block`	行内排列，可设宽高	按钮、导航项、表单控件
`none`	完全隐藏	动态显示/隐藏

建议：现代布局优先使用Flexbox或Grid，传统布局使用inline-block，尽量减少float的使用。

二、HTML5有哪些新元素和新特性？

HTML5为网页开发带来了巨大革新，最直观的变化是新增了一系列语义化标签。这些标签不仅是新的HTML元素，更是为内容赋予明确含义的工具，让代码结构更清晰，对开发者和搜索引擎更友好。

📐 核心新增语义化标签

下表整理了HTML5中最关键的新增语义化元素，它们主要用于定义页面结构：

标签	说明	替代传统做法
`<header>`	定义页面或内容区块的页眉。	`<div id="header">`
`<nav>`	定义导航链接的区域。	`<div class="nav">`
`<article>`	定义独立的、可重复使用的文章/内容区块。	`<div class="post">`
`<section>`	定义文档中的节或区段。	`<div class="section">`
`<aside>`	定义与主内容间接相关的侧边栏或附属内容。	`<div id="sidebar">`
`<footer>`	定义页面或内容区块的页脚。	`<div id="footer">`
`<figure>` & `<figcaption>`	用于包裹独立媒体内容（如图、表）及其标题。	用`<div>`和`<p>`组合
`<main>`	定义页面的主要内容，一个页面只应有一个。	`<div id="main">`
`<mark>`	表示需要突出显示或高亮的文本。	`<span class="highlight">`
`<time>`	定义日期或时间，方便机器读取。	`<span>`

🔍 其他主要新特性

除了语义化标签，HTML5还引入了许多提升交互与功能的新特性：

更强大的表单
- 新输入类型：如 email、url、date、range、number 等，浏览器会提供相应的键盘或控件。
- 新属性：如 placeholder（提示文本）、required（必填）、autofocus（自动聚焦）、pattern（正则验证）等。
原生多媒体支持
- 通过 <video> 和 <audio> 标签直接嵌入视频和音频，无需Flash等插件。
- 使用 <canvas> 元素配合JavaScript API进行2D图形、游戏等动态绘制。
本地存储与离线能力
- Web Storage (localStorage 和 sessionStorage) 提供了比Cookie更简单、存储量更大的客户端数据存储方案。
- 应用缓存（Application Cache，已被Service Worker逐步取代）和 IndexedDB 支持更复杂的离线应用。
重要的新API
- 地理定位 (Geolocation) ：获取用户地理位置。
- 拖放 (Drag and Drop) ：让页面元素可拖动。
- Web Workers：在后台运行脚本，防止复杂计算阻塞页面响应。

⚠️ 已废除的元素

同时，一些在HTML4中常见但过时的元素被废除，主要因其功能可由CSS实现或对可用性有负面影响：

纯粹用于样式的元素：如 <font>, <center>, <big>, <u>（建议用CSS替代）。
框架集元素：<frameset>, <frame>, <noframes>（建议用<iframe>或CSS布局替代）。

三、如何使用HTML5中的Canvas元素绘制图形？

Canvas 绘制图形主要涉及以下几个步骤：

在HTML中创建canvas元素
通过JavaScript获取canvas元素
从canvas元素中获取渲染上下文（2D或3D）
使用上下文提供的方法绘制图形

四、cookie、sessionStorage和localStorage的区别

1.核心对比表

特性	Cookie	sessionStorage	localStorage
存储容量	4KB左右	5-10MB	5-10MB
生命周期	可设置过期时间	会话级别（标签页关闭消失）	永久存储（需手动清除）
作用域	同源窗口共享	仅当前标签页（同源不同标签页不共享）	同源窗口共享
自动发送	每次请求自动携带	不自动发送	不自动发送
存储位置	浏览器和服务器	仅浏览器	仅浏览器
API易用性	需要字符串解析	简单API	简单API

2.详细对比

1） Cookie（HTTP Cookie）

特点：

容量限制：每个域名约50个，单个最大4KB
自动发送：每次HTTP请求都会自动携带（可通过HttpOnly、Secure等属性控制）
过期时间：可设置过期时间
存储格式：字符串格式，需要自行解析

基本操作：

javascript

// 设置Cookie
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 读取所有Cookie
const cookies = document.cookie; // 返回字符串："username=John; token=abc123"

// 封装操作函数
function setCookie(name, value, days = 7) {
    const expires = new Date();
    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
}

function getCookie(name) {
    const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
    return match ? decodeURIComponent(match[2]) : null;
}

Cookie属性：

javascript

document.cookie = `token=xyz123; 
    max-age=3600;           // 1小时后过期
    path=/;                 // 在整个网站有效
    domain=.example.com;    // 所有子域名
    secure;                 // 仅HTTPS传输
    samesite=strict;        // 防止CSRF攻击
    httponly`;              // JavaScript无法访问（安全）

2） sessionStorage

特点：

会话级别：标签页关闭后数据自动清除
独立存储：每个标签页有独立的sessionStorage，刷新页面不会丢失
不共享：同源的不同标签页之间不共享
容量较大：通常5-10MB

基本操作：

javascript

// 存储数据
sessionStorage.setItem('user', JSON.stringify({name: 'Alice', id: 123}));

// 获取数据
const user = JSON.parse(sessionStorage.getItem('user'));
console.log(user.name); // Alice

// 删除单个数据
sessionStorage.removeItem('user');

// 清空所有
sessionStorage.clear();

// 遍历所有数据
for (let i = 0; i < sessionStorage.length; i++) {
    const key = sessionStorage.key(i);
    const value = sessionStorage.getItem(key);
    console.log(key, value);
}

实际应用场景：

javascript

// 1. 表单数据暂存（防止页面刷新丢失）
const form = document.getElementById('myForm');

// 监听输入变化
form.addEventListener('input', (e) => {
    const data = {
        name: form.name.value,
        email: form.email.value
    };
    sessionStorage.setItem('formData', JSON.stringify(data));
});

// 页面加载时恢复数据
window.addEventListener('load', () => {
    const saved = sessionStorage.getItem('formData');
    if (saved) {
        const data = JSON.parse(saved);
        form.name.value = data.name;
        form.email.value = data.email;
    }
});

// 2. 单页应用（SPA）状态保持
sessionStorage.setItem('currentTab', 'profile');

3） localStorage

特点：

永久存储：除非手动清除，否则一直存在
跨标签页共享：同源窗口间可以共享数据
容量最大：通常5-10MB
同步操作：所有操作都是同步的，大量数据可能阻塞主线程

基本操作：

javascript

// 存储数据
localStorage.setItem('theme', 'dark');
localStorage.setItem('settings', JSON.stringify({
    fontSize: 14,
    notifications: true
}));

// 获取数据
const theme = localStorage.getItem('theme'); // 'dark'
const settings = JSON.parse(localStorage.getItem('settings'));

// 删除数据
localStorage.removeItem('theme');

// 清空所有
localStorage.clear();

// 监听存储变化（跨标签页通信）
window.addEventListener('storage', (event) => {
    console.log('键:', event.key);
    console.log('新值:', event.newValue);
    console.log('旧值:', event.oldValue);
    console.log('来自哪个页面:', event.url);
});

实际应用场景：

javascript

// 1. 用户偏好设置
function saveUserPreferences(prefs) {
    localStorage.setItem('userPreferences', JSON.stringify(prefs));
}

function loadUserPreferences() {
    const saved = localStorage.getItem('userPreferences');
    return saved ? JSON.parse(saved) : {
        theme: 'light',
        language: 'zh-CN',
        fontSize: 14
    };
}

// 2. 缓存API数据
async function fetchWithCache(url, cacheKey, ttl = 3600000) {
    const cached = localStorage.getItem(cacheKey);
    
    if (cached) {
        const { data, timestamp } = JSON.parse(cached);
        if (Date.now() - timestamp < ttl) {
            return data; // 使用缓存
        }
    }
    
    // 重新获取
    const response = await fetch(url);
    const data = await response.json();
    
    // 存储到缓存
    localStorage.setItem(cacheKey, JSON.stringify({
        data,
        timestamp: Date.now()
    }));
    
    return data;
}

// 3. 购物车数据
class ShoppingCart {
    constructor() {
        this.items = this.loadCart();
    }
    
    loadCart() {
        return JSON.parse(localStorage.getItem('cart')) || [];
    }
    
    saveCart() {
        localStorage.setItem('cart', JSON.stringify(this.items));
    }
    
    addItem(item) {
        this.items.push(item);
        this.saveCart();
    }
}

3.综合对比示例

数据同步工具类：

javascript

class StorageManager {
    // Cookie操作
    static setCookie(name, value, days = 7) {
        const expires = new Date(Date.now() + days * 864e5).toUTCString();
        document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
    }
    
    static getCookie(name) {
        const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
        return match ? decodeURIComponent(match[2]) : null;
    }
    
    // sessionStorage操作（带过期时间）
    static setSession(key, value, ttl = null) {
        const item = {
            value,
            expiry: ttl ? Date.now() + ttl : null
        };
        sessionStorage.setItem(key, JSON.stringify(item));
    }
    
    static getSession(key) {
        const itemStr = sessionStorage.getItem(key);
        if (!itemStr) return null;
        
        const item = JSON.parse(itemStr);
        if (item.expiry && Date.now() > item.expiry) {
            sessionStorage.removeItem(key);
            return null;
        }
        return item.value;
    }
    
    // localStorage操作（带过期时间）
    static setLocal(key, value, ttl = null) {
        const item = {
            value,
            expiry: ttl ? Date.now() + ttl : null
        };
        localStorage.setItem(key, JSON.stringify(item));
    }
    
    static getLocal(key) {
        const itemStr = localStorage.getItem(key);
        if (!itemStr) return null;
        
        const item = JSON.parse(itemStr);
        if (item.expiry && Date.now() > item.expiry) {
            localStorage.removeItem(key);
            return null;
        }
        return item.value;
    }
}

// 使用示例
StorageManager.setCookie('userToken', 'abc123', 30);
StorageManager.setLocal('cachedData', {data: 'test'}, 3600000); // 1小时过期

4.选择建议

使用 Cookie 当：

需要与服务器通信（如身份验证）
存储小量数据（<4KB）
需要设置HTTP-only安全标志
需要跨子域名共享

使用 sessionStorage 当：

只需要在单个标签页中临时存储数据
页面刷新时需要保留数据
存储敏感数据，标签页关闭后自动清除
单页应用的临时状态管理

使用 localStorage 当：

需要长期存储的用户偏好设置
客户端缓存数据
需要在多个标签页间共享数据
离线应用数据存储

5.安全注意事项

1）不要存储敏感信息

javascript

// ❌ 错误做法
localStorage.setItem('password', '123456');
localStorage.setItem('creditCard', '4111111111111111');

// ✅ 只能存储令牌或加密数据
localStorage.setItem('authToken', 'encrypted_token_here');

2） XSS攻击防护

对存储的数据进行验证和清理
避免将用户输入直接存储
使用HttpOnly Cookie存储敏感令牌

3）定期清理

javascript

// 定期清理过期数据
function cleanExpiredStorage() {
    // 清理localStorage
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const item = JSON.parse(localStorage.getItem(key));
        if (item && item.expiry && Date.now() > item.expiry) {
            localStorage.removeItem(key);
        }
    }
    
    // 清理sessionStorage（通常不需要，但可以处理自定义过期）
    for (let i = 0; i < sessionStorage.length; i++) {
        const key = sessionStorage.key(i);
        const item = JSON.parse(sessionStorage.getItem(key));
        if (item && item.expiry && Date.now() > item.expiry) {
            sessionStorage.removeItem(key);
        }
    }
}

// 每天清理一次
setInterval(cleanExpiredStorage, 24 * 60 * 60 * 1000);

6.兼容性检查

javascript

// 检测浏览器是否支持
function checkStorageSupport() {
    const supported = {
        cookie: navigator.cookieEnabled,
        sessionStorage: (() => {
            try {
                sessionStorage.setItem('test', 'test');
                sessionStorage.removeItem('test');
                return true;
            } catch (e) {
                return false;
            }
        })(),
        localStorage: (() => {
            try {
                localStorage.setItem('test', 'test');
                localStorage.removeItem('test');
                return true;
            } catch (e) {
                return false;
            }
        })()
    };
    
    return supported;
}

// 使用polyfill或降级方案
if (!window.localStorage) {
    // 降级到Cookie或其他方案
    console.warn('localStorage not supported, falling back to cookies');
}

7.最佳实践总结

分类存储：按数据类型选择合适的存储方式
数据加密：敏感信息加密后再存储
容量控制：定期清理，避免存储过多数据
错误处理：操作时使用try-catch处理异常
性能优化：大量数据操作时注意性能影响
兼容性考虑：处理不支持某些存储的情况
类型转换：JSON.stringify/parse处理复杂数据
事件监听：使用storage事件实现跨标签页通信

五、`<script>`、`<script async>` 和 `<script defer>` 的区别

1.核心对比表

特性	普通 `<script>`	`<script async>`	`<script defer>`
执行时机	立即执行，阻塞HTML解析	下载完后立即执行，可能阻塞HTML解析	下载后，HTML解析完成后再执行
执行顺序	按照在文档中出现的顺序	下载完就执行，顺序无法保证	按照在文档中出现的顺序
阻塞HTML解析	是	执行时会阻塞	否
适合场景	需要立即执行的脚本	独立模块，不依赖其他脚本	依赖DOM的脚本，有依赖关系的脚本

2.详细解析

1）普通 `<script>`（无 async/defer）

html

<!-- 示例 -->
<script src="script1.js"></script>
<script src="script2.js"></script>

执行流程：

text

遇到<script>标签
暂停HTML解析
下载脚本文件
执行脚本
继续HTML解析

特点：

阻塞HTML解析和渲染
严格按照文档顺序执行
脚本执行时无法访问之后的DOM元素

适用场景：

需要立即修改DOM的脚本
脚本必须按顺序执行
脚本很小，不关心阻塞问题

2） `<script async>`

html

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

执行流程：

text

1. 遇到<script async>标签
2. 继续HTML解析，并行下载脚本
3. 脚本下载完成
4. 暂停HTML解析，立即执行脚本
5. 继续HTML解析

特点：

不阻塞HTML解析（下载阶段）
执行顺序不确定：先下载完的先执行
适合独立模块，不依赖其他脚本
可能在任何时间点执行，包括DOMContentLoaded之前或之后

实际例子：

html

<!-- 假设 script1.js 很大，script2.js 很小 -->
<script async src="large-script.js"></script>  <!-- 下载慢 -->
<script async src="small-script.js"></script>  <!-- 下载快 -->

<!-- 可能 small-script.js 先执行，尽管它在后面 -->

适用场景：

统计代码（如Google Analytics）
广告脚本
不依赖DOM或其他脚本的独立模块

3） `<script defer>`

html

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

执行流程：

text

1. 遇到<script defer>标签
2. 继续HTML解析，并行下载脚本
3. HTML解析完成（DOMContentLoaded之前）
4. 按照文档顺序执行所有defer脚本
5. 触发DOMContentLoaded事件

特点：

完全不阻塞HTML解析
保持执行顺序：按照在文档中的出现顺序执行
在DOMContentLoaded事件之前执行
可以访问完整的DOM树

实际例子：

html

<!-- 即使 script1.js 下载慢，也会在 script2.js 之前执行 -->
<script defer src="large-script.js"></script>  <!-- 下载慢，但先执行 -->
<script defer src="small-script.js"></script>  <!-- 下载快，但后执行 -->

适用场景：

依赖DOM的脚本
有依赖关系的多个脚本
需要在页面渲染完成后执行的代码

3.可视化对比

执行时间线对比：

text

普通 <script>:
HTML解析 ⏸️→ 下载 → 执行 → HTML解析 ⏸️→ 下载 → 执行 → HTML解析完成

<script async>:
HTML解析 → 下载1 ↗ 下载2 ↗
         ↓     ↓     ↓
HTML解析 ⏸️→ 执行2 → HTML解析 → HTML解析 ⏸️→ 执行1 → HTML解析完成
         （脚本2先下载完）

<script defer>:
HTML解析 → 下载1 ↗ 下载2 ↗
         ↓               ↓
HTML解析完成 → 执行1 → 执行2 → DOMContentLoaded

4.实际代码示例

示例1：验证执行顺序

html

<!DOCTYPE html>
<html>
<head>
    <script>
        console.log('Inline script at head - executed immediately');
    </script>
    
    <!-- 模拟慢速脚本 -->
    <script src="https://fake-slow-server.com/slow-script.js?delay=2000"></script>
    
    <script async src="async-script.js"></script>
    <script defer src="defer-script.js"></script>
    
    <script>
        console.log('Second inline script - after external scripts');
    </script>
</head>
<body>
    <h1>Test Page</h1>
    <script>
        console.log('Body script - after DOM elements');
    </script>
</body>
</html>

示例2：模块化脚本加载策略

html

<!DOCTYPE html>
<html>
<head>
    <!-- 依赖库使用 defer -->
    <script defer src="jquery.min.js"></script>
    <script defer src="lodash.min.js"></script>
    
    <!-- 独立工具使用 async -->
    <script async src="analytics.js"></script>
    <script async src="chat-widget.js"></script>
    
    <!-- 应用代码使用 defer -->
    <script defer src="app-config.js"></script>
    <script defer src="app-main.js"></script>  <!-- 依赖前面的脚本 -->
</head>
<body>
    <!-- 内联关键脚本（小且需要立即执行） -->
    <script>
        // 关键功能：立即生效的交互
        document.addEventListener('click', function(e) {
            if (e.target.matches('.important-btn')) {
                // 立即反馈
                e.target.classList.add('clicked');
            }
        });
    </script>
</body>
</html>

5.现代最佳实践

1）现代推荐做法

html

<!DOCTYPE html>
<html>
<head>
    <!-- 关键CSS内联或使用preload -->
    <link rel="preload" href="styles.css" as="style">
    
    <!-- 非关键脚本使用defer -->
    <script defer src="main.js"></script>
    
    <!-- 独立、非关键模块使用async -->
    <script async src="analytics.js"></script>
    
    <!-- 内联关键脚本（小的、需要立即执行的） -->
    <script>
        // 关键JavaScript
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('/sw.js');
        }
    </script>
</head>
<body>
    <!-- 主要内容 -->
</body>
</html>

2）动态加载脚本

javascript

// 动态创建script元素
function loadScript(src, async = true, defer = false) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        script.async = async;
        script.defer = defer;
        
        script.onload = () => resolve(script);
        script.onerror = () => reject(new Error(`Script load error: ${src}`));
        
        document.head.appendChild(script);
    });
}

// 使用示例
(async () => {
    // 并行加载
    const [jquery, lodash] = await Promise.all([
        loadScript('jquery.js', true),
        loadScript('lodash.js', true)
    ]);
    
    // 顺序加载（有依赖）
    await loadScript('module-a.js', false);
    await loadScript('module-b.js', false); // 依赖 module-a
})();

3）模块化加载（ES6 Module）

html

<!-- type="module" 默认具有 defer 行为 -->
<script type="module" src="main.js"></script>

<!-- 内联模块 -->
<script type="module">
    import { initApp } from './app.js';
    initApp();
</script>

<!-- 动态导入 -->
<script>
    // 按需加载
    document.getElementById('lazy-btn').addEventListener('click', async () => {
        const module = await import('./lazy-module.js');
        module.doSomething();
    });
</script>

6.特殊情况处理

1） document.write 问题

javascript

// ❌ 使用 async/defer 时，避免使用 document.write
<script async>
    document.write('This will overwrite the whole document!');
    // 在现代浏览器中，async/defer脚本中的document.write会被忽略
</script>

2） DOMContentLoaded 事件时机

javascript

// defer脚本在 DOMContentLoaded 之前执行
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM fully loaded');
});

// async脚本可能在 DOMContentLoaded 之前或之后执行

3） async + defer 组合

html

<!-- 一些浏览器支持两者同时使用 -->
<script async defer src="script.js"></script>
<!-- 
  现代浏览器会忽略async而使用defer的行为
  但为了兼容性，最好只用一个
-->

7.性能优化建议

1）关键路径优化

html

<!-- 1. 关键脚本内联或预加载 -->
<link rel="preload" href="critical.js" as="script">

<!-- 2. 非关键脚本延迟加载 -->
<script>
    // 延迟加载非关键资源
    window.addEventListener('load', function() {
        const script = document.createElement('script');
        script.src = 'non-critical.js';
        document.body.appendChild(script);
    });
</script>

2）第三方脚本优化

html

<!-- 1. 使用 async 加载独立第三方脚本 -->
<script async src="https://www.google-analytics.com/analytics.js"></script>

<!-- 2. 设置资源提示 -->
<link rel="dns-prefetch" href="https://cdn.example.com">
<link rel="preconnect" href="https://cdn.example.com">

<!-- 3. 懒加载 -->
<script>
    function loadThirdPartyScript() {
        const script = document.createElement('script');
        script.src = 'https://third-party.com/widget.js';
        script.async = true;
        document.body.appendChild(script);
    }
    
    // 用户交互时加载
    document.getElementById('show-widget').addEventListener('click', loadThirdPartyScript);
</script>

3）错误处理

javascript

// 添加错误处理
const script = document.createElement('script');
script.src = 'app.js';
script.async = true;

script.onerror = function() {
    console.error('Failed to load script');
    // 降级方案
    loadFallbackScript();
};

document.head.appendChild(script);

8.兼容性注意事项

1）浏览器支持情况

defer：IE 4+（但IE实现有问题），所有现代浏览器
async：IE 10+，所有现代浏览器
type="module" ：现代浏览器（IE不支持）

2） IE兼容性处理

html

<!-- 为IE提供回退方案 -->
<script defer src="modern-browsers.js"></script>
<!--[if IE]>
    <script src="ie-fallback.js"></script>
<![endif]-->

3） noscript 回退

html

<script defer src="app.js"></script>
<noscript>
    <p>请启用JavaScript以获得完整功能。</p>
    <meta http-equiv="refresh" content="0; url=/no-js-version.html">
</noscript>

9.总结与选择指南

如何选择？

场景	选择	原因
关键渲染路径脚本	内联或普通script	需要立即执行
独立第三方脚本	async	不依赖其他脚本，顺序不重要
依赖DOM的脚本	defer	需要完整的DOM
有依赖关系的脚本	defer	需要保持执行顺序
现代模块化应用	type="module"	具有defer特性，支持ES6模块

黄金法则：

默认使用 defer：除非有特殊原因，否则优先使用defer
独立脚本用 async：统计、广告等独立脚本使用async
关键脚本内联或普通：小且必须立即执行的脚本
避免阻塞渲染：尽量减少普通script的使用
利用现代特性：使用模块化和动态导入

最后提醒：

html

<!-- ✅ 推荐做法 -->
<script defer src="app.js"></script>
<script async src="analytics.js"></script>

<!-- ❌ 避免 -->
<script src="large-library.js"></script>  <!-- 阻塞页面 -->
<script async src="dependent-script.js"></script>  <!-- 可能破坏依赖 -->

掌握这些区别和最佳实践，可以显著提升页面加载性能和用户体验。

六、什么是DOCTYPE，有何作用？

DOCTYPE（Document Type Declaration，文档类型声明）是 HTML 文档开头的声明，用于告知浏览器当前文档使用的 HTML 或 XHTML 版本，从而让浏览器以正确的模式来渲染页面。

主要作用

1） 触发标准模式
浏览器根据 DOCTYPE 决定使用哪种渲染模式：

-   **标准模式**：按照 W3C 标准解析和渲染页面，确保布局和样式的一致性。
-   **怪异模式**：模拟旧浏览器（如 IE5）的非标准行为，可能导致样式错乱。
-   **近乎标准模式**：接近标准模式，但处理某些元素（如图片）时保留少量怪异行为。

如果没有 DOCTYPE 或格式错误，浏览器会进入怪异模式，页面表现可能不可预测。

2） 验证文档规范
帮助开发者检查 HTML 结构是否符合所选标准（如 HTML4、XHTML、HTML5）。

3） 未来兼容性
明确的 DOCTYPE 能减少浏览器升级或新浏览器出现时的兼容性问题。

常见示例

HTML5（最简单，现代网页首选）：

html
```
<!DOCTYPE html>
```

HTML4.01 Strict（严格模式）：

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 Transitional（过渡模式）：

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

注意事项

位置：必须位于 HTML 文档第一行（之前不能有任何字符，包括空格或注释）。
大小写不敏感：<!DOCTYPE html> 和 <!doctype html> 均可。
HTML5 的简化：HTML5 不再引用 DTD 文件，仅需 <!DOCTYPE html>。

示例代码结构

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

总结

DOCTYPE 是确保网页跨浏览器正确渲染的基础，现代开发中只需使用 <!DOCTYPE html> 声明 HTML5 标准即可。省略它可能导致页面进入怪异模式，引发布局和样式异常。

八、说说对html语义化的理解

什么是HTML语义化？

HTML语义化是指使用恰当的HTML标签来表达内容的结构和含义，而不仅仅是使用<div>和<span>等通用标签通过CSS来实现视觉表现。

核心原则

1. 正确的标签做正确的事

html

<!-- 非语义化 -->
<div class="header">...</div>
<div class="nav">...</div>
<div>点击这里</div>

<!-- 语义化 -->
<header>...</header>
<nav>...</nav>
<button>点击这里</button>

2. 结构层次清晰

html

<!-- 非语义化 -->
<div class="title">主标题</div>
<div class="subtitle">副标题</div>

<!-- 语义化 -->
<h1>主标题</h1>
<h2>副标题</h2>

主要作用

1. 对开发者友好

代码可读性高：一看标签就知道内容的含义
维护成本低：结构清晰，易于理解和修改
团队协作顺畅：统一的语义标准

2. 对SEO友好

搜索引擎能更好地理解页面结构
提升关键词权重（如<h1>中的文字）
改善内容相关性分析

3. 对可访问性友好

屏幕阅读器能正确解读内容
键盘导航更合理
辅助技术用户获得更好的体验

4. 对浏览器/设备友好

默认样式更合理
响应式设计更容易实现
未来兼容性更好

常见语义化标签

结构语义标签

html

<header>     <!-- 页面或区块的页眉 -->
<nav>        <!-- 导航链接 -->
<main>       <!-- 页面主要内容 -->
<article>    <!-- 独立完整的内容块 -->
<section>    <!-- 文档中的章节 -->
<aside>      <!-- 侧边栏/相关内容 -->
<footer>     <!-- 页脚 -->

文本语义标签

html

<h1>~<h6>    <!-- 标题层级 -->
<p>          <!-- 段落 -->
<blockquote> <!-- 块引用 -->
<cite>       <!-- 引用来源 -->
<time>       <!-- 时间日期 -->
<address>    <!-- 联系信息 -->

功能语义标签

html

<a>          <!-- 超链接 -->
<button>     <!-- 按钮 -->
<form>       <!-- 表单 -->
<label>      <!-- 表单标签 -->
<table>      <!-- 表格数据 -->
<figure>     <!-- 配图及说明 -->

实际应用示例

非语义化写法

html

<div class="news">
  <div class="title">最新消息</div>
  <div class="content">
    <span class="date">2023-10-01</span>
    <span>这里是新闻内容...</span>
  </div>
  <div class="link">阅读更多</div>
</div>

语义化写法

html

<article class="news">
  <header>
    <h2>最新消息</h2>
    <time datetime="2023-10-01">2023年10月1日</time>
  </header>
  <p>这里是新闻内容...</p>
  <footer>
    <a href="/news/details">阅读更多</a>
  </footer>
</article>

最佳实践

1. 按需使用HTML5语义标签

html

<!-- 传统方式 -->
<div id="header">...</div>
<div id="main">...</div>
<div id="footer">...</div>

<!-- HTML5方式 -->
<header>...</header>
<main>...</main>
<footer>...</footer>

2. 标题层级要正确

html

<!-- 错误：跳级 -->
<h1>主标题</h1>
<h3>二级标题</h3>

<!-- 正确：顺序递进 -->
<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>

3. 表单元素要关联

html

<!-- 错误 -->
<input type="text">
<button>提交</button>

<!-- 正确 -->
<label for="username">用户名：</label>
<input type="text" id="username">
<button type="submit">提交</button>

4. 链接文本要有意义

html

<!-- 错误 -->
<a href="/about">点击这里</a>

<!-- 正确 -->
<a href="/about">关于我们</a>

检测工具

W3C Validator：检查HTML结构
Lighthouse：检查可访问性
屏幕阅读器测试：VoiceOver、NVDA等

总结

HTML语义化是现代Web开发的基础要求而非可选优化。它：

提升代码质量：更清晰、更专业
改善用户体验：对所有用户更友好
增强网站价值：SEO和可访问性提升
面向未来开发：适应新技术和设备

记住：语义化的核心思想是让标签回归本质，让内容表达自己，而不是单纯追求视觉效果。

八、什么是严格模式和混杂模式？

核心概念

这两种模式是浏览器渲染网页的两种不同方式，主要由DOCTYPE声明触发或缺失触发。

严格模式（Standards Mode）

定义

浏览器按照 W3C标准 解析和渲染页面的模式。

触发条件

html

<!DOCTYPE html>  <!-- HTML5标准声明 -->

或其他有效的现代DOCTYPE声明。

特点

标准盒模型

css
```
.box {
    width: 200px;
    padding: 20px;
    border: 5px solid;
}
```
- 实际宽度 = 200px (内容宽度)
- 总占位宽度 = 200 + 202 + 52 = 250px
正确解析CSS
- 按CSS规范处理样式
- 严格遵循选择器优先级
元素定位准确
- 定位、浮动、布局符合标准

JavaScript DOM访问准确

javascript

// 获取元素尺寸更准确
element.offsetWidth // 返回内容+内边距+边框

混杂模式（Quirks Mode）

定义

浏览器模拟 旧版本浏览器（如IE5） 的行为以保持向后兼容性的模式。

触发条件

没有DOCTYPE声明
DOCTYPE声明格式错误
使用过时的DOCTYPE声明
DOCTYPE前有注释或其他内容

特点

怪异盒模型（IE5盒模型）

css
```
.box {
    width: 200px;
    padding: 20px;
    border: 5px solid;
}
```
- 实际宽度 = 200px (包含内边距和边框)
- 内容宽度 = 200 - 202 - 52 = 150px
继承旧浏览器行为
- 表格单元格字体不继承
- 图片在表格中的间隙处理不同
- 百分比高度计算方式不同
CSS解析差异
- 颜色值不带#可能被接受
- 某些无效CSS可能被忽略或错误解析

JavaScript差异

javascript

// 某些DOM属性和方法行为不同
document.body.clientHeight

近乎标准模式（Almost Standards Mode）

定义

介于两者之间，大部分遵循标准，但保留少量怪异行为（主要针对表格和图片）。

触发条件

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

模式检测方法

JavaScript检测

javascript

// 检测当前模式
if (document.compatMode) {
    if (document.compatMode === "CSS1Compat") {
        console.log("严格模式");
    } else {
        console.log("混杂模式");
    }
}

// 或者
console.log(document.compatMode); 
// "CSS1Compat" = 严格模式
// "BackCompat" = 混杂模式

CSS盒模型差异

css

/* 严格模式下：box-sizing: content-box */
/* 混杂模式下：类似 box-sizing: border-box */

实际影响示例

示例1：盒模型差异

html

<!DOCTYPE html> <!-- 触发严格模式 -->
<html>
<head>
<style>
    div {
        width: 100px;
        padding: 20px;
        border: 10px solid black;
        background: yellow;
    }
</style>
</head>
<body>
<div>测试盒子</div>
<!-- 
严格模式：总宽度 = 100 + 20*2 + 10*2 = 160px
混杂模式：总宽度 = 100px，内容宽度 = 100-40-20 = 40px
-->
</body>
</html>

示例2：触发条件对比

声明方式	模式
`<!DOCTYPE html>`	严格模式
无DOCTYPE	混杂模式
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">`	严格模式
`<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">`	近乎标准模式
`<html>`前有注释	可能触发混杂模式

开发中的注意事项

1. 始终使用严格模式

html

<!-- 永远把这个放在第一行 -->
<!DOCTYPE html>
<html>
<!-- 页面内容 -->
</html>

2. 避免触发混杂模式

html

<!-- 错误示例1：缺少DOCTYPE -->
<html>  <!-- 触发混杂模式 -->
<head>...</head>

<!-- 错误示例2：DOCTYPE前有内容 -->
   <!-- 注释 -->    <!-- 触发混杂模式 -->
<!DOCTYPE html>

<!-- 错误示例3：错误的DOCTYPE -->
<!DOCTYPE HTML PUBLIC "无效的DTD">  <!-- 触发混杂模式 -->

3. 处理遗留代码

html

<!-- 如果必须支持怪异模式，明确设置 -->
<!DOCTYPE html>
<!-- 或者使用Transitional DTD -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

调试技巧

Chrome DevTools

打开开发者工具（F12）
查看Console面板
输入document.compatMode
结果提示当前模式

Edge/IE Developer Tools

按F12打开
切换到"仿真"标签
查看"文档模式"

现代开发最佳实践

1. 统一使用HTML5 DOCTYPE

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>

2. 明确盒模型

css

* {
    box-sizing: border-box; /* 现代推荐方式 */
}

/* 或明确指定 */
.container {
    box-sizing: border-box;
    width: 100%;
    padding: 20px;
}

3. 使用CSS Reset/Normalize

css

/* 重置浏览器默认样式，统一基础 */
* {
    margin: 0;
    padding: 0;
}

总结

方面	严格模式	混杂模式
触发	正确的DOCTYPE	无DOCTYPE或错误
盒模型	content-box	类似border-box
标准遵循	W3C标准	旧浏览器行为
布局	准确	可能不一致
现代开发	推荐使用	应避免

关键点：

严格模式确保跨浏览器一致性
混杂模式是为向后兼容
现代开发必须使用严格模式
始终将<!DOCTYPE html>放在HTML文件第一行

记住：正确的DOCTYPE = 可预测的渲染 = 更少的bug = 更快乐的开发者。

九、前端页面由哪三层构成，分别是什么？

前端页面的三层结构

前端页面遵循经典的 “三层分离” 设计模式，这是现代Web开发的基石：

1. 结构层（Structure Layer）

技术实现：HTML

作用：定义页面的内容与结构
核心：内容的语义化组织和骨架搭建

示例：

html

<article>
  <h1>文章标题</h1>
  <p>文章段落内容...</p>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</article>

职责

定义标题、段落、列表、表格等
建立文档大纲和层级关系
提供语义化标签供其他层操作

2. 表现层（Presentation Layer）

技术实现：CSS

作用：控制页面的外观与样式
核心：视觉呈现和布局设计

示例：

css

article {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
  color: #333;
  font-size: 2rem;
  border-bottom: 2px solid #3498db;
}

职责

控制颜色、字体、间距
实现布局（Flexbox、Grid等）
响应式设计
动画和过渡效果

3. 行为层（Behavior Layer）

技术实现：JavaScript

作用：实现页面的交互与动态功能
核心：用户交互、数据操作、逻辑处理

示例：

javascript

// 点击按钮改变内容
document.querySelector('button').addEventListener('click', function() {
  const article = document.querySelector('article');
  article.style.transform = 'scale(1.05)';
  
  // 异步加载数据
  fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      console.log('获取的数据:', data);
    });
});

职责

处理用户交互（点击、输入等）
动态修改内容和样式
与服务器通信（AJAX）
表单验证
单页应用路由

三层协作示例

html

<!-- 结构层 HTML -->
<button id="themeToggle">切换主题</button>
<p id="message">当前是浅色主题</p>

<!-- 表现层 CSS -->
<style>
  body {
    background: white;
    color: black;
    transition: all 0.3s;
  }
  
  body.dark {
    background: #333;
    color: white;
  }
  
  button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
</style>

<!-- 行为层 JavaScript -->
<script>
  const button = document.getElementById('themeToggle');
  const message = document.getElementById('message');
  
  button.addEventListener('click', function() {
    // 修改结构：切换类名
    document.body.classList.toggle('dark');
    
    // 修改内容
    const isDark = document.body.classList.contains('dark');
    message.textContent = `当前是${isDark ? '深色' : '浅色'}主题`;
    
    // 修改样式（动态）
    button.style.backgroundColor = isDark ? '#666' : '#ddd';
  });
</script>

分离原则的优势

1. 可维护性高

html

<!-- 修改样式只需改CSS，不影响结构 -->
<!-- 修改交互只需改JS，不影响样式 -->

2. 性能优化

CSS单独缓存
JS异步加载
HTML结构清晰

3. 团队协作

设计师专注CSS
开发者专注JS
内容编辑专注HTML

4. 可访问性

语义化HTML便于屏幕阅读器识别
CSS失效时内容仍可访问
JS禁用时基础功能可用

现代扩展层

随着前端发展，还衍生出以下概念：

数据层（Data Layer）

技术：Redux、Vuex、MobX等状态管理
作用：管理应用状态和数据流

工具层（Tooling Layer）

技术：Webpack、Babel、ESLint
作用：构建、编译、代码检查

API层（API Layer）

技术：RESTful API、GraphQL、WebSocket
作用：前后端数据通信

反模式示例

内联样式（混合层）

html

<!-- 不推荐：样式混入结构 -->
<h1 style="color: red; font-size: 24px;">标题</h1>

内联脚本（混合层）

html

<!-- 不推荐：行为混入结构 -->
<button onclick="alert('点击')">按钮</button>

CSS过度依赖HTML结构

css

/* 不推荐：样式与结构强耦合 */
div > p:first-child span.special { ... }

最佳实践

1. 保持层间松耦合

javascript

// 好的做法：通过类名控制样式
element.classList.add('active');

// 不好的做法：直接修改样式
element.style.color = 'red';

2. 渐进增强

html

<!-- 基础HTML结构 -->
<a href="/details" class="details-link">查看详情</a>

<!-- CSS增强 -->
<style>
  .details-link {
    color: blue;
    text-decoration: underline;
  }
</style>

<!-- JS增强 -->
<script>
  // 如果JS可用，改为AJAX加载
  if (JavaScriptEnabled) {
    document.querySelector('.details-link').addEventListener('click', loadDetails);
  }
</script>

3. 响应式分层

text

HTML (结构) → 基础内容
   ↓
CSS (表现) → 布局和样式
   ↓
JS (行为) → 交互增强

检查清单

在开发中应时刻检查：

HTML只负责结构，无样式属性
CSS只负责表现，不包含内容
JavaScript只负责行为，不直接生成样式
禁用CSS时，内容依然可读
禁用JavaScript时，核心功能可用
各层文件独立组织

总结

三层结构是前端工程的基石：

HTML = 骨架（是什么）
CSS = 皮肤（长什么样）
JavaScript = 肌肉（能做什么）

核心原则：各司其职，分离关注点，这样才能构建出可维护、可访问、高性能的现代Web应用。

十、iframe的作用以及优缺点

1.什么是 iframe？

iframe（内联框架）是HTML元素，用于在当前页面中嵌入另一个独立的HTML文档。

html

<iframe src="https://example.com" width="800" height="600"></iframe>

2.主要作用

1）嵌入第三方内容

html

<!-- 嵌入视频 -->
<iframe src="https://www.youtube.com/embed/..." allowfullscreen></iframe>

<!-- 嵌入地图 -->
<iframe src="https://maps.google.com/..."></iframe>

<!-- 嵌入社交媒体 -->
<iframe src="https://www.facebook.com/plugins/post.php?..."></iframe>

2）创建独立沙箱环境

html

<!-- 隔离样式和脚本 -->
<iframe sandbox="allow-scripts" src="widget.html"></iframe>

3）实现微前端架构

html

<!-- 多个独立应用共存 -->
<iframe src="//app1.company.com"></iframe>
<iframe src="//app2.company.com"></iframe>

4）广告嵌入

html

<!-- 第三方广告 -->
<iframe src="//adserver.com/ad" width="300" height="250"></iframe>

5）文件预览

html

<!-- 预览PDF/文档 -->
<iframe src="document.pdf" width="100%" height="500"></iframe>

6）遗留系统集成

html

<!-- 嵌入旧系统 -->
<iframe src="//legacy-system.com" style="border: none;"></iframe>

3.优点

1）隔离性强

html

<!-- 完全独立的上下文 -->
<iframe id="widget" src="widget.html"></iframe>

<script>
// 父页面和iframe页面互不干扰
// - 独立的CSS作用域
// - 独立的JavaScript执行环境
// - 独立的DOM树
</script>

2）安全性较好

html

<!-- 通过sandbox限制权限 -->
<iframe sandbox="allow-scripts allow-forms" 
        src="untrusted-content.html">
</iframe>

<!-- 可限制的功能 -->
<!-- 
  默认禁止所有：
  - 脚本执行
  - 表单提交
  - API访问
  - 弹出窗口
  - 插件加载
-->

3）并行加载

html

<!-- iframe内容异步加载，不阻塞主页面 -->
<iframe src="heavy-widget.html" loading="lazy"></iframe>

4）跨域通信支持

javascript

// 父页面 → iframe
iframe.contentWindow.postMessage(data, 'https://child-origin.com');

// iframe → 父页面
window.parent.postMessage(data, 'https://parent-origin.com');

// 监听消息
window.addEventListener('message', event => {
    if (event.origin === 'https://trusted-origin.com') {
        console.log('收到消息:', event.data);
    }
});

5）兼容性极好

所有现代浏览器支持
移动端兼容良好
无需polyfill

4.缺点

1）性能问题

html

<!-- 每个iframe都是完整的页面开销 -->
<iframe src="app.html"></iframe>
<!-- 
  性能开销：
  1. 独立的渲染进程/线程
  2. 额外的内存占用
  3. 重复的CSS/JS加载
  4. 多个文档解析
-->

2） SEO不友好

html

<!-- 搜索引擎难以抓取iframe内容 -->
<iframe src="important-content.html">
  <!-- 爬虫可能忽略此内容 -->
</iframe>

3）可访问性差

html

<iframe title="天气预报" 
        aria-label="天气预报小部件"
        tabindex="0">
</iframe>
<!-- 
  问题：
  1. 屏幕阅读器导航困难
  2. 键盘焦点管理复杂
  3. 语义信息丢失
-->

4）布局和响应式困难

css

/* iframe默认固定尺寸 */
iframe {
  width: 300px;    /* 固定宽度 */
  height: 200px;   /* 固定高度 */
}

/* 响应式需要额外处理 */
.responsive-iframe {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

5）安全风险

html

<!-- 点击劫持攻击 -->
<iframe src="malicious-site.com" 
        style="opacity:0;position:absolute;top:0;left:0;">
</iframe>

<!-- XSS攻击（如果src可控） -->
<iframe src="javascript:alert('xss')"></iframe>

6）通信复杂

javascript

// 跨域通信复杂
try {
    // 可能抛出安全异常
    const iframeDoc = iframe.contentDocument;
} catch(e) {
    // 需要postMessage
}

7） Cookie处理

html

<!-- 第三方Cookie可能被浏览器阻止 -->
<iframe src="https://third-party.com">
<!-- 
  现代浏览器限制：
  1. Safari智能防跟踪
  2. Chrome SameSite默认Lax
  3. Firefox增强跟踪保护
-->

5.现代替代方案

1） Web Components

html

<!-- 替代iframe的组件化方案 -->
<weather-widget city="beijing"></weather-widget>

<script>
class WeatherWidget extends HTMLElement {
    constructor() {
        super();
        // 封装独立的UI和逻辑
    }
}
customElements.define('weather-widget', WeatherWidget);
</script>

2）微前端框架

javascript

// 使用single-spa、qiankun等
// 而不是多个iframe
registerApplication({
    name: 'app1',
    app: () => import('app1/main.js'),
    activeWhen: '/app1'
});

3）服务端包含（SSI）/ESI

html

<!-- 服务器端合并内容 -->
<!--#include virtual="/widgets/header.html" -->

4） AJAX + Shadow DOM

javascript

// 动态加载内容并隔离
fetch('/widget-content.html')
    .then(response => response.text())
    .then(html => {
        const container = document.getElementById('widget');
        const shadow = container.attachShadow({mode: 'open'});
        shadow.innerHTML = html;
    });

6.最佳实践

1）安全性配置

html

<!-- 最小权限原则 -->
<iframe 
    src="https://trusted-site.com"
    sandbox="allow-scripts allow-same-origin"
    allow="camera 'none'; microphone 'none'"
    referrerpolicy="no-referrer"
    csp="default-src 'self'">
</iframe>

2）性能优化

html

<!-- 延迟加载 -->
<iframe src="widget.html" loading="lazy"></iframe>

<!-- 按需加载 -->
<button onclick="loadIframe()">加载组件</button>
<div id="iframe-container"></div>

<script>
function loadIframe() {
    const iframe = document.createElement('iframe');
    iframe.src = 'heavy-content.html';
    document.getElementById('iframe-container').appendChild(iframe);
}
</script>

3）可访问性改进

html

<iframe 
    title="视频播放器"
    aria-label="YouTube视频：前端教程"
    tabindex="0"
    aria-describedby="iframe-desc">
</iframe>
<p id="iframe-desc" class="sr-only">
    此iframe包含一个教学视频，时长15分钟
</p>

4）响应式处理

html

<!-- 16:9视频容器 -->
<div class="video-container">
    <iframe src="https://youtube.com/embed/..." 
            frameborder="0"
            allowfullscreen></iframe>
</div>

<style>
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

5）优雅降级

html

<iframe src="modern-widget.html">
    <!-- 不支持iframe时显示 -->
    <div class="fallback">
        <p>请直接访问 <a href="widget.html">小工具页面</a></p>
    </div>
</iframe>

7.使用场景评估

适合使用 iframe：

✅ 嵌入完全独立的第三方应用（地图、视频）
✅ 需要严格隔离的沙箱环境
✅ 遗留系统集成
✅ 文档/PDF预览
✅ 跨域但需要保持登录状态

不适合使用 iframe：

❌ 构建现代单页应用
❌ 需要良好SEO的内容
❌ 频繁交互的组件
❌ 移动端性能敏感场景
❌ 需要深度定制样式

8.现代框架中的 iframe

React中使用

jsx

function EmbeddedApp() {
    return (
        <iframe
            src="https://external-app.com"
            title="外部应用"
            style={{ width: '100%', height: '500px' }}
            sandbox="allow-scripts allow-same-origin"
        />
    );
}

Vue中使用

vue

<template>
    <iframe
        :src="iframeSrc"
        @load="onIframeLoad"
        ref="iframeRef"
    />
</template>

<script>
export default {
    methods: {
        onIframeLoad() {
            // iframe加载完成后的处理
        }
    }
}
</script>

9.总结

iframe是强大的工具，但需谨慎使用：

场景	推荐度	备注
嵌入第三方服务	⭐⭐⭐⭐⭐	最佳选择
微前端架构	⭐⭐	考虑Web Components
广告嵌入	⭐⭐⭐	业界标准但性能差
组件复用	⭐	不推荐，用组件库
内容隔离	⭐⭐⭐⭐	沙箱功能独特

核心建议：

优先考虑现代替代方案（Web Components、微前端）
如需使用，严格限制权限（sandbox属性）
关注性能影响（懒加载、按需加载）
确保可访问性（ARIA标签、键盘导航）
做好降级处理（不支持时的备选方案）

记住：iframe是最后的选择，不是首选的架构方案。在现代Web开发中，应该首先探索更轻量、更灵活的替代方案。

数据来源：2024前端高频面试题-- HTML篇

解答来源：AI生成，仅个人收集用！

侵权删！

HTML面试题（持续收集并更新中...）

一、行级元素和块级元素分别有哪些及怎么转换？

1.行级元素和块级元素分类

行级元素（内联元素）

块级元素

行内块元素（特殊）

2.转换方法（通过CSS display属性）

1） 行级 → 块级

2） 块级 → 行级

3） 转换为行内块

4） 其他display值

3.实际应用示例

示例1：水平导航菜单

示例2：表单元素布局

4.重要注意事项

5.总结对比

二、HTML5有哪些新元素和新特性？

📐 核心新增语义化标签

🔍 其他主要新特性

⚠️ 已废除的元素

三、如何使用HTML5中的Canvas元素绘制图形？

四、cookie、sessionStorage和localStorage的区别

1.核心对比表

2.详细对比

1） Cookie（HTTP Cookie）

特点：

基本操作：

Cookie属性：

2） sessionStorage

特点：

基本操作：

实际应用场景：

3） localStorage

特点：

基本操作：

实际应用场景：

3.综合对比示例

数据同步工具类：

4.选择建议

使用 Cookie 当：

使用 sessionStorage 当：

使用 localStorage 当：

5.安全注意事项

1） 不要存储敏感信息

2） XSS攻击防护

3） 定期清理

6.兼容性检查

7.最佳实践总结

五、<script>、<script async> 和 <script defer> 的区别

1.核心对比表

2.详细解析

1） 普通 <script>（无 async/defer）

2） <script async>

3） <script defer>

3.可视化对比

执行时间线对比：

4.实际代码示例

示例1：验证执行顺序

示例2：模块化脚本加载策略

5.现代最佳实践

1） 现代推荐做法

2） 动态加载脚本

3） 模块化加载（ES6 Module）

6.特殊情况处理

1） document.write 问题

2） DOMContentLoaded 事件时机

3） async + defer 组合

7.性能优化建议

1） 关键路径优化

2） 第三方脚本优化

3） 错误处理

8.兼容性注意事项

1） 浏览器支持情况

2） IE兼容性处理

3） noscript 回退

9.总结与选择指南

如何选择？

黄金法则：

最后提醒：

六、什么是DOCTYPE，有何作用？

1）行级 → 块级

2）块级 → 行级

3）转换为行内块

4）其他display值

1）不要存储敏感信息

3）定期清理

五、`<script>`、`<script async>` 和 `<script defer>` 的区别

1）普通 `<script>`（无 async/defer）

2） `<script async>`

3） `<script defer>`

1）现代推荐做法

2）动态加载脚本

3）模块化加载（ES6 Module）

1）关键路径优化

2）第三方脚本优化

3）错误处理

1）浏览器支持情况