HTML的元素家族

要想熟练掌握HTML
,不光要知道它拥有哪些元素,还要搞清楚这些元素属于什么类型,这样才能有利于我们更好的利用这门知识。
那么在HTML
里面,有哪些常见的元素分类呢?常见的分类有下面这些
- 块级元素
- 行内元素
- 可替换元素
- 空元素
下面我们就来逐一了解吧!
块级元素
块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
<address>
联系方式信息。
<article>
5文章内容。【HTML5】
<aside>
伴随内容。【HTML5】
<audio>
音频播放。【HTML5】
<blockquote>
块引用。
<canvas>
绘制图形【HTML5】
<dd>
定义列表中定义条目描述。
<div>
文档分区。
<dl>
定义列表。
<fieldset>
表单元素分组。
<figcaption>
图文信息组标题【HTML5】
<figure>
图文信息组 (参照<figcaption>
)【HTML5】
<footer>
区段尾或页尾【HTML5】
<form>
表单。
<h1>
, <h2>
, <h3>
, <h4>
, <h5>
, <h6>
标题级别 1-6.
<header>
区段头或页头【HTML5】
<hgroup>
标题组【HTML5】
<hr>
水平分割线。
<noscript>
不支持脚本或禁用脚本时显示的内容。
<ol>
有序列表。
<output>
表单输出【HTML5】
<p>
行。
<pre>
预格式化文本。
<section>
一个页面区段【HTML5】
<table>
表格。
<tfoot>
表脚注。
<ul>
无序列表。
<video>
视频【HTML5】
行内元素
一个行内元素只占据它对应标签的边框所包含的空间
- 【字体相关】
<b>``<big>
<i>``<small>``<tt>
- 【文本相关】
<abbr>``<acronym>``<cite>``<code>``<dfn>``<em>``<kbd>``<strong>``<samp>``<var>
- 【引用相关】
<a>``<bdo>``<br>``<img>``<map>``<object>``<q>``<script>``<span>``<sub>``<sup>
- 【输入选择相关】
<button>``<input>``<label>``<select> ``<textarea>
空元素
在 HTML 中,通常在一个空元素上使用一个闭标签是无效的。
<area>
<base>
<br>
<col>
<colgroup>
【当span
存在时】
<command>
【已废弃使用】
<embed>
<hr>
<img>
<input>
<keygen>
【已废弃使用】
<link>
<meta>
<param>
<source>
<track>
<wbr>
可替换元素【css内容】
这些元素是一类 外观渲染独立于CSS的 外部对象
典型的可替换元素有<img>
<object>
<video>
和 表单元素,如<textarea>
<input>
。
某些元素只在一些特殊情况下表现为可替换元素,例如 <audio>
和 <canvas>
。
通过 CSS content
属性来插入的对象 被称作 匿名可替换元素(anonymous replaced elements
)。CSS在某些情况下会对可替换元素做特殊处理,比如计算外边距和一些auto值。需要注意的是,一部分(并非全部)可替换元素,本身具有尺寸和基线(baseline),会被像vertical-align
之类的一些 CSS 属性用到。
参考网站[MDN][a]
——远方不远
[a]: https://developer.mozilla.org/zh-CN/