1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>南岩</title> <!-- 这是一个注释 -->
</head>
<body>
<h1>我的第一个标题</h1>
<hr/>
<p>我的第一个段落。</p>
<br/>
<a href="https://blog.nanyan.cc/">这是一个链接</a>
<img src="https://s1.ax1x.com/2022/05/18/OI5XU1.jpg" width="256" height="256" />
</body>
</html>

html文件引用路径问题

  1. html文件跟.jpg文件(f盘)在不同目录下:
1
<img src="file:///f:/*jpg" width="300" height="120"/>
  1. .html文件跟.jpg图片在相同目录下:
1
<img src=".jpg" width="300" height="120"/>;
  1. .html文件跟.jpg图片在不同目录下:

    • 图片*.jpg在image文件夹中,*html跟image在同一目录下:
    1
    <img src="image/*jpg/"width="300" height="120"/>
    • 图片jpg在image文件夹中,html在connage文件夹中,image跟connage在同一目录下:
    1
    <img src="../image/*jpg/"width="300" height="120"/>
  2. 如果图片来源于网络,那么写绝对路径:

1
<img src="http://image.baidu.com/pcindexhot" width="300" height="120"/>

记录一下 html 相对路径的写法:

  • ./:代表文件所在的目录(可以省略不写)如果写成image/background就相当于是在html文件下找image文件夹,当然是找不到的
  • ../:代表文件所在的父级目录
  • ../../:代表文件所在的父级目录的父级目录
  • /:代表文件所在的根目录

href和src的区别

hrefHypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:linka。例如:

1
<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理。这也是建议使用link,而不采用@import加载css的原因。
srcsource的缩写,src的内容是页面必不可少的一部分,是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有:imgscriptiframe。例如:

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

当浏览器解析到该元素时,会暂停浏览器的渲染,知道该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

简而言之,src用于替换当前元素;href用于在当前文档和引用资源之间建立联系。