块级元素的分类
块级元素按照其应用于结构还是内容分为三种:结构化块状元素,终端块状元素,多目标块状元素。
一.结构化块状元素
这类元素用于构造文档的结构,一个好的文档结构对于搜索引擎和应用其他技术(如JavaScript)都是十分有利的。它们没有语义上的含义,仅仅划分出了文档的组织方式,并没有体现文档的内容。
主要的结构化块状元素
* <ol>
* <ul>
* <dl>
* <table>
支持结构化的元素
* <li>
* <dt>
* <dd>
* <caption>
* <thead>
* <tbody>
* <tfoot>
* <colgroup>
* <col>
二.终端块状元素
这类元素用于从结构转向内容,它们拥有语义上的含义,能够表明内容的性质。终端块状元素属于结构的终点,它们不能再包含其他块级元素,只能包含文本或行级元素。
终端块状元素
* <h1>...<h6>
* <p>
* <blockquote>
* <dt>
* <address>
* <caption>
三.多目标块状元素
所谓多目标指的是可以自由的扩展或嵌套文档的结构,以可以终端的形式出现。当多目标块状元素以结构化的方式使用时就含有结构化的内涵,以终端的形式使用就含有语义的内涵。
多目标块状元素既可以包含块状元素,也可以包含内容(文本与行级元素的组合为内容),但不能同时包含两者。应该把内容放在块状元素中。块状元素不应作为行级元素与文本的兄弟元素,受HTML校验器的限制,目前还没办法检验出此种情况,但是应该避免。
多目标块状元素
* <div>
* <li>
* <dd>
* <td>
* <form>
* <noscript>
在谈论CSS布局时,我们需要提前知道一些东西。对于html各种标签/元素,可以从块的层面做一个分类:要么是block(块元素),要么是inline(内联元素):
block元素的特点:
* 总是另起一行开始;
* 高度,行高以及顶、底边距都可控制;
* 宽度缺省是它所在容器的100%,除非设定一个宽度。
inline元素的特点:
* 和其它元素都在一行上;
* 高度,行高以及顶、底边距不可改变;
* 宽度就是它所容纳的文字或图片的宽度,不可改变。
下面对它们的性质及应用做进一步说明:
◎块元素(block element) 通常作为其它元素的容器,它可以容纳内联元素和其它块元素。
我们知道默认情况下,块元素会顺序以每次另起一行的方式往下排,而通过CSS控制其样式,我们可以改变这种默认布局模式,把块元素摆放到你想要的位置上 去。需要指出的是,table标签也是块元素的一种,基于table表格和基于CSS+DIV的布局,在使用者看来除了页面载入速度的差别(table在 所有内容元素加载完成后才显示),没有其它的差别。但是从页面的源代码来看,这种差异就非常大了。基于良好结构理念设计的CSS布局源码,至少能让没有 web开发经验的用户很容易找到连续的页面内容。从这个角度来说,CSS layout code应该有更好的美学体验。
我们可以把模块化的DIV想象成一个个box,然后把它们按自己的意愿排列组成完整的内容,网页布局设计就是遵循了同样的模式。
块元素(block element) HTML标签分类明细
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易,也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单 (只能用来容纳其它块元素)
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
◎内联元素(inline element) 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其它内联元素。
为了比较明确的表现出 block 与 inline 的区别,我们可以利用它们各自的代表元素div和span的演示进行说明:
XXXXXXXXX
This's a DIV layout
XXXXXXXXX
div另起一行,它的形状不受内部文字的影响
XXXXXXXThis's a span layoutXXXXXXX 所有元素在一行,span刚好包容文字
内联元素(inline element) HTML标签分类明细
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器,定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
◎可变元素 是基于以上两者随环境而变化的,它的基本概念就是根据上下文关系确定该元素是块元素还是内联元素。一旦确定了它的类别,它就遵循块元素或者内联元素的规则限制。
可变元素 HTML标签分类明细
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
但是通过CSS,我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上 应用我们需要的属性。例如,我们可以对块元素[ ul ]标签加上 display:inline 属性,让原本垂直的列表水平显示,这在我们设置Blog导航条时得到了广泛应用;我们也完全可以把内联元素[ cite ]加上 display:block 这样的属性,让它也有每次都从新行开始的属性。
分享到:
相关推荐
想起之前工作面试时,面试官问的一个问题:行内...HTML可以将元素分为行内元素、块状元素和行内块状元素三种。 使用display属性能够将三者任意转换: (1)display:inline;转换为行内元素; (2)display:block;转换为
对HTML中的各种元素进行分类,初学者不至于弄混行内元素和块元素
关于块级元素和行内元素的一些小知识点的总结
元素按照显示方式主要可以分为块级元素和行内元素,元素的显示方式由display属性控制。 块级元素特点总结: ...5、可以容纳行内元素和其他块级元素。 行内元素(diaplay:inline)特点总结: 1、和
NULL 博文链接:https://maoting.iteye.com/blog/1722563
精品资料欢迎下载
工程师必知必会盒模型与块状行内元素.docx
行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使...
HTML+CSS中完全的行内元素(inline element)和块元素(block element) 完整的
块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。 常见块级元素: header,form,ul,ol,table,article,div,hr,aside,...
在css盒子模型中,我们提到了html元素中的块元素(block element)和内联元素(inline element)。那么它们究竟是什么呢? 其实,这两种元素都是html规范中的概念。...内联元素(inline element)也叫内嵌元素或行内元
前端日记01_行内元素和块级元素欢迎大家来跟胖胖一起xio习!基本知识分类速览块级元素和行级元素的转换参考链接 欢迎大家来跟胖胖一起xio习! Hey,这里是胖胖的博客,目前正在学有关前端的知识,有时候会把一些遇到...
所有的行内、块级元素分类
网友设计与开发中的块元素与行内元素详解,需要的下载看看。
HTML块级元素行内元素学习
行内元素只占内容的宽度,块元素不管内容多少都要占全行,下面为大家介绍下常见的行内元素及块元素有哪些,感兴趣的朋友可以参考下,希望对大家有所帮助
给行内块元素设置行高无法垂直居中 https://mp.csdn.net/mdeditor/101070653#
行内元素的盒模型 --不支持设置宽度高度 --可以设置padding但垂直方向的padding不会影响布局 --可以设置border、margin同上 --di
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框,这个框由元素的内容、内边距、边框和外边距组成,需要了解的朋友可以深入参考下