1. 一个完整的HTML文档到底长什么样你可能在搜索引擎里反复见过这样一段代码!doctype html html langzh-cn head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title页面标题/title /head body !-- 这里是页面内容 -- /body /html这段代码几乎是所有现代网页的统一“出厂设置”。我见过不少刚入门的同学直接把这个骨架复制粘贴然后就开始往body里堆内容至于每一行是什么意思、能不能删、顺序能不能换完全不去管。结果就是遇到乱码不知道改哪里移动端打开页面字体小得可怜搜索引擎收录也乱七八糟。学HTML语法我强烈建议先把这个骨架彻底吃透因为它决定了你后面所有代码的“地基”稳不稳。1.1 doctype不是标签而是一个开关第一行的!doctype html经常被忽略甚至有人觉得它是注释。其实它不是普通的HTML标签而是一个“文档类型声明”。它的作用是告诉浏览器这份文档请按HTML5标准来解析。你把它删了浏览器也不会报错但会进入一种叫“怪异模式”的状态——那就像两个不同时代的人在用不同的词典对话同一个CSS属性渲染出来的效果可能完全不同。写的时候还要注意一个细节doctype不区分大小写!DOCTYPE html、!doctype html都合法但推荐全小写因为和后面代码风格统一。另外它必须出现在文档最顶部前面不能有任何字符、空行、BOM头否则部分老浏览器会识别失败。1.2 head区域里的门道charset、viewport、title真正影响页面“生死”的其实是head里的两个meta标签。meta charsetutf-8声明了文档字符编码。UTF-8是现阶段互联网的事实标准能覆盖几乎所有语言的字符中文页面尤其离不开它。如果你把它写成gb2312或者直接漏掉页面里的中文很可能会变成一堆乱码尤其是后端接口返回的数据和前端静态页面编码不一致时排查起来特别头疼。我踩过一次很深的坑页面head里写了utf-8但编辑器默认保存成了GBK编码结果浏览器按utf-8解码所有中文全部显示为“锟斤拷”家族这种问题不扫一眼文件编码根本找不到原因。meta nameviewport contentwidthdevice-width, initial-scale1.0是移动端适配的命脉。没有这行声明手机浏览器会按980px的默认宽度渲染页面再等比缩小用户看到的就是一行行蚂蚁字。加上它页面宽度才会跟设备宽度对齐initial-scale1.0表示不缩放这是响应式布局的前提。title除了显示在浏览器标签页上还是搜索引擎结果里的大标题、社交分享时的默认标题重要性远超你想象。每个页面都应该有独一无二的title别全站都叫“首页”或者“无标题文档”。1.3 语言声明lang属性为什么不能省html langzh-cn这行常被当成摆设。其实lang属性是给搜索引擎、屏幕阅读器和翻译插件看的。你声明了zh-cn浏览器就能更准确地为中文用户提供翻译建议hreflang相关操作也会依赖它。如果是英文页面就写en繁体中文写zh-hant按实际内容来不要明明全站中文却写个en那样屏幕阅读器会用英文的发音规则去读中文体验非常奇怪。还有不少人在html标签上写langzh-CN注意zh-cn和zh-CN都有效语言代码不区分大小写但保持统一就好。2. 把HTML语法拆开看标签、属性、内容三件套搞定了文档骨架接下来就要真正理解“语法”这个概念。HTML语法不像编程语言那样有变量、函数、逻辑判断它的核心只有三个东西标签、属性、内容。你写的每一个HTML元素本质上都是这三者的组合。2.1 元素的最小单位是标签对一个完整的元素通常由开始标签、内容、结束标签组成比如pHello World/p。开始标签是尖括号包起来的标签名结束标签在标签名前多一个斜杠。这里的“斜杠”很容易被漏掉一漏掉后面的内容就全被当成这个标签的内容了这是新手报错率最高的问题之一。还有一种情况是标签嵌套比如ul li第一项/li li第二项/li /ul嵌套的意思是后打开的标签要先关闭就像叠被子一样先盖上去的被子要最后揭下来。如果写成ulli第一项/ul/li虽然浏览器很宽容会尝试自动修复但一旦嵌套层级复杂解析结果就会变得难以预料CSS选择器也容易失效。2.2 属性的写法与引号规范属性写在开始标签里格式是属性名属性值多个属性用空格分隔。比如a hrefhttps://example.com target_blank relnoopener noreferrer点击跳转/a这里href、target、rel都是属性各自的值用双引号包起来。属性值也可以用单引号但我个人建议全项目统一用双引号因为很多后端模板语言本身就用了单引号混用起来很容易看花眼。属性名不能有空格属性值如果是空字符串也要保留引号例如disabled在某些框架里才有意义。有些属性是“布尔属性”写不写值都行比如disabled、checked、required写input disabled和input disableddisabled效果一样。现代写法倾向于只写属性名简洁。2.3 块级元素和内联元素排版的底层逻辑HTML里每类标签都有默认的显示方式最基础的分法是块级和内联。块级元素如div、p、h1、ul、li会独占一行默认宽度撑满父容器上下可以设置margin。内联元素如span、a、strong、img不会换行在一行内从左到右排列width、height设置基本无效只有水平方向的margin和padding起作用。这个区别特别影响布局。你写一个span然后想给它设置宽高结果发现怎么设置都没反应不是代码错了而是元素类型决定了它根本不接受宽高属性。需要用display: block或display: inline-block改掉它的显示模式CSS才能生效。2.4 自闭合标签与空元素有些标签没有内容也不需要有结束标签比如img、input、br、hr、meta。这类标签叫空元素。在XHTML时代要求写成br /这种带斜杠的形式HTML5里写br或br/都行我建议写不加斜杠的HTML5风格代码更干净。但要注意meta和link这类只出现在head里的空元素很特殊虽然同为自闭合但它们的属性承担着配置职责渲染类标签反而没有这种配置能力。3. 日常写页面最容易踩的语法细节骨架和基础元素讲完现在聊几个我平时帮人看代码时出现频率特别高的问题。这些问题说大不大说小不小但每一个都能让你排查半小时。3.1 空白字符多个空格为什么只显示一个你在HTML里连续敲十几个空格浏览器最终只显示一个。这是HTML的空白折叠规则连续的空白字符空格、制表符、换行会被合并成一个空格。所以你想用空格来对齐文字或做缩进在HTML里完全行不通。正确的做法是用CSS的margin、padding、text-align等属性来控制间距或者用nbsp;不换行空格来强制插入但nbsp;应该慎用因为它会使文本换行行为变得奇怪。我在邮件模板里经常看到一堆nbsp;撑间距的做法说实话这是一种无奈之举因为很多邮件客户端对CSS支持极差但在普通网页里千万别这么干。3.2 特殊字符转义小于号大于号不能直接写在HTML正文里直接写或会产生一个问题浏览器会把它们当成标签的边界来解析。比如你想在页面上展示“a b 这个表达式”如果直接写a b浏览器会认为 b 这个表达式是一个未知标签直接吞掉后面的内容导致页面显示异常。正确写法是用字符实体写成lt;写成gt;写成amp;双引号写成quot;空格写成nbsp;同样重要的还有版权符号©、注册商标®等都可以通过实体形式书写。其实我不建议硬记所有这些实体记住lt;、gt;、amp;这三个最常用的就够了其他的需要用的时候查表即可。3.3 注释正确写法和不该出现的注释HTML注释是!-- 注释内容 --注意开始处的感叹号和结束处的双横线都不能少。注释可以跨行!-- 这是一个多行注释 这里面的内容不会被浏览器渲染 --注释的一个大坑是嵌套注释。HTML不支持注释嵌套如果你在一个注释块里面再写!--那么第一个--出现的位置就会被当作注释的结束点之后的内容会莫名其妙地显示出来。另外不要把敏感信息写在注释里比如接口地址、测试账号、改动记录因为这些都会被用户直接查看源码看到我就见过某网站注释里挂着一个内部API地址非常危险。3.4 中文乱码的本质原因前面提到了charset这里再展开说一下。乱码的核心原因是编码和解码方式不一致。你写文件的时候用的是A编码浏览器读的时候按B编码来解两边对不上中文就变成乱码了。常见的场景有文件本身是GBK编码head里写utf-8。文件本身是UTF-8head里写gb2312。文件在传输过程中被服务器强制改了Content-Type的charset。head里没有charset声明浏览器靠猜。针对第一和第二种场景最简单的方法是统一用UTF-8编码保存文件无论你用的VSCode、Sublime还是记事本都检查一下右下角的编码状态。针对第三种场景需要看服务器配置或者后端框架比如Nginx的charset utf-8;配置、后端Response Header里的Content-Type字段都需要一起检查。还有一个细节meta charsetutf-8必须放在head区域尽可能靠前的位置最好在title之前。因为浏览器解析到meta标签之前如果已经按默认编码读取了几个字节后面即使看到charset声明也可能来不及了。这就是为什么标准骨架里charset是head的第一个元素的直接原因。4. HTML与Markdown的关系互转思维与实操对照在看热搜词时我注意到很多人在搜“markdown语法”“html转为md”“md语法”。这其实是个很现实的场景把网页上的内容转成Markdown方便写文档、做笔记、发博客。反过来说很多博客平台和文档系统也支持直接用Markdown写、HTML转Markdown后发布。搞清楚HTML和Markdown之间的语法对应关系能省下大量手工排版的时间。4.1 为什么要做HTML转MarkdownMarkdown的优势是纯文本、易读、方便版本管理HTML的优势是表现力强、兼容所有浏览器。两者不是替代关系而是不同场景下的不同选择。我在实际工作中经常遇到的情况是客户给了一个已经做好的官网页面要求把所有产品介绍里的富文本内容导入到CMS系统而CMS的编辑器支持的是Markdown格式这时候就得把HTML块转成Markdown并且要保证标题层级、加粗、链接、图片都不丢失。还有一批人是做技术文档的很多开源项目的README或者文档站都是用Markdown写的但内容来源是过去的HTML页面。手动一个个标签去改效率太低所以要么用工具批量转要么至少理解两者的对应关系知道转换结果是不是“丢了东西”。4.2 常用标签与Markdown语法对照表我把最常见的对应关系整理成了表格你在手工转换时可以参考HTML写法Markdown写法说明h1标题/h1# 标题H1到H6分别对应1到6个#p段落/p直接写文本段落间留空行Markdown里换行不等于段落strong加粗/strong**加粗**也可以写成__加粗__em斜体/em*斜体*也可以写成_斜体_a hrefurl链接文字/a[链接文字](url)注意标题属性会丢img srcurl alt描述ulli项/li/ul- 项无序列表olli项/li/ol1. 项有序列表blockquote引用/blockquote 引用code代码/code代码行内代码precode代码块/code/pre代码块一般还要带语言名对照表里有两个容易被忽略的点第一HTML里p包裹的文本里如果只有一个换行Markdown转换后千万不要在每行后面硬加两个空格那是旧式Markdown的换行语法现在很多解析器已经不需要了。第二Markdown里的链接可以只写裸地址但HTML中的target_blank属性在标准Markdown里是表达不出来的转换完会丢失“新窗口打开”的行为需要后期通过HTML标签补齐或者用扩展语法。4.3 用Pandoc批量转换的完整流程如果你有几十个HTML文件要转成Markdown手工操作肯定不现实。这里推荐用Pandoc一个开源的文档格式转换工具。安装方式macOS上用Homebrew最简单brew install pandocUbuntu/Debian系统可以用sudo apt-get install pandocWindows下可以到官网下载安装包也可以用Chocolatey安装。单个文件转换pandoc input.html -f html -t markdown -o output.md批量转换可以用Shell脚本循环处理for f in *.html; do pandoc $f -f html -t markdown -o ${f%.html}.md donePandoc转换完以后我通常会打开几个文件抽查重点看三处标题层级有没有塌缩、表格是否变成了HTML原生标签、图片相对路径是否保留了原来的层级。Pandoc默认对复杂表格的处理有时会退化成HTML表格而不是Markdown表格这种情况下需要加参数-t markdown-grid_tables或者-t gfmGitHub风格的Markdown对表格支持更好pandoc input.html -t gfm -o output.md4.4 手工转换时容易遗漏的嵌套层级如果你只想转一小段内容不打算装工具那手工转换也要留个心眼。最容易翻车的是嵌套列表和块元素内的内联样式混搭。比如这段HTMLul li第一层 ul li第二层A/li li第二层B/li /ul /li li第一层第二项/li /ul对应的Markdown必须用缩进表示层级- 第一层 - 第二层A - 第二层B - 第一层第二项缩进一般用两个或四个空格注意同一个文档里缩进宽度必须一致。很多人在这一步出错转出来之后层级全平了内容虽然不少但结构信息全丢了。另外如果一个p标签里面混有strong、a、span这类内联标签转换时要注意保留内联语法不要因为标签多就把链接和加粗写散了。我的经验是先处理包裹层次再处理行内格式一层层来别一口吃成胖子。5. 真实开发中的语法报错定位与避坑经验最后这部分排错经验是每一条都真金白银踩过坑换来的。HTML本身不报错这是它友好的地方也是它最迷惑人的地方——浏览器为了渲染出页面会静默修复大量语法错误导致你以为自己写对了实际上一堆隐患。5.1 未闭合标签的连锁反应最经典的案例一个div标签忘了写闭合会导致后面整个页面的布局全部错乱。浏览器会认为后面的内容都是这个div的子元素直到遇到下一个能自然关闭它的层级标记。排查方式很简单打开浏览器开发者工具F12在Elements面板里看标签的颜色和箭头。正常的闭合标签是一个完整的树形结构有开有合未闭合的标签会一直“吞”掉后面的同级元素缩进形态一眼就能看出来。另外编辑器里的高亮也能帮你发现问题比如VSCode安装一个htmltagwrap插件把鼠标停在标签名上它会自动高亮匹配的另一半。5.2 在块级元素里嵌套内联元素的错误前面讲过块级和内联的区别这里直接给一个反面案例p div这是一个不合法的嵌套/div /pp虽然可以包含行内元素但按规范p不能包含块级元素。浏览器遇到这种情况会强制把p拆成两段渲染结果和你预期完全不一样。更隐蔽的情况是在span里再放一个div比如为了局部改样式把大段div包进了span里样式没生效才知道出了问题。规则记不住没关系只要记住一句话块级元素可以包含块级或内联元素内联元素一般只能包含内联元素和文本。这是HTML嵌套的“道德底线”。5.3 图片和链接的路径写错导致资源失效路径问题不算纯粹的“语法”问题但它经常和语法错误同时出现。比如img srcimages/logo.png altlogo如果页面在/about/index.html而图片放在/about/images/logo.png这个相对路径是对的。可如果把页面移到根目录路径就失效了。最稳妥的方案是用以/开头的绝对路径比如/assets/images/logo.png这样不管页面在哪个层级都能正确解析。当然如果你的站点部署在子目录而非域名根目录那/开头的路径反而会跑偏这种情况就要用./或../来调整。另外alt属性一定记得写它是图片缺失时的替代文本也是屏幕阅读器的读取内容对无障碍访问和SEO都有影响。我见过很多项目上线后图片挂了用户看到一片空白就是因为alt没有写浏览器连个文字线索都没有。5.4 表单控件语法选择框与输入框的正确姿势热搜词里有“html选择框”这个确实值得单独说一下。选择框有下拉选择框select和多选框input typecheckbox两种形态很多人会把它们搞混。下拉选择框的结构select namecity idcity option valuebeijing北京/option option valueshanghai上海/option option valueguangzhou selected广州/option /select注意selected属性表示默认选中项value才是提交给后台的真实值option标签里的文字只是显示文本。如果要让用户可以多选给select加multiple属性但多选下拉的体验比较差更推荐用一组checkbox来实现。文本框的正确写法是input typetext多行文本用textarea这两个也是容易搞混的点。还有所有表单控件都应该有一个name属性否则刷新或提交时浏览器根本不会把它收录进请求参数里。5.5 用浏览器开发者工具验证语法问题最后分享一个排查流程我在接手任何陌生页面时都会走一遍打开页面按F12看Console有没有红色的报错。切到Elements面板检查DOM树结构是否合理重点看标签有没有被浏览器“修正”过。用W3C的HTML验证服务validator.w3.org/nu/直接提交页面URL或粘贴代码会列出所有语法警告和错误。这个工具能帮你发现很多肉眼注意不到的问题比如a标签里嵌套button、img缺alt、li没有父级ul等。顺手看一下Network面板里有没有资源加载404尤其是css和js文件路径不对会导致样式和交互全部失效但页面本身不报错。排查HTML语法问题核心思路就是“不要相信肉眼不要相信浏览器不报错就等于正确”。浏览器的容错机制既是优点也是陷阱真正规范的地方往往不会在用户面前吱声只在代码审查时露馅。我个人在实际操作中的一个习惯是每写完一个页面模块就随手按一下格式化再扫一眼标签层次。不要小看这个动作它能在问题发生前就帮你过滤掉90%的低级遗漏。还有一个技巧把h1到h6的层级当作文档大纲来看一个页面只保留一个h1其余层级依次递进这样结构更清晰搜索引擎也更容易理解页面主题。HTML语法的学习没有太多玄学就是用正确的方式反复写、反复看渲染结果、反复被坑坑踩完你的水平自然就上去了。