一文带你了解html标签

news2024/9/25 9:36:57

一、文档结构标签

<html>：网页的根标签，嵌套包含所有标签。

<head>：头标签，包含文档的元数据用于编写网页的修饰内容，附加信息。

<body>：身体标签，用于编写展示内容，用户可以看见或者可以交互内容。

二、框架标签

<div>：块级元素

<h1> 到 <h6>：定义标题，<h1> 是最高级别的标题

<p>：定义一个段落。

<span>：隔离样式

<br>：强制换行

<hr>：分割线

例子如下：

运行结果：

三、文本标签

<b>/<strong>：加粗

<i>/<em>：斜体

<u>：下划线

<del>：删除线

<sup>：上标

<sub>：下标

例子如下：

运行结果：

四、列表标签

<ol>：有序列表

<ul>：无序列表

<li>：列表项，独占一行，不能单独存在

<dl>：自定义列表

<dt>：列表项目，没有缩进

<dd>：列表项目说明，有缩进

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>有序列表</h1>
        <!-- ol>li*3>{有序列表} -->
        <ol>
            <li>有序列表1</li>
            <li>有序列表2</li>
            <li>有序列表3</li>
        </ol>
    </div>
    <div>
        <h1>无序列表</h1>
         <!-- ul>li*3>{无序列表} -->
        <ul>
            <li>无序列表</li>
            <li>无序列表</li>
            <li>无序列表</li>
        </ul>
    </div>
    <div>
        <h1>自定义列表</h1>
        <dl>
            <dt>列表项名1</dt>
            <dd>列表项说明1</dd>
            <dt>列表项名2</dt>
            <dd>列表项说明2</dd>
            <dt>列表项名3</dt>
            <dd>列表项说明4</dd>
        </dl>
    </div>
    <div>
        <h1>小说列表</h1>
        <p>玄幻小说</p>
        <p>修真小说</p>
        <p>武侠小说</p>
        <div>结尾</div>
    </div>
</body>
</html>

运行结果：

五、表格标签

<table>：定义表格

属性：

border：边框

cellpadding：内部单元格的高度

cellspacing：单元格之间的距离

align：对齐方式

<tr>：定义表格行

<th>：定义表头单元格

<td>：定义表格单元格

属性

colspan：合并同一行中的多列

rowspan：合并同一列中的多行

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="10", cellspacing="10", cellpadding="10", align="center", width="80%">
        <tr>
            <th>表头单元格1></th>
            <th>表头单元格2</th>
            <th>表头单元格3</th>
            <tr>
                <td colspan="2">普通单元格1</td>
                <td>普通单元格2</td>
            </tr>
            <tr>
                <td>普通单元格1</td>
                <td colspan="2" rowspan="2">
                    <table border="10", width="100%">
                        <tr>
                            <th> 列1</th>
                            <th> 列2</th>
                        </tr>
                        <tr>
                            <td>列1</td>
                            <td>列2</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>普通单元格1</td>
                
            </tr>
        </tr>
    </table>
</body>
</html>

运行结果：