📄
HTML
7 道题目
难度筛选:
HTML 语义化是指使用有意义的标签来描述内容结构,而不是全部用
语义化标签:
好处:
1. SEO 友好 — 搜索引擎更容易理解页面结构
2. 无障碍 — 屏幕阅读器可正确解析
3. 可维护性 — 代码结构清晰
4. 开发体验 — 团队协作更容易理解代码
<div>。语义化标签:
<header>、<nav>、<main>、<article>、<section>、<aside>、<footer>好处:
1. SEO 友好 — 搜索引擎更容易理解页面结构
2. 无障碍 — 屏幕阅读器可正确解析
3. 可维护性 — 代码结构清晰
4. 开发体验 — 团队协作更容易理解代码
查看答案即标记为已答
两者都是异步加载脚本,但执行时机不同:
async:
• 下载完成后立即执行,会阻塞 HTML 解析
• 多个 async 脚本执行顺序不确定
• 适合独立脚本(如统计代码)
defer:
• 在 HTML 解析完成后、DOMContentLoaded 前执行
• 多个 defer 脚本按顺序执行
• 适合需要操作 DOM 的脚本
推荐:需要操作 DOM 的脚本用
async:
• 下载完成后立即执行,会阻塞 HTML 解析
• 多个 async 脚本执行顺序不确定
• 适合独立脚本(如统计代码)
defer:
• 在 HTML 解析完成后、DOMContentLoaded 前执行
• 多个 defer 脚本按顺序执行
• 适合需要操作 DOM 的脚本
推荐:需要操作 DOM 的脚本用
defer,独立第三方脚本用 async。 查看答案即标记为已答
语义化标签:
表单增强:
多媒体:
存储:localStorage、sessionStorage
API:Geolocation、WebSocket、Web Worker、Drag and Drop、History API
<header>、<footer>、<nav>、<article>、<section>表单增强:
date、email、url、range、number 等新 input 类型多媒体:
<video>、<audio>、<canvas>存储:localStorage、sessionStorage
API:Geolocation、WebSocket、Web Worker、Drag and Drop、History API
查看答案即标记为已答
技术层面:
1. 合理使用语义化 HTML 标签
2.
3. 合理使用 h1-h6 层级(每个页面只有一个 h1)
4. 图片添加
5. 使用结构化数据(JSON-LD)
性能层面:
1. 提升页面加载速度(SSR/SSG、CDN、懒加载)
2. 移动端适配(响应式设计)
3. 使用 HTTPS
内容层面:
1. 关键词合理分布在标题和正文中
2. URL 结构清晰、包含关键词
3. 内链和外链建设
1. 合理使用语义化 HTML 标签
2.
<title> 和 <meta description> 准确描述页面3. 合理使用 h1-h6 层级(每个页面只有一个 h1)
4. 图片添加
alt 属性5. 使用结构化数据(JSON-LD)
性能层面:
1. 提升页面加载速度(SSR/SSG、CDN、懒加载)
2. 移动端适配(响应式设计)
3. 使用 HTTPS
内容层面:
1. 关键词合理分布在标题和正文中
2. URL 结构清晰、包含关键词
3. 内链和外链建设
查看答案即标记为已答
渐进增强(Progressive Enhancement):
先构建基础功能(保证所有浏览器可用),再逐步增强体验。
如:先写语义化 HTML → 添加 CSS 样式 → 添加 JS 交互
优雅降级(Graceful Degradation):
先构建完整功能,再为不支持的环境提供降级方案。
如:CSS
区别:
• 渐进增强:从简单到复杂,以内容为核心
• 优雅降级:从复杂到简单,以体验为核心
现代实践:优先渐进增强,通过 Babel/PostCSS 等工具兼容旧浏览器。
先构建基础功能(保证所有浏览器可用),再逐步增强体验。
如:先写语义化 HTML → 添加 CSS 样式 → 添加 JS 交互
优雅降级(Graceful Degradation):
先构建完整功能,再为不支持的环境提供降级方案。
如:CSS
@supports、try/catch、noscript 标签区别:
• 渐进增强:从简单到复杂,以内容为核心
• 优雅降级:从复杂到简单,以体验为核心
现代实践:优先渐进增强,通过 Babel/PostCSS 等工具兼容旧浏览器。
查看答案即标记为已答
| Canvas | SVG | |
|---|---|---|
| 渲染方式 | 像素(位图) | 矢量图形 |
| DOM | 无 DOM 节点 | 每个图形是 DOM 元素 |
| 事件绑定 | 需手动计算坐标 | 直接绑定到元素 |
| 缩放 | 会模糊(像素化) | 无损缩放 |
| 性能 | 大量元素性能好 | 大量元素 DOM 开销大 |
| 动画 | JS 逐帧绘制 | CSS / SMIL 动画 |
| 可访问性 | 差 | 好(DOM 可被读屏器解析) |
Canvas 适合:
• 游戏、实时图表、图像处理
• 大量粒子/粒子系统
• 视频处理、截图
SVG 适合:
• 图标、Logo、信息图
• 地图、流程图、组织架构图
• 需要交互的图形(hover、click)
• 响应式图表(少量元素)
查看答案即标记为已答
Web Components:浏览器原生支持的组件化标准,由三个核心技术组成:
1. Custom Elements(自定义元素):
2. Shadow DOM(影子 DOM):
样式隔离,内部 CSS 不影响外部。
3. HTML Templates(模板):
不会被渲染,可通过 JS 克隆使用。
优点:原生标准、框架无关、样式隔离。
缺点:API 较底层,开发体验不如 React/Vue,需要 polyfill 兼容旧浏览器。
1. Custom Elements(自定义元素):
class MyButton extends HTMLElement {
constructor() { super(); ... }
connectedCallback() { /* 挂载时 */ }
disconnectedCallback() { /* 卸载时 */ }
}
customElements.define('my-button', MyButton);2. Shadow DOM(影子 DOM):
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = '<style>...</style><button>...</button>';样式隔离,内部 CSS 不影响外部。
3. HTML Templates(模板):
<template id="tpl">...</template>
<slot name="header"></slot>不会被渲染,可通过 JS 克隆使用。
优点:原生标准、框架无关、样式隔离。
缺点:API 较底层,开发体验不如 React/Vue,需要 polyfill 兼容旧浏览器。
查看答案即标记为已答