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>
多行纯文本编辑控件 - ......
网友评论