必须以<!DOCTYPE html>开头，紧跟<html lang="zh-CN">和<meta charset="UTF-8">（须在<head>前1024字节内），再加<meta name="viewport">，否则中文乱码、读屏失效、移动端缩放异常。
直接用 <!DOCTYPE html> 开头、补全 lang 和 charset、手动写好 <meta name="viewport">，就能避开 90% 的中文乱码、屏幕阅读器失效、移动端缩放异常问题——别信“自动生成模板就万事大吉”。
为什么 VS 或 PyCharm 里敲 html:5 不生效
不是 Emmet 失灵，是编辑器根本没把文件识别为 HTML 类型。PyCharm 社区版默认不启用 Web 支持，得手动装 JavaScript and TypeScript 插件；VS（非 VS Code）里新建项选错模板也会导致生成的结构缺关键属性。
- PyCharm：新建
index.html后，看右下角状态栏，如果不是HTML，点它 → 选HTML - VS 2022：优先选“HTML 页面”模板，不是“HTML 文件”；生成后务必手动加
lang="zh-CN"和<meta name="viewport"> - 文件编码必须是
UTF-8 with BOM，否则中文注释或<title>里一串方块，浏览器还不报错
基础结构里最容易漏掉的三处硬伤
很多教程只教骨架，但实际部署时这三处出错，页面在手机上打不开、读屏软件念错字、SEO 元素全失效——全是静默失败，查源码才看得见。
-
<html lang="zh-CN">缺失：屏幕阅读器可能按英文规则读中文，语调错乱 -
<meta charset="UTF-8">写成GB2312或漏掉：中文标题、段落显示为 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">没写：iPhone 上网页自动缩成小卡片，用户得双指放大才能看
用 <section> 和 <article> 替代一堆 <div> 的真实好处
不是为了“语义漂亮”，而是直接影响 SEO 抓取和辅助技术兼容性。搜索引擎和读屏工具会按语义标签分层理解内容，<div> 对它们来说就是“黑盒”。
立即学习“前端免费学习笔记（深入）”；
-
<section>表示逻辑独立板块（如“作品展示”“联系方式”），可被导航快捷跳转 -
<article>包裹完整自包含内容（如单个手工艺品介绍），利于 RSS 聚合与分享提取 - 混用
<header>/<footer>时注意：它们作用域是最近的<section>或<article>，不是整个页面
真正卡住新手的，从来不是标签记不住，而是 lang 属性漏写、charset 编码错位、viewport 缺失这三处——它们不出错提示，但一上线就集体“静音失效”。检查时盯死 <html> 开头和 <head> 里那三行，比反复调样式快得多。
