网页设计基础第三讲：常用HTML标签应用与实践

露露在前端

于 2024-10-09 11:25:22 发布

阅读量72

点赞数 4

文章标签： html 前端 react.js 设计模式 javascript css

本文链接：https://blog.csdn.net/2401_86337335/article/details/142782366

版权

课程简介

在前两节课中，我们已经学习了HTML的基本概念，并动手创建了我们的第一个网页。今天，我们将深入探讨一些常用的HTML标签，并通过实践来加深理解。掌握这些标签将帮助我们创建更加丰富和功能齐全的网页。

常用HTML标签介绍

HTML（HyperText Markup Language）是一种标记语言，用于描述网页的内容和结构。下面是一些常用的HTML标签及其用途：

文本内容

<p>：段落标签，用于定义一段文本。
<h1>, <h2>, <h3>, ..., <h6>：标题标签，用于定义不同级别的标题，其中 <h1> 是最高级别，<h6> 是最低级别。
<br>：换行标签，用于插入一个换行。
<hr>：水平线标签，用于分割页面内容。

列表

<ul>：无序列表标签，用于创建项目符号列表。
<ol>：有序列表标签，用于创建编号列表。
<li>：列表项标签，用于定义列表中的每一项。

链接

<a>：超链接标签，用于创建指向其他网页或位置的链接。
<a href="http://example.com">链接文本</a>
图像
<img>：图像标签，用于插入图像。
<img src="image.jpg" alt="描述性文本">

表格

<table>：表格标签，用于创建表格。
<tr>：表格行标签，定义表格的一行。
<td>：表格单元格标签，定义表格中的单元格。
<th>：表格头单元格标签，定义表格头部的单元格。
<table>
    <tr>
        <th>标题1</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td>数据1</td>
        <td>数据2</td>
    </tr>
</table>

实践任务

现在让我们通过几个具体的例子来练习这些标签的使用。

示例1：创建一个简单的简历页面

假设我们要为自己创建一个简单的简历页面，页面应该包含以下内容：

个人信息（姓名、联系方式）教育经历工作经验

我的简历

张三

联系方式：zhangsan@example.com

<h2>教育经历</h2>
<ul>
    <li>2020-2024，XX大学，计算机科学与技术专业</li>
    <li>2017-2020，XX高中</li>
</ul>

<h2>工作经验</h2>
<ol>
    <li>2024-至今，ABC公司，软件工程师</li>
    <li>2022-2023，DEF公司，实习生</li>
</ol>