君语贤
时光静好,与君语;细水流年,与君同;繁华落尽,与君老...

前端设计>html>正文

常用的HTML标签及说明和示例

2023-12-13 18:49 君语贤标签示例

常用的HTML标签及说明和示例

HTML标签(HTML tags)是用于描述网页文档结构和内容的代码元素。HTML是超文本标记语言,它使用标签来定义文档的各个部分和元素。每个HTML标签通常由尖括号(<>)括起来,包含在开始标签和结束标签之间。开始标签和结束标签一起定义了标签的范围。

以下是一些常用的HTML标签,以及它们的简要说明和示例:

  1. <!DOCTYPE html>

    • 说明: 文档类型声明,声明文档使用的HTML版本。

    • 示例:

      <!DOCTYPE html>
  2. <html>

    • 说明: HTML文档的根元素,包含整个HTML文档。

    • 示例:

      <html lang="en">
        <!-- 文档内容 -->
      </html>
  3. <head>

    • <head>

    •  <meta charset="UTF-8">

    •  <title>页面标题</title>

    •  <link rel="stylesheet" href="styles.css">

    • </head>

    • 说明: 包含文档的元信息,如标题、字符集、样式表等。

    • 示例:


  4. <title>

    • 说明: 定义网页的标题,显示在浏览器的标题栏或标签页上。

    • 示例:

      <title>我的网页</title>
  5. <body>

    • <body>

    •  <h1>欢迎来到我的网页</h1>

    •  <p>这是一个示例网页。</p>

    • </body>

    • 说明: 包含文档的主要内容,如文本、图片、链接等。

    • 示例:


  6. <h1> to <h6>

    • 说明: 定义标题,<h1> 最大,<h6> 最小。

    • 示例:

      <h1>这是一级标题</h1>
      <h2>这是二级标题</h2>
  7. <p>

    • 说明: 定义段落。

    • 示例:

      <p>这是一个段落。</p>
  8. <a>

    • 说明: 定义链接。

    • 示例:

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

    • 说明: 插入图片。

    • 示例:

      <img src="image.jpg" alt="图片描述">
  10. <ul><ol>

    • <ul>

    •  <li>项目1</li>

    •  <li>项目2</li>

    • </ul>


    • <ol>

    •  <li>第一项</li>

    •  <li>第二项</li>

    • </ol>

    • 说明: 分别定义无序列表和有序列表。

    • 示例:


  11. <li>

    • <ul>

    •  <li>项目1</li>

    •  <li>项目2</li>

    • </ul>

    • 说明: 定义列表项。

    • 示例:


  12. <table>

    • <table>

    •  <tr>

    •    <th>表头1</th>

    •    <th>表头2</th>

    •  </tr>

    •  <tr>

    •    <td>数据1</td>

    •    <td>数据2</td>

    •  </tr>

    • </table>

    • 说明: 定义表格。

    • 示例:


  13. <form>

    • <form action="/submit" method="post">

    •  <label for="username">用户名:</label>

    •  <input type="text" id="username" name="username">

    •  <button type="submit">提交</button>

    • </form>

    • 说明: 定义表单。

    • 示例:


  14. <input>

    • 说明: 定义输入框。

    • 示例:

      <input type="text" placeholder="请输入文本">
  15. <div><span>

    • 说明: 分别定义块级和内联的容器,常用于布局。

    • 示例:

      <div>这是一个块级容器</div>
      <span>这是一个内联容器</span>
  1. <nav>

    • <nav>

    •  <ul>

    •    <li><a href="#">首页</a></li>

    •    <li><a href="#">关于我们</a></li>

    •    <li><a href="#">联系我们</a></li>

    •  </ul>

    • </nav>

    • 说明: 定义导航链接的容器。

    • 示例:


  2. <section>

    • <section>

    •  <h2>文章标题</h2>

    •  <p>文章内容...</p>

    • </section>

    • 说明: 定义文档中的一个区域或部分。

    • 示例:


  3. <article>

    • <article>

    •  <h2>文章标题</h2>

    •  <p>文章内容...</p>

    • </article>

    • 说明: 定义独立的、完整的内容块,比如一篇文章。

    • 示例:


  4. <aside>

    • <aside>

    •  <h3>相关链接</h3>

    •  <ul>

    •    <li><a href="#">链接1</a></li>

    •    <li><a href="#">链接2</a></li>

    •  </ul>

    • </aside>

    • 说明: 定义与页面内容相关的侧边栏或附属信息。

    • 示例:


  5. <figure><figcaption>

    • <figure>

    •  <img src="image.jpg" alt="图片描述">

    •  <figcaption>图片说明</figcaption>

    • </figure>

    • 说明: <figure>定义媒体元素,<figcaption><figure>元素添加标题。

    • 示例:


  6. <main>

    • <main>

    •  <h1>主要内容</h1>

    •  <p>网页的主要内容...</p>

    • </main>

    • 说明: 定义文档的主要内容,一个文档应该包含一个 <main> 元素。

    • 示例:


  7. <footer>

    • 说明: 定义文档或区域的页脚。

    • 示例:

      <footer>
        <p>&copy; 2023 版权所有</p>
      </footer>
  8. <mark>

    • 说明: 定义文本中的高亮部分。

    • 示例:

      <p>这段文字中的<mark>关键词</mark>需要突出显示。</p>
  9. <progress>

    • 说明: 定义任务的完成进度。

    • 示例:

      <progress value="50" max="100"></progress>
  10. <time>

    • 说明: 定义日期和时间。

    • 示例:

      <p>发布时间:<time datetime="2023-01-01">2023年1月1日</time></p>

本文链接:https://www.weguiding.com/html/970.html