1.HTML基础入门：标签、属性与路径详解（VSCode开发环境） 目录一、开发工具VSCode安装推荐插件二、HTML基本结构不标准的HTML结构示例标签说明DOM树结构三、快速生成代码框架四、注释标签五、标题标签h1 - h6六、格式化标签七、图片标签img基本用法八、img标签_src属性详解相对路径绝对路径九、img标签的其他属性示例代码十、标签属性编写顺序十一、超链接标签a核心属性基础示例多种跳转场景a标签_target属性说明十二、总结在前端开发中HTML是构建网页内容的基石。本文将结合VSCode开发工具系统讲解HTML的核心标签、属性及路径使用适合前端初学者快速上手。一、开发工具VSCode企业开发中前端工程师最常使用的编辑器是VSCode。它轻量、插件丰富极大提升开发效率。安装推荐插件Auto Rename Tag自动重命名配对的HTML标签。view-in-browser在默认浏览器中预览HTML文件。Live Server启动本地开发服务器支持热更新。二、HTML基本结构不标准的HTML结构示例html head title第一个页面/title /head body hello world /body /html标签说明标签说明htmlHTML文件根标签head编写页面相关的属性如标题、编码、样式等title页面标题显示在浏览器标签页body页面内容展示信息用户可见部分DOM树结构所有的标签都是html的子标签。head和body是兄弟标签。每一个标签相当于一个对象程序员可通过代码获取并对其进行增删查改。三、快速生成代码框架在VSCode中输入! 回车即可快速生成标准HTML骨架!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body /body /html四、注释标签快捷键Ctrl /用于临时屏蔽代码不影响页面渲染。五、标题标签h1 - h6共有6个级别从h1到h6数字越大字体越小。h1hello/h1 h2hello/h2 h3hello/h3 h4hello/h4 h5hello/h5 h6hello/h6六、格式化标签用于对文本进行样式强调加粗strong和b倾斜em和i删除线del和s下划线ins和u七、图片标签img基本用法img标签必须带有src属性表示图片路径。img srcrose.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设定。示例代码img srcrose.jpg alt鲜花 title这是一朵鲜花 width500px height800px border5px重点强调alt后面的文案只有当图片加载出错的时候才会展示如果图片加载成功这个文案就不会展示。十、标签属性编写顺序标签属性的编写顺序没有硬性规定按团队规范或个人习惯即可。十一、超链接标签a核心属性href必须具备表示点击后跳转到哪个页面。target打开方式。默认是_self当前页打开如果是_blank则用新的标签页打开。基础示例a hrefhttp://www.baidu.com百度/a多种跳转场景body a hrefhttps://www.baidu.com/跳转到百度/a a hrefhtml01.html跳转到html01页面/a a href#在当前页面/a a hrefhttps://www.baidu.com/ img srchttps://www.baidu.com/img/flexible/logo/pc/result.png alt /a /bodya标签_target属性说明target_self默认当前页打开。target_blank新标签页打开。十二、总结本文系统梳理了HTML基础结构、常用标签标题、格式化、图片、超链接、路径写法及属性使用。掌握这些即可搭建出结构清晰、功能完整的静态网页。