我就不信教不会你HTML 【Re01从零开始的编程之路】 #编程入门 #编程 #程序代码 #零基础学编程

HTML实践学习笔记

1. 网页三大技术基础

网页开发需要三种核心技术：HTML相当于“身体”，负责构建页面的基本结构；CSS相当于“衣服”，负责页面的样式美化；JavaScript相当于“交流互动”，负责页面的动态效果和交互功能。

2. 开发者工具的使用

2.1 开发者工具的打开与布局

• 打开方式：在Edge或Chrome浏览器中，右键点击网页空白处，选择“检查”即可打开开发者工具（建议使用新版浏览器以支持中文界面）。
• 布局特点：通常分为上下两栏，默认上栏为“元素栏”，显示所有HTML标签；位置可通过“更多”选项调整（侧面、底部等）。

2.2 元素栏的功能与实时修改

• 元素栏作用：展示网页的HTML标签结构，可直接查看和修改。
• 实时修改方法：双击标签内的内容进行编辑，回车后左侧页面会实时显示更改效果。此修改仅影响本地显示，刷新页面后恢复原内容。
• 应用场景：可通过开发者工具查看任意网站的HTML结构（如个人网站），并进行试验性修改以学习标签用法。

3. HTML标签的修改与实践

3.1 标签修改的基本操作

• 修改方式：右键点击元素栏中的标签，选择“编辑为HTML”，即可对标签内容或属性进行编辑。
• 示例：如需加粗文本，可添加<b>标签，如将文本包裹在<b>...</b>中，保存后文本即变为加粗样式。

3.2 扩展功能学习方法

• 学习路径：如需添加图片、背景、视频等功能，可通过搜索“HTML+功能名称”（如“HTML添加图片”）查找对应标签及用法，参考示例代码实践即可掌握。

4. 图片路径问题详解（绝对路径与相对路径）

4.1 路径的基本概念

• 路径（path）本质是文件在计算机中的“地址”，用于定位文件位置。例如电脑中文件的存储地址（如C盘、D盘及各级文件夹）。

4.2 绝对路径

• 定义：从最顶层目录开始的完整地址，如“C:\Users\用户名\Documents\html\images\pic.jpg”。
• 特点：地址完整，定位准确，但路径较长，且当文件位置移动时需重新修改路径。
• 使用方法：复制文件的完整地址，粘贴到<img>标签的src属性中（如<img src="C:\Users\用户名\Documents\html\images\pic.jpg">）。

4.3 相对路径

• 定义：相对于当前HTML文件所在位置的路径，无需从顶层目录开始。
• 表示方法：
  • ./：代表当前目录（可省略），如当前HTML文件与图片在同一文件夹，直接写src="pic.jpg"或src="./pic.jpg"。
  • ../：代表上级目录，如图片在当前HTML文件的上一级文件夹中，写src="../images/pic.jpg"。
  • 文件夹名/：代表下级目录，如图片在当前目录的“images”文件夹中，写src="images/pic.jpg"。
• 注意事项：路径中的斜杠建议使用左斜杠/（服务器和网站通用），避免Windows系统默认的右斜杠\。

4.4 图片不显示的常见原因

图片不显示通常是src路径错误导致，需检查路径是否正确指向图片文件（绝对路径是否完整、相对路径层级是否准确）。

5. 学习HTML的核心方法

• 核心原则：“搜索+实践”。遇到需求（如添加表格、音频等）时，搜索“HTML+功能名称”获取对应标签及用法，通过开发者工具实时修改和测试，结合示例代码快速掌握。
• 实践建议：多查看优秀网站的HTML结构（通过开发者工具），尝试修改标签并观察效果，积累实战经验。