美文网首页HTML
HTML块级元素与行内元素

HTML块级元素与行内元素

作者: LXEP | 来源:发表于2020-12-24 10:52 被阅读0次

HTML(超文本标记语言)中元素大多数都是“块级”元素或行内元素。块级元素占据其父元素(容器)的整个空间,因此创建了一个“块”。

块级元素示例

通常浏览器会在块级元素前后另起一个新行。下面的例子表明了块级元素的作用:

<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>

块级元素用法

块级元素只能出现在 <body>元素内。

块级元素与行内元素

块级元素与行内元素有几个关键区别:

  • 格式:默认情况下,块级元素会新起一行

  • 内容模式:一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更“大型”的结构。

块级元素列表

以下是HTML中所有的块级元素列表

  • <p> 段落行
  • <noscript>不支持脚本或禁用脚本时显示的内容
  • <pre> 预格式化文本
  • <blockquote> 块引用
  • <h1>...<h6> 标题级别1-6
  • <table> 表格
  • <tfoot> 表脚注
  • <dd> 定义列表中定义条目描述
  • <div> 文档分区
  • <hr> 水平分割线
  • <ul> 无序列表
  • <dl> 定义列表
  • <form> 表单
  • <fieldset> 表单元素分组
  • <address> 联系方式信息
  • <ol> 有序列表
  • ......

行内元素示例

<p>This 
<span>span</span> 
is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>

行内元素与块级元素对比

  • 内容:一般情况下,行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

  • 格式:默认情况下,行内元素不会以新行开始,而块级元素会新起一行。

行内元素列表

  • <b> 吸引读者的注意到该元素的内容上
  • <i> 表现因某些原因需要区分普通文本的一系列文本
  • <script> 元素用于嵌入或引用可执行脚本
  • <small> 使文本的字体变小一号
  • <q> 表示一个封闭的并且是短的行内引用的文本
  • <em> 着重元素
  • <strong> 表示文本十分重要
  • <span> 元素是短语内容的通用行内容器
  • <a> 超链接
  • <br> 文本中生成一个换行(回车)符号
  • <img> 将一份图像嵌入文档
  • <sub> 下标
  • <sup> 上标
  • <button> 按钮
  • <input> 基于Web的表单创建交互式控件
  • <label> 用户界面中某个元素的说明
  • <select> 提供选项菜单的控件
  • <textarea> 多行纯文本编辑控件
  • ......

相关文章

  • 企业级规范

    html标签企业级规范 一、 块级元素与块级元素平级,内嵌元素与内嵌元素平级 二、块元素可以包含行内元素或者某些块...

  • HTML中块级元素和行内元素

    HTML标签CSS盒模型块级元素和行内元素的定义块级元素和行内元素的分类 1、 HTML标签 html标签定义: ...

  • CSS 常见样式

    CSS 常见样式 块级元素和行内元素 块级元素 HTML(超文本标记语言)中元素大多数都是“块级”元素或行内元素。...

  • 前端HTML & CSS 基础入门(9)布局与定位

    块级元素和行内元素 HTML里的元素可以分为块级元素和行内元素两大类: ?块级元素:块级元素典型特点就是它要独占一...

  • CSS常见属性

    HTML元素类型 HTML元素又分为块级(block-level)元素与行内(内联、inline-level)元素...

  • HTML之6个问题

    问题 HTML 中的行内元素有什么特点,有哪些元素是行内元素? HTML 中的块级元素有什么特点,有哪些元素是块级...

  • 块级元素与行内元素

    块级元素与行内元素 常用的块级元素与行内元素有哪些? 块级元素:div , p , form, ul, li , ...

  • 面试题

    HTML行内元素、块状元素、行内块状元素的区别 块级元素:块级大多为结构性标记 行内元素:行内大多为描述性标记 互...

  • CSS常见样式

    HTML元素类型 HTML元素又分为块级元素(block-level)、行内元素(inline-level)。 块...

  • 前端知识点整理

    HTML篇 1. 行内元素有哪些?块级元素有哪些? 行内元素:a span img input select块级元...

网友评论

    本文标题:HTML块级元素与行内元素

    本文链接:https://www.haomeiwen.com/subject/orkunktx.html