学习HTML（以战养战）

最新推荐文章于 2025-05-13 20:33:05 发布

方方不太会

最新推荐文章于 2025-05-13 20:33:05 发布

阅读量1.3k

点赞数 33

文章标签：学习 html 前端

本文链接：https://blog.csdn.net/m0_65203411/article/details/143342538

版权

HTML的认识

HTML代码部分分为头和身体

HTML中的单双标签

HTML中的行标签：编辑一般该表签会直接占用一行，例如

它会直接将div之间的信息或者文件单独一行表示。这时文件网页会显示一行1编辑如果在这中间加一个div标签编辑那么就会出现编辑就会自动换行。

HTML文件的路径问题

HTML的书写

HTML的认识

HTML代码部分分为头和身体
```
<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
```
其中<html></html>可以理解为人类的皮肤，它包裹着头和身体。<head></head>这个是头部，其中网页的名称，处理器等的标注，还有后面的css文件的引入等等。<body></body>是身体，是网页中浏览的内容撰写的地方。
HTML中的单双标签
```
<meta>
<link rel="" href="">

<div></div>
```
单标签相当于单身狗，只有一个。例如<meta>,<link>。

双标签其实就是有对象的（bug一般都是出现在这里）例如<div></div>,<ol></ol>等等
HTML中的行标签
一般该表签会直接占用一行，例如<div></div>它会直接将div之间的信息或者文件单独一行表示。
1. 这时文件网页会显示一行1
  如果在这中间加一个div标签
  那么就会出现
  就会自动换行。
HTML文件的路径问题

相对路径：是根据index.html文件的位置变换的

我们一般会将文件弄在一个大文件夹里，倒时候移动文件夹，也不会导致文件丢失
```
<link rel="stylesheet" href="./css/index.css">
```
绝对路径：就是文件从一开始的D盘一个文件夹一个文件夹的寻找目标文件。
```
<a href="E:\网页制作\gallery\背景.jpg"></a>
```

HTML的书写

最简单的代码结构

<html>
<head>
    <title>网页的标签名</title>
</head>
<body>

</body>
</html>

一般是适用于刚开始学的新手。如果你有Visual Studion Code的话，可以在输入法为英文的状态下！+回车键，就可以得到一下代码结构，注意此时的网页标签名是你文件的命名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>