【HTML·元素级别】:块级与内联(行内)

168 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第30天,点击查看活动详情

1️⃣前言

大家好,我是翼同学。今天笔记的内容是:

  • HTML元素级别

2️⃣内容

元素级别

在HTML中,元素一般分为两种级别:

  • 块级元素:块级元素在页面文档中以块(block)的形式展示,什么意思呢?简单来说就是独占一块:相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。因此块级元素通常用于展示页面上结构化的内容,比如标题,段落,列表等。
  • 内联元素:又称行内元素。注意,内联元素通常出现在块级元素中,并环绕着文档内容,一般出现在文字之间,比如超链接元素<a>或者强调元素<strong>等。

另外需要注意,在这里提到的HTML元素级别(块级和内联)与CSS样式中的块级盒子以及内联盒子并不完全相同。尽管二者是有点相关,但这并不意味着改变了CSS显示类型就能改变元素的级别(或者说元素分类)

块级元素

现记录一些HTML中的块级元素:

  • <div>--文档分区
  • <p>--段落
  • <ul>--无序列表
  • <ol>--有序列表
  • <dl>--定义列表
  • <form>--表单
  • <table>--表格
  • <dd>--列表中定义条目描述
  • <hr>--水平分割线
  • <h1>--第1级别的标题
  • <h2>--第2级别的标题
  • <h3>--第3级别的标题
  • <h4>--第4级别的标题
  • <h5>--第5级别的标题
  • <h6>--第6级别的标题
  • <hgroup>--标题组
  • <pre>--预格式化文本
  • <footer>--区段尾或页尾
  • <address>--联系方式
  • <header>--区段头或页头
  • <article>--文章内容
  • <aside>--伴随内容
  • <blockquote>--块引用
  • <fieldset>--表单元素分组
  • <figcaption>--图文信息组标题
  • <figure>--图文信息组
  • <section>--一个页面区段

内联元素

现简单记录一些HTML中的内联(行内)元素:

  • <span>--短语内容的通用行内容器(无特殊语义)
  • <a>--锚元素,通过href属性创建超链接。
  • <img>--将一份图像嵌入文档
  • <button>--表示一个可点击的按钮
  • <input>--定义了表单创建交互式控件。
  • <select>--表示一个提供选项菜单的控件。
  • <script>--用于嵌入或引用可执行脚本(JavaScript ).
  • <sub>--定义了文本区域(更低并且更小)
  • <sup>--定义了文本区域(更高并且更小)
  • <textarea>--表示一个多行纯文本编辑控件。
  • <label>--表示用户界面中某个元素的说明。
  • <q>--表示一个封闭的并且是短的行内引用的文本
  • <strong>--表示文本十分重要,一般用粗体显示。
  • <em>-- 标记出需要用户着重阅读的内容
  • <code>--呈现一段计算机代码(以浏览器的默认等宽字体显示)
  • <b>--将文本显示为粗体
  • <i>--将文本显示为斜体
  • <var>--表示数学表达式或编程上下文中的变量名称(通常使用当前字体的斜体形式显示)
  • <object>--嵌入对象元素,表示引入一个外部资源
  • <samp>--用于标识计算机程序输出
  • <dfn>--定义元素,标记了被定义的术语
  • <cite>--引用标签,表示一个作品的引用(这个引用可能是一个根据适当的上下文约定关联引用的元数据的缩写)
  • <abbr>--用于代表缩写,通过可选的title属性提供完整的描述。
  • <small>--将文本的字体变小一号(在 HTML5 中,除了它的样式含义,这个元素被重新定义为表示边注释和附属细则)

3️⃣写在最后

好了,今天的笔记就记到这里。