<!DOCTYPE html>必须写在第一行且不可省略,它是文档类型声明而非HTML标签,用于告知浏览器启用HTML5标准模式,缺失或位置错误将触发怪异模式,导致盒模型、CSS布局及JS行为异常。

!DOCTYPE html 必须写在第一行,且不能省略、不能大写、不能加空格或换行——浏览器一旦没看到它,会退化到怪异模式(Quirks Mode),width、padding、盒模型计算全乱,连 <h1> 的默认字号都可能和预期不一致。
为什么 !DOCTYPE html 不是标签却必须存在
它不是 HTML 标签,而是文档类型声明(Document Type Declaration),作用是“提前喊话”浏览器:请用 HTML5 规范解析我。没有它,现代浏览器会模拟上世纪 IE5/6 的渲染逻辑,导致布局错位、CSS 失效、Flexbox 不工作等隐蔽问题。
- 写成
<!doctype html>或<!DOCTYPE HTML>都可以,但小写!DOCTYPE html是标准写法,VS Code 自动补全默认如此 - 不能写在
<html>里面,也不能前面有空行或注释——哪怕一个空格,都会让声明失效 - HTML4 的声明冗长难记:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,现在完全不用碰
<html> 标签的 lang 属性到底要不要加
要加,而且建议从第一个文件就写上。不加不会报错,但会影响屏幕阅读器朗读、搜索引擎识别语言、甚至某些字体 fallback 行为。
使用 PptxGenJS 和 Python 解析,将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint(.pptx)演示文稿。
- 中文网页写
<html lang="zh-CN">,比lang="zh"更精确(区分简体/繁体、地区习惯) - 如果页面含多语言内容(比如中英混排术语表),可局部覆盖:
<span lang="en">API</span> - VS Code 输入
html:5快捷生成骨架时默认不带lang,需手动补上
<head> 里哪些东西真不能少
新手常以为 <head> 只是放 <title>,其实三样东西缺一不可:<meta charset="UTF-8">、<title>、<meta name="viewport">(后者对移动端尤其关键)。
立即学习“前端免费学习笔记(深入)”;
-
<meta charset="UTF-8">必须紧贴<head>开头,位置靠后可能导致前几个字乱码 -
<title>不仅显示在浏览器标签页,还影响 SEO 和书签名称,别留空 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">没加的话,手机访问会默认按 980px 宽缩放,文字小得看不清 -
<style>或<link rel="stylesheet">放这里没问题,但 JS 脚本尽量别放<head>里(阻塞渲染)
最容易被忽略的是顺序和位置:!DOCTYPE 前不能有任何字符,charset 要尽可能早出现,lang 属性看似可选实则影响深远——这些细节不报错,但会在你调样式、测无障碍、适配手机时突然冒出来,卡住半天找不到原因。


















