HTML简单入门—— 基础标签与路径解析
HTML 入门：基础标签与路径解析
常用HTML标签详解
标题标签 <h1>-<h6> 标题标签用于定义文档标题层级，<h1>为最高级标题，<h6>为最低级：
<h1>主标题</h1>
<h2>次级标题</h2>
<h3>小标题</h3>水平线标签 <hr>
在内容区块间创建视觉分隔线：
<section>第一部分内容</section>
<hr> <!-- 水平分隔线 -->
<section>第二部分内容</section>
图像标签 <img>
用于嵌入图像的核心属性：
<img src="logo.png" alt="公司标志" width="200">
路径系统解析
相对路径
相对于当前文件的路径：
<!-- 同级目录 -->
<img src="photo.jpg"><!-- 子目录 -->
<img src="images/photo.jpg"><!-- 上级目录 -->
<img src="../assets/photo.jpg">
绝对路径
完整URL或从根目录开始的路径：
<!-- 完整URL -->
<img src="https://example.com/images/photo.jpg"><!-- 根目录相对路径 -->
<img src="/images/photo.jpg">src属性：设置要展示的图片路径
绝对路径：
绝对磁盘路径：C:\Users\Tang\Desktop\HTML\img\logo.png
绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
相对路径：
. 代表当前路径 (当前路径可以省略)
.. 代表上一级路径
alt属性的核心作用在<img>标签中，alt属性具有三大关键功能：
无障碍访问：为视障用户提供文字描述
加载失败提示：当图片无法加载时显示替代文本
SEO优化：帮助搜索引擎理解图片内容
正确用法示例：
<!-- 描述性alt文本 -->
<img src="cat.jpg" alt="橘色猫咪在窗台晒太阳"><!-- 装饰性图片留空 -->
<img src="divider.png" alt=""> 在图片路径错误，或者图片失效时可以给出文字提示
width和height属性详解：
布局控制：显式设置图片显示尺寸，避免页面加载时布局跳动
性能优化：浏览器提前预留空间，减少渲染阻塞
响应式基础：配合CSS实现自适应布局
长宽比例：同时设置可固定宽高比，防止图片变形
最佳实践：建议始终设置width和height属性，即使使用CSS控制尺寸
综合应用示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>【新思想引领新征程】推进美丽中国建设 谱写绿色发展新篇章</title>
</head>
<body><img src="./img/logo.png" alt="logo.png"> 新浪政务>正文<!-- 标题标签 h1~h6 --><h1>【新思想引领新征程】推进美丽中国建设 谱写绿色发展新篇章</h1><!-- 水平线标签 hr --><hr>2023年07月23日 19:49 央视网<hr>
</body>
</html>页面显示效果如下：
最佳实践提示：始终为功能型图片添加描述性alt文本，装饰性图片使用空alt属性(
alt="")，避免屏幕阅读器朗读冗余信息。路径引用优先使用相对路径，确保资源位置变更时链接不会失效。