HTML块级元素与行内元素
2020-12-24 本文已影响0人
LXEP
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>多行纯文本编辑控件 - ......
