幕雪

html常用标签拓展内容

什么是HTML常用标签？

HTML（超文本标记语言）是构建网页内容的标准语言。它通过使用不同的“标签”来标记和结构化文本、图像、链接等网页元素。常用标签指的是在绝大多数网页中都会频繁使用到的那些基础且功能核心的标签。它们是构成网页骨架和基本内容的关键部分。理解这些标签及其用法，是学习网页开发的起点。

常用标签可以大致分为几类：

  • 结构性标签：定义页面的整体布局和区域。
  • 文本标签：用于组织和格式化文本内容，如标题、段落、强调等。
  • 链接与媒体标签：实现页面间的跳转或在页面中嵌入图像等多媒体内容。
  • 列表标签：用于创建有序或无序的列表。
  • 表单与交互标签：构建用户输入界面和交互元素。
  • 表格标签：以表格形式展示数据。

为什么这些标签如此“常用”？

这些标签之所以被称为“常用”，是因为它们代表了任何网页几乎都必须包含的基本内容类型和结构需求。

  • 它们提供了最基本的内容组织方式。例如，任何文章都需要标题（<h1>-<h6>）和段落（<p>）。
  • 它们是实现网页核心功能的必需品。没有链接（<a>），用户无法在页面间跳转；没有图像（<img>），页面将缺乏视觉元素。
  • 它们构成了页面的基础结构（<body>, <div>等），使得浏览器能够正确地解析和渲染内容。
  • 它们为后续的样式设计（CSS）和行为控制（JavaScript）提供了“钩子”。样式可以应用于特定的标签类型，脚本可以与特定的标签元素进行交互。
  • 它们具有明确的语义（Semantic），帮助浏览器、辅助技术和开发者理解内容的意义，而非仅仅是外观。

简而言之，这些标签是构建现代网页的基础积木，掌握它们是进行网页开发的必要条件。

这些标签在哪里使用？

HTML常用标签主要使用在扩展名为 .html 或 .htm 的文本文件中。这些文件构成了网页的源代码。

一个标准的HTML文档具有基本的结构：

<!DOCTYPE html>

<html>

  <head>

    <meta charset=”UTF-8″>
    <title>页面标题</title>
    <!– 其他头部信息，比如CSS链接 –>

  </head>

  <body>

    <!– 绝大多数常用标签都在这里使用 –>

    <h1>页面主体标题</h1>

    <p>页面内容段落</p>

    <a href=”#”>链接</a>

  </body>

</html>

其中，绝大部分用于定义网页可见内容的常用标签，都放置在 <body> 标签内部。<head> 标签内主要包含页面的元信息、标题、样式表链接、脚本链接等，这些内容通常不会直接在网页中显示为内容，而是影响页面的设置和加载方式。

因此，当你创建或编辑网页内容时，你的工作区域主要集中在 <body> 标签内。

如何使用HTML标签？ (基本语法与属性)

使用HTML标签非常直接，遵循一套简单的语法规则。

基本语法

大多数HTML标签都有一个开始标签和一个结束标签。内容位于这两个标签之间。

<标签名> 这是标签包含的内容 </标签名>

例如：

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

<h1> 这是一个一级标题。 </h1>

有一些标签是空标签（或自闭合标签），它们不需要结束标签，因为它们不包含内容，只表示一个独立的元素。

<标签名> 或 <标签名 /> (后者的斜杠是 XHTML 风格，在 HTML5 中可选但推荐)

例如：

<br>
<img src=”image.jpg” alt=”图片描述”>

使用属性 (Attributes)

大多数HTML标签都可以拥有属性，属性提供了关于元素的额外信息。属性通常写在开始标签内，以 属性名="属性值" 的形式出现。一个标签可以有多个属性，属性之间用空格分隔。

<标签名 属性1=”值1″ 属性2=”值2″> 内容 </标签名>

或对于空标签：

<标签名 属性1=”值1″ 属性2=”值2″>

例如：

<a href=”https://www.example.com” target=”_blank”> 访问示例网站 </a>
<img src=”logo.png” alt=”公司标志” width=”100″ height=”50″>

这里的 href, target, src, alt, width, height 都是属性。

一些常用标签的详细用法示例

下面列举一些最常见的HTML标签，并说明它们的具体用途和典型用法。

标题标签 (<h1> 到 <h6>)

  • 用途： 定义HTML文档中的标题。<h1> 是最高级别的标题（通常是页面主标题），<h6> 是最低级别的标题。它们用于表示内容的层级结构。
  • 用法： 包裹标题文本。
  • 示例结构：

    <h1>文章主标题</h1>

    <h2>第一部分</h2>

    <h3>第一部分的第一小节</h3>

    <p>这里是内容…</p>

    <h2>第二部分</h2>

    <p>这里是另一部分内容…</p>

  • 注意： 不应仅仅为了样式大小而使用标题标签，它们具有重要的语义意义，代表内容的组织结构。一个页面通常只有一个 <h1>。

段落标签 (<p>)

  • 用途： 定义一个文本段落。浏览器会在段落前后添加一些默认的空白（外边距）。
  • 用法： 包裹一段完整的文本。
  • 示例结构：

    <p>这是文章的第一段内容，讲述了…</p>

    <p>这是第二段，继续阐述了…</p>

  • 注意： 不要使用多个 <br> 标签来模拟段落之间的间距，应使用 <p> 标签，并通过CSS控制其外边距。

链接标签 (<a>)

  • 用途： 创建超链接，用于从一个页面跳转到另一个页面，或者在同一页面的不同位置之间跳转。
  • 用法： 包裹链接文本或图像等内容，并使用 href 属性指定链接的目标地址。
  • 核心属性：

    • href：指定链接的目标URL（网址或页面内锚点）。
    • target：指定链接在何处打开，常用的值有 _blank（在新窗口或标签页打开）。
  • 示例结构：

    <a href=”https://www.anotherwebsite.com”>访问另一个网站</a>

    <a href=”/pages/about.html”>关于我们</a>

    <a href=”#section3″>跳转到第三部分</a> (需要页面内有 id=”section3″ 的元素)

图像标签 (<img>)

  • 用途： 在网页中嵌入图像。它是一个空标签。
  • 用法： 使用 src 属性指定图像文件的路径。
  • 核心属性：

    • src：指定图像文件的URL或路径。
    • alt：提供图像的替代文本。当图像无法显示时（例如文件不存在、加载失败或用户使用屏幕阅读器），会显示这段文本。
    • width 和 height：指定图像的显示宽度和高度（像素或百分比）。
  • 示例结构：

    <img src=”/images/logo.png” alt=”公司标志”>

    <img src=”photo.jpg” alt=”一张风景照片” width=”500″>

  • 注意： alt 属性对于可访问性非常重要。始终为图像提供有意义的替代文本。

列表标签 (<ul>, <ol>, <li>)

  • 用途： 用于创建列表。<ul> 用于无序列表（通常用圆点或方块标记），<ol> 用于有序列表（通常用数字或字母标记）。<li> 用于定义列表中的每一个列表项，它必须放在 <ul> 或 <ol> 内部。
  • 用法： <ul> 或 <ol> 作为列表容器，内部包含一个或多个 <li> 标签。
  • 示例结构 (无序列表):

    <ul>

      <li>苹果</li>

      <li>香蕉</li>

      <li>橙子</li>

    </ul>

    示例结构 (有序列表):

    <ol>

      <li>第一步</li>

      <li>第二步</li>

      <li>第三步</li>

    </ol>

分隔块标签 (<div>)

  • 用途： <div> 是一个块级容器标签，用于将HTML内容划分为不同的块或区域。它本身没有特定的语义，主要用于组合其他元素，以便通过CSS进行样式设置或通过JavaScript进行操作。
  • 用法： 包裹一组相关的元素。经常配合 class 或 id 属性使用，以便在CSS中选取该块进行样式设置。
  • 示例结构：

    <div class=”header”>

      <h1>网站标题</h1>

      <p>网站副标题</p>

    </div>

    <div id=”main-content”>

      <h2>主要内容区域</h2>

      <p>文章内容…</p>

    </div>

行内文本标签 (<strong>, <em>, <br>)

  • <strong>：

    • 用途： 表示文本的重要性、严重性或紧迫性。通常浏览器会以粗体显示。
    • 用法： 包裹需要强调的文本。
    • 示例： <p>请 <strong>务必</strong> 仔细阅读。</p>
  • <em>：

    • 用途： 表示文本的着重强调（语义上的强调，可能影响语调或语气）。通常浏览器会以斜体显示。
    • 用法： 包裹需要着重强调的文本。
    • 示例： <p>他说：<em>这太不可思议了！</em></p>
  • <br>：

    • 用途： 在文本中插入一个强制的换行符。它是一个空标签。
    • 用法： 直接插入需要换行的地方。
    • 示例： <p>地址：北京市海淀区
      中关村大街</p>
    • 注意： 不应使用 <br> 来创建段落或增加元素间距，那是 <p> 标签和CSS的职责。<br> 仅用于在同一逻辑行内需要断行的情况（例如诗歌或地址）。

引用块标签 (<blockquote>)

  • 用途： 表示一个长引用，通常是引用其他来源的文本。浏览器通常会对其进行缩进显示。
  • 用法： 包裹引用的文本块。可以使用 cite 属性（不常用且不会在页面上直接显示）指定引用的来源URL。
  • 示例结构：

    <blockquote>

      <p>世界是一本书，不旅行的人只看到了其中的一页。</p>

      <footer>—— 圣·奥古斯丁</footer>

    </blockquote>

    (注意：<footer> 不在允许的标签列表内，这里只是示例结构，实际使用时 footer 可以用 <p> 或 <div> 代替，或者仅引用文本本身)
    修正示例结构（仅使用允许标签）：

    <blockquote>

      世界是一本书，不旅行的人只看到了其中的一页。

      —— 圣·奥古斯丁

    </blockquote>

表单相关标签 (<form>, <input>, <button>)

虽然表单结构相对复杂，但它们的核心标签 <form> 和用于用户输入的 <input> 以及提交表单的 <button> 是非常常用的。

  • <form>：

    • 用途： 定义一个HTML表单，用于收集用户输入。它是表单控件（如 <input>, <button> 等）的容器。
    • 用法： 包裹所有表单相关的元素。通常需要 action 和 method 属性来指定表单提交的地址和方式。
  • <input>：

    • 用途： 创建各种类型的表单输入字段，如文本框、密码框、复选框、单选按钮、文件选择、按钮等。它是一个空标签。
    • 用法： 主要使用 type 属性来定义输入字段的类型。其他常用属性包括 name (字段名称)、value (默认值)、placeholder (占位文本)。
    • 示例 (仅input部分):

      <input type=”text” name=”username” placeholder=”用户名”>

      <input type=”password” name=”password”>

      <input type=”checkbox” name=”remember” value=”yes”> 记住我

      <input type=”radio” name=”gender” value=”male”> 男

  • <button>：

    • 用途： 创建一个可点击的按钮。
    • 用法： 包裹按钮上的文本。通常使用 type 属性指定按钮的功能，如 submit（提交表单）、reset（重置表单）或 button（普通按钮，常用于JavaScript）。
    • 示例：

      <button type=”submit”> 提交表单 </button>

      <button type=”button”> 点击我 </button>

标签可以嵌套多少层？

HTML标签可以相互嵌套，这是构建复杂页面结构的必要方式。例如，列表项 (<li>) 必须嵌套在列表容器 (<ul> 或 <ol>) 内部；段落 (<p>) 可以包含强调文本 (<strong>)。

从技术上讲，HTML规范并没有对标签的嵌套深度设定一个硬性的最高限制。浏览器通常能够解析非常深层嵌套的结构。

然而，在实际开发中，应该避免不必要的、过深的标签嵌套。原因包括：

  • 可读性和维护性： 过深的嵌套会使HTML代码难以阅读和理解，增加维护成本。
  • CSS复杂性： 为深层嵌套的元素编写CSS样式会变得复杂，选择器可能变得冗长且难以管理。
  • 性能： 虽然现代浏览器对解析深度嵌套的性能影响较小，但在极端情况下，仍然可能增加渲染时间。
  • 语义问题： 过深的嵌套有时可能暗示着内容组织或标签使用存在问题，可能偏离了语义化的最佳实践。

因此，虽然没有具体数字限制，但应始终以清晰、简洁、符合内容语义的方式组织HTML结构，避免不必要的层级。在大多数情况下，合理的嵌套深度足以满足页面布局和内容结构的需求。

如何选择合适的标签？ (语义化)

选择合适的HTML标签不仅仅是为了让内容显示出来，更重要的是为了赋予内容正确的“语义”。语义化HTML是指使用恰当的HTML标签来描述内容的意义，而不仅仅是其外观。

选择合适的标签应遵循以下原则：

  1. 理解标签的含义： 每个HTML5标签都有其特定的语义。例如，<h1>-<h6> 表示不同层级的标题，<p> 表示段落，<ul> 和 <ol> 表示列表，<blockquote> 表示引用块，<nav>（如果允许使用，但不在此列表内）表示导航链接组，<article>（如果允许使用）表示独立完整的文章内容。
  2. 根据内容的实际意义选择： 如果一段文本是文章的标题，就使用 <h1>（或适当级别的标题标签），而不是使用 <div> 然后通过CSS设置字体大小和粗细。如果是一组相关的项目列表，就使用 <ul> 或 <ol> 和 <li>，而不是一系列的 <p> 标签。
  3. 避免滥用无语义标签： <div> 和 <span> 是非常通用的容器标签，本身没有特定的语义。它们主要用于结构分组或应用样式。只有当没有其他更具语义的标签可用时，才应该考虑使用 <div> 或 <span>。
  4. 考虑可访问性： 语义化的标签对于辅助技术（如屏幕阅读器）非常重要。它们可以帮助用户理解页面结构和内容类型。例如，屏幕阅读器用户可以方便地跳过不同标题或列表。
  5. 利于维护和协作： 代码语义清晰，其他开发者能更快地理解你的页面结构，便于修改和维护。

举例来说：

  • 如果是一段引用的文字，使用 <blockquote> 比使用 <p> 然后通过CSS缩进更好。
  • 如果是一个按钮，使用 <button> 比使用 <div> 或 <a> 然后通过CSS看起来像按钮更好，因为 <button> 具有内置的交互性和语义。
  • 如果是一张图片，使用 <img> 并提供 alt 属性，而不是仅仅在背景中显示图片。

总而言之，选择标签是一个关于“意义”而非“外观”的决定。优先使用那些能最好地描述你内容本质的标签。

总结

HTML常用标签是构建网页的基础。它们种类繁多，但核心目标是结构化和标记网页内容。通过理解“什么”是常用标签、“为什么”它们如此重要、“在哪里”使用它们、“如何”书写它们（包括属性的使用）、“多少”层可以嵌套（以及为什么不宜过深）以及“怎么”选择合适的标签（语义化），开发者可以创建出结构良好、易于理解、有良好可访问性且便于维护的网页。掌握这些基本标签及其用法，是迈向更高级网页开发技术（如CSS样式和JavaScript交互）的坚实一步。不断实践和查阅文档是巩固这些知识的最佳途径。

html常用标签