常用 HTML 标签参考手册

大拇指的约定

于 2024-06-30 22:51:30 发布

阅读量559

点赞数 14

分类专栏： HTML 文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_52530691/article/details/140086372

版权

HTML 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

一 . 主根元素标签

<html> 标签：

html 标签告诉浏览器这是一个 HTML 文档，他是 html 页面中的顶级标签，或者说是顶级元素，所以他也被成为根元素。所有其它元素必须是此元素的后代。

<!DOCTYPE> :

他是一个声明，用于声明该页面的类型。每一个 HTML 文档都必须以 DOCTYPE 元素开头，浏览器才知道自己处理的是 HTML 内容。

在部分时候省略 DOCTYPE 元素，大多数浏览器仍能正确显示文档内容，只不过依赖浏览器的内部功能。不建议过于依赖浏览器。

二. 文档元数据部分（页面头部加载部分）

元数据部分加载页面的相关信息，包括样式、脚本及数据，能帮助计算机更好地运用和渲染页面。

<base>：

规定文档中所有相对 URL 的基准 URL 和/或目标。

在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部。

<head>：

配置文档相关的信息，包括标题，脚本、样式、meta 信息等其他更多的信息。

<link>：

定义文档与外部资源的关系，该元素最常用于链接 CSS（样式表）。

<meta>：

标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。通常用于指定字符集、页面描述、关键词、文档作者等内容。

<style>:

可以在标签内些当前页面的样式，样式较少的情况推荐卸载该标签内。该部分样式只能在当前页面中使用。

<title>

定义文档的标题，显示在浏览器的标题栏或标签页上。

三. 分区根元素

<body>：

表示文档的内容。文档中只能有一个该元素。

四. 内容分区

4.1 描述文字列表

<dl> ,<dt> ,<dd> :

<dl> : 定义一个列表，并且描述列表。

<dt> : 定义描述列表中的名称。仅能作为 <dl> 的子元素使用。

<dd> :定义列表中项目的描述。可以作为 <dl> 和 <dt> 的子元素使用。

4.2 段落标签

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>:

六级段落标签，<h1> 等级最高， <h6> 等级最低。

4.3导航链接

<nav>

表示页面的一部分，其目的是在当前文档或其它文档中提供导航链接。导航部分的常见示例是菜单、目录和索引。

4.4 有序列表与无序列表

<ol> : 有序列表

<ul> : 无序列表

<li> : 列表标签，内容

<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>

4.5 下拉框

<select> 元素用于创建下拉列表。

<option> 标签定义选择列表中的选项。

<label for="number">number:</label>

<select id="number">
  <option value="audi">奥迪</option>
  <option value="byd">比亚迪</option>
  <option value="geely">吉利</option>
  <option value="volvo">沃尔沃</option>
</select>

4.6 表格标签

<caption>：指定表格的标题。

<col>：定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于 <colgroup> 元素内。

<colgroup> 定义表中的一组列表。

<table> 表示表格数据——即通过二维（由行和列组成）数据表表示的信息。

<tbody> 封装了一系列表格的行（<tr> 元素），代表了它们是表格（<table>）主要内容的组成部分。

<td> 定义了一个包含数据的表格单元格。它是表格模型（table model）的一部分。

<tfoot> 定义了一组表格中各列的汇总行。

<th> 定义表格内的表头单元格。这部分特征是由 scope 和 headers 属性准确定义的。

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

<tr> 定义表格中的行。同一行可同时出现 <td>（数据单元格）和 <th>（列头单元格）元素。

<table>
  <caption>
    Superheros and sidekicks
  </caption>
  <colgroup>
    <col />
    <col span="2" class="batman" />
    <col span="2" class="flash" />
  </colgroup>
  <tr>
    <td></td>
    <th scope="col">Batman</th>
    <th scope="col">Robin</th>
    <th scope="col">The Flash</th>
    <th scope="col">Kid Flash</th>
  </tr>
  <tr>
    <th scope="row">Skill</th>
    <td>Smarts, strong</td>
    <td>Dex, acrobat</td>
    <td>Super speed</td>
    <td>Super speed</td>
  </tr>
</table>

4.7 表单标签

<button> 一个可交互元素（可通过用户的鼠标、键盘、手指、声音指令或其他辅助技术激活）。一旦被激活，它就会执行一个动作，例如提交表单或打开对话框。

<datalist> 包含了一组 <option> 元素，这些元素表示其它表单控件可选值。

<fieldset> 用于对 web 表单中的控件和标签（<label>）进行分组。

<form> 表示文档中的一个区域，此区域包含交互控件，用于向 Web 服务器提交信息。

<input> 用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。取决于设备和用户代理的不同，表单可以使用各种类型的输入数据和控件。<input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。

<label> 表示用户界面中某个元素的说明。

<legend> 用于表示其父元素 <fieldset> 的内容标题。

<meter> 用来显示已知范围的标量值或者分数值。

<optgroup> 为 <select> 元素中的选项创建分组。

<option> 用于定义在 select、<optgroup> 或 <datalist> 元素中包含的选项。<option> 可以在弹出窗口和 HTML 文档中的其他项目列表中表示菜单项。

<output> 网站或应用程序可以将计算或用户操作的结果注入其中的容器元素。

<progress> 用来显示一项任务的完成进度，通常情况下该元素显示为一个进度条。

<select> 表示一个提供选项菜单的控件。

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

<form action="" method="get" class="form-example">
  <div class="form-example">
    <label for="name">Enter your name: </label>
    <input type="text" name="name" id="name" required />
  </div>
  <div class="form-example">
    <label for="email">Enter your email: </label>
    <input type="email" name="email" id="email" required />
  </div>
  <div class="form-example">
    <input type="submit" value="Subscribe!" />
  </div>
</form>

4.8 其他标签

<a> : 定义超链接。

<b> : 定义粗体字。

<br> : 定义换行。

<button> : 定义按钮。

<div> : 定义文档中的节（片段）。块级标签。

<em> :定义强调文本，斜体。

<hr> : 定义分割线。

<i>: 定义斜体

<iframe>:定义行内框架用于在当前 HTML 文档中嵌入另一个文档。通常用于引入视频等内容。

<img>: 定义图像,插入图片。

<input> :定义输入框。

<label> :定义 input 元素的标注。常和 input 连用，包裹 input 标签，让 input 被选中的区域范围更大。

五.提示

本文由很多官方语言，而且只有常用的标签，如果觉得缺少什么，或者是觉得什么描述的不准确，可以在评论区告诉我，我会进行解释和修改。

大拇指的约定

关注

14
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
常用 HTML 标签参考手册

input> 元素是目前是 HTML 中最强大、最复杂的元素之一，因为它有大量的输入类型和属性组合。html 标签告诉浏览器这是一个 HTML 文档，他是 html 页面中的顶级标签，或者说是顶级元素，所以他也被成为根元素。<textarea> 表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。<tbody> 封装了一系列表格的行（<tr> 元素），代表了它们是表格（<table>）主要内容的组成部分。<tr> 定义表格中的行。
复制链接

扫一扫