1. 从一个最简单的网页聊起先不扯那些复杂的概念你打开任何一个网站看到的页面结构、文字、图片、按钮、输入框底层都是由一种叫HTML的东西搭建起来的。就拿你现在正在看的这个页面来说你看到的每个标题、每个段落、每个列表项背后都是一行一行的HTML代码在支撑。HTML的全称是HyperText Markup Language中文通常翻译成“超文本标记语言”。拆开来看HyperText表示它不只是普通文字还包括链接、图片、视频这些多媒体内容Markup Language表示它不是一门编程语言而是一种标记语言。这里有个关键点很多人会忽略HTML不是编程语言它没有逻辑判断没有变量没有循环。它的工作方式很简单——用一堆标签把内容包起来告诉浏览器“这段是标题”“这段是段落”“这张是图片”。我第一次接触HTML的时候也觉得这个东西有点“笨”连11等于几都算不了。但后来理解了HTML承担的职责本来就不是计算而是结构化。它就像一栋房子的框架和墙体规定了哪里是客厅、哪里是卧室、哪里是厨房。JavaScript负责水电和智能家居CSS负责装修和美化而HTML把最基本的功能分区确定下来任何人都能一眼看懂这个页面的骨架。2. 浏览器是怎么把HTML变成你看到的页面的要理解HTML光知道标签是不够的你还得知道它在浏览器里是怎么“跑”起来的。其实这个过程远比你想象的简单直接。2.1 一次完整的页面加载过程你在地址栏输入一个网址按下回车。浏览器向服务器发出请求服务器把HTML文件连同CSS、JS、图片等资源一起返回给你。浏览器拿到HTML文件之后会从第一行开始逐行读取内容。怎么读取这里有一个有趣的机制。浏览器内部有几个解析器其中HTML解析器会把文件里的标签和文字拆开构建出一棵结构树。这棵树有专门的名称叫做DOM树Document Object Model。你可以把它理解成一张组织架构图html标签是董事长head是幕僚团队body是业务部门body里的p、h1、div这些标签就是部门里的具体岗位。构建DOM树的过程中浏览器发现某个标签引用了外部的CSS文件就去拉取CSS并解析发现引用了外部JS文件就去拉取JS并执行。等DOM树和样式都准备好浏览器开始布局和绘制最终把内容呈现在你的屏幕上。2.2 为什么HTML学起来快但深入难HTML的语法简单到几乎可以当场就学会。但真正难的是什么是语义化是结构的合理性是可维护性是在没有可视化工具辅助的情况下在大脑里构建出清晰的页面层次。很多人会经历这样一个阶段学了一周HTML感觉全学会了能写出一堆标签页面也能显示出来了。但一接到真实的项目需求比如把一张设计稿变成一个页面就开始发怵。原因在于真实的页面不是几个标签堆叠那么简单。你需要考虑用div还是用语义化标签导航用ul还是nav表单的label要不要关联input图片的alt该怎么写这些细节决定了你的页面是“能看”还是“好用”。也就是说HTML的入门门槛很低但做一个合格的HTML结构工程师需要掌握的远不止那几十个标签。3. 基础结构与核心标签逐个拆解接下来进入正题。我们把这套标记语言的核心内容掰开揉碎一步一步走。3.1 每个HTML文件都有的固定骨架先看一段最基础的代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1你好HTML/h1 p这是一个段落。/p /body /html你想学HTML第一步不是背标签而是吃透这段固定的骨架。我来逐行解释。第一行的!DOCTYPE html是文档类型声明。注意它不是一个标签而是一条声明语句。它的作用是告诉浏览器“这是一个标准的HTML5文档用现代模式来解析我”。如果不写这一行浏览器会进入一种叫“怪异模式”的状态页面一些基础的样式都会出问题。这个东西平时没人注意但漏掉之后磨很久都排查不出来。然后是html标签这是整个文档的根节点。所有的内容都包在它里面。langzh-CN这个属性说明页面的主要语言是简体中文一方面方便浏览器做出正确的语言相关行为另一方面对无障碍访问很重要屏幕阅读器需要知道用哪种读音规则来朗读页面。head区域存放的是页面的元信息和配置信息这些内容不会直接显示在页面上但决定了页面如何被解析、被描述。meta charsetUTF-8声明字符编码。如果你的页面里不写这一行中文很可能变成乱码。meta nameviewport是移动端适配的利器它告诉移动端的浏览器页面应该按什么视口宽度来渲染不写这个手机上打开的页面字会缩小成一团。title标签里的内容会显示在浏览器的标签页上同时是搜索引擎结果里的标题也是收藏夹里的名字重要性被大多数人低估了。进入body这里才是用户能看到的全部内容。你现在打开任何一个网页右键选择“查看网页源代码”看到的最外层结构一定是上面这套格式。3.2 认识三类标签双标签、单标签、属性HTML里的标签分为两类。双标签是有开始有结束的比如p和/p、h1和/h1、div和/div。单标签是自闭合的最重要、最常用的有三个img用于插入图片br用于换行input用于创建输入控件。标签可以带属性。属性写在开始标签里格式是属性名属性值。比如img srcimages/logo.png alt网站LOGO width200src告诉浏览器图片的路径alt是图片加载失败或屏幕阅读器朗读时显示的替代文本width指定图片的宽度。属性之间用空格隔开顺序并不重要。一个最容易犯的错是属性值漏写引号或者单双引号混用。HTML5标准允许省略一些引号但我强烈建议所有项目一律使用双引号原因有两个一是团队协作时风格统一能避免大量无意义的merge冲突二是某些情况下单引号嵌套会直接报错排查起来很费劲。3.3 排版与语义化标签从div堆砌到结构化设计老一代网页里你几乎只看到一种标签div。它太万能了什么场景都能包一层。但带来的问题是到处都是没有含义的div别人看你的代码还得猜这块区域是干嘛的。HTML5引入了几个语义化标签算是给这个困局开了一剂良药header页头区域一般放网站的LOGO和导航栏nav导航区块专门放菜单链接main页面主体内容区一个页面理论上只能有一个article独立的文章或内容块section通用的内容分区类似文章里的章节aside侧边栏放相关推荐或辅助信息footer页脚区域通常放版权信息和联系方式举个例子。没有语义化标签的时候一个顶部导航区域大概是这样的div classheader div classlogo某网站/div div classnav ul lia href#首页/a/li lia href#关于/a/li /ul /div /div用语义化标签改写后结构一眼就能看懂header span classlogo某网站/span nav ul lia href#首页/a/li lia href#关于/a/li /ul /nav /header这两种写法在页面上的视觉效果几乎一模一样但从代码可读性、SEO、无障碍访问三个角度来看差异巨大。搜索引擎爬虫会优先识别语义化标签里的内容屏幕阅读器也会根据这些标签给视障用户提供正确的页面朗读顺序。3.4 列表、表格、表单三个高频场景一网打尽列表分为无序列表ul、有序列表ol和自定义列表dl三种日常开发里无序列表用得最狠导航菜单、商品列表、分类展示清一色都是ul li的结构。表格在HTML里的历史很长语法也很啰嗦需要table、tr、th、td四个标签配合才能撑起一张最简单的表格。需要合并单元格的时候还要用到rowspan和colspan这两个属性。现在的页面布局早就不用表格做了但在展示数据报表、日历、价目表这些结构化数据时表格依然是不可或缺的首选。表单是HTML里和应用交互最密切的部分核心标签有form、input、textarea、select、label和button。写表单的时候有一个常被新手忽略但对用户体验影响极大的细节——label标签必须通过for属性和输入框的id关联起来这样点击文字的时候就能自动聚焦到对应的输入框。label forusername用户名/label input typetext idusername nameusername还有一个必被问到的细节input的type属性非常多有text、password、email、number、date、file、checkbox、radio、submit等等。不同的type会调起不同的输入框样式比如email类型会在手机上弹出带符号的键盘number类型弹出数字键盘。所以写表单时能精确设置type的尽量精确这对移动端用户的输入体验是巨大的提升。4. 用双手积累经验手写一个信息展示页理论讲完实操跟上。我带你从头到尾手写一个简单的个人信息展示页把上面这些标签通通用一遍。4.1 准备工具记事本都可以但有更好的选择硬件和软件条件几乎等于零门槛。一个记事本就能写HTML文件写完了把扩展名从.txt改成.html双击用浏览器打开就能看到效果。但日常开发这么做效率太低。我建议装一个编辑器选择一个免费、轻量、插件生态丰富的文本编辑器比如VS Code。装好后可以装一个叫Live Server的插件它能起一个本地服务你在编辑器里每次保存文件浏览器就自动刷新省去手动切换窗口按F5的步骤这个体验差异能直接影响你学习时的专注度。4.2 照着做5分钟搭出页面骨架打开编辑器新建一个文件命名为index.html把下面的代码贴进去保存。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title /head body header h1我是张三/h1 nav ul lia href#about关于我/a/li lia href#skills技能/a/li lia href#contact联系方式/a/li /ul /nav /header main section idabout h2关于我/h2 p我对Web开发感兴趣正在学习HTML、CSS和JavaScript。/p img srchttps://picsum.photos/200/200 alt我的照片占位图 /section section idskills h2我的技能/h2 ul li熟悉HTML基础标签/li li了解CSS样式入门/li li正在攻克JavaScript/li /ul /section section idcontact h2联系方式/h2 table tr th方式/th th地址/th /tr tr td邮箱/td tdzhangsanexample.com/td /tr tr td联系电话/td td138-0000-0000/td /tr /table /section /main footer p版权信息 © 2024 张三/p /footer /body /html你打开这个文件页面上会显示一个标题、三个导航链接、一张图片、一个技能列表、一个联系表格和一行版权信息。整个页面的信息架构是清晰的顶部是页头中间是主体底部是页脚。你看这个页面的时候应该能有意识地感受到“哪部分结构对应哪块代码”这就是HTML学习的最重要心法——看到页面联想代码看到代码脑补页面。4.3 给页面做一个必要的体检验证工具的使用写完页面之后建议做一次HTML规范验证。业内常规做法是把这个页面里的代码贴到W3C的HTML验证工具里它会帮你检查是否有标签不闭合、属性值不规范等错误。这个习惯从一开始就养成能省掉后期很多兼容性的坑。我第一次看到一个满屏红色报错的验证报告的时候还挺受打击的。比如忘记给html标签加lang属性、alt属性为空、section缺少标题等等都是一些细节问题。修复的过程比写页面本身更涨经验因为你会被迫去查这些报错背后的规范到底在说什么。5. 踩坑与避坑想清楚这几个问题速度会翻倍学HTML最大的障碍不是你记不住标签而是你陷入几个典型误区和坑里出不来。下面这几个问题和我的经验一起写出来希望你能少走弯路。5.1 标签为什么套错了层级就不对这里要记住一条铁律HTML的结构必须是一个嵌套的树或者说像一个洋葱一层包着一层不能交叉。什么叫交叉看一个错误示例p这是一段文字 strong加粗的那部分/p/strong这段代码里p标签还没闭合strong标签就跨出去了。浏览器面对这种代码会启动容错机制自己猜测你的意图去修复。不同浏览器猜测的结果可能不同于是出现了“同一份代码在不同浏览器里显示效果不一样”的著名现象。正确的写法是像瓶子套盖子一样一层层闭合后开的标签先关掉p这是一段文字 strong加粗的那部分/strong/p实操心得写完一个嵌套标签养成习惯去数一数每个标签是不是都闭合了。编辑器通常有代码缩进和颜色高亮来辅助但最快的方法是鼠标悬停在一个标签上看它对应的结束标签有没有被高亮出来。如果悬停半天没反应大概率这个标签就没闭合。5.2 中文乱码和字符编码的坑自己本地新建HTML文件发现浏览器里打开全是乱码第一反应别改内容先检查head区域有没有这一行meta charsetUTF-8如果没有或者放在了title标签之后浏览器默认会用系统编码去解析文件而中文字符在错误的编码方案下就会变成一堆看不懂的符号。此外如果你用记事本写代码然后另存一定注意保存时把编码选为UTF-8否则即使meta声明了UTF-8文件本身是用别的编码保存的照样乱。天天和中文打交道的开发者把这条大坑记在心里文件保存编码、页面声明编码、服务器响应头编码三者必须一致缺一个中文就乱。5.3 图片不显示路径问题排查思路img标签的src属性指向图片路径。路径有两种绝对路径比如https://example.com/images/pic.jpg和相对路径比如images/pic.jpg。新手最常见的问题就是相对路径写错。区分一个简单的方法路径里开头有没有./和../。./表示当前目录可以省略../表示上一级目录不可以省略。假设你的项目目录结构是这样的my-site/ ├── index.html └── images/ └── logo.png在index.html里引用图片应该写images/logo.png或者更严谨一点写./images/logo.png。如果你把HTML放在src目录下而图片在根目录的images里需要../images/logo.png才能找到。如果图片就是显示不出来优先检查三个东西文件名的大小写服务器上的Linux系统对大小写敏感Logo.png和logo.png不是同一个文件、扩展名是否正确、属性的引号是否完整。5.4 媒体资源跨域加载与性能意识在本地写HTML时你会经常在src属性里写网上的图片地址就像上面示例里用的那个占位图服务。这种跨域加载方式在开发调试阶段很方便但放在生产环境会有两个隐患一是图片加载依赖第三方服务对方挂了图就没了二是你有意识地引入了外部请求却没想过这会给页面加载增加额外的时间开销。养成一个习惯正式发布的页面图片、CSS、JS文件尽量放在自己的服务器上。这一条在刚开始学的时候不用彻底贯彻但心里要有这层意识。5.5 千万别直接在浏览器里打开就完事了新手写完HTML喜欢直接双击文件在浏览器中打开看到页面出来就觉得完成了。这在学习初期可以但很快就该把习惯升级为“本地起一个服务器”。为什么因为浏览器的安全限制很多能力只在HTTP协议下才能正常使用直接通过文件协议打开时一些浏览器特性会被禁用而且模块化JavaScript、fetch请求都会出问题。最简单的方案是刚才提到的Live Server插件。学会使用本地开发服务器是HTML学习路线里值得尽早补上的一课。6. 接下来该怎么走给新手的路线建议HTML不是终点它是Web开发这趟旅程的起点。掌握了HTML基础之后合理的下一步是CSS然后是JavaScript。CSS负责样式。控制元素的颜色、大小、间距、布局方式让页面从素颜变成化妆。包括Flexbox布局、Grid布局、响应式设计都是CSS这条线里的重点。JavaScript负责行为。点击按钮弹出对话框、表单校验、数据的获取与渲染这些交互逻辑都由JS完成。它是真正的编程语言有变量、有函数、有对象有逻辑控制。浏览器开发者工具DevTools是你随时随地的得力助手。在页面上右键选择“检查”你就能看到所有元素的HTML结构和对应的样式。把实操和工具结合起来学习效率会直线上升。如果你还想更进一步可以了解后端开发比如用Node.js、Python之类的语言去写接口也可以深入前端框架比如学习组件化的开发思路用组件来构建大型应用。但这一切的大前提是你对HTML有扎实的理解——知道一个页面的结构应该怎么搭语义怎么选层级怎么规划。地基稳了上层建筑才立得住。我给不少人做过上手Web开发的引路人印象里学得最快的一批人没有一个是一上来就闷头抄代码的。他们普遍有一个共性会去动手改代码、拆页面、重建页面并且长年习惯直接阅读官方文档用第一手资料而非碎片化的二创教程来校正自己的认知。HTML领域也是这样打开一份官方文档把标签列表一个个看下来再对照一个你喜欢的网站用开发者工具拆它的结构这一套组合拳下来你的HTML水平会远超只刷教程视频的人。 
长河君 · 2026/10/21 6:56:39 · 阅读 1.2k HTML入门：从基础标签到语义化结构的完整指南
1. 从一个最简单的网页聊起先不扯那些复杂的概念你打开任何一个网站看到的页面结构、文字、图片、按钮、输入框底层都是由一种叫HTML的东西搭建起来的。就拿你现在正在看的这个页面来说你看到的每个标题、每个段落、每个列表项背后都是一行一行的HTML代码在支撑。HTML的全称是HyperText Markup Language中文通常翻译成“超文本标记语言”。拆开来看HyperText表示它不只是普通文字还包括链接、图片、视频这些多媒体内容Markup Language表示它不是一门编程语言而是一种标记语言。这里有个关键点很多人会忽略HTML不是编程语言它没有逻辑判断没有变量没有循环。它的工作方式很简单——用一堆标签把内容包起来告诉浏览器“这段是标题”“这段是段落”“这张是图片”。我第一次接触HTML的时候也觉得这个东西有点“笨”连11等于几都算不了。但后来理解了HTML承担的职责本来就不是计算而是结构化。它就像一栋房子的框架和墙体规定了哪里是客厅、哪里是卧室、哪里是厨房。JavaScript负责水电和智能家居CSS负责装修和美化而HTML把最基本的功能分区确定下来任何人都能一眼看懂这个页面的骨架。2. 浏览器是怎么把HTML变成你看到的页面的要理解HTML光知道标签是不够的你还得知道它在浏览器里是怎么“跑”起来的。其实这个过程远比你想象的简单直接。2.1 一次完整的页面加载过程你在地址栏输入一个网址按下回车。浏览器向服务器发出请求服务器把HTML文件连同CSS、JS、图片等资源一起返回给你。浏览器拿到HTML文件之后会从第一行开始逐行读取内容。怎么读取这里有一个有趣的机制。浏览器内部有几个解析器其中HTML解析器会把文件里的标签和文字拆开构建出一棵结构树。这棵树有专门的名称叫做DOM树Document Object Model。你可以把它理解成一张组织架构图html标签是董事长head是幕僚团队body是业务部门body里的p、h1、div这些标签就是部门里的具体岗位。构建DOM树的过程中浏览器发现某个标签引用了外部的CSS文件就去拉取CSS并解析发现引用了外部JS文件就去拉取JS并执行。等DOM树和样式都准备好浏览器开始布局和绘制最终把内容呈现在你的屏幕上。2.2 为什么HTML学起来快但深入难HTML的语法简单到几乎可以当场就学会。但真正难的是什么是语义化是结构的合理性是可维护性是在没有可视化工具辅助的情况下在大脑里构建出清晰的页面层次。很多人会经历这样一个阶段学了一周HTML感觉全学会了能写出一堆标签页面也能显示出来了。但一接到真实的项目需求比如把一张设计稿变成一个页面就开始发怵。原因在于真实的页面不是几个标签堆叠那么简单。你需要考虑用div还是用语义化标签导航用ul还是nav表单的label要不要关联input图片的alt该怎么写这些细节决定了你的页面是“能看”还是“好用”。也就是说HTML的入门门槛很低但做一个合格的HTML结构工程师需要掌握的远不止那几十个标签。3. 基础结构与核心标签逐个拆解接下来进入正题。我们把这套标记语言的核心内容掰开揉碎一步一步走。3.1 每个HTML文件都有的固定骨架先看一段最基础的代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个页面/title /head body h1你好HTML/h1 p这是一个段落。/p /body /html你想学HTML第一步不是背标签而是吃透这段固定的骨架。我来逐行解释。第一行的!DOCTYPE html是文档类型声明。注意它不是一个标签而是一条声明语句。它的作用是告诉浏览器“这是一个标准的HTML5文档用现代模式来解析我”。如果不写这一行浏览器会进入一种叫“怪异模式”的状态页面一些基础的样式都会出问题。这个东西平时没人注意但漏掉之后磨很久都排查不出来。然后是html标签这是整个文档的根节点。所有的内容都包在它里面。langzh-CN这个属性说明页面的主要语言是简体中文一方面方便浏览器做出正确的语言相关行为另一方面对无障碍访问很重要屏幕阅读器需要知道用哪种读音规则来朗读页面。head区域存放的是页面的元信息和配置信息这些内容不会直接显示在页面上但决定了页面如何被解析、被描述。meta charsetUTF-8声明字符编码。如果你的页面里不写这一行中文很可能变成乱码。meta nameviewport是移动端适配的利器它告诉移动端的浏览器页面应该按什么视口宽度来渲染不写这个手机上打开的页面字会缩小成一团。title标签里的内容会显示在浏览器的标签页上同时是搜索引擎结果里的标题也是收藏夹里的名字重要性被大多数人低估了。进入body这里才是用户能看到的全部内容。你现在打开任何一个网页右键选择“查看网页源代码”看到的最外层结构一定是上面这套格式。3.2 认识三类标签双标签、单标签、属性HTML里的标签分为两类。双标签是有开始有结束的比如p和/p、h1和/h1、div和/div。单标签是自闭合的最重要、最常用的有三个img用于插入图片br用于换行input用于创建输入控件。标签可以带属性。属性写在开始标签里格式是属性名属性值。比如img srcimages/logo.png alt网站LOGO width200src告诉浏览器图片的路径alt是图片加载失败或屏幕阅读器朗读时显示的替代文本width指定图片的宽度。属性之间用空格隔开顺序并不重要。一个最容易犯的错是属性值漏写引号或者单双引号混用。HTML5标准允许省略一些引号但我强烈建议所有项目一律使用双引号原因有两个一是团队协作时风格统一能避免大量无意义的merge冲突二是某些情况下单引号嵌套会直接报错排查起来很费劲。3.3 排版与语义化标签从div堆砌到结构化设计老一代网页里你几乎只看到一种标签div。它太万能了什么场景都能包一层。但带来的问题是到处都是没有含义的div别人看你的代码还得猜这块区域是干嘛的。HTML5引入了几个语义化标签算是给这个困局开了一剂良药header页头区域一般放网站的LOGO和导航栏nav导航区块专门放菜单链接main页面主体内容区一个页面理论上只能有一个article独立的文章或内容块section通用的内容分区类似文章里的章节aside侧边栏放相关推荐或辅助信息footer页脚区域通常放版权信息和联系方式举个例子。没有语义化标签的时候一个顶部导航区域大概是这样的div classheader div classlogo某网站/div div classnav ul lia href#首页/a/li lia href#关于/a/li /ul /div /div用语义化标签改写后结构一眼就能看懂header span classlogo某网站/span nav ul lia href#首页/a/li lia href#关于/a/li /ul /nav /header这两种写法在页面上的视觉效果几乎一模一样但从代码可读性、SEO、无障碍访问三个角度来看差异巨大。搜索引擎爬虫会优先识别语义化标签里的内容屏幕阅读器也会根据这些标签给视障用户提供正确的页面朗读顺序。3.4 列表、表格、表单三个高频场景一网打尽列表分为无序列表ul、有序列表ol和自定义列表dl三种日常开发里无序列表用得最狠导航菜单、商品列表、分类展示清一色都是ul li的结构。表格在HTML里的历史很长语法也很啰嗦需要table、tr、th、td四个标签配合才能撑起一张最简单的表格。需要合并单元格的时候还要用到rowspan和colspan这两个属性。现在的页面布局早就不用表格做了但在展示数据报表、日历、价目表这些结构化数据时表格依然是不可或缺的首选。表单是HTML里和应用交互最密切的部分核心标签有form、input、textarea、select、label和button。写表单的时候有一个常被新手忽略但对用户体验影响极大的细节——label标签必须通过for属性和输入框的id关联起来这样点击文字的时候就能自动聚焦到对应的输入框。label forusername用户名/label input typetext idusername nameusername还有一个必被问到的细节input的type属性非常多有text、password、email、number、date、file、checkbox、radio、submit等等。不同的type会调起不同的输入框样式比如email类型会在手机上弹出带符号的键盘number类型弹出数字键盘。所以写表单时能精确设置type的尽量精确这对移动端用户的输入体验是巨大的提升。4. 用双手积累经验手写一个信息展示页理论讲完实操跟上。我带你从头到尾手写一个简单的个人信息展示页把上面这些标签通通用一遍。4.1 准备工具记事本都可以但有更好的选择硬件和软件条件几乎等于零门槛。一个记事本就能写HTML文件写完了把扩展名从.txt改成.html双击用浏览器打开就能看到效果。但日常开发这么做效率太低。我建议装一个编辑器选择一个免费、轻量、插件生态丰富的文本编辑器比如VS Code。装好后可以装一个叫Live Server的插件它能起一个本地服务你在编辑器里每次保存文件浏览器就自动刷新省去手动切换窗口按F5的步骤这个体验差异能直接影响你学习时的专注度。4.2 照着做5分钟搭出页面骨架打开编辑器新建一个文件命名为index.html把下面的代码贴进去保存。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的个人主页/title /head body header h1我是张三/h1 nav ul lia href#about关于我/a/li lia href#skills技能/a/li lia href#contact联系方式/a/li /ul /nav /header main section idabout h2关于我/h2 p我对Web开发感兴趣正在学习HTML、CSS和JavaScript。/p img srchttps://picsum.photos/200/200 alt我的照片占位图 /section section idskills h2我的技能/h2 ul li熟悉HTML基础标签/li li了解CSS样式入门/li li正在攻克JavaScript/li /ul /section section idcontact h2联系方式/h2 table tr th方式/th th地址/th /tr tr td邮箱/td tdzhangsanexample.com/td /tr tr td联系电话/td td138-0000-0000/td /tr /table /section /main footer p版权信息 © 2024 张三/p /footer /body /html你打开这个文件页面上会显示一个标题、三个导航链接、一张图片、一个技能列表、一个联系表格和一行版权信息。整个页面的信息架构是清晰的顶部是页头中间是主体底部是页脚。你看这个页面的时候应该能有意识地感受到“哪部分结构对应哪块代码”这就是HTML学习的最重要心法——看到页面联想代码看到代码脑补页面。4.3 给页面做一个必要的体检验证工具的使用写完页面之后建议做一次HTML规范验证。业内常规做法是把这个页面里的代码贴到W3C的HTML验证工具里它会帮你检查是否有标签不闭合、属性值不规范等错误。这个习惯从一开始就养成能省掉后期很多兼容性的坑。我第一次看到一个满屏红色报错的验证报告的时候还挺受打击的。比如忘记给html标签加lang属性、alt属性为空、section缺少标题等等都是一些细节问题。修复的过程比写页面本身更涨经验因为你会被迫去查这些报错背后的规范到底在说什么。5. 踩坑与避坑想清楚这几个问题速度会翻倍学HTML最大的障碍不是你记不住标签而是你陷入几个典型误区和坑里出不来。下面这几个问题和我的经验一起写出来希望你能少走弯路。5.1 标签为什么套错了层级就不对这里要记住一条铁律HTML的结构必须是一个嵌套的树或者说像一个洋葱一层包着一层不能交叉。什么叫交叉看一个错误示例p这是一段文字 strong加粗的那部分/p/strong这段代码里p标签还没闭合strong标签就跨出去了。浏览器面对这种代码会启动容错机制自己猜测你的意图去修复。不同浏览器猜测的结果可能不同于是出现了“同一份代码在不同浏览器里显示效果不一样”的著名现象。正确的写法是像瓶子套盖子一样一层层闭合后开的标签先关掉p这是一段文字 strong加粗的那部分/strong/p实操心得写完一个嵌套标签养成习惯去数一数每个标签是不是都闭合了。编辑器通常有代码缩进和颜色高亮来辅助但最快的方法是鼠标悬停在一个标签上看它对应的结束标签有没有被高亮出来。如果悬停半天没反应大概率这个标签就没闭合。5.2 中文乱码和字符编码的坑自己本地新建HTML文件发现浏览器里打开全是乱码第一反应别改内容先检查head区域有没有这一行meta charsetUTF-8如果没有或者放在了title标签之后浏览器默认会用系统编码去解析文件而中文字符在错误的编码方案下就会变成一堆看不懂的符号。此外如果你用记事本写代码然后另存一定注意保存时把编码选为UTF-8否则即使meta声明了UTF-8文件本身是用别的编码保存的照样乱。天天和中文打交道的开发者把这条大坑记在心里文件保存编码、页面声明编码、服务器响应头编码三者必须一致缺一个中文就乱。5.3 图片不显示路径问题排查思路img标签的src属性指向图片路径。路径有两种绝对路径比如https://example.com/images/pic.jpg和相对路径比如images/pic.jpg。新手最常见的问题就是相对路径写错。区分一个简单的方法路径里开头有没有./和../。./表示当前目录可以省略../表示上一级目录不可以省略。假设你的项目目录结构是这样的my-site/ ├── index.html └── images/ └── logo.png在index.html里引用图片应该写images/logo.png或者更严谨一点写./images/logo.png。如果你把HTML放在src目录下而图片在根目录的images里需要../images/logo.png才能找到。如果图片就是显示不出来优先检查三个东西文件名的大小写服务器上的Linux系统对大小写敏感Logo.png和logo.png不是同一个文件、扩展名是否正确、属性的引号是否完整。5.4 媒体资源跨域加载与性能意识在本地写HTML时你会经常在src属性里写网上的图片地址就像上面示例里用的那个占位图服务。这种跨域加载方式在开发调试阶段很方便但放在生产环境会有两个隐患一是图片加载依赖第三方服务对方挂了图就没了二是你有意识地引入了外部请求却没想过这会给页面加载增加额外的时间开销。养成一个习惯正式发布的页面图片、CSS、JS文件尽量放在自己的服务器上。这一条在刚开始学的时候不用彻底贯彻但心里要有这层意识。5.5 千万别直接在浏览器里打开就完事了新手写完HTML喜欢直接双击文件在浏览器中打开看到页面出来就觉得完成了。这在学习初期可以但很快就该把习惯升级为“本地起一个服务器”。为什么因为浏览器的安全限制很多能力只在HTTP协议下才能正常使用直接通过文件协议打开时一些浏览器特性会被禁用而且模块化JavaScript、fetch请求都会出问题。最简单的方案是刚才提到的Live Server插件。学会使用本地开发服务器是HTML学习路线里值得尽早补上的一课。6. 接下来该怎么走给新手的路线建议HTML不是终点它是Web开发这趟旅程的起点。掌握了HTML基础之后合理的下一步是CSS然后是JavaScript。CSS负责样式。控制元素的颜色、大小、间距、布局方式让页面从素颜变成化妆。包括Flexbox布局、Grid布局、响应式设计都是CSS这条线里的重点。JavaScript负责行为。点击按钮弹出对话框、表单校验、数据的获取与渲染这些交互逻辑都由JS完成。它是真正的编程语言有变量、有函数、有对象有逻辑控制。浏览器开发者工具DevTools是你随时随地的得力助手。在页面上右键选择“检查”你就能看到所有元素的HTML结构和对应的样式。把实操和工具结合起来学习效率会直线上升。如果你还想更进一步可以了解后端开发比如用Node.js、Python之类的语言去写接口也可以深入前端框架比如学习组件化的开发思路用组件来构建大型应用。但这一切的大前提是你对HTML有扎实的理解——知道一个页面的结构应该怎么搭语义怎么选层级怎么规划。地基稳了上层建筑才立得住。我给不少人做过上手Web开发的引路人印象里学得最快的一批人没有一个是一上来就闷头抄代码的。他们普遍有一个共性会去动手改代码、拆页面、重建页面并且长年习惯直接阅读官方文档用第一手资料而非碎片化的二创教程来校正自己的认知。HTML领域也是这样打开一份官方文档把标签列表一个个看下来再对照一个你喜欢的网站用开发者工具拆它的结构这一套组合拳下来你的HTML水平会远超只刷教程视频的人。