网站代码基础知识主要包括 HTML、CSS 和 JavaScript 三部分：HTML 负责搭建网页结构，CSS 负责控制外观与布局，JavaScript 负责实现交互功能。掌握这三类代码后，就能看懂一个网页由哪些部分组成，并逐步完成页面制作、样式调整和按钮交互。

网站代码由哪些部分组成

一个完整网页通常不是由单一语言编写，而是由多种代码协同工作。可以把网页理解成一栋房子：HTML 是房屋的结构，CSS 是装修，JavaScript 则像电路和控制系统。

HTML：网站页面的基本骨架

HTML 使用一个个标签描述页面内容。标签通常由开始标签、内容和结束标签组成，例如标题使用 h1 到 h6，段落使用 p，链接使用 a，图片使用 img。标签需要按照内容层级合理嵌套，这样浏览器和辅助工具才能更准确地理解页面。

其中，html 是整个文档的根元素，head 用于放置标题、字符编码等页面信息，body 用于放置浏览器中实际显示的内容。DOCTYPE 用来声明文档类型，charset="UTF-8" 可以帮助页面正确显示中文。

常用 HTML 标签

• 标题标签：h1 表示页面的主要标题，h2 和 h3 用于划分层级。通常一个页面应有清晰的标题结构。
• 文本标签：p 表示段落，strong 用于强调重要内容，span 适合包裹一小段需要单独设置样式的文字。
• 链接标签：a 用于跳转到其他页面、文件或页面中的指定位置。
• 图片标签：img 用于显示图片，src 指定图片位置，alt 用于提供图片说明。
• 列表标签：ul 和 li 组成无序列表，ol 和 li 组成有序列表。
• 结构标签：header、nav、main、section、article、footer 可以让页面区域更具语义。

HTML 标签中的属性用于补充信息。例如，a 标签可以设置 href，img 标签需要设置 src 和 alt，表单输入框可以设置 type、name 和 placeholder。属性值通常放在引号中，多个属性之间用空格分隔。

CSS：控制网页的外观与布局

CSS 通过选择器找到 HTML 元素，再为这些元素设置样式。最常见的选择器有标签选择器、类选择器和 ID 选择器。类选择器可以重复使用，适合统一设置多个元素；ID 通常用于标识页面中具有唯一性的元素。

上面的代码中，body 是标签选择器，.card 是类选择器。CSS 中的花括号包含具体声明，每条声明由属性和值组成，并以分号结束。颜色、字体、宽度、高度、边距和边框是入门阶段最常接触的属性。

理解 CSS 盒模型

浏览器会把大多数 HTML 元素看作一个盒子。盒模型从内到外依次是内容区域、内边距 padding、边框 border 和外边距 margin。内容区域决定文字或图片所占空间，padding 控制内容与边框的距离，margin 控制元素与其他元素之间的距离。

页面布局常使用 Flex 布局或 Grid 布局。Flex 适合处理一行或一列中的对齐与分布，Grid 适合处理二维网格。使用布局属性时，应同时考虑不同屏幕宽度，避免固定尺寸导致手机页面出现横向滚动。

@media 是媒体查询，可以根据屏幕宽度应用不同样式。通过相对单位、最大宽度和媒体查询，可以让同一网页在电脑、平板和手机上保持较好的可读性。

JavaScript：让网页具备交互能力

JavaScript 可以读取和修改页面中的 HTML，也可以监听点击、输入、提交等用户操作。例如，按钮点击后显示提示文字，就需要先找到相关元素，再注册点击事件。

document.querySelector 可以根据选择器找到页面元素，addEventListener 用于监听事件，textContent 可以修改文字内容。实际开发中还会使用变量、条件判断、循环、函数和数组等 JavaScript 基础语法。

常见交互功能的实现思路

• 按钮切换内容：为按钮绑定 click 事件，再修改目标元素的文字、样式或 class。
• 展开与收起：点击时切换一个表示显示状态的类名。
• 表单校验：监听提交事件，检查输入内容是否为空、格式是否符合要求。
• 实时反馈：监听输入框的 input 事件，根据用户输入更新提示信息。

链接、图片和文件路径怎么写

网站代码中的文件通常通过路径相互关联。相对路径以当前文件所在位置为参照，例如页面文件与 images 文件夹处于同一目录时，可以使用 images/photo.jpg。若图片文件在上一级目录，则可以使用 ../images/photo.jpg。文件和文件夹名称应尽量使用简洁的英文、数字或连字符，避免空格和难以识别的特殊字符。

引用图片时，应同时关注图片尺寸、加载速度和替代文本。alt 内容应准确描述图片作用；如果图片只是装饰，可以根据实际情况使用空的 alt 属性。链接文字也应直接说明目标内容，避免大量使用含义不清的“点击这里”。

表单与语义化代码的基础要求

表单通常由 label、input、textarea、select 和 button 等元素组成。label 应与对应输入框建立关联，提示用户需要填写什么内容。输入框的 type 应尽量准确，例如邮箱使用 email，密码使用 password，数字使用 number，这有助于浏览器提供合适的输入方式。

语义化 HTML 不只是为了让代码看起来规范，也有助于页面维护、无障碍访问和内容理解。页面主体应放在 main 中，导航放在 nav 中，独立内容可以使用 article，页面底部信息可以使用 footer。不要为了控制样式而随意堆叠大量无意义的 div。

网站代码基础知识中的常见错误

• 标签没有正确闭合，或者嵌套顺序混乱，导致页面结构异常。
• CSS 选择器写错，或样式被更高优先级的规则覆盖。
• 图片和样式文件路径错误，浏览器无法加载对应资源。
• 只使用固定宽度，未考虑手机屏幕和不同浏览器窗口。
• 把 JavaScript 直接写在 HTML 属性中，导致结构、样式和行为混在一起，后续难以维护。
• 表单只检查前端输入，却忽略服务器端仍需进行验证和权限控制。

排查问题时，可以先检查浏览器开发者工具中的 Console 和 Network 面板，再逐步确认 HTML 结构、CSS 样式和 JavaScript 事件是否正常。代码量较大时，应为文件、类名和函数使用清晰名称，并保持统一的缩进与注释习惯。

学习网站代码的合理顺序

初学者可以先用 HTML 制作一个包含标题、段落、图片、链接和表单的静态页面，再用 CSS 调整颜色、字体、间距和布局，最后加入 JavaScript 实现按钮、菜单和表单提示等交互。每完成一个小功能，就在浏览器中测试不同内容和屏幕尺寸。

掌握基础语法后，再学习浏览器开发者工具、响应式设计、模块化 JavaScript、数据请求和后端接口。网站代码的学习重点不是记住所有标签和属性，而是理解页面结构、样式规则、用户操作与数据变化之间的关系，并能够独立定位和修复问题。

校对：黄耀明