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="")，避免屏幕阅读器朗读冗余信息。路径引用优先使用相对路径，确保资源位置变更时链接不会失效。