HTML初学者入门之HTML元素(第四篇)

凌云

1年前发布

430

文章目录[隐藏]

HTML 元素语法
主根元素
文档元数据
分区根元素
内容分区
文本内容
内联文本语义
图片和多媒体
内嵌内容
SVG 和 MathML
脚本
编辑标识
表格内容
表单
交互元素
Web 组件
过时的和弃用的元素

本期我们来讲一下HTML元素，首先我们来了解一下HTML的元素语法。

注意：更多精彩内容会在凌云博客更新：http://www.a754.com(专业小白学习教程网)
刚做不久，后面会慢慢更新小白教程，希望大家多多支持！

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

接下来我们列出所有使用标签创建的 HTML 元素

主根元素

元素	描述
<html>	表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其它元素必须是此元素的后代。

文档元数据

元数据（Metadata）含有页面的相关信息，包括样式、脚本及数据，能帮助一些软件（例如搜索引擎 (en-US)、浏览器等等）更好地运用和渲染页面。对于样式和脚本的元数据，可以直接在网页里定义，也可以链接到包含相关信息的外部文件。

元素	描述
<base>	指定用于一个文档中包含的所有相对 URL 的根 URL。一份中只能有一个该元素。
<head>	包含文档相关的配置信息（元数据），包括文档的标题、脚本和样式表等。
<link>	指定当前文档与外部资源的关系。该元素最常用于链接 CSS，此外也可以被用来创建站点图标（比如“favicon”样式图标和移动设备上用以显示在主屏幕的图标）。
<meta>	表示那些不能由其它 HTML 元相关（meta-related）元素表示的元数据信息。如：<base>、<link>、<script>、<style> 或 <title>。
<style>	包含文档或者文档部分内容的样式信息，它们会被应用于包含此元素的文档。
<title>	定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。

分区根元素

元素	描述
<body>	表示文档的内容。文档中只能有一个该的元素。

内容分区

内容分区元素允许你将文档内容从逻辑上进行组织划分。使用包括页眉（header）、页脚（footer）、导航（nav）和标题（h1~h6）等分区元素，来为页面内容创建明确的大纲，以便区分各个章节的内容。

元素	描述
<address>	表示其中的 HTML 提供了某个人、某些人或某个组织（等等）的联系信息。
<article>	表示文档、页面、应用或网站中的独立结构，旨在成为可独立分配的或可复用的结构，如在发布中，它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其它独立的内容项目。
<aside>	表示文档的一部分，其内容仅与文档的主要内容间接相关。其通常以侧边栏或标注框（call-out box）的形式出现。
<footer>	表示最近的一个父分段内容或分段的根元素的页脚。<footer> 通常包含该章节作者、版权数据或者与文档相关的链接等信息。
<header>	表示介绍性内容，通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素，但也可能包含其它元素，比如 Logo、搜索框、作者名称和其它元素。
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>	表示六个不同的级别的章节标题，<h1> 级别最高，而 <h6> 级别最低。
<main>	呈现了文档正文的主体部分。主体部分由与文档直接相关，或者扩展于文档的中心主题、应用的主要功能部分的内容组成。
<nav>	表示页面的一部分，其目的是在当前文档或其它文档中提供导航链接。导航部分的常见示例是菜单、目录和索引。
<section>	表示 HTML 文档中一个通用独立章节，它没有更具体的语义元素来表示。一般来说会包含一个标题。

文本内容

使用 HTML 文本内容元素来组织在开标签 <body> 和闭标签 </body> 里的块或章节的内容。这些元素能标识内容的宗旨或结构，而这对于无障碍和搜索引擎优化很重要。

元素	描述
<blockquote>	代表其中的文字是引用内容。通常在渲染时，这部分的内容会有一定的缩进。引文来源的 URL 地址可以使用属性 cite 给出，而来源的文本可以使用 <cite> 元素给出。
<dd>	用来指明一个描述列表（<dl>）元素中先前术语（<dt>）的描述、定义或值。
<div>	一个通用型的流式内容容器，在不使用 CSS 的情况下，其对内容或布局没有任何影响，直到通过某种方式设置样式（例如，将样式直接应用于该元素，或将弹性盒子等布局模型应用于其父元素）。
<dl>	一个包含一组术语（使用 <dt> 元素指定）以及描述（由 <dd> 元素提供）的列表。通常用于展示词汇表或者元数据（键—值对列表）。
<dt>	在描述或定义列表中声明一个术语。该元素仅能作为 <dl> 的子元素出现。通常在该元素后面会跟着一个 <dd> 元素；但多个连续出现的 <dt> 元素也将由出现在它们后面的第一个 <dd> 元素定义。
<figcaption>	描述其父元素 <figure> 里其它内容的标题或图例。
<figure>	表示一段独立的内容，可能包含 <figcaption> 元素定义的标题。该插图、标题和其中的内容通常作为一个独立的引用单元。
<hr>	表示段落级元素之间的主题转换：例如，一个故事中的场景的改变，或一个章节的主题的改变。
<li>	表示列表里的条目。它必须包含在一个父元素里：有序列表（`<ol>`）、无序列表（`<ul>`）或者菜单（`<menu>`）。在菜单或者无序列表里，列表条目通常用点排列显示；在有序列表里，列表条目通常在左边显示按升序排列的计数，例如数字或者字母。
<menu>	<ul> 的语意替换，但被浏览器视为（并向无障碍树暴露为）与 `<ul>` 没有区别。它表示了条目的无序列表（使用 <li> 表示）。
<ol>	表示有序列表，通常渲染为一个带编号的列表。
<p>	表示文本的一个段落。该元素通常表现为通过空行和/或首航缩进与相邻块分隔的文本块。但 HTML 段落可以与任何相关内容（例如，图像或表单字段）构成结构分组。
<pre>	表示预定义格式文本。在该元素中的文本通常按照 HTML 文件中的编排，以非比例或等宽字体的形式展现出来，文本中的空白符都会显示出来。
<ul>	表示一系列无序的列表项目，通常渲染为项目符号列表。

内联文本语义

使用 HTML 内联文本语义定义单词、内容、或任意文字的语义、结构或样式。

元素	描述
<a>	可以通过它的 href 属性创建通向其它网页、文件、电子邮件地址、同一页面内的位置或任何其它 URL 的超链接。
<abbr>	用于代表缩写。
<b>	用于吸引读者的注意到该元素的内容上（如果没有另加特别强调）。这个元素过去被认为是粗体（Boldface）元素，并且大多数浏览器仍然将文字显示为粗体。尽管如此，你不应将 <b> 元素用于显示粗体文字；替代方案是使用 CSS font-weight 属性来创建粗体文字。
<bdi>	告诉浏览器的双向算法将其包含的文本与周围的文本隔离，当网站动态插入一些文本且不知道所插入文本的方向性时，此功能特别有用。
<bdo>	覆盖文本的方向性，使文本以不同的方向渲染呈现出来。
<br>	在文本中生成一个换行（回车）符号。此元素在写诗和地址时很有用，这些地方的换行都非常重要。
<cite>	用于包含引用作品的标题。这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写。
<code>	以一种旨在表明其中的内容是计算机代码片段的方式显示其内容。默认情况下，它以用户代理的默认等宽字体显示。
<data>	将指定内容和机器可读的翻译联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 time 元素。
<dfn>	用于表示在定义短语或句子的上下文中定义的术语。父级 <p> 元素、<dt>/<dd> 对，或与 <dfn> 元素最近的分区元素被认定为是术语的定义。
<em>	标记出需要用户着重阅读的内容，<em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
<i>	用于表现因某些原因需要区分普通文本的一系列文本。例如惯用文本、技术术语、分类名称等。它通常使用斜体表示，这也是该元素（<i>）命名的来源。
<kbd>	表示一段内联文本，文本来自键盘、语音输入或其他文本输入设备的用户输入。按照惯例，用户代理默认使用其默认的等宽字体显示 <kbd> 元素的内容，尽管这不是 HTML 标准强制要求的。
<mark>	表示为引用或符号目的而标记或突出显示的文本，这是由于标记的段落在封闭上下文中的相关性或重要性造成的。
<q>	表示一个封闭的并且是短的行内引用的文本。大多数现代浏览器通过将文本包裹在引号内来实现这一点。此元素适用于不需要分段的短文本；对于长的文本的引用请使用 <blockquote> 元素。
<rp>	用于为那些不能使用 <ruby> 元素展示 ruby 注解的浏览器，提供回退的圆括号。一个 <rp> 元素应该包裹一个左括号或右括号，这些括号将包含注解文本的 <rt> 元素包裹起来。
<rt>	指定 ruby 注解的 ruby 文本组建，用于描述东亚字符的发音、翻译或音译信息。该元素始终在 <ruby> 元素中使用。
<ruby>	用来在基础文本上方、下方或一旁展现小注解，通常用于显示东亚字符的发音。它还用于注解其他类型的文本，但这种用法不太常见。
<s>	使用删除线来渲染文本。使用 <s> 元素来表示不再相关或者不再准确的事情。但是当表示文档编辑时，不建议使用 <s>；为此，请酌情使用 del 和 ins 元素。
<samp>	用于标识计算机程序输出，通常使用浏览器缺省的等宽字体来渲染（例如 Courier 或 Lucida Console）。
<small>	代表旁注和小字体，如版权和法律等独立于其样式展示的文本。默认情况下，它将其中的文本使用小一号的字体渲染，例如从 small 到 x-small。
<span>	短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用 class 或者 id 属性），或者这些元素有着共同的属性，比如 lang。应该在没有其他合适的语义元素时才使用它。<span> 与 div 元素很相似，但 <div> 是一个块级元素而 <span> 则是内联元素。
<strong>	表示其内容十分重要、严肃或紧迫。浏览器通常用粗体显示。
<sub>	定义因排版原因而应显示为下标的内联文本。下标通常显示得更小且更低。
<sup>	定义因排版原因而应显示为上标的内联文本。上标通常显示得更小且更高。
<time>	表示特定的时间段。可能包括 datetime 属性，以将日期转换为机器可读的格式，从而获得更好的搜索引擎结果或自定义功能（如，提醒）。
<u>	表示一个需要标注为非文本化（non-textual）的内联文本域。默认情况下渲染为一个实线下划线，但可以用 CSS 替换。
<var>	表示数学表达式或编程上下文中的变量名称。尽管该行为取决于浏览器，但通常使用当前字体的斜体形式显示。
<wbr>	一个文本中的位置，其中浏览器可以选择来换行，虽然它的换行规则可能不会在这里换行。

图片和多媒体

HTML 支持各种多媒体资源，例如图像、音频和视频。

元素	描述
<area>	在图片上定义一个可点击区域。图像映射（image map）允许图像上的几何区域与超链接关联。
<audio>	用于在文档中嵌入音频内容。它可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 source 元素来进行表示：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
<img>	将一张图像嵌入文档。
<map>	与 <area> 元素一起使用，以定义一个图像映射（可点击链接区域）。
<track>	被当作媒体元素——音频（audio）和视频（video）的子元素来使用。它允许指定时序文本轨道（或者基于时间的数据），例如自动处理字幕。轨道格式有 WebVTT 格式（.vtt 格式文件）——Web 视频文本轨格式。
<video>	用于在文档中嵌入媒体播放器，支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 audio 元素可能在用户体验上更合适。

内嵌内容

除了常规的多媒体内容，HTML 可以包括各种其他的内容，即使它并不容易交互。

元素	描述
<embed>	将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。
<iframe>	表示嵌套的浏览上下文。它能够将另一个 HTML 页面嵌入到当前页面中。
<object>	表示引入一个外部资源，这个资源可能是一张图片、嵌入的浏览上下文，亦或是一个插件所使用的资源。
<picture>	通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。
<portal>	允许将另一个 HTML 页面嵌入到当前页面中，以便更流畅地导航到新页面。
<source>	为 picture、audio 或 video 元素指定多个媒体资源。这是一个空元素，这意味这它没有内容，也没有封闭标签。它通常用于以多种格式提供相同的媒体内容，以提供不同浏览器的兼容性，因为浏览器对图像文件和媒体文件格式的支持不同。

SVG 和 MathML

你可以使用 <svg> 或 <math> 将 SVG 或 MathML 内容直接嵌入 HTML 文档。

元素	描述
<svg>	定义新坐标系和视口的容器。它被用作 SVG 文档的最外层元素，但也可用于在 SVG 或 HTML 文档中嵌入 SVG 片段。
<math>	顶级的 MathML 元素。每一个有效的 MathML 实例都必须封装在其中。此外，不能在另一个此类元素中嵌套第二个 <math> 元素，但可以在其中包含任意个其他的子元素。

脚本

为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言，最突出的就是 JavaScript。有一些特定的元素用于支持此功能。

元素	描述
<canvas>	用来通过 canvas scripting API 或 WebGL API 绘制图形及图形动画的容器元素。
<noscript>	定义脚本未被执行时（页面的脚本类型不受支持，或当前浏览器关闭了脚本）的替代内容。
<script>	用于嵌入可执行脚本或数据。这通常用作嵌入或者引用 JavaScript 代码。<script> 元素也能在其他语言中使用，比如 WebGL 的 GLSL 着色器语言和 JSON。

编辑标识

这些元素能标示出某个文本被更改过的部分。

元素	描述
<del>	表示一些被从文档中删除的文本内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。<ins> 标签的作用恰恰与此相反：表示文档中添加的文本。
<ins>	表示一些添加到文档中的文本内容。你可以使用 <del> 元素来类似地表示已从文档中删除的文本。

表格内容

这里的元素用于创建和处理表格数据。

元素	描述
<caption>	指定表格的标题。
<col>	定义表格中的列，并用于定义所有公共单元格上的公共语义。它通常位于 <colgroup> 元素内。
<colgroup>	定义表中的一组列表。
<table>	表示表格数据——即通过二维（由行和列组成）数据表表示的信息。
<tbody>	封装了一系列表格的行（<tr> 元素），代表了它们是表格（<table>）主要内容的组成部分。
<td>	定义了一个包含数据的表格单元格。它是表格模型（table model）的一部分。
<tfoot>	定义了一组表格中各列的汇总行。
<th>	定义表格内的表头单元格。这部分特征是由 scope 和 headers 属性准确定义的。
<thead>	定义了一组定义表格的列头的行。
<tr>	定义表格中的行。同一行可同时出现 <td>（数据单元格）和 <th>（列头单元格）元素。

表单

HTML 提供了许多可一起使用的元素，这些元素能用来创建一个用户可以填写并提交到网站或应用程序的表单。详情请参阅 HTML 表单指南。

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

交互元素

HTML 提供了一系列有助于创建交互式用户界面对象的元素。

元素	描述
<details>	创建一个挂件，仅在被切换成“展开”状态时，它才会显示内含的信息。必须使用 <summary> 元素为该部件提供概要或者标签。
<dialog>	表示一个对话框或其他交互式组件，例如一个可关闭警告、检查器或者窗口。
<summary>	用作 details 元素内容的摘要、标题或图例。点击 <summary> 元素会翻转父元素 <details> 的展开和关闭状态。

Web 组件

Web 组件是一种与 HTML 相关联的技术，简单来说，它允许开发者创建自定义元素，并如同普通的 HTML 一样使用它们。另外，也可以创建经过自定义的标准 HTML 元素。

元素	描述
<slot>	作为 Web 组件技术套件的一部分，该元素是 web 组建内的占位符，你可以使用你自己的标记填充它，从而让你创建单独的 DOM 树并一起呈现它们。
<template>	一种保存 HTML 的机制，它不会在加载页面时立即渲染，但随后可以在运行时使用 JavaScript 实例化。

过时的和弃用的元素

警告： 下面这些旧的 HTML 元素已被弃用，且不应再被使用。千万不要在新的项目中使用它们，并且要尽快替换旧项目中的残余。在此列出，仅供参考。

元素	描述
<acronym>	允许作者明确地声明一个字符序列，它们构成一个单词的首字母缩写或简略语。
<applet>	将 Java applet 嵌入到文档中；此元素以被废弃，请使用 <object> 代替。
<bgsound>	设置一个音频文件，以在使用页面时在后台播放；请使用 <audio> 代替。
<big>	以比周围文本大一号的字体渲染其封闭的文本（例如，medium 变 large）。最大不超过浏览器允许的最大字体。
<blink>	使包含其中的文本缓慢闪烁。
<center>	以水平居中的形式显示包含在元素中的块级或内联内容。
<content>	Web 组件技术套件的废弃部分——用于 Shadow DOM 内部作为插入点，并且不可用于任何正常的 HTML。现在已被 <slot> 元素代替，它在 DOM 中创建一个位置，Shadow DOM 会插入这里。
<dir>	被作为一个文件和/或文件夹的目录的容器，可能还有用户代理应用的样式与图标。请不要使用此过时的元素；请使用用于列表的 <ul> 元素代替，包含文件列表。
<font>	定义内容的字体大小、颜色与外观。
<frame>	定义一个特定区域，另一个 HTML 文档可以在里面展示。frame 应该在 <frameset> 中使用。
<frameset>	用于包含 <frame> 元素。
<image>	<img> 元素古老而又缺乏支持的前身。它不应被使用。
<keygen>	是为了方便生成密钥材料和提交作为 HTML 表单的一部分的公钥。这种机制被用于设计基于 Web 的证书管理系统。按照预想，<keygen> 元素将用于 HTML 表单与其他的所需信息一起构造一个证书请求，该处理的结果将是一个带有签名的证书。
<marquee>	用来插入一段滚动的文字。你可以使用它的属性控制当文本到达容器边缘发生的事情。
<menuitem>	表示一个用户可以通过弹出式菜单来执行的命令。这包括上下文菜单，以及按钮可能附带的菜单。
<nobr>	阻止文本自动拆分成新行，可能导致用户必须水平滚动才能看到文本的所有内容。
<noembed>	是个废除的和不标准的方式，用于向不支持 <embed> 或不支持作者希望的嵌入内容的浏览器提供替代（回退）内容。这个元素在 HTML 4.01 起废除，后备内容应该插在 <object> 的开始和结束标签之间。
<noframes>	在不支持（或禁用支持）<frame> 元素的浏览器中提供要显示的内容。虽然大多数常用浏览器都支持 frame，但也有例外，包括一些特殊用途的浏览器（移动终端的浏览器和文本模式浏览器）。
<param>	为 <object> 元素定义参数。
<plaintext>	将起始标签后面的任何东西渲染为纯文本，忽略随后的任何 HTML 内容。它没有闭合标签，因为任何后面的东西都会看做纯文本。
<rb>	用于分隔 ruby 注解的基本文本组件（即正在注解的文本）。一个 <rb> 元素应该包装基本文本的每个单独的原子段。
<rtc>	包含文字的语义注解，用于在 <rb> 元素中展示。<rb> 元素可以拥有发音（<rt>）和语义（<rtc>）注解。
<shadow>	Web 组件技术套件的废弃部分——目的是用作 Shadow DOM 插入点。如果你在 shadow host 下面创建了多个 shadow root，你就可能已经使用了它。
<spacer>	它可以向页面插入空白间隔。它由 Netscape 设计，用于实现单像素布局图像的相同效果，Web 设计师用它来向页面添加空白，而不需要实际使用图片。但是，<spacer> 不再受任何主流浏览器支持，并且相同效果可以简单由 CSS 实现。
<strike>	在文本上放置水平的删除线。
<tt>	创建内联文本，使用用户代理默认的等宽字体渲染。这个元素用于给文本排版，使其等宽展示，就像电报、纯文本屏幕或行式打印机那样。
<xmp>	渲染在开始和结束标签之间的文本，而不解释中间的 HTML 内容，并使用等宽字体。HTML2 规范建议它应该渲染得足够宽以允许每行 80 个字符。

评分

欢迎为Ta评分