当前位置：首页 > article >正文

前端常见标签

article 2025/3/19 18:14:30

<li> (List Item)：定义列表中的一个项目（项）
<ul> (Unordered List)：定义无序列表
<ol> (Ordered List)：定义有序列表
<a> (Anchor Tag)：定义超链接

在这里插入图片描述

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

苹果
香蕉
橙子

在这里插入图片描述

<ol>
    <li>步骤一</li>
    <li>步骤二</li>
    <li>步骤三</li>
</ol>

步骤一
步骤二
步骤三

在这里插入图片描述

<a href="https://example.com">访问示例网站</a>

访问示例网站

在这里插入图片描述

<ul>
    <li>
        新闻资讯
        <ul>
            <li><a href="http://www.people.com.cn/">人民日报</a></li>
            <li><a href="http://www.gmw.cn/">光明日报</a></li>
        </ul>
    </li>

    <li>
        搜索引擎
        <ul>
            <li>
                雅虎
                <ul>
                    <li><a href="http://www.yahoo.com/">雅虎</a></li>
                    <li><a href="http://www.yahoo.co.jp/">雅虎日本</a></li>
                </ul>
            </li>
            <li><a href="http://www.excite.com/">Excite</a></li>
            <li><a href="http://www.google.com/">谷歌</a></li>
        </ul>
    </li>
</ul>

新闻资讯
- 人民日报
- 光明日报
搜索引擎
- 雅虎
  - 雅虎
  - 雅虎日本
- Excite
- 谷歌

在这里插入图片描述
<h1> 到 <h6> 共6个不同级别的标题，其中 <h1> 是最重要的（级别最高），而 <h6> 是最不重要的（级别最低）

<h1>欢迎来到我们的网站！</h1>
<h2>欢迎来到我们的网站！</h2>
<h3>欢迎来到我们的网站！</h3>
<h4>欢迎来到我们的网站！</h4>
<h5>欢迎来到我们的网站！</h5>
<h6>欢迎来到我们的网站！</h6>

欢迎来到我们的网站！

在这里插入图片描述
<hr> 标签表示水平线（Horizontal Rule），它在网页中创建一条水平分割线，通常用于视觉上划分内容区域或段落。

<hr>

在这里插入图片描述

<tr>：全称为 Table Row（表格行）
<td>：全称为 Table Data Cell（表格数据单元格）

<table>
    <caption>2023年第一季度员工销售业绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>部门</th>
            <th>销售额（元）</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>销售部</td>
            <td>500,000</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>市场部</td>
            <td>450,000</td>
        </tr>
        <!-- 更多行数据... -->
    </tbody>
</table>