html引入文件路径怎么写

在HTML中，我们经常需要引入外部文件，如CSS样式表、JavaScript脚本等，为了实现这一目标，我们需要使用HTML的<link>标签和<script>标签，在这两个标签中，我们需要指定外部文件的路径，本文将详细介绍如何在HTML中正确地引入外部文件。

1. HTML中的<link>标签

<link>标签用于定义文档与外部资源之间的关系，它可以引入CSS样式表、图标等，在<link>标签中，我们需要设置rel属性来表示资源类型，以及href属性来指定资源的URL。

如果我们想要引入一个名为style.css的CSS样式表，我们可以这样写：

<link rel="stylesheet" href="style.css">

这里，rel="stylesheet"表示我们要引入一个CSS样式表，href="style.css"表示我们要引入的CSS样式表的文件名是style.css。

2. HTML中的<script>标签

<script>标签用于在HTML文档中插入客户端脚本，这些脚本可以是JavaScript代码、VBScript代码等，在<script>标签中，我们需要设置src属性来指定脚本文件的URL。

如果我们想要引入一个名为script.js的JavaScript脚本，我们可以这样写：

<script src="script.js"></script>

这里，src="script.js"表示我们要引入的JavaScript脚本的文件名是script.js，注意，我们在<script>标签的末尾添加了一个闭合标签（即</script>），这是因为HTML要求所有标签都必须成对出现。

3. 相对路径与绝对路径

在引入外部文件时，我们可以选择使用相对路径或绝对路径。

相对路径：相对路径是指相对于当前HTML文件所在位置的路径，如果当前HTML文件位于/home/user/project/index.html，而我们要引入的CSS样式表位于同一目录下的styles/style.css，则相对路径为styles/style.css，在HTML文件中，我们可以直接使用这个相对路径：

<link rel="stylesheet" href="styles/style.css">

绝对路径：绝对路径是指从根目录开始的完整路径，如果当前HTML文件位于/home/user/project/index.html，而我们要引入的CSS样式表位于服务器上的http://example.com/styles/style.css，则绝对路径为http://example.com/styles/style.css，在HTML文件中，我们需要使用完整的URL：

<link rel="stylesheet" href="http://example.com/styles/style.css">

4. 浏览器缓存问题

当我们多次访问同一个网页时，浏览器可能会缓存外部文件，以提高加载速度，这可能会导致我们的修改不生效，为了避免这个问题，我们可以在外部文件的名称后面添加一个版本号或时间戳，以便每次更新时都生成一个新的文件名。

style.css?v=1.0

script.js?t=20220101

这样，每次更新外部文件时，浏览器都会下载一个新的文件，而不是使用缓存的版本。

5. 相关问题与解答

问题1：如何在HTML中使用图片？

答：在HTML中，我们可以使用<img>标签来插入图片，在<img>标签中，我们需要设置src属性来指定图片的URL。

<img src="image.jpg" alt="示例图片">

这里，src="image.jpg"表示我们要插入的图片的文件名是image.jpg，注意，我们还添加了一个可选的alt属性，用于描述图片的内容，当图片无法显示时，浏览器会显示这个描述文本。

问题2：如何在HTML中使用字体？

答：在HTML中，我们可以使用Web字体来自定义页面的字体样式，要使用Web字体，我们需要先引入一个字体文件（通常是WOFF或WOFF2格式），然后在CSS中设置字体名称和字体大小。

1、引入字体文件：

<link rel="stylesheet" href="https://fonts.lug.ustc.edu.cn/css?family=Roboto&display=swap">

这里，我们使用了Google Fonts提供的Roboto字体，注意，我们使用了相对路径（即从当前HTML文件所在的目录开始），当然，我们也可以使用绝对路径或本地路径。

2、设置字体样式：

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}