HTML中常见的行内元素与块级元素及它们区别

最新推荐文章于 2023-02-15 22:49:58 发布

纸飞机加油

最新推荐文章于 2023-02-15 22:49:58 发布

阅读量1k

点赞数 4

文章标签： html

本文链接：https://blog.csdn.net/joke123x/article/details/109399588

版权

HTML (超文本标记语言) 元素大多数都是行内元素或块级元素。一个行内元素只占据它对应标签的边框所包含的空间。
一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。块级元素只能出现在 <body> 元素内。

行内元素与块级元素对比：

行内元素只能包含数据和其他行内元素，块级元素可以包含行内元素和其他块级元素。
行内元素不会以新行开始，而块级元素会新起一行。

行内元素的特征：

①设置宽高无效
②对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间
③不会自动进行换行

常见的行内元素：

<b>标签规定粗体文本
<big>让文本比常规的字体大一号
< i>标签显示斜体文本效果
<small>标签呈现小号字体效果
<tt>标签呈现类似打字机或者等宽的文本效果
<abbr>它所包含的文本是一个更长的单词或短语的缩写形式
<acronym>标签定义首字母缩写
<cite> 标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题,
<code>对文档中的文本进行格式化,
<dfn> 标签可标记那些对特殊术语或短语的定义
<em>实例对文档中的文本进行格式化
<kbd>标签定义键盘文本
<strong>和 <em> 标签一样,用于强调文本,但它强调的程度更强一些
<samp>表示一段用户应该对其没有什么其他解释的文本字符,
<var>标签表示变量的名称,或者由用户提供的值
<a>标签可以是超链接或锚
<bdo>可覆盖默认的文本方向
<br>以下代码标记一个换行:
<img>标签创建的是被引用图像的占位空间
<map>定义客户端图像映射,
<object>元素用于在网页中包含对象，比如：图像、音频、视频、Java applet、ActiveX、PDF、Flash 等,
<q>标签用于简短的行内引用
<script>在 HTML 页面中插入一段 JavaScript
<span>标签被用来组合文档中的行内元素
<sub>下标文本
<sup> 上标文本
<button>按钮
<input>一个简单的 HTML 表单,包含两个文本输入框和一个提交按钮
<label>标签为 input 元素定义标注
<select>select 元素是一种表单控件，可用于在表单中接受用户输入,
<textarea>标签定义多行的文本输入控件,文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体,再Google chrome中可拉伸扩展，如果想要固定，需要添加resize: none

块状元素特征：

①能够识别宽高
②margin和padding的上下左右均对其有效
③可以自动换行 ④多个块状元素标签写在一起，默认排列方式为从上至下

常见块级元素

<address>联系方式信息
<article> HTML5文章内容
<aside> HTML5伴随内容
<audio> HTML5音频播放
<blockquote>块引用
<canvas> HTML5绘制图形
<dd>定义列表中定义条目描述
<div>文档分区
<dl>定义列表
<fieldset>表单元素分组，
<figcaption> HTML5图文信息组标题
<figure> HTML5图文信息组 (参照 <figcaption>)
<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视频。