HTML 核心知识点
HTML (HyperText Markup Language) 是构建 Web 的基础。
1. 语义化 (Semantics)
使用正确的标签包含内容,有利于 SEO 和无障碍访问 (A11y)。
- 结构标签:
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer> - 文本标签:
<strong>(重要),<em>(强调),<mark>(高亮) - 多媒体:
<figure>,<figcaption>
2. 核心特性
2.1 DOCTYPE
<!DOCTYPE html> 告诉浏览器使用标准模式 (Standards Mode) 渲染,而非怪异模式 (Quirks Mode)。
2.2 Meta 标签
html
<!-- 设置视口,用于移动端适配 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO -->
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1, 关键词2">2.3 Script 加载
<script src="...">: 阻塞解析,下载并立即执行。<script defer src="...">: 推荐。并行下载,文档解析完成后按顺序执行。<script async src="...">: 并行下载,下载完立即执行(可能阻断解析,顺序不确定)。
3. HTML5 新特性
- Canvas & SVG: 绘图与矢量图。
- Drag and Drop API: 拖放接口。
- Web Storage:
localStorage,sessionStorage. - WebSocket: 全双工通信。
- Semantic Elements: 上述的
<article>等。 - Form Enhancements:
<input type="date">,email,url,placeholder,required.
4. 关键面试题
- src 和 href 的区别?
- HTML5 有哪些新特性?
- 如何优化图片的加载(Lazy load, WebP, srcset)?
- 什么是 Shadow DOM (Web Components 的一部分)?