index.htm 文件是什么：网页开发的入门基础

本文链接：https://blog.csdn.net/m0_69824302/article/details/147483641

在浏览网页时，你是否注意到浏览器地址栏中经常出现 “index.htm” 或 “index.html” 这样的文件名？这是因为在网站的文件结构中，index.htm 文件通常扮演着非常重要的角色。本文将通俗易懂地解释 index.htm 文件是什么，以及它在网页开发中的作用，并通过示例代码帮助你更好地理解。

index.htm 文件是什么：网页开发的入门基础

一、什么是 index.htm (或 index.html) 文件？

index.htm 和 index.html 是网页服务器默认寻找并加载的网页文件名称。当用户访问一个网站的根目录时，例如 www.example.com，如果没有明确指定要访问的文件，服务器会按照预设的顺序查找目录下的文件，通常会优先查找名为 index.htm 或 index.html 的文件，并将其内容呈现给用户。

本质: index.htm 或 index.html 文件就是一个标准的 HTML (HyperText Markup Language) 文件，包含了网页的结构、内容和一些基本的样式。
区别: 两者的区别仅仅在于文件扩展名。.htm 是早期 DOS 和 Windows 系统使用的扩展名，而 .html 是更通用的标准扩展名。在现代网页服务器上，两者通常没有功能上的差别，你可以根据个人喜好选择使用哪一个。 通常推荐使用 .html，因为它是更广泛使用的标准。

二、index.htm 的作用和重要性

index.htm 文件的重要性体现在以下几个方面：

网站的默认首页: 如前所述，它是用户访问网站根目录时默认显示的页面。没有 index.htm 文件，访客可能会看到一个错误页面，或者显示服务器包含的文件列表，这对于用户体验来说是极其糟糕的。
搜索引擎优化 (SEO): 搜索引擎爬虫会首先抓取网站的 index.htm 文件，了解网站的主题和内容。好的 index.htm 文件能够帮助搜索引擎更好地理解你的网站，从而提高网站的排名。
网站的入口: index.htm 文件通常包含了网站的导航菜单、重要的介绍信息和指向其他页面的链接。它是用户进入网站的第一个窗口，直接影响用户对网站的第一印象。
组织网站结构: index.htm 文件能够帮助开发者清晰地组织网站的结构，定义网站的核心内容和功能。

三、index.htm 文件的基本结构：HTML 入门

index.htm 文件是用 HTML 语言编写的。HTML 是一种标记语言，通过使用各种标签 (tags) 来描述网页的结构和内容。下面是一个简单的 index.html 文件的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to My Website!</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            color: #333;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        nav {
            background-color: #eee;
            padding: 10px;
        }
        nav a {
            margin-right: 10px;
            text-decoration: none;
            color: #333;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>My Awesome Website</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>
    <main>
        <h2>Welcome!</h2>
        <p>This is the home page of my website.  Feel free to explore!</p>
    </main>
    <footer>
        &copy; 2023 My Website
    </footer>
</body>
</html>

让我们逐行解释这个示例代码：

<!DOCTYPE html>: 这是一个文档类型声明，告诉浏览器这是一个 HTML5 文档。
<html lang="en">: 这是 HTML 文档的根元素，lang="en" 属性指定了文档的语言为英语。
<head>: head 元素包含了关于文档的元数据，例如字符编码、视口设置、标题和样式表。
- <meta charset="UTF-8">: 指定文档的字符编码为 UTF-8，支持显示各种语言的字符，包括中文。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口，使得网页在不同的设备上能够自适应显示。
- <title>Welcome to My Website!</title>: 设置网页的标题，显示在浏览器的标签栏上。
- <style>: 嵌入式的 CSS 样式，用于控制网页的样式。
<body>: body 元素包含了网页的可见内容。
- <header>: 页面的头部区域，通常包含网站的标题和标志。
- <nav>: 导航栏，包含指向网站其他页面的链接。
  - <a href="#">Home</a>: 链接到 "Home" 页面，href="#" 表示链接到当前页面（实际上没有进行跳转）。
- <main>: 页面的主要内容区域。
  - <h2>Welcome!</h2>: 二级标题。
  - <p>This is the home page of my website. Feel free to explore!</p>: 段落文本。
- <footer>: 页面的底部区域，通常包含版权信息、联系方式等。
  - © 2023 My Website: 版权信息，© 是 HTML 实体，表示版权符号 ©。

四、HTML 常用标签

除了上面示例中出现的标签，HTML 还有很多常用的标签，掌握这些标签是编写 index.htm 文件的基础：

标题标签: <h1> 到 <h6>：分别表示一级标题到六级标题，<h1> 通常用于页面最重要的标题。
段落标签: <p>：表示一个段落。
链接标签: <a>：创建链接，href 属性指定链接的目标地址。
图像标签: <img>：插入图像，src 属性指定图像的 URL，alt 属性提供图像的替代文本。
列表标签:
- <ul>：无序列表 (unordered list)。
- <ol>：有序列表 (ordered list)。
- <li>：列表项 (list item)。
表格标签:
- <table>：表格。
- <tr>：表格行 (table row)。
- <th>：表头单元格 (table header)。
- <td>：表格数据单元格 (table data)。
表单标签: 用于创建用户输入表单，例如：
- <form>：表单。
- <input>：输入框。
- <textarea>：文本域。
- <button>：按钮。
- <select>：下拉列表。
<div> 和 <span>: 这两个标签是通用的容器标签，用于组织和划分 HTML 元素，方便进行 CSS 样式控制。<div> 是块级元素，占据一整行，而 <span> 是行内元素，只占据内容所占的空间。

五、CSS 样式：美化你的 index.htm

HTML 负责网页的结构和内容，而 CSS (Cascading Style Sheets) 负责网页的样式和外观。CSS 可以控制网页的颜色、字体、布局等。

CSS 的三种使用方式:
- 内联样式 (Inline Styles): 直接在 HTML 标签中使用 style 属性来定义样式。不推荐使用，因为不利于维护和代码复用。例如： <p style="color: red;">This is a red paragraph.</p>
- 内部样式表 (Internal Stylesheets): 将 CSS 样式写在 HTML 文件的 <head> 标签内的 <style> 标签中。示例见上面的 index.html 代码。
- 外部样式表 (External Stylesheets): 将 CSS 样式写在一个单独的 .css 文件中，然后在 HTML 文件中使用 <link> 标签引入该文件。这是推荐使用的 CSS 组织方式，因为可以实现样式和内容的分离，方便维护和代码复用。
CSS 选择器 (Selectors): CSS 选择器用于选择要应用样式的 HTML 元素。
- 元素选择器 (Element Selectors): 选择所有指定类型的 HTML 元素。例如： p { color: blue; } 选择所有 <p> 标签。
- 类选择器 (Class Selectors): 选择所有具有指定类的 HTML 元素。例如： .highlight { background-color: yellow; } 在 HTML 中使用时 <p class="highlight">This is highlighted.</p>
- ID 选择器 (ID Selectors): 选择具有指定 ID 的 HTML 元素。ID 在一个 HTML 文档中应该是唯一的。例如： #header { font-size: 2em; } 在 HTML 中使用时 <header id="header">...</header>
- 属性选择器 (Attribute Selectors): 选择具有指定属性或属性值的 HTML 元素。例如： a[href] { color: green; } 选择所有具有 href 属性的 <a> 标签。
- 组合选择器 (Combinators): 可以组合多个选择器，例如： header p { font-weight: bold; } 选择所有在 <header> 元素内的 <p> 标签。
常见的 CSS 属性:
- color: 设置文本颜色.
- font-size: 设置字体大小.
- font-family: 设置字体类型.
- background-color: 设置背景颜色.
- margin: 设置外边距.
- padding: 设置内边距.
- width: 设置元素宽度.
- height: 设置元素高度.
- text-align: 设置文本对齐方式.
- display: 设置元素的显示方式 (例如 block, inline, inline-block, flex, grid).

六、JavaScript 脚本：增加互动性

HTML 和 CSS 负责网页的结构和样式，而 JavaScript 负责网页的互动性。JavaScript 是一种编程语言，可以在浏览器中运行，实现各种动态效果和用户交互。

JavaScript 的使用方式:
- 内联脚本 (Inline Scripts): 直接在 HTML 标签中使用事件处理属性来执行 JavaScript 代码。不推荐使用，和内联样式一样不利于维护。
- 内部脚本 (Internal Scripts): 将 JavaScript 代码写在 HTML 文件的 <head> 或 <body> 标签内的 <script> 标签中。
- 外部脚本 (External Scripts): 将 JavaScript 代码写在一个单独的 .js 文件中，然后在 HTML 文件中使用 <script> 标签引入该文件。 推荐使用。
JavaScript 基础:
- 变量: 用于存储数据，使用 var, let, 或 const 关键字声明。
- 数据类型: 包括字符串 (string), 数字 (number), 布尔值 (boolean), 数组 (array), 对象 (object), null, 和 undefined.
- 运算符: 包括算术运算符 (+, -, *, /), 比较运算符 (==, !=, >, <), 逻辑运算符 (&&, ||, !).
- 控制流: 包括 if 语句, for 循环, while 循环.
- 函数: 用于封装可重用的代码块。
- DOM (Document Object Model): DOM 是 HTML 文档的树形表示，JavaScript 可以通过 DOM 来访问和操作 HTML 元素。例如，可以使用 document.getElementById() 获取指定 ID 的元素，使用 element.innerHTML 修改元素的内容。

一个简单的 JavaScript 示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Example</title>
</head>
<body>
    <button id="myButton">Click Me!</button>
    <p id="myParagraph">Hello, World!</p>

    <script>
        const button = document.getElementById('myButton');
        const paragraph = document.getElementById('myParagraph');

        button.addEventListener('click', function() {
            paragraph.textContent = 'Button Clicked!';
        });
    </script>
</body>
</html>

这个示例中，点击按钮后，段落的内容会变为 "Button Clicked!"。

七、工具和资源

文本编辑器/IDE: Visual Studio Code (VS Code), Sublime Text, Atom, IntelliJ IDEA, WebStorm。 VS Code 是一个非常流行的免费开源代码编辑器，拥有丰富的插件生态系统，非常适合 Web 开发。
浏览器开发者工具: Chrome DevTools, Firefox Developer Tools。这些工具可以用于调试 HTML, CSS, JavaScript 代码，检查网页性能以及网络请求。
在线资源:
- MDN Web Docs (Mozilla Developer Network): 优秀的 Web 技术文档，包含了 HTML, CSS, JavaScript 等方面的详细介绍。
- W3Schools: 提供了大量的 Web 开发教程和示例。
- Stack Overflow: 在这里可以找到各种编程问题的答案。

八、结论

index.htm (或 index.html) 文件是构建网站的基础。理解 HTML 的结构，CSS 的样式以及 JavaScript 的互动性，是成为一名优秀的网页开发者的前提。掌握本文所介绍的知识，并不断实践和学习，你就能创建出令人惊艳的网站！起步总是艰难的，但只要坚持下去，你就能看到成功的曙光。愿你在网页开发的道路上越走越远！