HTML标签基础：从入门到精通

2023-11-13 21:10:00

HTML 文档标签：网页构建的基石

简介

HTML（超文本标记语言）是构建网页的基础语言，它定义了网页的结构和内容。学习 HTML 是前端开发必经之路，它能让你以结构化、标准化的方式创建网页，确保它们在各种设备上都能正常显示。

HTML 文档标签：网页的根基

HTML 文档标签是 HTML 文档的根元素，它包含了整个网页的内容。它由 <html> 和 </html> 标签组成，其中 <html> 是开始标签，</html> 是结束标签。

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

HTML 标题标签：突显重要信息

HTML 标题标签用于定义网页的标题，它由 <h1> 到 <h6> 标签组成，其中 <h1> 是重要等级最高的标题，<h6> 是重要等级最低的标题。浏览器会在标题前后自动添加空行。

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

HTML 段落标签：组织网页文本

HTML 段落标签用于定义网页中的段落，它由 <p> 和 </p> 标签组成，其中 <p> 是开始标签，</p> 是结束标签。浏览器会在段落前后自动添加空行。

<p>这是段落 1。</p>
<p>这是段落 2。</p>

HTML 列表标签：整理内容

HTML 列表标签用于定义网页中的列表，包括有序列表和无序列表。有序列表标签由 <ol> 和 </ol> 标签组成，无序列表标签由 <ul> 和 </ul> 标签组成。

<ol>
    <li>这是有序列表项 1</li>
    <li>这是有序列表项 2</li>
</ol>

<ul>
    <li>这是无序列表项 1</li>
    <li>这是无序列表项 2</li>
</ul>

HTML 链接标签：连接世界

HTML 链接标签用于定义网页中的链接，它由 <a> 和 </a> 标签组成，其中 <a> 是开始标签，</a> 是结束标签。链接标签的 href 属性指定链接的目标地址。

<a href="https://www.baidu.com">这是百度链接</a>

HTML 图像标签：增添视觉效果

HTML 图像标签用于定义网页中的图像，它由 <img> 标签组成，这是一个自闭合标签，不需要结束标签。图像标签的 src 属性指定图像的来源。

<img src="image.png" alt="这是图片">

HTML 表格标签：展示数据

HTML 表格标签用于定义网页中的表格，它由 <table> 和 </table> 标签组成，表格标签包含表格标题标签、表格正文标签和表格尾部标签。

<table>
    <caption>这是表格标题</caption>
    <thead>
        <tr>
            <th>这是表格头</th>
            <th>这是表格头</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>这是表格数据</td>
            <td>这是表格数据</td>
        </tr>
        <tr>
            <td>这是表格数据</td>
            <td>这是表格数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>这是表格尾</td>
            <td>这是表格尾</td>
        </tr>
    </tfoot>
</table>

HTML 表单标签：收集用户输入

HTML 表单标签用于定义网页中的表单，它包括表单元素标签和表单按钮标签。表单元素标签包括文本框标签、密码框标签、单选框标签、复选框标签、下拉列表标签和文本域标签。表单按钮标签包括提交按钮标签和重置按钮标签。

<form>
    <label for="username">用户名：</label>
    <input type="text" id="username">

    <label for="password">密码：</label>
    <input type="password" id="password">

    <input type="submit" value="提交">
    <input type="reset" value="重置">
</form>