先说一个可能颠覆不少人认知的观点HTML其实不算是一门“编程语言”。它没有变量、没有循环、不会计算它是“超文本标记语言”干的事情是用一套成体系的标签给一段内容的“结构”和“语义”做标注。你去查语源就知道HyperText Markup Language重点在Markup标记。但正是这层标记撑起了整个互联网的基础——你正在看的这个页面我写的这篇博客本质上都是一堆HTML标签在“搭骨架”CSS负责“穿衣打扮”JavaScript负责“动起来”。所以学HTML基础语法不是“学一门编程语言的语法规则”而是“学会用浏览器能看懂的方式描述一份文档的结构”。这篇内容想把HTML最核心的那部分语法讲透从一段代码的骨架结构、标签的基本书写规范、高频常用标签的实操、到表格和表单这种最容易写乱的地方最后再分享一些我实际写页面时踩过的坑和养成的习惯。不管你之后要走前端开发、做爬虫需要解析页面还是只是想在博客园、Github Pages这类地方搭一个自己的页面把这篇基础打牢后面都能省很多事。1. 先说清楚HTML到底算不算“编程语言”1.1 为什么这个问题的答案会影响你的学习方式我在很多技术群里看到新人问“我是不是该先学Python再学HTML”也有人问“HTML基础语法是不是和Java差不多”。这些问题的背后都带着同一个误解把HTML当成了另一门通用的计算机语言。搞清楚HTML不是编程语言对你的学习方式影响非常大。如果你拿学Python、Java的那套思路来学HTML——纠结“变量怎么定义”“函数怎么调用”“循环怎么写”——你大概率会懵很久因为这些概念在HTML里根本不存在。HTML不控制逻辑它只负责描述“这里是一个标题”、“这里是一个段落”、“这里是一张图片”、“这里是一个输入框”。它要解决的唯一问题是让浏览器知道文档的每个部分分别是什么含义、按什么结构组织。所以正确的学习方法应该是看到一个标签问自己三个问题——这个标签是干嘛的它应该放在哪里它能带哪些属性而不是去想“它执行了什么逻辑”。1.2 用“作文纸”的类比理解HTML的底层逻辑把HTML想象成一张带有固定稿纸格式的作文纸。你在纸上写作文的时候标题写在第一行居中正文每段开头空两格日期落款写在右下角。这些格式要求就是“语法”。HTML的语法就是你告诉浏览器“看好了这两个字是标题用h1的样式去显示这四行话是第一段用p的方式去呈现这个位置我要放一张图图的地址是xxx。”浏览器拿到你的HTML代码之后做的工作就类似于“阅卷老师”在扫描你的作文纸它会从第一个字符开始按顺序理解每一个标签然后把它们“渲染”成你在屏幕上看到的网页。注意这句话里的关键词——“按顺序”。HTML从技术角度讲是一门“顺序解释”的标记语言代码从上到下、从左到右被浏览器解析。这也是为什么很多新手发现“我的内容都写对了为什么顺序乱了”的时候第一反应是检查标签有没有写错位置而不是去想某个标签有什么神秘逻辑。2. 一个HTML页面的骨架从DOCTYPE到body你每天都会写这一段2.1 DOCTYPE不是标签但比一半的标签都重要打开任何一个现代网页的源代码第一行几乎都是!DOCTYPE html。很多新手会问“这一行到底是干嘛的它怎么长得跟别的标签不一样”。先说结论!DOCTYPE html不是HTML标签它是一条“文档类型声明”写给浏览器的“前置指令”。它的作用是告诉浏览器“请用现代标准的模式来解析我这个页面别用那些古董模式的怪癖行为。”早期的网页标准混乱浏览器之间存在很多兼容性怪癖如果一个页面不加DOCTYPE浏览器可能会进入“怪癖模式Quirks Mode”导致同一个页面在不同浏览器里渲染出来的效果差异巨大。所以不管后面出现什么新东西HTML文件第一行老老实实写上!DOCTYPE html永远没错。它就是一张“标准模式通行证”写不写很多时候决定了你页面里的CSS样式能不能正常工作。2.2 html、head、body三兄弟各管什么看完DOCTYPE之后顺着代码往下扫你会看到一个html标签里面通常装着head和body两个子标签。这三者的关系可以类比成一棵树html是根head是“树冠的信息层”body是“树干和树叶的实体部分”。html告诉浏览器“从这里开始都是HTML文档内容”。它有一个lang属性比如langzh-CN表示这个页面主要内容用的是简体中文方便搜索引擎和读屏软件识别页面语言。head页面的“大脑配置区”里面放的是给浏览器和搜索引擎看的“元信息”比如字符编码、页面标题、外部CSS和JS文件的引入等。它里面的内容默认不会直接显示在页面上。body页面的“实际展示区”你在屏幕上看到的文字、图片、按钮、视频全部放在body里面。普通用户浏览网页时看到的全是body的功劳。新手常见的困惑之一写了内容但不显示。十有八九是把内容写进了head而不是body或者写在了html之外。记住想要内容出现在页面上就往body里塞。2.3 head里必须有的几样东西很多新手搭页面的时候head里只写一个title然后发现页面上中文变成乱码或者分享链接时标题、缩略图完全不对。教你把head里最常用的几样配齐这是基础中的基础head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title meta namedescription content这是页面的描述搜索引擎摘要时会用到 link relstylesheet hrefstyle.css /headmeta charsetUTF-8声明字符编码。不写这个浏览器默认可能用系统编码解析你的文件中文就变成“锟斤拷”了。这是中文开发者最容易踩的坑之一。meta nameviewport移动端浏览器适配的关键。不写这个手机打开你的页面会像在电脑上看一样被缩小字小到看不清。有了这行页面宽度才会和手机屏幕宽度对齐。title浏览器标签页上显示的文字也是搜索引擎结果里那行大标题。每个页面都应该有一个唯一的、能概括内容的title。meta namedescription页面摘要。写得好别人在搜索引擎里看到你的内容简介时点击意愿会高很多。3. 标签的基本盘写法、属性、嵌套这三件事决定你代码的寿命3.1 成对标签和自闭合标签什么时候用哪种HTML标签按写法分两类成对标签和自闭合标签。成对标签有开始和结束两部分比如p这是段落/p内容夹在两者之间自闭合标签则没有嵌套内容自己一个就代表一次“插入”比如img srca.jpg、br。这个区分背后其实是一个很朴素的逻辑标签所代表的“语义”需不需要包裹内容。你要声明一段文字是段落那必须明确“从哪儿开始到哪儿结束”所以要p和/p成对出现你要在页面里插入一张图片图片本身是外部资源没有内部的文字内容要包裹“插入”这个动作一次完成就够了所以img不需要/img。以下是常见的自闭合标签速查表记熟它们能避免很多低级错误标签作用常见属性img引用外部图片src图片地址、alt替代文字br换行无meta文档元信息charset、name、contentinput输入框type、name、value、placeholderlink引入CSS文件rel、hrefhr水平分割线无有人可能知道HTML5里自闭合标签后面的斜杠可以不写比如br/写br就行。我自己推荐不写因为更干净HTML5规范也允许。3.2 属性是标签的“配置项”先记住这几个光有标签名字只能定义“这是什么东西”但实现不了“这个东东西有什么具体特征”。属性就是标签的“配置项”。写法的通用格式是标签名后跟空格然后属性名属性值多个属性之间用空格隔开。a hrefhttps://example.com target_blank title点击跳转到example这是一个链接/a上面这段里href表示链接指向的地址target_blank表示在新标签页打开title表示鼠标悬停时的提示文字。每个标签支持的属性并不完全一样但有几个通用属性很常用比如id页面内唯一标识、classCSS类名、style内联样式、title悬停提示。新手写属性最常犯的错误是漏掉引号或者用了单引号、双引号混用。说个经验之谈HTML属性值一律用双引号包起来不要为了省事省略引号。虽然HTML规范在某些情况下允许不带引号但一旦属性值里出现空格或特殊字符不带引号就会出bug而且这种bug特别难排查。3.3 嵌套的关键千万别“交叉”HTML标签允许嵌套比如ul里面放若干lidiv里面放p再放a。嵌套正确的写法必须满足“闭合顺序和打开顺序相反”就像一层一层剥洋葱!-- 错误交叉嵌套 -- div文字p段落/div/p !-- 正确先开的人后关 -- div文字p段落/p/div交叉嵌套是HTML语法里最基础也最容易犯的错误之一。后果是什么浏览器的解析器会自动“修正”这种错误但它修正的方式和你预期的可能完全不一样会导致页面布局乱套、CSS选择器匹配不到、JavaScript获取DOM对象失败等一连串问题。有个简单的自查技巧写完一段HTML后检查每个成对标签的闭合标签和开始标签的顺序是否正好是反过来的。编辑器的自动缩进也能帮你看出嵌套关系缩进不对的基本就是嵌套错了。3.4 块级元素和行内元素决定了页面怎么“排”写HTML的时候你会慢慢发现有些标签天生占一整行比如div、p、h1这些是块级元素有些标签只占自身内容的宽度比如span、a、strong这些是行内元素。块级元素在页面上以“块”的形式出现默认会另起一行并独占一行的宽度。类似Word里“一个段落”的概念。行内元素在页面上宽高由内容撑开不会换行多个行内元素可以并排在一条水平线上。类似Word里的“一个加粗的词”它嵌在段落文本中间。这个区别是后面学CSS布局的基石。你控制width、margin、padding时这些属性对块级元素和行内元素的生效逻辑完全不同。学HTML基础阶段不需要把每个属性记下来但必须建立这个分类意识知道它们是两套东西。4. 高频标签实操速查从文本到图片一天就能用熟4.1 文本与标题页面内容的主体网页归根到底是给人看的文字信息。HTML里描述文本结构的标签是你第一个要掌握的家族。标签语义实际显示效果使用建议h1~h6六级标题从大到小逐级变粗h1一页面只用一个用于主标题h2以下可多处使用p段落段落前后有默认间距连续的正文文字记得分段别硬用br换行strong重要强调加粗表示“重点内容”不只是为了加粗外观em语气强调斜体表示这句话需要重读也不只是为了外观span无语义的行内容器无默认样式配合CSS做局部样式时使用br换行文本另起一行只在确实需要换行处使用hr分割线水平线表示内容主题切换时使用这里想多说一句标题标签的层级不只是“字号区别”它代表的是文档的“大纲结构”。搜索引擎抓取页面时会把标题层级作为一个重要的语义信号h1是页面主题h2是各章节标题h3是章节下的小标题。所以写标题时应该像写论文目录一样从大到小逐层递进别跳级。4.2 链接与图片连接互联网的两只手网页之所以叫“超文本”链接和图片功不可没。先说链接a hrefpage.html站内页面/a a hrefhttps://example.com target_blank外部链接新窗口打开/a a href#comments页面内锚点跳转/a a hrefmailto:helloexample.com发送邮件/ahref属性是链接的核心。新手最容易在这里犯的错是把“页面内锚点”写成完整URL。#开头的地址代表的是“当前页面里id等于某值的元素位置”不是指定网址。还有站内链接建议用相对路径比如about.html、./pages/about.html这样整个网站换域名时不用改链接。图片标签稍微复杂一点因为它牵扯到外部资源加载img srcimages/logo.png alt公司Logo width200 height100src图片路径。可以是相对路径比如images/logo.png也可以是完整URL。alt图片加载失败时显示的替代文字也是读屏软件识别图片的方式。这个属性必须写哪怕是空字符串alt也比你完全不写要好。不写alt搜索引擎无法理解你的图片内容还会被认为是无障碍问题。width和height这两个属性可以控制图片显示尺寸但注意它只改变显示尺寸不影响图片实际文件大小。一个实操小技巧如果你的图片加载不出来第一步先按F12打开浏览器开发者工具切到Network面板刷新页面看图片请求的状态是不是404。404就说明路径错了不是代码语法错了。4.3 列表不只是“加圆点”那么简单HTML里有三种列表无序列表ul、有序列表ol、描述列表dl。新手阶段用得最多的是前两种。ul li产品功能/li li价格方案/li li联系我们/li /ul ol li填写个人信息/li li验证手机号/li li设置登录密码/li /ol无序列表每个项前面有一个圆点适合并列关系的条目有序列表前面是序号适合有先后顺序的步骤。列表可以直接嵌套比如多级菜单就靠ul套li、li里再套ul来实现。写列表最容易犯的错是忘记li的闭合或者直接在ul下面塞div。记住ul和ol的直接子元素只能是li别的都不合法。这个规则能避免很多样式丢失的问题。导航菜单、文章目录、商品参数列表都用列表。它是网页结构里被严重低估但使用率非常高的标签。4.4 无语义容器div和span先学会用想清楚再换div和span是HTML里最“没脾气”的两个标签。它们不表达任何语义就是纯粹的容器。div是块级的容器span是行内的容器。它们的用途是给一段内容“套壳”方便你用CSS批量设置样式或者用JavaScript批量获取操作。早年网页开发大量依赖div来切版所以到现在还有很多老前端说“DIVCSS布局”。但现在HTML5推出了一套语义化标签比如header、nav、main、article、section、footer它们的语义比div更明确。现代页面的结构通常长这样body header页面顶部区域/header nav导航栏/nav main article正文内容/article aside侧边栏/aside /main footer页脚区域/footer /body这些语义化标签不会带来肉眼可见的外观变化但会让你的代码“会说话”谁都能一眼看出页面哪个部分表示导航、哪部分是正文主体、哪部分是页脚。这对团队协作和搜索引擎优化都非常友好。我的建议是默认优先用语义化标签确实找不到匹配语义的再用div兜底。5. 表格与表单工作中最容易写乱的两块5.1 表格先分三块别一锅炖表格在HTML里曾经是页面布局的主力现在已经被CSS Grid和Flexbox取代了。但表格语法本身依然重要因为但凡涉及二维数据展示比如股价列表、成绩单、订单明细表格依然是最直接的手段。表格的完整结构应该分成三个部分table caption2024年季度销售统计/caption thead tr th产品/th th一季度/th th二季度/th /tr /thead tbody tr th笔记本电脑/th td350/td td400/td /tr tr th显示器/th td120/td td170/td /tr /tbody tfoot tr th合计/th td470/td td570/td /tr /tfoot /tablecaption表格标题默认显示在表格上方用来说明这个表格的整体内容。thead表头区域里面通常是tr包th。th是表头单元格文字默认加粗居中。tbody数据主体区域一行是一个tr每个数据格子是td。tfoot表尾区域通常放合计等汇总信息。新手写表格最常见的毛病是把整个表格的所有行塞在一起不区分thead和tbody。这在纯视觉效果上可能没什么问题但对CSS和JavaScript来说就很难定位“哪一行是表头、哪一段是数据”。早年间甚至有些极端做法会用表格整体来搭页面版式我强烈劝你不要学那套。表格就老老实实拿来展示数据表版式交给CSS。合并单元格也是表格里很常用的操作用rowspan和colspan属性实现。colspan横向合并几列rowspan纵向合并几行。合并单元格最容易出错需要你在脑子里把网格行列数数清楚不然表格会歪掉。5.2 表单交互的起点也是最需要耐心练的模块HTML里如果有一个标签值得你认真研究那就是form。它是网页从“单向展示”变成“双向交互”的关键。一个完整的表单通常长这样form action/submit methodPOST div label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 required /div div label forpassword密码/label input typepassword idpassword namepassword required /div div span性别/span labelinput typeradio namegender valuemale 男/label labelinput typeradio namegender valuefemale 女/label /div div label forcity城市/label select idcity namecity option valuebeijing北京/option option valueshanghai上海/option option valueguangzhou广州/option /select /div div label forintro自我介绍/label textarea idintro nameintro rows4 cols50/textarea /div button typesubmit提交/button /form逐个拆开来说form元素的action属性决定表单提交到哪里method属性决定用GET还是POST请求。GET适合不敏感的小型查询参数POST适合数据量较大或敏感信息的提交。input是表单里的万金油靠type属性切换形态。text是文本框password是密码框radio是单选按钮checkbox是多选按钮email会自动校验邮箱格式submit是提交按钮。label的for属性要和对应输入框的id配对。这样做的好处是用户点击“用户名”这三个字时光标会自动聚焦到输入框里。这个细节对移动端用户特别重要因为手指点选文字比点选小小的输入框容易多了。name属性是表单成功提交的数据键名相当于“变量名”。没有name的输入框提交时根本不会把数据发出去。这是新手最容易困惑的点前端页面上明明看到了输入框填了内容但后端收不到数据。检查一下name是不是漏了。placeholder是输入框内的灰色提示文字一旦用户开始输入就会消失。还有一个很多人踩过的坑required属性表示必填项但它的校验提示样式是浏览器内置的不同浏览器长得不一样。而你用JavaScript做自定义表单校验时要注意别把浏览器默认校验和JS校验的逻辑搞混了不然会出现“某个字段填了就报错不填反而能提交”这种诡异的组合bug。5.3 按钮提交的一个常见问题按钮type别乱写很多新手写表单时按钮用的是button提交/button没有写type属性。这里要知道button元素的默认type是submit也就是说不写type时这个按钮就是“提交按钮”。如果你在表单里放一个需要绑定JS点击事件的普通按钮却没写typebutton一点击就会触发表单提交然后页面刷新你的JS逻辑全白写了。所以在form里写按钮必须明确写type想提交表单button typesubmit提交/button想重置表单button typereset重置/button想绑定JS事件button typebutton普通按钮/button这属于那种“查半天查不出来、知道了就再也不会犯”的小问题。提出来单独说是想让你一次性记住。6. 写HTML时最该养成的几个习惯来自我实际踩过的坑6.1 属性值永远加引号节点闭合永远别偷懒前面提到过属性值加引号的问题。再展开说一下为什么有些人会犯这个错他们看到某些官方文档里出现了不带引号的写法比如a hrefhttps://example.com就以为引号可以省略。确实HTML规范允许在属性值没有特殊字符时省略引号但互联网上真实的页面中属性值带空格、带问号参数、带中文的情况太多了这次省略没问题下次就出问题。与其每次去判断“这里需不需要引号”不如养成统一加双引号的条件反射。还有标签闭合。有些人写p容易忘写/p写ul容易忘写/ul。忘了一个两个可能页面还是能显示但嵌套层级一多各种莫名其妙的样式问题就冒出来了。我的习惯是所有成对标签先把开始和结束标签一起写好再往中间填内容。这就像写代码先写函数签名再写函数体套路不一样但思路一致。6.2 字符编码统一用UTF-8中文网站最经典的坑就是乱码页面上出现“锟斤拷”之类的内容。本质原因就是文件和浏览器之间的编码不一致。正确做法是两件事同时做在HTML的head里写明meta charsetUTF-8。用编辑器比如VS Code保存文件的时候右下角确认编码选择的是UTF-8。这两步都做了才叫真正的“UTF-8”。只写meta不检查文件编码或者反过来都还是会遇到乱码。特别提醒一下如果你用Windows自带的记事本编辑HTML文件然后另存为编码选项里要注意选“UTF-8”不要选“UTF-8 with BOM”。BOM头有时候会让浏览器在页面顶部多出一个空白行或一个零宽字符虽然不严重但看着难受。6.3 认识注释给自己留后路也给别人留方便HTML注释的写法是!-- 注释内容 --注释里的内容浏览器不会渲染也不会显示在页面上但它会存在于源代码里别人按F12就能看到。我写注释的习惯分两种一是区域分隔型注释类似“ header区域开始 ”这种用于页面结构较长时快速定位功能区块。二是临时注销型注释写代码时哪块内容暂时不想显示也不想删除就先用注释包起来。这个方法在排查问题时尤其好用怀疑某块代码影响到了布局先注释掉刷新看看如果不是再撤销。不过也要提醒注释不是写得越多越好。满屏注释会污染代码可读性真正好的注释是“解释为什么要这么写”而不是“这个div是干什么的”这种废话——div是干什么的看代码就该知道不需要注释来复述。6.4 学会看浏览器开发者工具比背任何语法都强学HTML基础语法有一个实践成本几乎为零但效果极好的方法在任意网页上按F12打开开发者工具切到Elements元素面板你会看到这个页面的HTML结构。鼠标在元素列表上滑过时页面上对应的内容区域会高亮显示。我特别推荐新手做下面这几个练习打开任意新闻网站的首页定位页面的header、nav、main、footer分别在哪里。找一个列表页面数一数它用了多少个ul/ol来组织内容。找一个带搜索框的网站看看搜索框的input标签是怎么写的有没有name属性。找一个图片不显示的页面或者自己造一个实战演练一把404排查思路。这个“逆向拆解”练习能让你在短时间内积累大量“原来这个功能是这个标签实现的”的直观印象比单纯看文档记标签快得多。7. 基础学完之后接下来往哪个方向走7.1 和CSS、JavaScript的分工关系HTML只是结构页面要好看要靠CSS要能交互要靠JavaScript。我见过太多人在HTML上花了两周然后问“为什么我写出来的页面像1998年的网站”。答案是因为你还没学CSS没必要焦虑。CSS层叠样式表负责的是“视觉效果”颜色、字体、间距、边框、布局、动画。JavaScript负责的是“行为逻辑”点击事件、表单验证、异步加载数据、修改DOM内容。三者的关系可以用盖房子类比HTML 毛坯房的结构几室几厅、哪里是墙、哪里是门、哪里是窗。CSS 装修墙面刷什么颜色、地板铺什么材质、家具怎么摆。JavaScript 水电和智能家居灯什么时候亮、门禁怎么开门、温度怎么自动调节。基础阶段建议按这个顺序推进HTML语法熟悉到能独立写一个带标题、段落、列表、图片、链接、表格、表单的页面再开始学CSS。别急着跳进框架的坑。7.2 新手最该避开的两个误区误区一不断刷新语法细节不动手写整页。看十遍a标签的用法不如实际写一个包含五个页面互相跳转的静态网站。HTML基础语法没有一个动作是从入门到精通的关键关键是把知识组合起来使用。误区二一开始就沉迷“高级写法”。比如试图用各种奇技淫巧去“模拟”页面元素而不去理解标签本身的语义。有些老教程里的写法今天看已经过时了比如用table做整体布局、用font改字体颜色这些都应该果断跳过直接学HTML5的标准语义化方式。我曾经带过一些新人总结下来那些进步快的都有一个共同点给自己设定“可交付的小目标”。比如“今天做一个个人名片页”“明天做一个课程表页面”“这一周给自己搭一个纯HTML的博客首页”。目标越小越具体越好因为HTML基础语法只有在一次次“把想法变成真实页面”的过程里才会真正内化成你自己的技能。按照这个路径走下去练上两三周你就能很自然地写出一份结构干净、语义清晰的HTML页面了。到那时候再回头看这篇博文里的每个标签和习惯你会发现自己已经可以举一反三也就真正迈进了前端世界的大门。