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/