探究行内元素和块级元素

发布时间:2020-08-14 17:39:02 作者:anyw3c
来源:网络 阅读:229

html中元素主要分为行内元素和块级元素

行内元素

块级元素

还有一种特殊的元素叫作行内块级元素

描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。

块级元素和行内元素的分类

html中的块级元素:


标签 描述
<address> 定义地址。
<article> 定义文章。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<blockquote> 定义长的引用。
<canvas> 定义图形。
<caption> 定义表格标题。
<dd> 定义定义列表中项目的描述。
<div> 定义文档中的节。
<dl> 定义定义列表。
<dt> 定义定义列表中的项目。
`<details> 定义元素的细节。
&lt;fieldset&gt; 定义围绕表单中元素的边框。
&lt;figcaption&gt; 定义 figure 元素的标题。
&lt;figure&gt; 定义媒介内容的分组,以及它们的标题。
&lt;footer&gt; 定义 section 或 page 的页脚。
&lt;form&gt; 定义供用户输入的 HTML 表单。
&lt;h2&gt; to &lt;h7&gt; 定义 HTML 标题。
&lt;header&gt; 定义 section 或 page 的页眉。
&lt;hr&gt; 定义水平线。
&lt;legend&gt; 定义 fieldset 元素的标题。
&lt;li&gt; 定义列表的项目。
&lt;menu&gt; 定义命令的列表或菜单。
&lt;meter&gt; 定义预定义范围内的度量。
&lt;nav&gt; 定义导航链接。
&lt;noframes&gt; 定义针对不支持框架的用户的替代内容。
&lt;noscript&gt; 定义针对不支持客户端脚本的用户的替代内容。
&lt;ol&gt; 定义有序列表。
&lt;output&gt; 定义输出的一些类型。
&lt;p&gt; 定义段落。
&lt;pre&gt; 定义预格式文本。
&lt;section&gt; 定义 section。
&lt;table&gt; 定义表格。
&lt;tbody&gt; 定义表格中的主体内容。
&lt;td&gt; 定义表格中的单元。
&lt;tfoot&gt; 定义表格中的表注内容(脚注)。
&lt;th&gt; 定义表格中的表头单元格。
&lt;thead&gt; 定义表格中的表头内容。
&lt;time&gt; 定义日期/时间。
&lt;tr&gt; 定义表格中的行。
&lt;ul&gt; 定义无序列表。

html中的行内元素:


标签 描述
&lt;a&gt; 定义锚。
&lt;abbr&gt; 定义缩写。
&lt;acronym&gt; 定义只取首字母的缩写。
&lt;b&gt; 定义粗体字
&lt;bdo&gt; 定义文字方向。
&lt;big&gt; 定义大号文本。
&lt;br&gt; 定义简单的折行。
&lt;button&gt; 定义按钮 (push button)。
&lt;cite&gt; 定义引用(citation)。
&lt;code&gt; 定义计算机代码文本。
&lt;command&gt; 定义命令按钮。
&lt;dfn&gt; 定义定义项目。
&lt;del&gt; 定义被删除文本。
&lt;em&gt; 定义强调文本。
&lt;embed&gt; 定义外部交互内容或插件。
&lt;i&gt; 定义斜体字。
&lt;img&gt; 定义图像。
&lt;input&gt; 定义输入控件。
&lt;kbd&gt; 定义键盘文本。
&lt;label&gt; 定义 input 元素的标注。
&lt;map&gt; 定义图像映射。
&lt;mark&gt; 定义有记号的文本。
&lt;objec&gt; 定义内嵌对象。
&lt;progress&gt; 定义任何类型的任务的进度。
&lt;q&gt; 定义短的引用。
&lt;samp&gt; 定义计算机代码样本。
&lt;select&gt; 定义选择列表(下拉列表)。
&lt;small&gt; 定义小号文本。
&lt;span&gt; 定义文档中的节。
&lt;strong&gt; 定义强调文本。
&lt;sub&gt; 定义下标文本。
&lt;sup&gt; 定义上标文本。
&lt;textarea&gt; 定义多行的文本输入控件。
&lt;time&gt; 定义日期/时间。
&lt;tt&gt; 定义打字机文本。
&lt;var&gt; 定义文本的变量部分。
&lt;video&gt; 定义视频。
&lt;wbr&gt; 定义可能的换行符。

实例

我们书写几个span标签
探究行内元素和块级元素

可以看到几个span都出现在了一行内

我们再书写几个div标签
探究行内元素和块级元素

可以看到div已经垂直了(不在一行内)
继续:我们给div添加一个刚才提到的特殊元素:行内块级元素inline-block
探究行内元素和块级元素

探究行内元素和块级元素
此时div会变成行内块级元素,同时宽和高也在
因此 inline-block既有行内元素水平排列的特点,也有块级元素设置宽高的特点

关于行内元素和块级元素先谈这么多,听说认真阅读并点赞的你,代码敲的最6哦~
有兴趣的小伙伴可以加我微信,一起讨论;V-x: dandanshen987

有一天,当你明白"小白" +"勤奋"的时候,你就会成为大牛

推荐阅读:
  1. css块级元素和行内元素的区别是什么
  2. css中块级元素和行内元素的区别是什么?

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css html

上一篇:利用dbms_metadata.get_ddl查看DDL语句

下一篇:恢复slave从机上的部分表

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》