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 元素解析

2.1 嵌套的 HTML 元素

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

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

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

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

2.2 HTML 实例解析

2.2.1 < p > 元素

  • <p> 元素

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

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

2.2.2 < body > 元素

  • <body> 元素

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

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

2.2.3 < html > 元素

  • <html> 元素

    1
    2
    3
    4
    5
    6
    7
    <html>

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

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

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

2.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 标题
<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 按功能排列

基础 描述
<!DOCTYPE> 定义文档类型
<html> 定义一个 HTML 文档
<title> 为文档定义一个标题
<body> 定义文档的主体
<h1> to <h6> 定义 HTML 标题
<p> 定义一个段落
<br> 定义简单的折行
<hr> 定义水平线
<!--...--> 定义一个注释
格式 描述
<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> 规定在文本中的何处适合添加换行符
表单 描述
<form> 定义一个 HTML 表单,用于用户输入
<input> 定义一个输入控件
<textarea> 定义多行的文本输入控件
<button> 定义按钮
<select> 定义选择列表(下拉列表)
<optgroup> 定义选择列表中相关选项的组合
<option> 定义选择列表中的选项
<label> 定义 input 元素的标注
<fieldset> 定义围绕表单中元素的边框
<legend> 定义 fieldset 元素的标题
<datalist> 规定了 input 元素可能的选项列表
<keygen> 规定用于表单的密钥对生成器字段
<output> 定义一个计算的结果
框架 描述
<frame> HTML5 不再支持。 定义框架集的窗口或框架
<frameset> HTML5 不再支持。定义框架集
<noframes> HTML5 不再支持。 定义针对不支持框架的用户的替代内容
<iframe> 定义内联框架
图像 描述
<img> 定义图像
<map> 定义图像映射
<area> 定义图像地图内部的区域
<canvas> 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)
<figcaption> 定义一个 caption for a <figure> element
<figure> figure 标签用于对元素进行组合
Audio/Video 描述
<audio> 定义声音,比如音乐或其他音频流
<source> 定义media元素 (<video><audio>)的媒体资源。media
<track> 为媒体(<video><audio>)元素定义外部文本轨道
<video> 定义一个音频或者视频
链接 描述
<a> 定义一个链接
<link> 定义文档与外部资源的关系
<nav> 定义导航链接
列表 描述
<ul> 定义一个无序列表
<ol> 定义一个有序列表
<li> 定义一个列表项
<dir> HTML5 不再支持。 HTML 4.01 已废弃。 定义目录列表
<dl> 定义一个定义列表
<dt> 定义一个定义列表中的项目
<dd> 定义定义列表中项目的描述
<menu> 定义菜单列表
<command> 定义用户可能调用的命令(比如单选按钮、复选框或按钮)
表格 描述
<table> 定义一个表格
<caption> 定义表格标题
<th> 定义表格中的表头单元格
<tr> 定义表格中的行
<td> 定义表格中的单元
<thead> 定义表格中的表头内容
<tbody> 定义表格中的主体内容
<tfoot> 定义表格中的表注内容(脚注)
<col> 定义表格中一个或多个列的属性值
<colgroup> 定义表格中供格式化的列组
样式/节 描述
<style> 定义文档的样式信息
<div> 定义文档中的节
<span> 定义文档中的节
<header> 定义一个文档头部部分
<footer> 定义一个文档底部
<section> 定义了文档的某个区域
<article> 定义一个文章内容
<aside> 定义其所处内容之外的内容
<details> 定义了用户可见的或者隐藏的需求的补充细节
<dialog> 定义一个对话框或者窗口
<summary> 定义一个可见的标题。 当用户点击标题时会显示出详细信息
元信息 描述
<head> 定义关于文档的信息
<meta> 定义关于 HTML 文档的元信息
<base> 定义页面中所有链接的默认地址或默认目标
<basefont> HTML5 不再支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸
程序 描述
<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 嵌套的 HTML 元素
    2. 3.2. 2.2 HTML 实例解析
      1. 3.2.1. 2.2.1 < p > 元素
      2. 3.2.2. 2.2.2 < body > 元素
      3. 3.2.3. 2.2.3 < html > 元素
      4. 3.2.4. 2.2.4 结束标签
  4. 4. 3、HTML 空元素
  5. 5. 4、使用小写标签
  6. 6. 5、HTML 标签列表
    1. 6.1. 5.1 按字母顺序排列
    2. 6.2. 5.2 按功能排列
隐藏目录