HTML 高效学习方式（非常重要！！！）

最新推荐文章于 2022-10-24 01:05:23 发布

原创最新推荐文章于 2022-10-24 01:05:23 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

本文全面介绍了HTML中的各种标签，从元数据元素到流元素，再到区块、标题、语句、嵌入和交互型元素，详细解读了每种标签的用途和嵌套规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习的方法论：{

第一步：这东西是用来干什么的？

第二部：这东西该怎么用

第三部：人的记忆力很短，要以理解为重。会查，会用，就是懂

}

进入正题：

HTML标签种类大全

标签	描述
<!--...-->	定义注释。
<!DOCTYPE>	定义文档类型。
<a>	定义锚。
<abbr>	定义缩写。
<acronym>	定义只取首字母的缩写。
<address>	定义文档作者或拥有者的联系信息。
<applet>	不赞成使用。定义嵌入的 applet。
<area>	定义图像映射内部的区域。
<article>	定义文章。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<b>	定义粗体字。
<base>	定义页面中所有链接的默认地址或默认目标。
<basefont>	不赞成使用。定义页面中文本的默认字体、颜色或尺寸。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<bdo>	定义文字方向。
<big>	定义大号文本。
<blockquote>	定义长的引用。
<body>	定义文档的主体。
<br>	定义简单的折行。
<button>	定义按钮 (push button)。
<canvas>	定义图形。
<caption>	定义表格标题。
<center>	不赞成使用。定义居中文本。
<cite>	定义引用(citation)。
<code>	定义计算机代码文本。
<col>	定义表格中一个或多个列的属性值。
<colgroup>	定义表格中供格式化的列组。
<command>	定义命令按钮。
<datalist>	定义下拉列表。
<dd>	定义定义列表中项目的描述。
<del>	定义被删除文本。
<details>	定义元素的细节。
<dir>	不赞成使用。定义目录列表。
<div>	定义文档中的节。
<dfn>	定义定义项目。
<dialog>	定义对话框或窗口。
<dl>	定义定义列表。
<dt>	定义定义列表中的项目。
<em>	定义强调文本。
<embed>	定义外部交互内容或插件。
<fieldset>	定义围绕表单中元素的边框。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<font>	不赞成使用。定义文字的字体、尺寸和颜色。
<footer>	定义 section 或 page 的页脚。
<form>	定义供用户输入的 HTML 表单。
<frame>	定义框架集的窗口或框架。
<frameset>	定义框架集。
<h1> to <h6>	定义 HTML 标题。
<head>	定义关于文档的信息。
<header>	定义 section 或 page 的页眉。
<hr>	定义水平线。
<html>	定义 HTML 文档。
<i>	定义斜体字。
<iframe>	定义内联框架。
<img>	定义图像。
<input>	定义输入控件。
<ins>	定义被插入文本。
<isindex>	不赞成使用。定义与文档相关的可搜索索引。
<kbd>	定义键盘文本。
<keygen>	定义生成密钥。
<label>	定义 input 元素的标注。
<legend>	定义 fieldset 元素的标题。
<li>	定义列表的项目。
<link>	定义文档与外部资源的关系。
<map>	定义图像映射。
<mark>	定义有记号的文本。
<menu>	定义菜单列表。
<meta>	定义关于 HTML 文档的元信息。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<noframes>	定义针对不支持框架的用户的替代内容。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<object>	定义内嵌对象。
<ol>	定义有序列表。
<optgroup>	定义选择列表中相关选项的组合。
<option>	定义选择列表中的选项。
<output>	定义输出的一些类型。
<p>	定义段落。
<param>	定义对象的参数。
<pre>	定义预格式文本。
<progress>	定义任何类型的任务的进度。
<q>	定义短的引用。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<s>	定义加删除线的文本。
<samp>	定义计算机代码样本。
<script>	定义客户端脚本。
<section>	定义 section。
<select>	定义选择列表（下拉列表）。
<small>	定义小号文本。
<source>	定义媒介源。
<span>	定义文档中的节。
<strike>	不赞成使用。定义加删除线文本。
<strong>	定义强调文本。
<style>	定义文档的样式信息。
<sub>	定义下标文本。
<summary>	为 <details> 元素定义可见的标题。
<sup>	定义上标文本。
<table>	定义表格。
<tbody>	定义表格中的主体内容。
<td>	定义表格中的单元。
<textarea>	定义多行的文本输入控件。
<tfoot>	定义表格中的表注内容（脚注）。
<th>	定义表格中的表头单元格。
<thead>	定义表格中的表头内容。
<time>	定义日期/时间。
<title>	定义文档的标题。
<tr>	定义表格中的行。
<track>	定义用在媒体播放器中的文本轨道。
<tt>	定义打字机文本。
<u>	定义下划线文本。
<ul>	定义无序列表。
<var>	定义文本的变量部分。
<video>	定义视频。
<wbr>	定义视频。
<xmp>	定义预格式文本。

详细解读

分类

　　html5出现之前，经常把元素按照block、inline、inline-block来区分。在html5中，元素不再按照display属性来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型(interactive content)。元素不属于任何一个类别，被称为穿透的；元素可能属于不止一个类别，称为混合的。

　　元数据元素

(metadata content)是可以被用于说明其他内容的表现或行为，或者在当前文档和其他文档之间建立联系的元素

base link meta noscript script style template title

　　流元素(flow content)是在应用程序和文档的主体部分中使用的大部分元素

a abbr address area(如果它是map元素的子元素) article aside audio b bdi bdo blockquote br button canvas cite code data datalist del dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hr i iframe img input ins kbd keygen label main map mark math meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong sub sup svg table template textarea time u ul var video wbr text

　　区块型元素(sectioning content)是用于定义标题及页脚范围的元素

      article aside nav section

　　标题型元素(heading content)定义一个区块/章节的标题

       h1 h2 h3 h4 h5 h6

　　语句型元素(phrasing content)是用于标记段落级文本的元素

a abbr area (如果它是map元素的子级) audio b bdi bdo br button canvas cite code data datalist del dfn em embed i iframe img input ins kbd keygen label map mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg template textarea time u var video wbr text

　　嵌入型元素(embedded content)是引用或插入到文档中其他资源的元素

      audio canvas embed iframe img math object svg video

　　交互型元素(interactive content)是专门用于与用户交互的元素

    a audio(如果设置了controls属性) button embed iframe img(如果设置了usemap属性) input(如果type属性不为hidden) keygen           label object(如果设置了usemap属性) select textarea video (如果设置了controls属性)

子元素

【1】子元素是流元素

<article>、<section>、<blockquote>、<li>、<dd>、<figcaption>、<div>、<main>、<td>

　　【1.1】子元素是流元素，不包括<main>元素

<aside>、<nav>

　　【1.2】子元素是流元素，但不包括<table>元素

<caption>

　　【1.3】子元素是流元素，但不包括<form>元素

<form>

　　【1.4】子元素是流元素，但不包括<header>、<footer>、<main>元素

<header>、<footer>、<main>

　　【1.5】子元素是流元素，但不包括<header>、<footer>、区块型元素(sectioning content)、标题型元素(heading content)

<dt>、<th>

　　【1.6】子元素是流元素，但不包括<header>、<footer>、<address>、区块型元素(sectioning content)、标题型元素(heading content)

<address>

　　【1.7】子元素是一个<figcaption>元素，紧跟着流元素

<figure>

　　【1.8】子元素是一个<legend>元素，紧跟着流元素

<filedset>

【2】子元素是语句型元素

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>、<pre>、<em>、<strong>、<small>、<s>、<cite>、<q>、<abbr>、<data>、<time>、<code>、<var>、<samp>、<kbd>、<sub>、<sup>、<i>、<b>、<u>、<mark>、<bdi>、<bdo>、<span>、<input>、<output>、<legend>、<label>

　　【2.1】子元素是语句型元素，但不包括和自身相同的元素

<dfn>、<progress>、<meter>

　　【2.2】子元素是语句型元素，但不包括交互型元素(interactive content)

<button>

【3】子元素是transparent(以它的父元素允许的子元素为准)

<ins>、<del>、<map>

　　【3.1】子元素是transparent(以它的父元素允许的子元素为准)，但不包括交互型元素(interactive content)

<a>

　　【3.2】子元素可以没有、可以是<param>元素，也可以是transparent(以它的父元素允许的子元素为准)

<object>

【4】无子元素

<hr>、<br>、<wbr>、<img>、<embed>、<param>、<source>、<track>、<area>、<col>、<keygen>

　　【4.1】子元素可以没有、可以是<li>元素，也可以是<script>、<template>元素

<ol>、<ul>

　　【4.2】子元素可以没有、可以是<dt>和<dd>元素，也可以是<script>、<template>元素

<dl>

　　【4.3】子元素可以没有，可以是<option>、<optgroup>，也可以是<script>、<template>元素

<select>

　　【4.4】子元素可以没有，可以是<option>，也可以是<script>、<template>元素

<optgroup>

　　【4.5】子元素可以没有、可以是<option>元素

<datalist>

　　【4.6】子元素可以没有、也可以是<track>元素，也可以是<source>元素

<audio>、<video>

　　【4.7】子元素可以没有，也可以是<col>、<template>元素

<colgroup>

　　【4.8】子元素可以没有，可以是<tr>，也可以是<script>、<template>元素

<tbody>、<thead>、<tfoot>

　　【4.9】子元素可以没有，可以是<tr>、<th>，也可以是<script>、<template>元素

<tr>

【5】子元素是<caption>、<colgroup>、<thead>、<tfoot>、<tbody>，也可以是<script>、<template>元素

<table>

【6】子元素是文本内容

<textarea>

　　【6.1】子元素可以没有，也可以是文本内容

<option>

总结

　　关于每个元素的详细嵌套规则，上部分已经详细介绍。这部分主要对常用标签的嵌套规则进行总结

【1】<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<p>的子元素是语句型元素

【2】<header>、<footer>不可嵌套<header>、<footer>

【3】<a>的子元素是transparent(以它的父元素允许的子元素为准)，但不包括交互型元素(interactive content)

【4】<form>不可嵌套<form>

【5】<button>子元素是语句型元素，不可嵌套交互型元素(interactive content)

【6】<caption>不可嵌套<table>

【7】<dt>、<th>不可嵌套<header>、<footer>、区块型元素(sectioning content)、标题型元素(heading content)