html. - 技术栈

src和href的区别

href 超文本引用，用来建立当前页面与目标资源之间的链接关系，并行加载资源，浏览器不会暂停解析当前页面。如a、link等。

javascript 复制代码

<a href="page.html">链接</a>

<!-- 引入CSS样式 -->
<link rel="stylesheet" href="style.css">

src 把目标资源直接嵌入、替换到当前位置，浏览器会暂停解析页面，直到资源加载、执行完成。如图片、视频、音频、js脚本等。

javascript 复制代码

<!-- 引入图片 -->
<img src="pic.jpg">

<!-- 引入JS脚本 -->
<script src="main.js"></script>

<!-- 引入视频/音频 -->
<video src="video.mp4"></video>
<iframe src="page.html"></iframe>

js三种加载方式

普通 script

html 复制代码

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

浏览器暂停解析 HTML，接着下载 JS，执行 JS，执行完才继续解析 HTML，阻塞渲染

async（异步）

html 复制代码

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

异步下载 JS，下载完立刻执行，执行时会阻塞 HTML，多个 async 执行顺序不确定，谁先下载完谁先跑

defer（延迟）

html 复制代码

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

异步下载 JS，等到整个 HTML 解析完成后再执行，多个 defer 严格按照书写顺序执行

总结
async 和 defer 都是异步加载 JS，不阻塞 HTML 解析。
async 是下载完立即执行，多个脚本执行顺序不确定；
defer 是等 HTML 解析完成后再执行，多个脚本按书写顺序执行。
async 适合独立脚本，defer 适合依赖 DOM 或其他文件的脚本。

无属性：HTML → 下载 JS → 执行 JS → HTML 继续

async：HTML 与 JS 并行下载，JS 下载完立即执行（可能打断 HTML）

defer：HTML 与 JS 并行下载，全部 HTML 解析完再执行 JS

HTML5 新增特性
语义化标签：header/footer/nav/article/section/aside
媒体标签：audio/video，支持controls、autoplay、loop、muted
本地存储：localStorage/sessionStorage
表单新属性：placeholder/required/autofocus
离线缓存、Canvas、SVG、WebWorker、WebSocket、拖放 API、data-* 自定义属性

Service Worker VS Web Worker

1.Web Worker 是计算多线程；Service Worker 是网络代理线程。

2.Web Worker 是 HTML5 提供的 JS 多线程技术，允许在主线程之外创建独立后台线程，执行复杂耗时计算，不会阻塞主线程的 UI 渲染和交互。它不能操作 DOM，不能共享内存，与主线程完全隔离，只能通过 postMessage 和 onmessage 进行消息通信，数据是深拷贝传递。主要用于大量计算、大数据处理、解析等不涉及 DOM 的任务，避免页面卡顿。

3.Service Worker 是运行在浏览器后台的独立脚本线程，作为客户端与服务器之间的代理，可拦截所有请求、管理缓存、实现离线访问、后台同步与消息推送，是 PWA 的核心技术。它不能操作 DOM，基于 Promise 异步，必须 HTTPS，生命周期独立于页面。
Canvas VS SVG

Canvas 是基于像素的位图画布，由 JS 绘制，整个画布是一个元素，没有 DOM 结构，大量元素性能更好。适合大量图形、游戏、图像处理，但放大模糊；

SVG 是基于 XML 的矢量图形，每个图形都是独立 DOM 节点，支持事件与 CSS，放大不失真，适合图标、图表、UI 图形，但元素过多性能差。
HTML5 drag API：

原生拖放交互标准，允许用户抓取页面上的元素并拖动到另一个区域，通过给元素设置 draggable="true" 实现可拖动。

拖放分为拖动源和放置目标两个阶段
拖动源事件（被拖元素）

dragstart：开始拖动时触发（只触发一次）

drag：拖动过程中持续触发

dragend：结束拖动时触发
放置目标事件（释放区域）

dragenter：鼠标进入目标区域

dragover：鼠标在目标区域内移动（阻止默认以启用 drop）

dragleave：鼠标离开目标区域

drop：在目标区域释放鼠标（阻止默认以防止数据丢失）
数据传递

通过 dataTransfer 对象在拖放过程中传递数据。

setData(format, data) 设置拖放数据

getData(format) 获取拖放数据

srcset 与 picture 的区别

srcset 用于实现响应式图片，提供同一图片的不同分辨率或宽度，由浏览器根据设备像素比或屏幕宽度自动选择最优图片，既保证高清屏清晰，又能减少小屏设备流量浪费，提升性能。

html 复制代码

<img 
  src="img-1x.jpg" 
  srcset="img-1x.jpg 1x, img-2x.jpg 2x, img-3x.jpg 3x"
>
srcset：现代浏览器使用
src：降级方案，老浏览器不支持 srcset 时用它
<img
  src="small.jpg"
  srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
>
sizes：告诉浏览器图片在页面中的显示宽度

picture 标签结合 source 可根据媒体查询、图片格式，加载完全不同的图片，支持艺术指导与新图片格式兼容。

html 复制代码

<picture>
  <source media="(max-width:768px)" srcset="small-crop.jpg">
  <source type="image/webp" srcset="pic.webp">
  <img src="pic.jpg" alt="">
</picture>

总结：

srcset：选分辨率 / 清晰度，同一张图，浏览器自动择优。

picture：选不同图片 / 不同格式 / 不同裁剪，开发者强制控制。

srcset 侧重性能优化；picture 侧重艺术指导 + 格式兼容。

srcset 是同图择优，picture 是不同图按需切换。

什么是语义化标签？作用

根据网页内容结构，选择具有正确含义的 HTML 标签，让浏览器、搜索引擎、人都能看懂页面的结构与意义。使页面结构更清晰、代码更具可读性，利于 SEO、无障碍访问和团队维护，实现结构、样式、行为分离的 Web 标准，不只用 div、span 堆页面。

javascript 复制代码

标题：<h1>~<h6>
段落：<p>
导航：<nav>
文章：<article>
独立区域：<section>
页头：<header>
页脚：<footer>
侧边栏：<aside>
主要内容：<main>

行内元素、块级元素、行内块

块级：独占一行，可设宽高、margin、 padding，如 div/p/h1~h6

行内：同行排列，不能设宽高，上下 margin、padding 无效，宽高由内容决定。如 span/a

行内块：同行排列，可设宽高，如 img/input

空元素：没有闭合标签、没有子元素、不能写内容的标签。

如：br、hr

iframe vs 微前端 vs Web Component vs 动态插入 DOM

iframe 是嵌入一个完整独立的浏览器窗口：把一个页面嵌入另一个页面里。方便复用第三方资源，并行加载。但缺点明显：会阻塞 onload、SEO 权重低、安全风险高、结构冗余。
微前端是在同一个页面运行多个独立应用，共享同一个 window。通过沙箱实现 JS 与样式隔离，多技术栈共存，适合大型项目拆分
Web Component 是 W3C 原生组件标准，基于 Shadow DOM 实现强样式隔离，跨框架复用
动态 DOM 最轻量，但无任何隔离，容易造成样式与全局污染。

小而独立用 iframe，大应用整合用微前端，公共组件用 Web Component，简单轻量用动态 DOM。

同源策略 & 跨域

定义：同源策略是浏览器安全机制，协议、域名、端口三者必须全相同，否则跨域。只限制浏览器和后端，服务器之间请求不跨域。

作用：限制跨域接口请求、DOM 读写、本地存储访问，保护用户信息安全。（标签、图片、脚本、字体、iframe 加载资源不受同源限制，只是不能读写和请求接口）

常用跨域方案：

CORS（后端设置响应头，允许前端域名访问）
前端代理（前端脚手架配置 proxy，前端服务器转发请求）
Nginx（把前后端路径伪装成同源，浏览器就不跨域了）
WebSocket（WebSocket 本身不受同源策略限制，适合即时通信）
postMessage（用于不同窗口、iframe 之间跨域通信，安全传递数据）

总结：开发用代理，线上用 CORS / Nginx。

渐进增强和优雅降级

渐进增强是先保证所有浏览器的基础核心功能，再逐步添加高级特性增强体验。渐进增强以基础为核心，更稳定易维护，是现代 Web 开发主流；

优雅降级是先构建完整高级功能，再为低版本浏览器做兼容降级。优雅降级以体验为核心，向下兼容。