Caleb-niu
Caleb-niu

一文掌握：HTML标签使用全攻略，打造完美网页布局！

HTML（超文本标记语言）是构建网页的基石。通过不同的标签，HTML定义了网页的结构和内容。了解各种HTML标签的用法是前端开发的基础。本文将回顾HTML中常见标签的用法，并介绍它们在实际开发中的应用。

一、结构性标签

  1. 这个标签声明文档类型，并指定HTML5标准。它应该是HTML文档的第一行。

    DOCTYPE html>

  2. HTML文档的根元素，包含了整个网页的内容。

    <html lang="en">
  
html>

  3. 包含文档的元数据，如标题、字符集声明、链接到CSS文件等。

    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题title>
  <link rel="stylesheet" href="styles.css">
head>

  4. 包含网页的主要内容部分，如文本、图片、链接等。

    <body>
  <h1>欢迎来到我的网站h1>
  <p>这里是内容。p>
body>
二、文本标签

  1. 至

    标题标签，用于定义从大到小的六级标题。

    <h1>主标题h1>
<h2>副标题h2>

  2. 段落标签，用于定义文本段落。

    <p>这是一个段落。p>

  3. 链接标签，用于定义超链接。

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

  4. 和

    强调和加重文本的标签。用于强调重要性，用于强调语气。

    <strong>重要strong>
<em>强调em>

  5. 块级引用标签，用于引用外部来源的内容。

    <blockquote>
  <p>这是一个引用的内容。p>
blockquote>

  6. 和 

     
    标签用于展示代码，
    标签用于保持代码格式。
     
    <pre>
  <code>
    console.log('Hello, world!');
  code>
pre>
三、列表标签

    1. 和

        无序列表（

          ）和有序列表（
            ）用于展示列表项。

            <ul>
  <li>无序列表项 1li>
  <li>无序列表项 2li>
ul>

<ol>
  <li>有序列表项 1li>
  <li>有序列表项 2li>
ol>

          1. ,
            ,

            定义列表，用于定义词汇与描述。

            <dl>
  <dt>术语dt>
  <dd>定义dd>
dl>
          四、表格标签

          1. 表格标签，用于创建表格。

            <table>
  <thead>
    <tr>
      <th>表头 1th>
      <th>表头 2th>
    tr>
  thead>
  <tbody>
    <tr>
      <td>数据 1td>
      <td>数据 2td>
    tr>
  tbody>
table>

            3. , ）、表头单元格（
            ,

            表格行（

            ）、普通单元格（）用于定义表格的结构。

            <tr>
  <th>表头th>
  <td>数据td>
tr>
            五、表单标签

            1. 表单标签，用于创建用户输入的表单。

              <form action="/submit" method="post">
  <input type="text" name="name" placeholder="你的名字">
  <input type="submit" value="提交">
form>

            2. ,