1. 项目概述为什么从HTML开始你的网页制作之旅如果你对创建一个属于自己的网页感到好奇或者想踏入前端开发这个领域那么HTML就是你绕不开的第一站。很多人觉得“写代码”听起来很复杂但HTML超文本标记语言可能是你接触过的最直观、最像“说话”的编程语言。它不像传统编程那样处理复杂的逻辑和计算它的核心任务很简单告诉浏览器——“这里是一段标题”、“那里是一张图片”、“这些文字是一个段落”。你可以把它理解为网页的“骨架”和“蓝图”所有的内容、图片、链接都需要通过HTML来定义和组织。我刚开始接触网页制作时也走过一些弯路比如试图用复杂的工具或框架一步到位结果发现连最基本的页面结构都搭不起来。后来才明白无论前端技术如何演进React、Vue这些框架多么强大它们最终都要“编译”或“转换”成浏览器能读懂的HTML。直接学习HTML就像学写字先学笔画一样是构建一切Web体验的底层逻辑。它的技术价值在于其普适性和标准化——任何设备上的任何浏览器都能理解并渲染HTML文档这确保了信息传递的广泛可达性。从个人博客、企业官网到复杂的电商平台和内容管理系统CMSHTML都是最基础的结构层。本文的目标就是帮你绕开我当初的弯路用最直接的方式从零开始编写你的第一行HTML代码。我们将不依赖任何复杂的集成开发环境IDE从一个最纯净的文本编辑器开始一步步构建一个完整的HTML文档。你会理解每个标签的含义知道它们为什么出现在那里并最终亲手发布一个可以运行的网页。整个过程注重“动手”和“理解”而非死记硬背。准备好了吗让我们开始搭建你的第一个网页“骨架”。2. 核心思路与工具选型如何搭建高效的学习环境在真正动手写代码之前花几分钟选择并配置好你的工具能让学习过程顺畅数倍。很多新手会卡在第一步“我该用什么软件来写HTML” 答案比你想象的要简单。2.1 代码编辑器你的数字工作台你完全不需要一开始就安装庞大复杂的专业IDE如WebStorm或Visual Studio。对于HTML、CSS和JavaScript的学习一个轻量级但功能强大的代码编辑器是绝佳起点。我的个人推荐是Visual Studio Code简称VS Code。它免费、开源由微软维护拥有极其丰富的扩展生态系统并且对前端开发的支持是“开箱即用”级的。为什么是VS Code智能提示IntelliSense当你输入h时它会自动弹出h1到h6的选项并显示每个标签的简要说明。这能极大减少拼写错误并帮助你记忆标签。代码高亮它会用不同颜色区分标签、属性和文本内容让代码结构一目了然便于阅读和调试。实时预览通过安装如“Live Server”这样的扩展你可以在保存代码的瞬间在浏览器中看到页面更新实现“所写即所得”。轻量且跨平台在Windows、macOS、Linux上都能完美运行。当然如果你追求极简系统自带的记事本Windows或文本编辑macOS也完全能胜任。但VS Code提供的便利性会让你更专注于学习代码本身而不是与工具搏斗。注意避免使用Word、Pages或记事本保存为.docx等格式来编写代码。这些软件会加入大量不可见的格式字符导致浏览器无法正确解析你的HTML。2.2 浏览器你的成果展示窗浏览器是你的HTML代码的最终运行环境。Google Chrome或Microsoft Edge基于Chromium内核是开发者的首选因为它们内置了强大且易用的开发者工具。如何利用浏览器学习查看网页源码在任何网页上右键点击选择“检查”或“查看网页源代码”你就能看到构成这个页面的所有HTML代码。这是最好的学习资料之一。实时调试在开发者工具中你可以直接修改页面上元素的HTML和CSS并立即看到效果。这非常适合用来做实验和理解每个标签或样式的作用。2.3 项目文件夹管理养成良好的习惯在开始前请在电脑上创建一个专属的文件夹例如命名为“my_first_website”。在这个文件夹里你将存放所有的HTML文件、图片、样式表等。清晰的项目结构是日后进行更复杂开发的基础。建议你的第一个文件就命名为index.html。index.html通常被Web服务器默认为网站的首页。工具准备好了我们的思维也需要做好准备。编写HTML的核心思路是“用标签描述内容结构”。不要把它想成编程而是想成你在给浏览器写一份结构清晰的“说明书”。接下来我们就开始撰写这份说明书的第一行。3. HTML文档结构深度解析从骨架到血肉一个标准的HTML文档就像一封信有固定的格式。理解这个格式你就掌握了HTML的全局观。我们将逐行拆解并解释每一部分存在的理由。3.1 文档类型声明!DOCTYPE html这是HTML文档的第一行它不是一个HTML标签而是一条给浏览器的“指令”。!DOCTYPE html它的作用是告诉浏览器当前文档使用的是HTML5标准。HTML5是目前最新且被广泛支持的标准。声明它之后浏览器就会切换到“标准模式”按照HTML5的规则来解析和渲染你的页面确保在不同浏览器中都能获得一致的表现。如果没有这行声明浏览器可能会进入“怪异模式”以兼容旧网站的方式渲染导致你的新代码出现不可预知的布局问题。所以这行代码虽然简单但必不可少。3.2 根元素html标签!DOCTYPE html之后整个HTML文档的内容都被包裹在一个html标签中。html langzh-CN ... /htmlhtml标签是文档的根元素所有其他元素都是它的后代。我在这里添加了一个langzh-CN属性。这个属性非常重要它声明了文档的主要语言是中文中国大陆。这有助于搜索引擎优化SEO也让屏幕阅读器等辅助技术能为视障用户提供正确的语言发音。如果你的页面是英文的则应使用langen。3.3 头部区域head标签head标签包含了文档的元信息metadata。这些信息不会直接显示在网页的正文中但它们对于浏览器、搜索引擎和其他Web服务至关重要。你可以把它理解为文件的“档案袋封面”。head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /headmeta charsetUTF-8这行代码定义了文档的字符编码为UTF-8。UTF-8编码包含了地球上几乎所有的字符。设置它可以确保你的页面能正确显示中文、英文、Emoji等各种字符避免出现乱码。这是另一个必须有的标签。meta nameviewport ...这个元标签是移动端适配的基石。它告诉移动设备浏览器页面的宽度应该等于设备的屏幕宽度并且初始缩放级别为1.0。没有它你的网站在手机上可能会显示为缩小的桌面版用户需要手动放大才能阅读体验极差。title标签这是唯一在head中具有可见内容的标签。它定义的是浏览器标签页上显示的标题也是搜索引擎结果列表中显示的链接标题。它对于SEO和用户体验都非常关键。请为每个页面起一个描述性的标题。3.4 主体区域body标签body标签包含了所有你希望呈现给用户看的内容文本、图片、视频、链接、表格、表单等等。我们之后的所有工作主要都是在body里进行的。body !-- 所有可见内容都放在这里 -- /body现在让我们把这些部分组合起来形成一个最简化的、完整的HTML5文档模板!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body !-- 页面内容从这里开始 -- /body /html我强烈建议你将这段代码保存为template.html文件。以后每次创建新网页时都可以直接复制这个模板然后在body里添加内容这能帮你省去重复打基础结构的时间并避免因遗漏关键标签而导致的错误。4. 核心内容标签实战填充你的网页有了坚实的骨架现在可以开始添加“血肉”了。HTML提供了丰富的标签来定义不同类型的内容。我们从最常用的几个开始。4.1 标题与段落内容的结构基础网页内容需要层次感。HTML提供了六级标题标签h1到h6重要性依次递减。body h1欢迎来到我的个人空间/h1 h2关于我/h2 p我是一个正在学习前端开发的爱好者。HTML是这一切的起点。/p h3我的技能树/h3 p目前正在攻克HTML和CSS下一步计划学习JavaScript。/p /bodyh1通常用作页面的主标题一个页面最好只用一个h1这有助于SEO。p段落标签。浏览器会自动在段落前后添加一些空白边距使其易于阅读。实操心得标题标签不仅仅是为了让文字变大变粗。它们构成了页面的“大纲”对搜索引擎和辅助技术如读屏软件理解页面结构至关重要。请根据内容的逻辑层次来使用它们不要仅仅为了视觉效果而随意选择级别比如用h3只是因为它的字号大小合适。视觉样式应该交给CSS来处理。4.2 超链接a标签互联网的核心是链接。a锚点标签用于创建超链接。p欢迎访问 a hrefhttps://www.example.com示例网站/a 获取更多资源。/p p你也可以跳转到本文的 a href#chapter4第四章/a。/p !-- 稍后在页面某处有一个 id 为 “chapter4” 的元素 -- h2 idchapter4第四章高级技巧/h2href属性这是链接的核心指定了链接的目标地址。它可以是绝对URLhref“https://www.xxx.com”指向外部网站。相对URLhref“about.html”指向同一网站下的另一个页面。页面内锚点href“#section-id”跳转到同一页面内拥有对应id的元素处。其他协议如mailto:emailexample.com发送邮件、tel:123456789拨打电话。4.3 图像img标签img标签用于在页面中嵌入图像。它是一个空元素没有闭合标签。img srcimages/my-photo.jpg alt一张我在海边拍摄的个人照片 width400 height300src属性指定图像文件的路径必需。alt属性提供图像的替代文本强烈建议始终添加。当图像无法加载时会显示这段文字它也是屏幕阅读器为视障用户描述图像内容的依据对SEO也很重要。width和height属性可以设置图像的显示尺寸。但最佳实践是在CSS中控制尺寸这里设置属性主要是为了让浏览器在加载图像前就预留出空间防止页面布局在加载过程中突然跳动。4.4 列表有序与无序列表用于呈现一组相关的项目。h3我喜欢的编程语言/h3 ul liJavaScript/li liPython/li liGo/li /ul h3学习步骤/h3 ol li掌握HTML与CSS/li li学习JavaScript基础/li li了解前端框架如Vue/React/li /olul无序列表项目默认用圆点标记。适合没有特定顺序的条目。ol有序列表项目默认用数字标记。适合有步骤或排名顺序的条目。li列表项必须嵌套在ul或ol内部。4.5 容器标签div和span这两个标签本身没有具体的语义含义它们的主要作用是分组和包装内容以便通过CSS进行样式化或通过JavaScript进行操作。div是一个块级容器。它独占一行通常用于布局将页面分割成不同的逻辑区块。span是一个行内容器。它只包裹一小段行内内容常用于对一句话中的某个词进行特殊样式处理。div classheader h1网站标题/h1 p网站副标题 span classhighlight重点内容/span 其他文字。/p /div div classcontent p这里是主要内容区域。/p /div在上面的例子中我们用div划分了“页头”和“内容”两个大区块又用span包裹了需要高亮显示的词语。class属性是为它们起名字以便CSS和JavaScript能够精准地找到并控制它们。5. 编写、调试与发布完整流程现在让我们把前面学到的所有知识整合起来创建一个简单的个人介绍页面并完成从编写到在本地浏览器中查看的全过程。5.1 完整代码示例打开你的VS Code或文本编辑器新建一个文件保存为index.html然后输入以下代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小明的前端学习笔记 - 首页/title /head body !-- 页头区域 -- div idheader h1 欢迎来到我的学习基地/h1 p记录从零开始学习Web开发的每一步/p hr !-- 水平分割线用于视觉分隔 -- /div !-- 导航栏 -- div idnav ul lia hrefindex.html首页/a/li lia hrefprojects.html我的项目/a/li lia hrefabout.html关于我/a/li lia hrefcontact.html联系/a/li /ul /div !-- 主要内容区 -- div idmain-content h2 今日学习重点HTML结构/h2 pHTML是网页的strong骨架/strong。它使用一系列em标签/em来定义内容的结构和含义。/p h3核心标签回顾/h3 ol licode!DOCTYPE html/code - 文档类型声明/li licodehtml/code - 根元素/li licodehead/code - 文档头部元信息/li licodebody/code - 文档主体可见内容/li /ol h3学习资源推荐/h3 p以下是我觉得非常有用的网站/p ul lia hrefhttps://developer.mozilla.org/zh-CN/docs/Web/HTML target_blankMDN Web文档 - HTML/a (权威参考)/li lia hrefhttps://www.w3schools.com/html/ target_blankW3Schools HTML教程/a (交互式学习)/li /ul h3我的项目截图/h3 p这是我第一个练习页面的效果/p img srchttps://via.placeholder.com/600x300.png?text项目截图Placeholder alt第一个HTML项目截图预览 width600 height300 psmall注此处使用了一个占位图片服务来模拟图片/small/p /div !-- 页脚 -- div idfooter hr p© 2023 小明的前端笔记. 最后更新于 time datetime2023-10-272023年10月27日/time./p p联系方式a hrefmailto:exampleexample.com发送邮件/a/p /div /body /html5.2 在浏览器中预览与调试保存文件后你有两种主要方式查看你的网页直接双击文件在文件管理器中找到index.html双击它。它会用你系统的默认浏览器打开。这是最快捷的方式。使用VS Code的Live Server扩展推荐在VS Code中安装“Live Server”扩展。在index.html文件上右键选择“Open with Live Server”。它会自动启动一个本地服务器并在浏览器中打开页面。最大的好处是当你修改代码并保存后浏览器页面会自动刷新实时显示最新效果。打开页面后尝试右键点击页面上的任何元素选择“检查”。这会打开开发者工具你可以看到你写的HTML代码是如何被浏览器解析成DOM文档对象模型树的。你可以尝试在“元素”面板里直接修改文字、属性并立即在页面上看到变化。这是学习和调试的利器。5.3 代码验证与良好习惯在编写过程中保持代码的整洁和正确性很重要。标签嵌套要正确标签必须正确闭合且不能交叉嵌套。例如pstrong文字/strong/p是正确的而pstrong文字/p/strong是错误的。属性值加引号虽然在某些情况下浏览器能容忍不加引号的属性值但始终使用双引号包裹属性值如href“...”是最佳实践能避免很多意外错误。使用小写虽然HTML不区分大小写但使用小写字母书写标签和属性是公认的规范看起来更统一。代码缩进像上面的例子一样对嵌套的标签进行缩进通常用2个或4个空格这能让你和他人一眼看清代码的结构层次。6. 常见问题与排查技巧实录即使是编写简单的HTML新手也常会遇到一些“坑”。这里记录了几个最常见的问题及其解决方法。6.1 页面显示乱码问题描述中文字符显示为“”或“æ˜ç¤º”。原因与解决文件编码问题确保你的代码编辑器将文件保存为UTF-8编码。在VS Code中查看编辑器右下角通常会显示“UTF-8”。如果不是点击它并选择“通过编码保存”然后选“UTF-8”。meta标签缺失检查head部分是否包含了meta charset“UTF-8”。这是必须的。6.2 图片无法加载问题描述图片位置显示一个破损的图标。排查步骤检查文件路径src属性中的路径是否正确。如果图片和HTML文件在同一目录直接写文件名如photo.jpg。如果在子目录images下则写images/photo.jpg。路径区分大小写检查文件名和扩展名确保文件名拼写完全正确包括扩展名.jpg, .png, .gif。使用绝对路径测试可以临时使用一个网络图片的完整URL如上面的占位图例子替换你的src如果网络图片能显示那问题肯定出在你的本地文件路径上。6.3 链接点击没反应或跳转错误问题描述点击超链接后页面没变化或者跳转到了错误地址。排查步骤检查href值确认链接地址是否正确。链接到外部网站需要完整的https://开头。检查目标文件是否存在如果是链接到站内的另一个HTML文件如about.html请确认该文件确实存在于你指定的路径。页面内锚点链接失效如果使用href“#section-id”请确认页面中确实存在一个具有对应id属性的元素例如h2 id“section-id”。id值必须完全匹配且是唯一的。6.4 代码修改了但浏览器没变化问题描述在编辑器中修改并保存了代码但刷新浏览器后看不到更新。解决技巧强制刷新大多数情况下浏览器会缓存页面。按Ctrl F5Windows/Linux或Cmd Shift RMac进行强制刷新清除缓存并重新加载。使用无痕/隐私模式在浏览器的无痕窗口中打开你的HTML文件这个窗口通常不会使用缓存。使用Live Server这是最根本的解决方案。如前所述Live Server能完全避免缓存问题实现实时同步。6.5 布局看起来和想象中不一样问题描述文字没有换行或者所有内容都挤在一行。重要概念你需要理解HTML元素的默认显示类型主要是块级元素和行内元素。块级元素如div,h1,p,ul它们总是从新行开始并且会占据其父容器的全部宽度。就像一个竖着堆叠的积木。行内元素如span,a,strong,img它们只占据内容本身的宽度不会强制换行。就像句子中的单词可以排在一行。如果你希望一个链接像按钮一样独占一行仅仅用a是做不到的因为它默认是行内元素。这时就需要后续用CSS来改变它的display属性例如设为block。在纯HTML阶段请先接受元素的默认布局行为布局的精细控制是CSS的职责。走到这里你已经成功地从零创建了一个结构完整、内容丰富的HTML页面并了解了如何运行和调试它。HTML作为基石已经为你搭建好了稳固的内容结构框架。这仅仅是万里长征的第一步但也是最关键的一步。接下来你将学习如何使用CSS为这个骨架穿上漂亮的“外衣”让它真正变得生动和美观。记住所有复杂的前端应用都始于这样一个简单的.html文件。保持动手实践多读看别人的代码、多写创建自己的页面、多问利用开发者工具探索你会进步得非常快。
从零开始HTML：构建网页骨架的完整指南与实战
发布时间：2026/6/1 20:18:04
1. 项目概述为什么从HTML开始你的网页制作之旅如果你对创建一个属于自己的网页感到好奇或者想踏入前端开发这个领域那么HTML就是你绕不开的第一站。很多人觉得“写代码”听起来很复杂但HTML超文本标记语言可能是你接触过的最直观、最像“说话”的编程语言。它不像传统编程那样处理复杂的逻辑和计算它的核心任务很简单告诉浏览器——“这里是一段标题”、“那里是一张图片”、“这些文字是一个段落”。你可以把它理解为网页的“骨架”和“蓝图”所有的内容、图片、链接都需要通过HTML来定义和组织。我刚开始接触网页制作时也走过一些弯路比如试图用复杂的工具或框架一步到位结果发现连最基本的页面结构都搭不起来。后来才明白无论前端技术如何演进React、Vue这些框架多么强大它们最终都要“编译”或“转换”成浏览器能读懂的HTML。直接学习HTML就像学写字先学笔画一样是构建一切Web体验的底层逻辑。它的技术价值在于其普适性和标准化——任何设备上的任何浏览器都能理解并渲染HTML文档这确保了信息传递的广泛可达性。从个人博客、企业官网到复杂的电商平台和内容管理系统CMSHTML都是最基础的结构层。本文的目标就是帮你绕开我当初的弯路用最直接的方式从零开始编写你的第一行HTML代码。我们将不依赖任何复杂的集成开发环境IDE从一个最纯净的文本编辑器开始一步步构建一个完整的HTML文档。你会理解每个标签的含义知道它们为什么出现在那里并最终亲手发布一个可以运行的网页。整个过程注重“动手”和“理解”而非死记硬背。准备好了吗让我们开始搭建你的第一个网页“骨架”。2. 核心思路与工具选型如何搭建高效的学习环境在真正动手写代码之前花几分钟选择并配置好你的工具能让学习过程顺畅数倍。很多新手会卡在第一步“我该用什么软件来写HTML” 答案比你想象的要简单。2.1 代码编辑器你的数字工作台你完全不需要一开始就安装庞大复杂的专业IDE如WebStorm或Visual Studio。对于HTML、CSS和JavaScript的学习一个轻量级但功能强大的代码编辑器是绝佳起点。我的个人推荐是Visual Studio Code简称VS Code。它免费、开源由微软维护拥有极其丰富的扩展生态系统并且对前端开发的支持是“开箱即用”级的。为什么是VS Code智能提示IntelliSense当你输入h时它会自动弹出h1到h6的选项并显示每个标签的简要说明。这能极大减少拼写错误并帮助你记忆标签。代码高亮它会用不同颜色区分标签、属性和文本内容让代码结构一目了然便于阅读和调试。实时预览通过安装如“Live Server”这样的扩展你可以在保存代码的瞬间在浏览器中看到页面更新实现“所写即所得”。轻量且跨平台在Windows、macOS、Linux上都能完美运行。当然如果你追求极简系统自带的记事本Windows或文本编辑macOS也完全能胜任。但VS Code提供的便利性会让你更专注于学习代码本身而不是与工具搏斗。注意避免使用Word、Pages或记事本保存为.docx等格式来编写代码。这些软件会加入大量不可见的格式字符导致浏览器无法正确解析你的HTML。2.2 浏览器你的成果展示窗浏览器是你的HTML代码的最终运行环境。Google Chrome或Microsoft Edge基于Chromium内核是开发者的首选因为它们内置了强大且易用的开发者工具。如何利用浏览器学习查看网页源码在任何网页上右键点击选择“检查”或“查看网页源代码”你就能看到构成这个页面的所有HTML代码。这是最好的学习资料之一。实时调试在开发者工具中你可以直接修改页面上元素的HTML和CSS并立即看到效果。这非常适合用来做实验和理解每个标签或样式的作用。2.3 项目文件夹管理养成良好的习惯在开始前请在电脑上创建一个专属的文件夹例如命名为“my_first_website”。在这个文件夹里你将存放所有的HTML文件、图片、样式表等。清晰的项目结构是日后进行更复杂开发的基础。建议你的第一个文件就命名为index.html。index.html通常被Web服务器默认为网站的首页。工具准备好了我们的思维也需要做好准备。编写HTML的核心思路是“用标签描述内容结构”。不要把它想成编程而是想成你在给浏览器写一份结构清晰的“说明书”。接下来我们就开始撰写这份说明书的第一行。3. HTML文档结构深度解析从骨架到血肉一个标准的HTML文档就像一封信有固定的格式。理解这个格式你就掌握了HTML的全局观。我们将逐行拆解并解释每一部分存在的理由。3.1 文档类型声明!DOCTYPE html这是HTML文档的第一行它不是一个HTML标签而是一条给浏览器的“指令”。!DOCTYPE html它的作用是告诉浏览器当前文档使用的是HTML5标准。HTML5是目前最新且被广泛支持的标准。声明它之后浏览器就会切换到“标准模式”按照HTML5的规则来解析和渲染你的页面确保在不同浏览器中都能获得一致的表现。如果没有这行声明浏览器可能会进入“怪异模式”以兼容旧网站的方式渲染导致你的新代码出现不可预知的布局问题。所以这行代码虽然简单但必不可少。3.2 根元素html标签!DOCTYPE html之后整个HTML文档的内容都被包裹在一个html标签中。html langzh-CN ... /htmlhtml标签是文档的根元素所有其他元素都是它的后代。我在这里添加了一个langzh-CN属性。这个属性非常重要它声明了文档的主要语言是中文中国大陆。这有助于搜索引擎优化SEO也让屏幕阅读器等辅助技术能为视障用户提供正确的语言发音。如果你的页面是英文的则应使用langen。3.3 头部区域head标签head标签包含了文档的元信息metadata。这些信息不会直接显示在网页的正文中但它们对于浏览器、搜索引擎和其他Web服务至关重要。你可以把它理解为文件的“档案袋封面”。head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /headmeta charsetUTF-8这行代码定义了文档的字符编码为UTF-8。UTF-8编码包含了地球上几乎所有的字符。设置它可以确保你的页面能正确显示中文、英文、Emoji等各种字符避免出现乱码。这是另一个必须有的标签。meta nameviewport ...这个元标签是移动端适配的基石。它告诉移动设备浏览器页面的宽度应该等于设备的屏幕宽度并且初始缩放级别为1.0。没有它你的网站在手机上可能会显示为缩小的桌面版用户需要手动放大才能阅读体验极差。title标签这是唯一在head中具有可见内容的标签。它定义的是浏览器标签页上显示的标题也是搜索引擎结果列表中显示的链接标题。它对于SEO和用户体验都非常关键。请为每个页面起一个描述性的标题。3.4 主体区域body标签body标签包含了所有你希望呈现给用户看的内容文本、图片、视频、链接、表格、表单等等。我们之后的所有工作主要都是在body里进行的。body !-- 所有可见内容都放在这里 -- /body现在让我们把这些部分组合起来形成一个最简化的、完整的HTML5文档模板!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的第一个网页/title /head body !-- 页面内容从这里开始 -- /body /html我强烈建议你将这段代码保存为template.html文件。以后每次创建新网页时都可以直接复制这个模板然后在body里添加内容这能帮你省去重复打基础结构的时间并避免因遗漏关键标签而导致的错误。4. 核心内容标签实战填充你的网页有了坚实的骨架现在可以开始添加“血肉”了。HTML提供了丰富的标签来定义不同类型的内容。我们从最常用的几个开始。4.1 标题与段落内容的结构基础网页内容需要层次感。HTML提供了六级标题标签h1到h6重要性依次递减。body h1欢迎来到我的个人空间/h1 h2关于我/h2 p我是一个正在学习前端开发的爱好者。HTML是这一切的起点。/p h3我的技能树/h3 p目前正在攻克HTML和CSS下一步计划学习JavaScript。/p /bodyh1通常用作页面的主标题一个页面最好只用一个h1这有助于SEO。p段落标签。浏览器会自动在段落前后添加一些空白边距使其易于阅读。实操心得标题标签不仅仅是为了让文字变大变粗。它们构成了页面的“大纲”对搜索引擎和辅助技术如读屏软件理解页面结构至关重要。请根据内容的逻辑层次来使用它们不要仅仅为了视觉效果而随意选择级别比如用h3只是因为它的字号大小合适。视觉样式应该交给CSS来处理。4.2 超链接a标签互联网的核心是链接。a锚点标签用于创建超链接。p欢迎访问 a hrefhttps://www.example.com示例网站/a 获取更多资源。/p p你也可以跳转到本文的 a href#chapter4第四章/a。/p !-- 稍后在页面某处有一个 id 为 “chapter4” 的元素 -- h2 idchapter4第四章高级技巧/h2href属性这是链接的核心指定了链接的目标地址。它可以是绝对URLhref“https://www.xxx.com”指向外部网站。相对URLhref“about.html”指向同一网站下的另一个页面。页面内锚点href“#section-id”跳转到同一页面内拥有对应id的元素处。其他协议如mailto:emailexample.com发送邮件、tel:123456789拨打电话。4.3 图像img标签img标签用于在页面中嵌入图像。它是一个空元素没有闭合标签。img srcimages/my-photo.jpg alt一张我在海边拍摄的个人照片 width400 height300src属性指定图像文件的路径必需。alt属性提供图像的替代文本强烈建议始终添加。当图像无法加载时会显示这段文字它也是屏幕阅读器为视障用户描述图像内容的依据对SEO也很重要。width和height属性可以设置图像的显示尺寸。但最佳实践是在CSS中控制尺寸这里设置属性主要是为了让浏览器在加载图像前就预留出空间防止页面布局在加载过程中突然跳动。4.4 列表有序与无序列表用于呈现一组相关的项目。h3我喜欢的编程语言/h3 ul liJavaScript/li liPython/li liGo/li /ul h3学习步骤/h3 ol li掌握HTML与CSS/li li学习JavaScript基础/li li了解前端框架如Vue/React/li /olul无序列表项目默认用圆点标记。适合没有特定顺序的条目。ol有序列表项目默认用数字标记。适合有步骤或排名顺序的条目。li列表项必须嵌套在ul或ol内部。4.5 容器标签div和span这两个标签本身没有具体的语义含义它们的主要作用是分组和包装内容以便通过CSS进行样式化或通过JavaScript进行操作。div是一个块级容器。它独占一行通常用于布局将页面分割成不同的逻辑区块。span是一个行内容器。它只包裹一小段行内内容常用于对一句话中的某个词进行特殊样式处理。div classheader h1网站标题/h1 p网站副标题 span classhighlight重点内容/span 其他文字。/p /div div classcontent p这里是主要内容区域。/p /div在上面的例子中我们用div划分了“页头”和“内容”两个大区块又用span包裹了需要高亮显示的词语。class属性是为它们起名字以便CSS和JavaScript能够精准地找到并控制它们。5. 编写、调试与发布完整流程现在让我们把前面学到的所有知识整合起来创建一个简单的个人介绍页面并完成从编写到在本地浏览器中查看的全过程。5.1 完整代码示例打开你的VS Code或文本编辑器新建一个文件保存为index.html然后输入以下代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title小明的前端学习笔记 - 首页/title /head body !-- 页头区域 -- div idheader h1 欢迎来到我的学习基地/h1 p记录从零开始学习Web开发的每一步/p hr !-- 水平分割线用于视觉分隔 -- /div !-- 导航栏 -- div idnav ul lia hrefindex.html首页/a/li lia hrefprojects.html我的项目/a/li lia hrefabout.html关于我/a/li lia hrefcontact.html联系/a/li /ul /div !-- 主要内容区 -- div idmain-content h2 今日学习重点HTML结构/h2 pHTML是网页的strong骨架/strong。它使用一系列em标签/em来定义内容的结构和含义。/p h3核心标签回顾/h3 ol licode!DOCTYPE html/code - 文档类型声明/li licodehtml/code - 根元素/li licodehead/code - 文档头部元信息/li licodebody/code - 文档主体可见内容/li /ol h3学习资源推荐/h3 p以下是我觉得非常有用的网站/p ul lia hrefhttps://developer.mozilla.org/zh-CN/docs/Web/HTML target_blankMDN Web文档 - HTML/a (权威参考)/li lia hrefhttps://www.w3schools.com/html/ target_blankW3Schools HTML教程/a (交互式学习)/li /ul h3我的项目截图/h3 p这是我第一个练习页面的效果/p img srchttps://via.placeholder.com/600x300.png?text项目截图Placeholder alt第一个HTML项目截图预览 width600 height300 psmall注此处使用了一个占位图片服务来模拟图片/small/p /div !-- 页脚 -- div idfooter hr p© 2023 小明的前端笔记. 最后更新于 time datetime2023-10-272023年10月27日/time./p p联系方式a hrefmailto:exampleexample.com发送邮件/a/p /div /body /html5.2 在浏览器中预览与调试保存文件后你有两种主要方式查看你的网页直接双击文件在文件管理器中找到index.html双击它。它会用你系统的默认浏览器打开。这是最快捷的方式。使用VS Code的Live Server扩展推荐在VS Code中安装“Live Server”扩展。在index.html文件上右键选择“Open with Live Server”。它会自动启动一个本地服务器并在浏览器中打开页面。最大的好处是当你修改代码并保存后浏览器页面会自动刷新实时显示最新效果。打开页面后尝试右键点击页面上的任何元素选择“检查”。这会打开开发者工具你可以看到你写的HTML代码是如何被浏览器解析成DOM文档对象模型树的。你可以尝试在“元素”面板里直接修改文字、属性并立即在页面上看到变化。这是学习和调试的利器。5.3 代码验证与良好习惯在编写过程中保持代码的整洁和正确性很重要。标签嵌套要正确标签必须正确闭合且不能交叉嵌套。例如pstrong文字/strong/p是正确的而pstrong文字/p/strong是错误的。属性值加引号虽然在某些情况下浏览器能容忍不加引号的属性值但始终使用双引号包裹属性值如href“...”是最佳实践能避免很多意外错误。使用小写虽然HTML不区分大小写但使用小写字母书写标签和属性是公认的规范看起来更统一。代码缩进像上面的例子一样对嵌套的标签进行缩进通常用2个或4个空格这能让你和他人一眼看清代码的结构层次。6. 常见问题与排查技巧实录即使是编写简单的HTML新手也常会遇到一些“坑”。这里记录了几个最常见的问题及其解决方法。6.1 页面显示乱码问题描述中文字符显示为“”或“æ˜ç¤º”。原因与解决文件编码问题确保你的代码编辑器将文件保存为UTF-8编码。在VS Code中查看编辑器右下角通常会显示“UTF-8”。如果不是点击它并选择“通过编码保存”然后选“UTF-8”。meta标签缺失检查head部分是否包含了meta charset“UTF-8”。这是必须的。6.2 图片无法加载问题描述图片位置显示一个破损的图标。排查步骤检查文件路径src属性中的路径是否正确。如果图片和HTML文件在同一目录直接写文件名如photo.jpg。如果在子目录images下则写images/photo.jpg。路径区分大小写检查文件名和扩展名确保文件名拼写完全正确包括扩展名.jpg, .png, .gif。使用绝对路径测试可以临时使用一个网络图片的完整URL如上面的占位图例子替换你的src如果网络图片能显示那问题肯定出在你的本地文件路径上。6.3 链接点击没反应或跳转错误问题描述点击超链接后页面没变化或者跳转到了错误地址。排查步骤检查href值确认链接地址是否正确。链接到外部网站需要完整的https://开头。检查目标文件是否存在如果是链接到站内的另一个HTML文件如about.html请确认该文件确实存在于你指定的路径。页面内锚点链接失效如果使用href“#section-id”请确认页面中确实存在一个具有对应id属性的元素例如h2 id“section-id”。id值必须完全匹配且是唯一的。6.4 代码修改了但浏览器没变化问题描述在编辑器中修改并保存了代码但刷新浏览器后看不到更新。解决技巧强制刷新大多数情况下浏览器会缓存页面。按Ctrl F5Windows/Linux或Cmd Shift RMac进行强制刷新清除缓存并重新加载。使用无痕/隐私模式在浏览器的无痕窗口中打开你的HTML文件这个窗口通常不会使用缓存。使用Live Server这是最根本的解决方案。如前所述Live Server能完全避免缓存问题实现实时同步。6.5 布局看起来和想象中不一样问题描述文字没有换行或者所有内容都挤在一行。重要概念你需要理解HTML元素的默认显示类型主要是块级元素和行内元素。块级元素如div,h1,p,ul它们总是从新行开始并且会占据其父容器的全部宽度。就像一个竖着堆叠的积木。行内元素如span,a,strong,img它们只占据内容本身的宽度不会强制换行。就像句子中的单词可以排在一行。如果你希望一个链接像按钮一样独占一行仅仅用a是做不到的因为它默认是行内元素。这时就需要后续用CSS来改变它的display属性例如设为block。在纯HTML阶段请先接受元素的默认布局行为布局的精细控制是CSS的职责。走到这里你已经成功地从零创建了一个结构完整、内容丰富的HTML页面并了解了如何运行和调试它。HTML作为基石已经为你搭建好了稳固的内容结构框架。这仅仅是万里长征的第一步但也是最关键的一步。接下来你将学习如何使用CSS为这个骨架穿上漂亮的“外衣”让它真正变得生动和美观。记住所有复杂的前端应用都始于这样一个简单的.html文件。保持动手实践多读看别人的代码、多写创建自己的页面、多问利用开发者工具探索你会进步得非常快。
相关文章
基于Arduino与超声波传感器的低成本车库停车辅助系统设计与实现
1. 项目概述与设计初衷每次把车倒进自家车库，看着后视镜里那堵越来越近的墙，心里总得默念“差不多了，差不多了”，最后还得下车瞅一眼，生怕一不留神怼上去。这种经历，相信不少有车库的朋友都深有体会。尤其是…
电商个性化推荐系统：从算法原理到工程实践，避开四大实施陷阱
1. 电商个性化推荐的本质与价值：为什么它不再是“锦上添花”在线上购物时，你有没有过这样的体验：打开一个购物APP，首页推荐的商品恰好是你最近在社交媒体上讨论过、或者刚刚在另一个网站浏览过的同类产品；或者…
辽宁省移动GSM安全分析报告
作者趁着假期到东北游玩，偶然间发现本地区居然还有GSM网络，又想到几个月前在北方地区，愣是出现了短信sniff诈骗的团伙，这都2026年了，居然还有这种事情的存在，所以我对这边的网络是否安全，我在强…
Vue3组合式API实战教程：告别Options API的繁琐，代码复用性暴涨
前言 Vue3 引入的组合式 API（Composition API）彻底改变了组件逻辑的组织方式。相比于 Vue2 的 Options API（data、methods、computed 分块），组合式 API 允许我们按逻辑关注点聚合代码，让复杂组件的可读性和…
从扫地机器人到自动驾驶：聊聊ROS REP-105坐标系标准背后的设计哲学与工程权衡
从扫地机器人到自动驾驶：ROS REP-105坐标系标准背后的设计哲学与工程权衡 当你的扫地机器人在客厅里优雅地绕过拖鞋时，它的大脑里正上演着一场精密的坐标芭蕾。这场舞蹈的编舞师，正是ROS REP-105坐标系标准。这个看似枯燥的技术规范ÿ…
Sora 2培训视频生成避坑清单，含17个HR/IT/教学三方联合验收红线标准
更多请点击： https://codechina.net 第一章：Sora 2培训视频生成的核心能力与技术边界 Sora 2并非真实存在的已发布模型，目前（截至2024年）OpenAI官方未推出名为“Sora 2”的产品，亦无公开的训练视频生成系统…
Sora 2录制失败率骤降87%的秘密：基于217场真实虚拟发布会复盘的4类隐性崩溃场景及热修复补丁包
更多请点击： https://intelliparadigm.com 第一章：Sora 2虚拟活动录制失败率骤降87%的全局洞察 Sora 2平台在2024年Q2完成核心录制引擎重构后，虚拟活动端到端录制失败率从历史均值12.3%降至1.6%，降幅达87%。这一突破并非单一模块…
突发新闻响应提速400%？——Sora 2实时视频生成在两会报道中的压测数据与5个不可公开的调度秘钥
更多请点击： https://codechina.net 第一章：Sora 2新闻视频制作的范式跃迁 Sora 2 的发布标志着新闻内容生产进入“语义驱动视频生成”新纪元。与依赖模板拼接或人工剪辑的传统工作流不同，Sora 2 能够基于结构化新闻稿直接生成具备时间一致性…
仅限前500名技术决策者：Sora 2动捕模拟企业部署 checklist（含NVIDIA RTX 6000 Ada兼容性验证表）
更多请点击： https://kaifayun.com 第一章：Sora 2动作捕捉模拟技术演进与企业级定位 Sora 2并非OpenAI官方发布的模型，而是社区对下一代视频生成与物理仿真融合系统的一种前瞻性代称；在企业级动作捕捉（MoCapÿ…
Zotero Duplicates Merger：5步彻底清理文献库重复条目
Zotero Duplicates Merger：5步彻底清理文献库重复条目 【免费下载链接】ZoteroDuplicatesMerger A zotero plugin to automatically merge duplicate items 项目地址: https://gitcode.com/gh_mirrors/zo/ZoteroDuplicatesMerger 还在为文献库中堆积如山的重…
利用随机有限集理论对蜂群的ILQR和MPC控制研究附Matlab代码
✅作者简介：热爱科研的Matlab仿真开发者，擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室🍊个人信条：格物致知,完整Matlab代码及仿真咨询…
为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因
更多请点击： https://intelliparadigm.com 第一章：为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因 Gemini邮件的客户转化效率（CTE）显著偏低，根本原因常被误判为…
Win10/Win11下Realtek 8188GU网卡驱动感叹号？别急着扔，试试这个手动安装的野路子
Realtek 8188GU网卡驱动故障深度修复指南：从原理到实战当设备管理器里那个顽固的黄色感叹号挥之不去，而你已经尝试了所有"标准操作"——Windows自动更新、第三方驱动工具、甚至重启大法——却依然无济于事时，是时候换个思路了。这篇…
AnolisOS 8.8安装源配置踩坑实录：从‘设置基础软件仓库时出错’到成功联网的保姆级指南
AnolisOS 8.8安装源配置实战指南：从诊断到解决方案的全流程解析当你在安装AnolisOS 8.8时遇到"设置基础软件仓库时出错"的提示，这通常意味着系统无法访问或识别安装源。这个问题看似简单，但背后可能涉及网络配置、镜像选择、启动参…
基于树莓派Pico的反应速度测试游戏：从GPIO编程到状态机实战
1. 项目概述与核心思路最近在整理工作室的电子元件，翻出来几个闲置的街机按钮和一块树莓派Pico，灵机一动，决定做个简单又有趣的反应速度测试游戏。这个项目非常适合想入门嵌入式开发的朋友，它不涉及复杂的传感器和通信协议&#x…
Zotero Duplicates Merger：5步彻底清理文献库重复条目
Zotero Duplicates Merger：5步彻底清理文献库重复条目 【免费下载链接】ZoteroDuplicatesMerger A zotero plugin to automatically merge duplicate items 项目地址: https://gitcode.com/gh_mirrors/zo/ZoteroDuplicatesMerger 还在为文献库中堆积如山的重…
利用随机有限集理论对蜂群的ILQR和MPC控制研究附Matlab代码
✅作者简介：热爱科研的Matlab仿真开发者，擅长数据处理、建模仿真、程序设计、完整代码获取、论文复现及科研仿真。🍎 往期回顾关注个人主页：Matlab科研工作室🍊个人信条：格物致知,完整Matlab代码及仿真咨询…
为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因
更多请点击： https://intelliparadigm.com 第一章：为什么你的Gemini邮件CTE低于行业均值2.8倍？：从Prompt架构到发送时序的深度归因 Gemini邮件的客户转化效率（CTE）显著偏低，根本原因常被误判为…