阿杰，我们来系统讲一下 index.htm 文件，这是网页开发中非常基础的概念，对入门 HTML 和网站结构非常重要。

一、index.htm 文件是什么

  1. 定义
    • index.htm（或 index.html）是网页的默认首页文件。
    • 当你在浏览器中访问一个网站根目录时，服务器会自动寻找 index.htm 或 index.html 文件并显示。
  2. 作用
    • 作为网站的 首页（Home Page）。
    • 指引用户进入网站的其他页面。
    • 可以包含导航菜单、图片、文字、视频等内容。
  3. 区别于其他网页文件
    • 其他网页可能命名为 about.html、contact.htm 等，需要在 URL 中明确指定。
    • index.htm 是默认加载的文件，访问 http://example.com/ 时自动显示。

二、文件扩展名

  1. .htm 与 .html 的区别 扩展名 说明 .htm 早期 Windows 系统中 HTML 文件的扩展名，最多 3 个字符 .html 标准 HTML 文件扩展名，现代网站普遍使用
    • 功能完全相同，浏览器都能识别。

三、index.htm 的基本结构

一个最简单的 index.htm 示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是首页内容。</p>
    <a href="about.htm">关于我们</a>
</body>
</html>

解析

  • <!DOCTYPE html>：声明 HTML5 文档类型。
  • <html>：网页根元素。
  • <head>：头部信息，包含编码、标题、样式表等。
  • <title>：网页标题，显示在浏览器标签上。
  • <body>：网页主体内容。
  • <h1> / <p> / <a>：常用标签，分别表示标题、段落、超链接。

四、index.htm 在网站开发中的作用

  1. 默认首页
    • 当用户输入 www.example.com 时，服务器会自动加载 index.htm。
  2. 网站结构入口
    • 首页通常包含导航菜单，链接到网站的其他页面，如 about.htm、contact.htm。
  3. SEO（搜索引擎优化）基础
    • 首页通常是搜索引擎抓取的入口页面。
    • 文件名 index.htm 或 index.html 是网站规范做法。
  4. 本地测试网页
    • 在本地开发网页时，将 index.htm 放在项目根目录即可直接双击打开查看效果。

五、小技巧

  1. 统一首页文件名
    • Windows 或 Linux 下服务器默认加载 index.html 或 index.htm，尽量统一命名。
  2. 保持清晰目录结构 /mywebsite index.htm ← 首页 about.htm ← 关于页面 contact.htm ← 联系页面 css/ style.css images/ logo.png
  3. 本地开发快速预览
    • 直接双击 index.htm 打开浏览器预览。
    • 或者在 VS Code + Live Server 插件中启动本地服务器实时预览。