HTML不是编程语言，需通过写、改、查、再写理解标签的结构与语义作用；<div>无语义而<section>表独立内容块，影响SEO、无障碍及未来CSS；须用验证工具检查嵌套、ARIA角色和Warning提示；class名应语义化、可维护，如author-bio；DOCTYPE必须顶格首行声明，否则触发怪异模式。
html 不是编程语言，学它不靠“刷题”或“背语法”，而是靠写、改、查、再写——边做边理解标签怎么影响页面结构和语义。
为什么 <div> 和 <section> 不能随便换着用
浏览器渲染时它们看起来一样，但语义完全不同：<div> 是纯容器，没含义；<section> 表示一个有标题的独立内容块。搜索引擎、读屏软件、甚至未来 CSS 选择器都依赖这个区别。
- 用
<div>套一堆文字？→ 搜索引擎可能忽略这部分内容权重 - 把文章目录硬塞进
<section>却没配<h2>？→ 屏幕阅读器会困惑“这算哪一节？” - 想兼容老项目？
<article>、<nav>在 IE8 及以下不被识别，得靠document.createElement或 polyfill 补丁
写完 HTML 必须立刻检查的三件事
不是看“能不能显示”，而是看“浏览器和辅助工具怎么理解它”。
- 右键 → “查看页面源代码”，确认嵌套没出错（比如
<p>里又套了<div>—— 合法但语义混乱） - 在 Chrome 开发者工具的
Elements面板里，把鼠标悬停在标签上，看右上角是否显示正确的 ARIA 角色（如<button>应该是button，而不是generic） - 用
https://validator.w3.org/粘贴代码，重点看Warning级提示：比如Section lacks heading. Consider using <h2>-<h6>这类不是错误，但会影响可访问性
class 名起太“技术化”反而害人
写 class="left-float" 或 class="red-big-text" 看似直观，但一旦设计改了，这些名就成谎言——更麻烦的是，别人接手时根本不敢动，怕“改坏了样式”。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 优先用语义名：
class="author-bio"、class="related-links"，和内容挂钩，不绑定样式 - 避免单字母或缩写：
class="c1"、class="btn-sec"在团队协作中等于没写注释 - 如果真要表达状态，用 BEM 风格：
class="search-form__submit--disabled"，比class="btn-disabled"更明确作用域
最常被跳过的其实是文档类型声明：<!DOCTYPE html> 必须顶格写在第一行，少一个字符或前面多了空格，整个页面就掉进怪异模式（Quirks Mode），CSS 盒模型、getBoundingClientRect() 返回值全会变。这事没法靠“感觉”发现，只能靠验证工具或 DevTools 的渲染模式提示栏。
立即学习“前端免费学习笔记（深入）”；
