html表单、列表、表格、语义标签，特殊符号标签小结-优快云博客

本文链接：https://blog.youkuaiyun.com/WDJ54068923/article/details/132527503

Web应用课表单、列表、表格、语义标签，特殊符号标签小结

表单标签

<form>标签

<form> 是HTML中的一个标签，用于创建网页上的表单。表单用于收集用户输入的数据，例如文本字段、复选框、单选按钮等。

<label>标签

<label> 标签是HTML中用于创建表单元素的标签文本标签。它用于为表单元素提供标签文本，并与相应的表单元素建立关联。

以下是一个示例，展示了如何使用 <label> 标签：

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

在上面的示例中，<label> 标签用于为文本输入字段（<input type="text">）提供标签文本。for 属性指定了与该标签关联的表单元素的 id 值，以便建立关联。

当用户单击标签文本时，关联的表单元素会获得焦点（即光标会自动定位到该表单元素），从而提升表单的可用性和易用性。

此外，<label> 标签还可以通过嵌套表单元素来关联，而不使用 for 属性。例如：

<label>
  <input type="checkbox" name="agree">
  我同意相关条款和条件
</label>

在上述示例中，复选框（<input type="checkbox">）与包含文本的 <label> 标签嵌套在一起。这样，单击文本时会切换复选框的选中状态。

使用 <label> 标签有助于提升表单的可访问性，并改善用户体验。它还使得通过点击文本来激活关联的表单元素更容易。

<input>标签

<input> 是HTML中的一个标签，用于创建各种类型的输入字段。它是在表单中最常用的元素之一。

<input> 标签有多个属性，用于指定输入字段的类型、名称、默认值、是否必填等等。以下是一些常见的 <input> 类型和示例用法：

文本输入字段 (type="text")：

<input type="text" id="name" name="name" placeholder="请输入姓名" required>

上面的示例创建了一个文本输入字段，用户可以在该字段中输入文本。id 属性用于标识字段，name 属性用于在提交表单时标识字段的名称，placeholder 属性用于在输入字段为空时显示提示文本，required 属性指定该字段为必填项。

密码输入字段 (type="password")：

<input type="password" id="password" name="password" required>

上面的示例创建了一个密码输入字段，输入的内容会以掩码形式显示（通常是圆点或星号）。该字段也被设置为必填项。

单选按钮 (type="radio")：

<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">男性</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>

上面的示例创建了两个单选按钮，用户可以从中选择一个选项。name 属性用于指定这些单选按钮属于同一个组，value 属性指定每个选项的值，checked 属性指定默认选中的选项。

复选框 (type="checkbox")：

<input type="checkbox" id="newsletter" name="newsletter" checked>
<label for="newsletter">订阅电子报</label>

上面的示例创建了一个复选框，用户可以选择或取消选择该选项。name 属性用于在提交表单时标识该复选框的名称，checked 属性指定默认选中该选项。

<textarea>标签

HTML <textarea> 元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

<select>与<option>标签

<select> 元素是HTML中表示提供选项菜单的控件的标签。它通常与 <option> 元素一起使用，用于创建下拉列表或下拉框。

以下是一个示例，展示了如何使用 <select> 和 <option> 创建一个简单的下拉列表：

<select id="country" name="country">
  <option value="usa">美国</option>
  <option value="canada">加拿大</option>
  <option value="uk">英国</option>
  <option value="australia">澳大利亚</option>
</select>

在上面的示例中，<select> 元素表示一个下拉列表，name 属性用于在提交表单时标识该字段的名称，id 属性用于标识该字段。

<option> 元素用于定义下拉列表中的选项。value 属性定义了选项的值，该值在提交表单时被发送到服务器。选项的文本内容位于 <option> 和 </option> 标签之间。

用户可以通过点击下拉列表展开并选择其中的一个选项。选中的选项将显示在下拉列表上方的文本区域中。

除了基本的下拉列表外，<select> 和 <option> 元素还支持多选菜单、禁用选项、默认选中项等更多功能。

<button>标签

<button> 标签是HTML中用于创建按钮的元素。它可以在网页上添加交互性，用户可以单击按钮来触发特定的操作或执行特定的功能。

以下是一个简单的示例，展示如何使用 <button> 标签创建一个按钮：

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

在上面的示例中，<button> 标签创建了一个按钮，并使用 type="button" 属性指定按钮的类型为普通按钮。按钮的文本内容位于 <button> 和 </button> 标签之间。

按钮的默认类型是 “submit”，如果没有显式指定 type 属性为 “button”，则按钮会被视为提交按钮，会触发表单的提交操作。

可以通过添加其他属性和内容来进一步定制按钮的行为和样式。下面是一些常用的 <button> 元素的属性：

disabled: 禁用按钮，使其不可点击。
onclick: 指定按钮被点击时要执行的JavaScript代码。
class 或 id: 用于添加自定义的CSS类或标识按钮元素。

示例：

<button type="button" onclick="alert('Hello!')">点击我</button>

<button type="button" class="custom-button" id="my-button">自定义按钮</button>

在上述示例中，第一个按钮被点击时会弹出一个包含 “Hello!” 的警告框。第二个按钮使用了自定义的CSS类和标识。

通过使用CSS样式，你可以进一步美化和定制按钮的外观和交互效果。

<ul>&&<ol>列表标签

<ul> 和 <ol> 是HTML中的两种列表标签，用于创建无序列表和有序列表。

<ul> 标签用于创建无序列表，列表项默认以项目符号（通常是圆点）进行标记。以下是一个无序列表的示例：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

在上面的示例中，<ul> 标签用于创建一个无序列表，其中包含了三个列表项。每个列表项由 <li> 标签包裹。

<ol> 标签用于创建有序列表，列表项会按照一定的顺序进行标记。以下是一个有序列表的示例：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

在上面的示例中，<ol> 标签用于创建一个有序列表，其中包含了三个列表项。同样，每个列表项由 <li> 标签包裹。

无论是无序列表还是有序列表，都可以包含任意数量的列表项，每个列表项都使用 <li> 标签标记。

如果你想自定义列表的样式，你可以使用CSS来进行样式调整。

表格标签

<table>标签

HTML的 table 元素表示表格数据 — 即通过二维数据表表示的信息。

<caption>标签

HTML <caption> 元素 (or HTML 表格标题元素) 展示一个表格的标题，它常常作为 <table> 的第一个子元素出现，同时显示在表格内容的最前面，但是，它同样可以被 CSS 样式化，所以，它同样可以出现在相对于表格的任意位置。

<thead>标签

HTML的<thead>元素定义了一组定义表格的列头的行。

<tbody>标签

HTML的<tbody>元素定义一组数据行。

<tr>标签

HTML<tr>元素定义表格中的行。同一行可同时出现<td> 和<th> 元素。

<th>标签

HTML <th>元素定义表格内的表头单元格。

<td>标签

HTML <td> 元素定义了一个包含数据的表格单元格。

举个例子

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
</table>

成品图：

+--------+------+--------+
| 姓名   | 年龄 | 城市   |
+--------+------+--------+
| 张三   | 25   | 北京   |
+--------+------+--------+
| 李四   | 30   | 上海   |
+--------+------+--------+

在这个示意表格中，使用 “+”、“-” 和 “|” 字符来表示表格的边框和分隔线。第一行使用表头单元格的标题，后续的行包含了实际的数据。

语义标签

<header>标签

<header> 是HTML中的一个标签，用于定义网页或者区域的页眉部分。通常情况下，<header> 标签包含了网页的标题、导航菜单、搜索框等头部内容。

以下是一个简单的 <header> 标签的示例：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <header>
    <h1>这是网页的标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- 网页的其他内容 -->
  
</body>
</html>

在上面的示例中，<header> 标签包含了 <h1> 标签用于显示网页的标题，以及 <nav> 标签用于创建导航菜单。你可以根据自己的需要在 <header> 中添加其他元素和内容。

请注意，<header> 标签通常出现在 <body> 元素的顶部，但可以根据需要放置在其他位置。

<nav>标签

<nav> 是HTML中的一个标签，用于定义网页或者区域的导航部分。<nav> 标签通常包含网页的导航链接、菜单或者其他导航相关的内容。

以下是一个简单的 <nav> 标签的示例：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <header>
    <h1>这是网页的标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- 网页的其他内容 -->
  
</body>
</html>

在上面的示例中，<nav> 标签包含了一个无序列表 <ul>，其中每个列表项是一个导航链接，使用 <li> 和 <a> 标签表示。你可以根据需要在 <nav> 中添加或修改导航链接。

请注意，<nav> 标签通常出现在 <header> 元素内，但可以根据你的网页结构和设计需要放置在其他位置。

<section>标签

<section> 是HTML中的一个标签，用于定义网页中的一个独立的区块或部分。<section> 标签通常用于将内容分组，以便更好地组织和语义化网页的结构。

以下是一个简单的 <section> 标签的示例：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <header>
    <h1>这是网页的标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <section>
    <h2>欢迎访问我们的网站！</h2>
    <p>这里是网站的欢迎内容。</p>
  </section>
  
  <section>
    <h2>关于我们</h2>
    <p>这里是关于我们的介绍。</p>
  </section>
  
  <!-- 网页的其他内容 -->
  
</body>
</html>

在上面的示例中，<section> 标签用于创建两个独立的区块，分别是欢迎内容和关于我们的介绍。每个 <section> 内部可以包含任意的HTML内容，例如标题 <h2>、段落 <p> 等。

使用 <section> 标签有助于更好地划分和组织网页的内容结构，提高可读性和可维护性。根据具体的网页设计和需求，你可以根据需要添加更多的 <section> 标签和相应的内容。

<figure> 标签

<figure> 是HTML中的一个标签，用于表示独立的内容块，通常与图像、插图、图表等相关。该标签还可以结合 <figcaption> 标签用于提供关于内容块的说明性文字。

以下是一个示例，展示了如何使用 <figure> 和 <figcaption> 标签：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <header>
    <h1>这是网页的标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <section>
    <h2>图片展示</h2>
    <figure>
      <img src="image.jpg" alt="图片描述">
      <figcaption>这是一张漂亮的图片</figcaption>
    </figure>
  </section>
  
  <!-- 网页的其他内容 -->
  
</body>
</html>

在上面的示例中，<figure> 标签用于包裹一个图像，并使用 <figcaption> 标签提供了关于图像的描述文字。

使用 <figure> 和 <figcaption> 标签有助于为图像等内容块提供语义化的结构，并将相关的说明文字与内容关联起来。

请注意，<figure> 和 <figcaption> 标签并不仅限于图像，也可以用于其他类型的独立内容块。

<figcaption>标签

<figcaption> 是HTML中的一个标签，用于为 <figure> 元素提供说明性文字。<figcaption> 标签通常出现在 <figure> 元素内部，用于描述与 <figure> 相关的内容。

以下是一个简单的示例，展示了如何使用 <figure> 和 <figcaption> 标签：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <header>
    <h1>这是网页的标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <section>
    <h2>图片展示</h2>
    <figure>
      <img src="image.jpg" alt="图片描述">
      <figcaption>这是一张漂亮的图片</figcaption>
    </figure>
  </section>
  
  <!-- 网页的其他内容 -->
  
</body>
</html>

在上面的示例中，<figure> 标签用于包裹一个图像，并使用 <figcaption> 标签提供了关于图像的描述文字。

请注意，<figcaption> 标签必须直接位于 <figure> 标签的内部，以确保说明文字与相关的内容块关联起来。

<aside>标签

<aside> 是HTML中的一个标签，用于表示与主要内容有关但又可以独立存在的辅助内容。<aside> 标签通常用于侧边栏、引用、广告、相关链接、附注等内容。

以下是一个简单的示例，展示了如何使用 <aside> 标签：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <header>
    <h1>这是网页的标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <section>
    <h2>主要内容</h2>
    <p>这是网页的主要内容。</p>
    
    <aside>
      <h3>相关链接</h3>
      <ul>
        <li><a href="#">链接1</a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
      </ul>
    </aside>
  </section>
  
  <!-- 网页的其他内容 -->
  
</body>
</html>

在上面的示例中，<aside> 标签用于包含了一组相关链接，作为主要内容的辅助信息。

请注意，<aside> 标签通常出现在包含它的父元素内部，但在视觉上可能会呈现为侧边栏或独立区域。它可以位于 <section>、<article> 或其他适当的父元素内，根据网页的结构和设计来决定。

<footer>标签

以下是一个简单的示例，展示了如何使用 <footer> 标签：

<!DOCTYPE html>
<html>
<head>
  <title>网页标题</title>
</head>
<body>
  <header>
    <h1>这是网页的标题</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">服务</a></li>
        <li><a href="#">联系我们</a></li>
      </ul>
    </nav>
  </header>
  
  <section>
    <h2>主要内容</h2>
    <p>这是网页的主要内容。</p>
  </section>
  
  <footer>
    <p>&copy; 2023 版权所有</p>
    <p>联系方式：example@example.com</p>
  </footer>
  
</body>
</html>