HTML 元素

前言

  • HTML 文档由 HTML 元素定义。

  • “HTML 元素” 和 “HTML 标签” 通常都是描述同样的意思,但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签。

开始标签 元素内容 结束标签
<p> 这是一个段落 </p>
<a href="default.htm"> 这是一个链接 </a>
<br /> 换行

1、HTML 元素语法

  • HTML 元素以开始标签起始,开始标签常被称为起始标签(opening tag)。
  • HTML 元素以结束标签终止,结束标签常称为闭合标签(closing tag)。
  • 元素的内容是开始标签与结束标签之间的内容。
  • 某些 HTML 元素具有空内容(empty content)。
  • 空元素在开始标签中进行关闭(以开始标签的结束而结束)。
  • 大多数 HTML 元素可拥有属性。

2、HTML 元素解析

  • HTML 文档由嵌套的 HTML 元素构成。

    1
    2
    3
    4
    5
    6
    7
    8
    <!DOCTYPE html>
    <html>

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

    </html>
  • 以上实例包含了三个 HTML 元素。

2.1 < p > 元素

  • <p> 元素

    1
    <p>这是第一个段落。</p>
  • 这个 <p> 元素定义了 HTML 文档中的一个段落。

  • 这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>
  • 元素内容是: 这是第一个段落。

2.2 < body > 元素

  • <body> 元素

    1
    2
    3
    <body>
    <p>这是第一个段落。</p>
    </body>
  • <body> 元素定义了 HTML 文档的主体。

  • 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>
  • 元素内容是另一个 HTML 元素(p 元素)。

2.3 < html > 元素

  • <html> 元素

    1
    2
    3
    4
    5
    6
    7
    <html>

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

    </html>
  • <html> 元素定义了整个 HTML 文档。

  • 这个元素拥有一个开始标签 <html> ,以及一个结束标签 </html>
  • 元素内容是另一个 HTML 元素(body 元素)。

2.4 结束标签

  • 不要忘记结束标签,即使您忘记了使用结束标签,大多数浏览器也会正确地显示 HTML。

    1
    2
    <p>这是一个段落
    <p>这是一个段落
  • 以上实例在浏览器中也能正常显示,因为关闭标签是可选的。

  • 但不要依赖这种做法,忘记使用结束标签会产生不可预料的结果或错误。

3、HTML 空元素

  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

  • <br> 就是没有关闭标签的空元素(<br> 标签定义换行)。

  • 在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。

  • 在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。

  • 即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障。

4、使用小写标签

  • HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

  • 万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写。

5、HTML 标签列表

5.1 按字母顺序排列

标签 描述
<!--...--> 定义注释
<!DOCTYPE> 定义文档类型
<a> 定义超文本链接
<abbr> 定义缩写
<acronym> 定义只取首字母的缩写,不支持 HTML5
<address> 定义文档作者或拥有者的联系信息
<applet> HTML5 中不赞成使用。定义嵌入的 applet
<area> 定义图像映射内部的区域
<article> 定义一个文章区域
<aside> 定义页面的侧边栏内容
<audio> 定义音频内容
<b> 定义文本粗体
<base> 定义页面中所有链接的默认地址或默认目标
<basefont> HTML5 不支持,不赞成使用。定义页面中文本的默认字体、颜色或尺寸
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置
<bdo> 定义文字方向
<big> 定义大号文本,HTML5 不支持
<blockquote> 定义长的引用
<body> 定义文档的主体
<br> 定义换行
<button> 定义一个点击按钮
<canvas> 定义图形,比如图表和其他图像,标签只是图形容器,您必须使用脚本来绘制图形
<caption> 定义表格标题
<center> HTML5 不支持,不赞成使用。定义居中文本
<cite> 定义引用 (citation)
<code> 定义计算机代码文本
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值
<dd> 定义定义列表中项目的描述
<del> 定义被删除文本
<details> 用于描述文档或文档某个部分的细节
<dfn> 定义定义项目
<dialog> 定义对话框,比如提示框
<dir> HTML5 不支持,不赞成使用。定义目录列表
<div> 定义文档中的节
<dl> 定义列表详情
<dt> 定义列表中的项目
<em> 定义强调文本
<embed> 定义嵌入的内容,比如插件
<fieldset> 定义围绕表单中元素的边框
<figcaption> 定义 <figure> 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)
<font> HTML5 不支持,不赞成使用。定义文字的字体、尺寸和颜色
<footer> 定义 section 或 document 的页脚
<form> 定义了 HTML 文档的表单
<frame> 定义框架集的窗口或框架
<frameset> 定义框架集
<h1> to <h6> 定义 HTML 标题,<h1> 定义最大的标题。 <h6> 定义最小的标题
<head> 定义关于文档的信息
<header> 定义了文档的头部区域
<hr> 定义水平线
<html> 定义 HTML 文档
<i> 定义斜体字
<iframe> 定义内联框架
<img> 定义图像
<input> 定义输入控件
<ins> 定义被插入文本
<kbd> 定义键盘文本
<keygen> 规定用于表单的密钥对生成器字段
<label> 定义 input 元素的标注
<legend> 定义 fieldset 元素的标题
<li> 定义列表的项目
<link> 定义文档与外部资源的关系
<map> 定义图像映射
<mark> 定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签
<menu> 不赞成使用。定义菜单列表
<meta> 定义关于 HTML 文档的元信息
<meter> 定义度量衡。仅用于已知最大和最小值的度量
<nav> 定义导航链接的部分
<noframes> 定义针对不支持框架的用户的替代内容。HTML5 不支持
<noscript> 定义针对不支持客户端脚本的用户的替代内容
<object> 定义内嵌对象
<ol> 定义有序列表
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项。
<output> 定义不同类型的输出,比如脚本的输出
<p> 定义段落
<param> 定义对象的参数
<pre> 定义预格式文本
<progress> 定义运行中的进度(进程)
<q> 定义短的引用
<rp> <rp> 标签在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容
<rt> <rt> 标签定义字符(中文注音或字符)的解释或发音
<ruby> <ruby> 标签定义 ruby 注释(中文注音或字符)
<s> 不赞成使用。定义加删除线的文本
<samp> 定义计算机代码样本
<script> 定义客户端脚本
<section> <section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
<select> 定义选择列表(下拉列表)
<small> 定义小号文本
<source> <source> 标签为媒介元素(比如 <video><audio>)定义媒介资源
<span> 定义文档中的节
<strike> HTML5 不支持,不赞成使用。定义加删除线文本
<strong> 定义强调文本
<style> 定义文档的样式信息
<sub> 定义下标文本
<summary> <summary> 标签包含 details 元素的标题,”details” 元素用于描述有关文档或文档片段的详细信息
<sup> 定义上标文本
<table> 定义表格
<tbody> 定义表格中的主体内容
<td> 定义表格中的单元
<textarea> 定义多行的文本输入控件
<tfoot> 定义表格中的表注内容(脚注)
<th> 定义表格中的表头单元格
<thead> 定义表格中的表头内容
<time> 定义日期或时间,或者两者
<title> 定义文档的标题
<tr> 定义表格中的行
<track> <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道
<tt> 定义打字机文本
<u> 不赞成使用。定义下划线文本
<ul> 定义无序列表
<var> 定义文本的变量部分
<video> <video> 标签定义视频,比如电影片段或其他视频流
<wbr> 规定在文本中的何处适合添加换行符

5.2 按功能排列

5.2.1 基础

元素 描述
<!DOCTYPE> 定义文档类型
<html> 定义一个 HTML 文档
<title> 为文档定义一个标题
<body> 定义文档的主体
<h1> to <h6> 定义 HTML 标题,<h1> 定义最大的标题。 <h6> 定义最小的标题
<p> 定义一个段落
<br> 定义简单的折行
<hr> 定义水平线
<!--...--> 定义一个注释

5.2.2 格式

元素 描述
<acronym> HTML5不再支持。 定义只取首字母的缩写
<abbr> 定义一个缩写
<address> 定义文档作者或拥有者的联系信息
<b> 定义粗体文本
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置
<bdo> 定义文本的方向
<big> HTML5 不再支持。 定义大号文本
<blockquote> 定义块引用
<center> HTML5 不再支持。 HTML 4.01 已废弃。定义居中文本
<cite> 定义引用 (citation)
<code> 定义计算机代码文本
<del> 定义被删除文本
<dfn> 定义定义项目
<em> 定义强调文本
<font> HTML5 不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
<i> 定义斜体文本
<ins> 定义被插入文本
<kbd> 定义键盘文本
<mark> 定义带有记号的文本
<meter> 定义度量衡。仅用于已知最大和最小值的度量
<pre> 定义预格式文本
<progress> 定义运行中的任务进度(进程)
<q> 定义短的引用
<rp> 定义不支持 ruby 元素的浏览器所显示的内容
<rt> 定义字符(中文注音或字符)的解释或发音
<ruby> 定义 ruby 注释(中文注音或字符)
<s> 定义加删除线的文本
<samp> 定义计算机代码样本
<small> 定义小号文本
<strike> HTML5 不再支持。 HTML 4.01 已废弃。 定义加删除线的文本
<strong> 定义语气更为强烈的强调文本
<sub> 定义下标文本
<sup> 定义上标文本
<time> 定义一个日期/时间
<tt> HTML5 不再支持。 定义打字机文本
<u> 定义下划线文本
<var> 定义文本的变量部分
<wbr> 规定在文本中的何处适合添加换行符

5.2.3 表单

元素 描述
<form> 定义一个 HTML 表单,用于用户输入
<input> 定义一个输入控件
<textarea> 定义多行的文本输入控件
<button> 定义按钮
<select> 定义选择列表(下拉列表)
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项
<label> 定义 input 元素的标注
<fieldset> 定义围绕表单中元素的边框
<legend> 定义 fieldset 元素的标题
<datalist> 规定了 input 元素可能的选项列表
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义一个计算的结果

5.2.4 框架

元素 描述
<frame> HTML5 不再支持。 定义框架集的窗口或框架
<frameset> HTML5 不再支持。定义框架集
<noframes> HTML5 不再支持。 定义针对不支持框架的用户的替代内容
<iframe> 定义内联框架

5.2.5 图像

元素 描述
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图内部的区域
<canvas> 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)
<figcaption> 定义一个 caption for a <figure> element
<figure> figure 标签用于对元素进行组合

5.2.6 媒体

元素 描述
<audio> 定义声音,比如音乐或其他音频流
<source> 定义media元素 (<video><audio>)的媒体资源。media
<track> 为媒体(<video><audio>)元素定义外部文本轨道
<video> 定义一个音频或者视频

5.2.7 链接

元素 描述
<a> 定义一个链接
<link> 定义文档与外部资源的关系
<nav> 定义导航链接

5.2.8 列表

元素 描述
<ul> 定义一个无序列表
<ol> 定义一个有序列表
<li> 定义一个列表项
<dir> HTML5 不再支持。 HTML 4.01 已废弃。 定义目录列表
<dl> 定义一个定义列表
<dt> 定义一个定义列表中的项目
<dd> 定义定义列表中项目的描述
<menu> 定义菜单列表
<command> 定义用户可能调用的命令(比如单选按钮、复选框或按钮)

5.2.9 表格

元素 描述
<table> 定义一个表格
<caption> 定义表格标题
<th> 定义表格中的表头单元格
<tr> 定义表格中的行
<td> 定义表格中的单元
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容(脚注)
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组

5.2.10 样式

元素 描述
<style> 定义文档的样式信息

5.2.11 节

元素 描述
<div> 定义文档中的节
<span> 定义文档中的节
<header> 定义一个文档头部部分
<footer> 定义一个文档底部
<section> 定义了文档的某个区域
<article> 定义一个文章内容
<aside> 定义其所处内容之外的内容
<details> 定义了用户可见的或者隐藏的需求的补充细节
<dialog> 定义一个对话框或者窗口
<summary> 定义一个可见的标题。 当用户点击标题时会显示出详细信息

5.2.12 元信息

元素 描述
<head> 定义关于文档的信息
<meta> 定义关于 HTML 文档的元信息
<base> 定义页面中所有链接的默认地址或默认目标
<basefont> HTML5 不再支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸

5.2.13 程序

元素 描述
<script> 定义客户端脚本
<noscript> 定义针对不支持客户端脚本的用户的替代内容
<applet> HTML5 不再支持。 HTML 4.01 已废弃。 定义嵌入的 applet
<embed> 定义了一个容器,用来嵌入外部应用或者互动程序(插件)
<object> 定义嵌入的对象
<param> 定义对象的参数
文章目录
  1. 1. 前言
  2. 2. 1、HTML 元素语法
  3. 3. 2、HTML 元素解析
    1. 3.1. 2.1 < p > 元素
    2. 3.2. 2.2 < body > 元素
    3. 3.3. 2.3 < html > 元素
    4. 3.4. 2.4 结束标签
  4. 4. 3、HTML 空元素
  5. 5. 4、使用小写标签
  6. 6. 5、HTML 标签列表
    1. 6.1. 5.1 按字母顺序排列
    2. 6.2. 5.2 按功能排列
      1. 6.2.1. 5.2.1 基础
      2. 6.2.2. 5.2.2 格式
      3. 6.2.3. 5.2.3 表单
      4. 6.2.4. 5.2.4 框架
      5. 6.2.5. 5.2.5 图像
      6. 6.2.6. 5.2.6 媒体
      7. 6.2.7. 5.2.7 链接
      8. 6.2.8. 5.2.8 列表
      9. 6.2.9. 5.2.9 表格
      10. 6.2.10. 5.2.10 样式
      11. 6.2.11. 5.2.11 节
      12. 6.2.12. 5.2.12 元信息
      13. 6.2.13. 5.2.13 程序
隐藏目录