HTML基础：文本排版与图片插入实操

记录HTML常用文本标签的使用方法，掌握标题、段落、文字强调标签的语义特性，熟练运用img标签实现图片插入，完成基础图文混排页面实操。

网页的核心组成无非是文字与图片，熟练掌握文本和图片标签，是搭建静态网页的第一步。今天系统学习了HTML文本排版相关标签和图片插入语法，通过实操熟悉了各个标签的语义和使用细节。

文本标签是页面文字排版的核心，常用标签各司其职：h1-h6为六级标题标签，层级逐级递减，h1权重最高，用于页面核心主标题，单个页面仅保留一个h1，保证页面语义化；p标签是段落专属标签，用于承载大段正文内容，浏览器会自动为段落适配间距，区分文本区块；strong和em为文字语义强调标签，分别实现文字加粗和倾斜，用于重点内容标注。

除了文本排版，图片是丰富页面视觉效果的关键。HTML中通过单标签img实现图片插入，标签包含多个核心属性，其中src和alt为必备属性。src用于填写图片资源路径，开发中统一使用相对路径，将所有图片资源统一存放至img文件夹，有效避免路径失效、图片加载失败的问题。

alt属性作为图片替代文本，在图片加载失败、网络异常时展示文字提示，同时适配无障碍阅读器，提升网页兼容性和可用性。除此之外，还可以通过width、height属性控制图片尺寸，仅设置宽度即可实现图片等比例缩放，避免画面拉伸变形。

基础图文混排实操示例代码：

<h2>前端学习记录</h2>
<p>HTML用于搭建网页结构，CSS用于美化页面样式，二者结合可以实现精美的静态网页效果。</p>
<img src="img/study.png" alt="前端学习截图" width="800">

通过简单的标签组合，就能快速搭建出基础的图文展示页面，熟练掌握这些基础标签，能够满足简单资讯页面、展示页面的开发需求。