这门技术当年我是一晚上学会的玩了一个月之后才反应过来HTML其实是所有“看起来是网页”的东西的地基学它不亏。别管你现在是想做个人网站、想转行前端、想折腾自动化脚本、甚至只是想给自己的产品写个带样式的小页面HTML都是绕不开的第一站。这篇是基础教程的第一篇我会把下面这些事讲透HTML到底是什么、浏览器怎么把它变成画面、一份标准网页的骨架长什么样、最常用的一批标签怎么用怎么记以及我会顺手带出几个非常实际的小项目练习让代码真正落地。整篇文章面向零基础新手也适合学过一点但总记不住标签、理不清结构的人。跟着读完、敲完你至少能独立写出一个结构干净、标签基本不犯错、带表单和表格的完整页面也能看懂网上的源码在写什么。为了照顾完全没接触过的朋友我尽量用人话解释原理每一步都直接给可复制的代码和操作思路。1. HTML的定位和底层逻辑1.1 网页的本质是一堆“标记”过的文字不明真相的群众经常觉得网页很神秘其实你用浏览器打开任何一个网站然后鼠标右键选择“查看网页源代码”看到的无非是一堆被尖括号包裹的文字指令。HTMLHyperText Markup Language超文本标记语言干的事情就是一个图书编辑它负责把“标题”“正文”“图片”“链接”“按钮”这些内容标记出来让浏览器知道哪个是标题、哪个是段落、哪个能点。它不做复杂计算不处理交互逻辑也不负责让页面变得花里胡哨它只定义“这是什么”。CSS负责“长什么样”JavaScript负责“做什么反应”。这三兄弟配合才是我们在浏览器里看到的完整页面。所以学HTML的第一要务不是背多少标签而是先建立起“标记”的思维。你告诉浏览器这段文字是h1浏览器就把它显示成大号加粗的样子你告诉它你放了一张图片img它就去加载图片文件。标记对了页面结构就对了。标记错了浏览器只能瞎猜结果就是布局错乱、样式不生效、内容串位。1.2 为什么第一课不直接上CSS和JS见过很多新手一上来就开IDE、装一堆插件、同时学HTMLCSSJS结果学了三周还在复制粘贴。我的建议是HTML先单独学透别急着上CSS和JS。原因很简单HTML是你页面所有内容的骨架CSS和JS都是长在这副骨架上的肌肉和神经。骨架歪了后面的一切都跟着歪。你把HTML标签的语义、嵌套规则、属性用法这些基本功打牢了再学CSS选择器、学JS操作DOM都是事半功倍。反过来如果HTML半吊子就去啃CSS布局十有八九会陷入“不知道哪里没闭合导致整页样式爆炸”的痛苦中。还有一个很现实的原因HTML的信息密度低一本正经地学特别容易困但一旦配合实操就完全不同。这篇教程会在第三部分安排5个动手小练习你跟着敲一遍就知道HTML的学习曲线其实是所有编程语言里最友好的只要动手了就很难忘。2. 文档骨架那份“网页出身证明”到底怎么读2.1 DOCTYPE、html根标签和语言声明搜HTML资料满屏都是!doctype htmlhtml langzh-cnheadmeta charsetutf-8这串东西就是每个网页的身份证。先看第一行!doctype html它告诉浏览器“本页面按现代HTML5标准解析”。别看它简单漏了它浏览器会进入一种叫“怪异模式”的状态渲染规则直接回到十几年前的老标准你写的宽度、间距、盒模型都会莫名其妙地出问题。所以獴法很简单任何页面第一行永远写!doctype html这是底线。接下来是html标签它是整个HTML文档的根节点所有内容都装在它里面。langzh-cn是声明页面语言是简体中文这个属性能帮助搜索引擎识别页面语言也影响屏幕阅读器的发音规则不要改成en除非你页面真的全是英文。然后head部分里的meta charsetutf-8更是重中之重它告诉浏览器“页面文字用的字符编码是UTF-8”。这句话的作用是防止乱码尤其页面里有中文的时候漏了这句浏览器很可能把UTF-8编码的文字按别的编码解析直接显示成乱码。你可以自己试试把meta charset那行删掉页面里的中文十有八九会变成一堆乱七八糟的字符。2.2 head区常用标签和viewport的意义head里的内容不会直接显示在页面上但它承载着页面在浏览器外的各种信息。除了charset几个常见的meta nameviewport contentwidthdevice-width, initial-scale1.0 title页面标题/title meta namedescription content这里是页面描述 link relstylesheet hrefstyle.cssviewport是为了移动端适配用的。widthdevice-width就是让页面宽度等于设备屏幕宽度initial-scale1.0是初始缩放比为1。如果你做的是给手机看的页面这行必须有否则手机浏览器会按980px左右的默认宽度渲染页面字小得可怜还得手动缩放。title是浏览器标签栏显示的文字是SEO里权重最高的元素之一所以标题要写得有描述性比如“HTML基础教程(一) - 从零搭建你的第一个网页”就比“Untitled”强得多。description虽然不显示在页面里但搜索结果的摘要会引用它值得花心思写。link是引入外部CSS文件的方式注意它不是自闭合的变体而是正常标签后面再展开。2.3 body区才是真正的内容舞台body里面装的是用户能看到的一切。从文本、图片、视频到表单、按钮全部都在这个区域里。语义上一个页面有且只有一个body文档结构就是!doctype html html langzh-cn head meta charsetutf-8 title我的第一个网页/title /head body h1你好世界/h1 /body /html把这段代码保存成index.html双击用浏览器打开你就能看到页面上有一个大标题“你好世界”。这个流程每个人都能跑通而且从这一步开始你已经是个“能出活”的HTML开发者了。后面的内容都是在这个骨架上添砖加瓦。3. 新手必用的核心标签逐个拆解3.1 文本与标题标签怎么选才不会错文本是网页的基本单位标题层级又是文本里最重要的结构。用到最多的标签如下标签作用默认效果备注h1~h6定义六级标题逐级变小、加粗h1一个页面只用一次p段落上下留白独占一行段落之间不要用brbrstrong强调加粗加粗语义上表示“很重要”em强调斜体斜体语气强调span行内容器无效果配合CSS最常用br换行单行换行自闭合标签别写成br/brhr水平分隔线一条横线也表示主题切换这几个标签几乎覆盖了所有纯文字页面。新手最容易犯的错是以为h1~h6只是字号大小的区别于是乱用比如觉得h3比h1好看就用h3。实际标题层级对SEO和阅读体验影响非常大搜索引擎会按标题层级理解页面结构一个页面只有一个h1是最重要的主题下面用h2、h3分章节才是一篇文章应有的层次。你要做的是选对层级而不是选大小大小交给CSS去调。3.2 链接、图片和路径是80%页面的核心没有链接的网页跟一张PDF没有本质区别。链接的完整写法是a hrefhttps://example.com这个文字可以点击/a a hrefabout.html相对路径链接/a a hrefmailto:helloexample.com给我写信/a a hrefhttps://example.com target_blank relnoopener noreferrer新窗口打开/ahref是链接的目标地址可以是完整网址也可以是相对路径甚至可以是mailto:开头的邮箱协议。target_blank表示在新标签页打开但我建议凡是target_blank都顺手加上relnoopener noreferrer这是安全习惯不加的话新开的页面可以通过window.opener反控你原来的页面属于一个长期存在的安全隐患现在GitHub上很多代码审查都会卡这条。图片标签img是自闭合的只靠属性工作img srclogo.png alt公司Logo width200 height100src是图片地址alt是图片加载失败或屏幕阅读器场景下的替代文字。这个alt千万别省略既影响无障碍访问也影响SEO图片抓取工具就是靠它理解图片内容的。宽高属性可以写在HTML里也可以交给CSS但写宽高能避免图片加载时页面跳动。路径问题我再单独说一遍同目录下直接写文件名logo.png下级目录写images/logo.png上一级目录用../logo.png。很多人图省事复制网上以https://开头的完整图片地址你要是做演示、写测试页面这样用完全没问题等做正式项目图片资源最好下载到本地引用别把外部图片地址写死在生产环境里——哪天对方删图或防盗链你的页面就挂图了。3.3 列表不只是“点号罗列”HTML有三种列表无序列表ul、有序列表ol、自定义列表dl。不止文章提纲会用到你最后写出来的导航菜单、文章列表、商品列表基本都是列表结构。ul li苹果/li li香蕉/li li橘子/li /ul ol li第一步打开编辑器/li li第二步写代码/li /ol dl dtHTML/dt dd负责标记页面结构和内容/dd /dl无序列表适合没有先后顺序的内容有序列表适合有步骤的说明。自定义列表的结构稍微特殊一点是“术语描述”的配对关系术语用dt描述用dd。列表可以无限嵌套比如一个li里再塞一个ul做多级菜单就是用这个特性。3.4 表格别拿它治布局但功能很实用表格是处理结构化数据的最佳选择。一个完整的最小表格table thead tr th姓名/th th年龄/th th城市/th /tr /thead tbody tr td张三/td td25/td td北京/td /tr tr td李四/td td30/td td上海/td /tr /tbody /tablethead是表头区tbody是表体区tr是行th是表头单元格td是普通单元格。早期网页美工拿表格套页面布局那是历史遗留的土办法今天HTML有了专门做布局的语义标签表格就回到它该待的位置展示二维数据。想合并单元格比如一个单元格跨两列用colspan2跨两行用rowspan2这两个属性实施难度很低但实用性极高。3.5 表单前端与用户交互的入口表单是网页从“只读”变成“可交互”的转折点。一组经典的注册表单代码form action/register methodPOST label forusername用户名/label input typetext idusername nameusername placeholder请输入用户名 required label forpassword密码/label input typepassword idpassword namepassword placeholder至少8位 required label foremail邮箱/label input typeemail idemail nameemail p性别/p labelinput typeradio namegender valuemale 男/label labelinput typeradio namegender valuefemale 女/label p爱好/p labelinput typecheckbox namehobby valuecoding 编程/label labelinput typecheckbox namehobby valuereading 阅读/label label forcity城市/label select idcity namecity option valuebeijing北京/option option valueshanghai上海/option option valueguangzhou广州/option /select button typesubmit注册/button /form几个重点逐个说。label的for属性和表单控件的id是一一对应的点击“用户名”这几个字鼠标焦点会自动跳进对应的输入框这是提升体验的细节也是无障碍测试的基础项。input的name属性决定提交给后端时的参数名。比如input nameusername提交后服务器收到的是username输入值。没有name的输入框不会被提交所以这是表单里最容易漏、又最致命的属性。type有很多内置校验值email类型在手机上会弹出邮箱专用键盘number类型只能输数字date类型会调起原生日期选择器。用对类型往往比写一堆JS校验还省事。required是必填校验不用写JS浏览器原生就能拦住空提交。radio单选框同一组要共享同一个name才能做到互斥checkbox复选框最好也用同一个name并以数组形式收数据后端拿到的就是多个值。select的每个option里value是被提交的值用户看到的是标签内容。button typesubmit是提交按钮这里要小心在表单里一个按钮如果不显式写type默认就是submit很多新手在表单里用button包一个图标/button想当普通按钮结果点一下页面刷新了就是这个原因。想在表单内放非提交按钮记得写typebutton。3.6 语义化标签和div的区别div和span这俩标签本身没有任何语义就是纯粹的容器。早年间开发者全站都是div堆出来的现在HTML5提供了一批语义化标签让代码结构能被人和机器一眼看懂标签含义适用场景header页头站点头部、文章头部nav导航菜单、面包屑main主体内容页面核心区域一页只用一次section章节文章里的大段落article文章独立完整的内容块aside侧边栏广告、相关推荐footer页脚版权、联系方式把这些标签当div用代码的可读性和SEO都会明显提升。搜索引擎抓取页面时会用这些标签来推断“哪块区域是主导航”“哪块区域是正文”。屏幕阅读器访问时也会直接跳到main开始读正文。说句实在话语义化做好之后你的页面在搜索结果摘要里的展示效果、在各平台的抓取正确率都比乱用div高一个档次。4. 动手练习用三十分钟敲出五个能跑的页面4.1 练手项目一个人名片页第一练做一个个人名片页用到的全是前面刚讲过的标签。你新建一个card.html复制下面的代码!doctype html html langzh-cn head meta charsetutf-8 title我的个人名片/title /head body header h1你好我是Tom/h1 p一个正在学习前端的开发者/p /header main section h2关于我/h2 p我喜欢写代码、读书和户外运动。这个页面是用纯HTML写的。/p /section section h2技能列表/h2 ul liHTML进行中/li liCSS还没开始/li liJavaScript排队中/li /ul /section section h2联系我/h2 a hrefmailto:tomexample.com发送邮件/a /section /main footer p© 2024 Tom/p /footer /body /html这段代码用到了完整的文档骨架、标题层级、列表、邮件链接、语义化标签。你保存后用浏览器打开应该能看到一个结构清晰的个人名片。这一步要做的重点是观察标题大小变化、段落默认间距、列表的对齐方式这些都是浏览器默认样式给的后面学CSS的时候你就要把这些默认样式改写成自己的设计。4.2 练手项目二带表格的图书清单第二练做一个图书清单页。表格是数据展示利器顺手把rowspan和colspan都用上h2本月阅读清单/h2 table border1 thead tr th书名/th th作者/th th状态/th /tr /thead tbody tr tdHTML Canvas 核心技法/td td张三丰/td td rowspan2在读/td /tr tr tdCSS 揭秘/td td李四/td /tr tr tdJavaScript高级程序设计/td td王五/td td未读/td /tr /tbody tfoot tr td colspan2总计/td td3本/td /tr /tfoot /tableborder1是给表格加边框的旧写法现在正式开发不推荐属性样式应该交给CSS但初学者用来观察表格结构非常直观教学场景随便用。rowspan2让“在读”这个单元格竖着跨两行colspan2让“总计”横着跨两列这俩一横一竖配合使用很多复杂报表结构一眼就能看懂。4.3 练手项目三注册表单页第三练做一个稍微完整点的注册表单。这步会把前面表单的知识点串起来h2用户注册/h2 form action# methodPOST p label forusername用户名/label input typetext idusername nameusername required placeholder6-12个字符 /p p label foremail邮箱/label input typeemail idemail nameemail required placeholderyouexample.com /p p label forage年龄/label input typenumber idage nameage min1 max120 /p fieldset legend性别/legend labelinput typeradio namegender valuemale 男/label labelinput typeradio namegender valuefemale 女/label labelinput typeradio namegender valueother 其他/label /fieldset p label forintro个人简介/label textarea idintro nameintro rows4 cols30/textarea /p p button typesubmit注册/button button typereset重置/button /p /formfieldset和legend是给一组表单控件画一个带标题的框单选框这种分组的控件放在里面页面结构更清晰屏幕阅读器读起来也更友好。textarea是多行文本输入框自带rows和cols控制初始尺寸。typereset可以把表单全部重置为初始值写demo时常用正式产品里一般不放用户体验容易误触。4.4 练手项目四迷你博客文章页第四练把文章页的骨架搭出来。这个练的主要是结构思维考虑标题、段落、引用、图片、导航怎么组合nav ul lia href#首页/a/li lia href#技术/a/li lia href#关于/a/li /ul /nav article header h1我的第一篇HTML博客/h1 p发布时间2024-01-01 作者Tom/p /header section h2为什么写博客/h2 p记录学习过程是最好的复习方式。/p blockquote码字是思考的外化。/blockquote /section section h2使用了哪些标签/h2 p本文用了 codeheader/code、codenav/code、codearticle/code、codesection/code 等语义化标签。/p /section /article aside h2相关阅读/h2 ul lia href#CSS基础教程/a/li lia href#JavaScript入门/a/li /ul /aside footer p© 2024 我的博客/p /footerblockquote是长引用的专用标签code是用来显示代码片段的行内标签。注意看article内部可以有自己的header和section这种嵌套结构就是HTML灵活性的体现一个页面可以由无数个“文章块”拼起来。你把这段代码跑起来之后会发现默认样式下各区块间是有明显间距的这些间距将来都可以用CSS精确控制。4.5 练手项目五返回顶部按钮的HTML结构很多新手搜“HTML一键返回顶部”其实那不是HTML的功劳是JavaScript的活儿。但HTML结构可以先把按钮架子搭好。一个最小实现button idbackToTop typebutton返回顶部/button script var backBtn document.getElementById(backToTop); backBtn.addEventListener(click, function() { window.scrollTo({ top: 0, behavior: smooth }); }); /script这个按钮点击后页面会平滑滚动到顶部。window.scrollTo是浏览器提供的原生方法behavior: smooth开启平滑滚动。把这段代码放到一个内容很长的页面底部你就能立刻感受到“返回顶部”这个功能是怎么实现的。之所以在HTML教程里提它是提醒你页面上的每个按钮、每个交互区域背后都有对应的HTML结构打底结构合理后面上JS就是水到渠成的事。等学到CSS你还可以给这个按钮加上浮动定位让它固定在右下角。5. HTML的实际应用范围比你想象中广5.1 HTML不只是网页学HTML之前很多人以为它只能用来做网站其实不是。HTML作为一种结构化标记语言被嵌入了大量工具和场景里HTML转Markdown是用工具把网页内容转成便于写作的纯文本格式写文档、做笔记时特别常用开源工具pandoc一行命令就能搞定HTML邮件则是每个做运营推广的人都要面对的东西——很多邮件客户端不支持CSS的高级特性写邮件HTML要用表格布局和内联样式原理和网页一样但约束更多这个领域其实很深PyQt5里显示HTML是桌面开发中炫酷界面的常用套路——你不需要拿Qt的控件一个个拼界面直接写一段HTML当成界面用QWebEngineView就能加载出来比传统桌面UI开发灵活得多。这些场景说明HTML这个技能是“通用资产”你学会了它不管以后走哪条技术路线都用得上哪怕是用自动化工具爬取网页数据懂HTML结构也比不懂的人排查问题快好几倍。5.2 打包多个HTML和工具选择说到“打包多个HTML”实际中有两种常见需求一种是把多个页面整合成一份文件比如做课件、做离线文档可以用iframe把其他页面嵌进来或者用JavaScript读取多个HTML片段拼到一个页面里另一种是把整个站点的静态文件部署到服务器上这种通常不用“打包”直接把文件夹扔到Nginx或者任意静态托管平台就能跑。新手阶段你要搞清楚的区别是一个HTML文件就是一个独立页面多个页面之间靠a链接串起来文件名就是URL路径的一部分。工具层面强烈推荐VSCode作为编辑器装一个Live Server插件写代码时右键“Open with Live Server”浏览器自动刷新体验直接对标专业前端开发。不建议一开始就用那些“所见即所得”的拖拽工具因为那会掩盖HTML本身的结构等你真要动手改代码时会无从下手。我一直觉得HTML的练习就应该老老实实手写标签写完再用浏览器看效果这个过程建立的“代码到画面”的映射感是任何工具都替代不了的。5.3 关于标签化属性和小功能点搜索热词里有人提“HTML的全部标签化属性”这个问题不能一口吃成胖子HTML4时代标签和属性少但现在HTML5的标签有上百个全局属性也有二十多个一篇教程不可能列完。正确的学习路径是先把用得最狠的这批掌握玩熟之后再按需查MDN文档用多了自然就记住了。比如全局属性里的id、class、style、title、>!-- 导航区 -- nav ul lia href#首页/a/li /ul /nav缩进让视觉上的层级关系一目了然注释标明每个区域的功能。这样打开代码即使隔了一个月再看也能秒懂当时的结构思路。VSCode里可以装Auto Close Tag插件自动补全闭合标签格式化快捷键ShiftAltF可以一键整理缩进这些都建议尽早安排上。6.3 一些独家的小技巧和避坑心得写HTML一年后你回头看很多“看起来很高端”的报错其实是特别低级的原因。比如我踩过最久的一次坑写好的图片不显示排查半天发现文件名是photo.JPG代码里写的是photo.jpg而部署的Linux服务器文件名严格区分大小写Windows本地预览没问题一上线就挂。所以开发时文件名和代码路径最好统一小写以连字符连接比如my-photo.jpg这是各方面的最佳实践。另外如果你在网上复制别人的HTML代码来学习尤其看清楚代码里的资源文件路径别人引用了外部JS、CSS、图片但没给全你直接保存下来打开必然残缺这不是你的问题但很多人困在这一步怀疑自己学不会。复现案例时重点关注HTML结构和内联样式外部资源可以自己造一份替代或者干脆删掉先把结构学通。最后强调一个很多教程不会讲的事HTML标点符号大多数必须用英文半角。有些新手把输入法切到中文状态顺手打出一个全角双引号“整个标签直接失效这种错误肉眼很难发现。所以写代码时建议把输入法切到英文模式或者用支持自动切换引号的编辑器插件能省掉很多毫无意义的排查时间。HTML入门本质上就是一场“标记游戏”把内容正确归类把层级理清把属性用对剩下的就是不断积累。这篇是第一篇讲的全是骨架和地基下一篇我会接着讲CSS基础到时候你会发现原来页面好看是这么回事。如果你想现在就多做练习打开编辑器把上面五个小项目按自己的想法改一改不管是换内容还是加标签能改对、能跑通说明你已经真正入门了。