HTML是网页骨架，非编程语言，靠标签定义内容结构；其4个核心标签为<!DOCTYPE html>、<html lang="zh-CN">、<head>（含<meta charset="UTF-8">和<title>）、<body>，顺序不可乱，缺一或错写将导致渲染异常、乱码、SEO与无障碍失效。

HTML 是构建网页的骨架，不是编程语言，不处理逻辑，只定义内容“是什么”和“怎么组织”。它靠标签（比如 <p>、<h1>、<img>）告诉浏览器：这是一段文字、这是一个标题、这是一张图。

HTML文档必须有的4个核心标签

缺一不可，顺序不能乱，否则浏览器可能降级渲染或报错：

• <!DOCTYPE html> 必须是第一行，且全小写、无空格。写成 <!doctype HTML> 或漏掉都会触发怪异模式（Quirks Mode）
• <html lang="zh-CN"> 根标签，lang 属性强烈建议加上，影响屏幕阅读器发音、SEO 语义识别，中文别用 en
• <head> 里至少要有 <meta charset="UTF-8">，否则中文显示为乱码（）；<title> 虽然可省，但没它，浏览器标签页就空着
• <body> 是唯一放“能被用户看见的内容”的地方。所有文本、按钮、图片、表单，都得在里面——哪怕只是 <p>hello</p>

为什么裸写文字会“看起来正常”，但其实是错的？

浏览器有容错机制，比如你直接写 hello world 在 <body> 里没包任何标签，它也会显示出来。但这带来三个实际问题：

• 语义丢失：hello world 是标题？说明？错误提示？机器（搜索引擎、读屏软件）完全无法判断
• 样式失控：没有 <p> 就没有默认上下边距，连续几段文字会挤成一团，改起来反而更麻烦
• 后续扩展难：想给某一段加 class 或用 JS 操作？没标签包裹，根本找不到目标节点

所以哪怕只有一句话，也该用 <p> 包住；标题就用 <h1>～<h6>，别用 <div> + CSS 假装是标题。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

<div> 和 <span> 到底什么时候用？

它们本身没语义，纯属“容器”，但行为天差地别：

• <div> 是块级元素：自带换行，宽度占满父容器。适合划分区域，比如 <div id="header">、<div class="card">
• <span> 是行内元素：不换行，宽度随内容走。适合局部修饰，比如 <p>价格<code><span class="price">¥99</span>起</p>
• 别用 <div> 包文字当段落，也别用 <span> 包整段话——这不是 bug，是反模式，后期维护成本翻倍

常见新手误操作与对应修复

这些错误在本地预览时可能“看不出问题”，但上线后常引发兼容性、SEO 或可访问性故障：

• 把 <script> 或 <link rel="stylesheet"> 写在 <body> 外面（比如直接跟在 </html> 后）→ 浏览器忽略，资源不加载
• 图片只写 <img src="a.jpg">，漏掉 alt → 无障碍失败，SEO 权重下降，图片加载失败时页面出现空白缺口
• 链接不加 href（比如 <a>点击</a>）→ 表面可点，实际无跳转，键盘 Tab 也无法聚焦，违反可访问性规范
• 自闭合标签写成 <br />（XHTML 风格）→ 在 HTML5 中合法但没必要，统一用 <br> 更简洁，且所有现代浏览器都支持

真正容易被忽略的，是 lang 属性和 charset 的缺失——它们不直接影响视觉，却决定内容能否被正确朗读、索引、解析。一个没设 lang 的中文站，在语音助手场景下基本等于不可用。