HTML基础入门：结构、文本格式化与多媒体图片
HTML（超文本标记语言）是构建网页的基础语言，是每一位前端开发者的必修课。
HTML文档基本结构
HTML文档的组成
HTML文档的结构就像建筑的框架，支撑起整个网页内容。一个标准的HTML文档示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
</head>
<body>
你好，世界！
</body>
</html>
解析
<!DOCTYPE html>：声明文档类型，指示浏览器以HTML5标准进行解析。<html>：HTML文档的根标签。<head>：包含元数据（如字符编码、标题）。<meta charset="UTF-8">：设置字符编码为UTF-8，以支持多种语言。<title>：定义网页标题，显示在浏览器标签栏。<body>：网页主体部分，包含用户可见的内容。
常见HTML标签及其应用
HTML标签分类
HTML标签分为两类：
- 单标签：例如
<img>，没有结束标签。 - 双标签：例如
<p></p>，具有开始和结束标签。
标题与段落
标题标签
HTML提供了六级标题标签 <h1> 到 <h6>，表示从大到小的标题级别。
<h1>一级标题</h1>
<h2>二级标题</h2>
段落标签
段落用 <p> 标签定义，段落之间有默认的空白间距。
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
文本格式化标签
加粗与倾斜
- 加粗：使用
<b>或语义化的<strong>标签。 - 倾斜：使用
<i>标签。
<b>加粗文本</b>
<strong>强调文本</strong>
<i>倾斜文本</i>
下划线与删除线
- 下划线：
<u>。 - 删除线：
<del>。
<u>带下划线的文本</u>
<del>被删除的文本</del>
上标与下标
- 上标：
<sup>。 - 下标：
<sub>。
2<sup>3</sup> 是 8。
H<sub>2</sub>O 是水。
字体设置与颜色
使用<font>标签
<font>标签用于设置字体、大小和颜色，但已被CSS取代，仅供了解。
属性
- face：字体名称。
- size：字体大小，取值范围1-7。
- color：字体颜色。
示例
<font face="Arial" size="5" color="blue">Hello, World!</font>
使用CSS设置字体
现代HTML建议用CSS设置字体样式。
<p style="font-family: Arial; font-size: 16px; color: red;">CSS设置字体样式。</p>
多媒体图片
图片插入标签 <img>
常用属性
src：图片的路径。alt：图片加载失败时的替代文本。width和height：控制图片大小。
示例
<img src="https://example.com/image.jpg" alt="示例图片" width="300">
图片路径
- 网络图片
<img src="https://example.com/image.jpg" alt="网络图片">
- 绝对路径
<img src="C:\time\img.jpg" alt="本地图片">
- 相对路径
<img src="./images/pic.jpg" alt="本地图片">
图片排版
通过CSS控制图片布局：
<style>
img {
width: 300px;
height: auto;
float: left;
margin: 10px;
}
</style>
<img src="example.jpg" alt="示例图片">
<p>这是图片旁的文字。</p>
凡是过去，皆为序章；凡是未来，皆有可期。
