1.HTML基础入门：标签、属性与路径详解（VSCode开发环境）

一、开发工具：VSCode

安装推荐插件

二、HTML基本结构

不标准的HTML结构示例

[五、标题标签：h1 - h6](#五、标题标签：h1 - h6)

在前端开发中，HTML是构建网页内容的基石。本文将结合VSCode开发工具，系统讲解HTML的核心标签、属性及路径使用，适合前端初学者快速上手。

一、开发工具：VSCode

企业开发中，前端工程师最常使用的编辑器是 VSCode。它轻量、插件丰富，极大提升开发效率。

安装推荐插件

Auto Rename Tag：自动重命名配对的HTML标签。
view-in-browser：在默认浏览器中预览HTML文件。
Live Server：启动本地开发服务器，支持热更新。

二、HTML基本结构

不标准的HTML结构示例

html 复制代码

<html>
  <head>
    <title>第一个页面</title>
  </head>
  <body>
    hello world
  </body>
</html>

标签说明

标签	说明
`html`	HTML文件根标签
`head`	编写页面相关的属性（如标题、编码、样式等）
`title`	页面标题（显示在浏览器标签页）
`body`	页面内容展示信息（用户可见部分）

DOM树结构

所有的标签都是 html的子标签。
head和 body是兄弟标签。
每一个标签相当于一个对象，程序员可通过代码获取并对其进行增删查改。

三、快速生成代码框架

在VSCode中，输入：

java 复制代码

! + 回车

即可快速生成标准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>

四、注释标签

快捷键：Ctrl + /

用于临时屏蔽代码，不影响页面渲染。

五、标题标签：h1 - h6

共有6个级别，从 h1到 h6，数字越大，字体越小。

html 复制代码

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

六、格式化标签

用于对文本进行样式强调：

加粗：和 
倾斜：和 
删除线 ：<del>和 <s>
下划线 ：<ins>和

七、图片标签：img

基本用法

img标签必须带有 src属性，表示图片路径。

html 复制代码

<img src="rose.jpg">

注意：需将 rose.jpg文件放在与HTML文件同级目录中。

八、img标签_src属性详解

相对路径

./xxx.png→ 同级图片
./img/xxx.png→ 同级文件夹中的图片
../xxx.png→ 上一级目录中的图片

绝对路径

图片路径（本地完整路径，如 D://test02.png）
网络上的图片资源（如 https://www.example.com/image.png）

⚠️ 注意：img标签必须搭配 src使用，用于指定图片路径。

九、img标签的其他属性

alt：替换文本。当图片不能正确显示时，会显示替代文字。
title：提示文本。鼠标悬停在图片上时显示提示。
width/height：控制宽度和高度。一般只改一个，另一个会等比例缩放，避免图片失衡。
border：边框，参数是像素值。但一般使用CSS设定。

示例代码

html 复制代码

<img src="rose.jpg" alt="鲜花" title="这是一朵鲜花" width="500px" height="800px" border="5px">

💡 重点强调 ：alt后面的文案，只有当图片加载出错的时候才会展示，如果图片加载成功，这个文案就不会展示。

十、标签属性编写顺序

标签属性的编写顺序没有硬性规定，按团队规范或个人习惯即可。

十一、超链接标签：a

核心属性

href：必须具备，表示点击后跳转到哪个页面。
target ：打开方式。默认是 _self（当前页打开），如果是 _blank则用新的标签页打开。

基础示例

html 复制代码

<a href="http://www.baidu.com">百度</a>

多种跳转场景

html 复制代码

<body>
  <a href="https://www.baidu.com/">跳转到百度</a>
  <a href="html01.html">跳转到html01页面</a>
  <a href="#">在当前页面</a>
  <a href="https://www.baidu.com/">
    <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="">
  </a>
</body>

a标签_target属性说明

target="_self"：默认，当前页打开。
target="_blank"：新标签页打开。

十二、总结

本文系统梳理了HTML基础结构、常用标签（标题、格式化、图片、超链接）、路径写法及属性使用。掌握这些，即可搭建出结构清晰、功能完整的静态网页。