前端之路

HTML的元素家族

2018-08-01  本文已影响1人  李不远

要想熟练掌握HTML,不光要知道它拥有哪些元素,还要搞清楚这些元素属于什么类型,这样才能有利于我们更好的利用这门知识。
那么在HTML里面,有哪些常见的元素分类呢?常见的分类有下面这些

  1. 块级元素
  2. 行内元素
  3. 可替换元素
  4. 空元素
    下面我们就来逐一了解吧!

块级元素

块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
<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】

行内元素

一个行内元素只占据它对应标签的边框所包含的空间

空元素

在 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/

上一篇 下一篇

猜你喜欢

热点阅读