从0开始学前端第二课：HTML文本元素_html文本元素学习目标-CSDN博客

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135816762

第二课：HTML文本元素

学习目标：

理解并使用基本的文本标签：<p>, <h1>-<h6>.
学习文本格式化标签的用法：<strong>, <em>, <sup>, <sub>, <br>, <hr>.
学习创建列表的方法：无序列表(<ul>), 有序列表(<ol>), 列表项(<li>).
学习如何插入和格式化链接(<a>)和图片(<img>).

学习内容：

段落和标题
- 段落(<p>)： 是HTML中基本的文本组织单位。每个段落标签自动带有上下边距，表示段落间的空白。
```
<p>这是一个文本段落，它展示了一些文本内容。</p>
```
  预计输出效果：显示一个文本段落，在浏览器中会被渲染为文本块。
- 标题(<h1>-<h6>)： 这些标签用于定义标题，<h1>是最高的级别，通常用于主标题，而<h6>是最低级别，用于次要的标题。
```
<h1>这是一个H1标题</h1>
<h2>这是一个H2标题</h2>
```
  预计输出效果：在浏览器中，<h1>将显示为最大的字体，而<h2>则相对较小。
文本格式化
- 强调(<strong>)和斜体(<em>)： <strong>通常表示重要性，而<em>表示强调的文本。
```
<strong>这段文本很重要。</strong>
<em>这段文本被强调。</em>
```
  预计输出效果：<strong>通常以粗体显示，<em>通常以斜体显示。
- 上标(<sup>)和下标(<sub>)： 用于显示化学式、数学表达式等。
```
H<sub>2</sub>O 是水的化学式。
E = mc<sup>2</sup> 是爱因斯坦的质能方程。
```
  预计输出效果：H2O中的2会显示得更低，而E = mc^2中的2会显示得更高。
- 换行(<br>)和水平线(<hr>)： <br>用于在不开始新段落的情况下强制换行，<hr>用于在文本中插入一条水平分隔线。
```
这是第一行。<br>这是新的一行。
<hr>
```
  预计输出效果：两行文本被<br>分开，<hr>在文本下方绘制一条水平线。
列表
- 无序列表(<ul>)和有序列表(<ol>)： <ul>用于不需要排序的列表项，而<ol>用于需要排序的列表项。
```
<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>樱桃</li>
</ul>

<ol>
  <li>唤醒</li>
  <li>刷牙</li>
  <li>出门</li>
</ol>
```
  预计输出效果：<ul>生成的是带有项目符号的列表，<ol>生成的是带有数字编号的列表。
链接和图像
- 链接(<a>)： 允许用户点击跳转到另一个页面或页面内的某个部分。
```
访问<a href="https://www.google.com">谷歌搜索</a>。
```
  预计输出效果：显示为“访问谷歌搜索”，点击可以跳转到谷歌的主页。
- 图像(<img>)： 用于在页面上插入图片。
```
<img src="image.jpg" alt="描述性文字">
```
  预计输出效果：在网页上显示image.jpg图片，如果图片不可用，则显示alt属性中的描述性文字。

课后练习：

创建一个HTML页面，它包含一个H1标题和两个段落。
在一个段落中使用至少两种文本格式化标签。
创建一个包含三个项目的无序列表。
插入一个链接到你最喜欢的网站。
插入一张图片，并为它添加描述性的alt文本。

练习解析及示例答案：

创建HTML页面

创建一个名为index.html的文件，并输入以下内容：

<!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>
    <h1>欢迎学习HTML</h1>
    <p>这是第一个段落，学习HTML很有趣！</p>
    <p>这是第二个段落，<strong>重要内容强调显示</strong>，而<em>斜体显示强调</em>。</p>

    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>樱桃</li>
    </ul>

    <p>访问<a href="https://www.google.com">谷歌搜索</a>。</p>

    <img src="image.jpg" alt="美丽的风景">
</body>
</html>

文本格式化

在第二个段落中，<strong>和<em>标签分别使文本以粗体和斜体显示。
无序列表

使用<ul>创建了一个无序列表，里面有三个<li>项目。
链接

使用<a>标签创建了一个指向谷歌搜索的链接。
图像

使用<img>标签插入了一张图片，假设该图片文件名为image.jpg，并位于与index.html相同的目录下。alt属性提供了图片无法显示时的替代文本。