Html 内联元素、外联元素 和 可变元素
块元素(block element)一般是其他元素的容器元素
块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊,它只能用来容纳其他块元素。
如果没有css的作用,块元素会顺序以每次另起一行的方式一直往下排。而有了css以后,我们可以改变这种html的默认布局模式,把块元素摆放到你想 要 的位置上去。而不是每次都愚蠢的另起一行。需要指出的是,table标签也是块元素的一种,table based layout和css based layout从一般使用者(不包括视力障碍者、盲人等)的角度来看这两种布局,除了页面载入速度的差别外,没有其他的差别。但是如果普通使用者不经意点了 查看页面源代码按钮后,两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码,至少也能让没有web开发经验的普通使用者把内容快 速的读懂。从这个角度来说,css layout code应该有更好的美学体验吧。
你能够把块容器元素div想象成一个个box,或者如果你玩过剪贴文载的话,那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图,用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报 了。作为一种技术的延伸,网页布局设计也遵循了同样的模式。
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素,常见内联元素 “a”。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后,块元素和内联元素的这种属 性差异就不成为差异了。比如,我们完全可以把内联元素cite加上display:block这样的属性,让他也有每次都从新行开始的属性。
可变元素的基本概念就是他需要根据上下文关系确定该元素是块元素或者内联元素。可变元素还是属于上述两种元素类别,一旦上下文关系确定了他的类别,他就要遵循块元素或者内联元素的规则限制。大致的元素分类见全文。
关于inline element的中文叫法,有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译,爱怎么叫怎么叫吧。另外提到内联元素,我们会想到有 个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)
* 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)
* 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 - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本
Html 内联元素、外联元素 和 可变元素的更多相关文章
- sql中的内联和外联(简单用法)
有两张表:user和department User表: CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` ...
- [moka同学摘录]SQL内联、外联的简单理解
(源自:http://blog.csdn.net/kkk9127/article/details/1487686) --查询分析器中执行:--建表table1,table2:create table ...
- SQL 表连接,内联、外联、全连
内连接,join 或 inner join 两个表中符合条件的集合 外连接,left join 或 right join 以left左边或right右边的表为数据集合行,根据条件,另一侧没有的数 ...
- MySQL内联和外联查询
内连: 内连接是通过在查询中设置连接条件的方式,来移除查询结果集中某些数据行后的交叉连接.简单来说,就是利用条件表达式来消除交叉连接的某些数据行. 在MySQL FROM 子句中使用关键字 INNER ...
- Css中的两个重要概念:块状元素和内联元素
一.display:block display:block就是将元素显示为块级元素,一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(he ...
- sql中内联 和外联 区别
sql中内联 和外联 区别 2007-05-15 17:37 这个概念一般看书不好理解.其实夜简单.有例子就简单了. 比如: 表A(主表) cardid username 16 aa 23 bb 25 ...
- HTML&CSS基础-内联样式和内部样式表
HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...
- Code笔记之:CSS块级元素、内联元素概念
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
随机推荐
- Java并发思考
如果说传统金融政企软件主要看事务,而互联网软件主要是并发,就像淘宝双十一主要就是在解决并发问题. 并发的目的是提高系统效率,响应时间和吞吐量. Java中并发的基本单位是线程,如何更好的解决线程协作通 ...
- bzoj1007 [HNOI2008]水平可见直线——单调栈
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1007 可以把直线按斜率从小到大排序,用单调栈维护,判断新直线与栈顶的交点和栈顶与它之前直线的 ...
- WEB开发框架系列教程 (二)页面功能开发(1)
上一节一起创建TEST项目的完整的解决方案 接下来面临的是一个个具体功能页面开发了 在进行开发之前需要对接下来的页面进行分析 可以这么说任何一个项目中都有很多非常基础类的数据维护功能 我们把这类数据归 ...
- Mysql操作符号
1.比较运算符: = 相等 <> 不等于 != 这个也可以 > 大于 < 小于 >= 大于等于 <= 小于等于 2.逻辑运算符: is null ...
- FluentData - 轻量级.NET ORM持久化技术解决方案
官方地址:http://fluentdata.codeplex.com/ 官方教程:http://fluentdata.codeplex.com/documentation FluentData入门 ...
- (6)css盒子模型(基础下)
一.理解多个盒子模型之间的相互关系 现在大部分的网页都是很复杂的,原因是一个“给人用的”网页中是可能存在着大量的盒子,并且它们以各种关系相互影响着. html与DOM的关系 详情了解“DOM” :ht ...
- 用set和shopt设置bash选项
1.set命令 -o打开选项,+o关闭选项#set -o //显示选项设置#set -o noclobber //打开该选项,重定向将覆盖已存在的文件#set +o noclobber //关闭该选项 ...
- 组合数的几种球阀 By cellur925
先来了解几个概念:排列数,组合数. 一.定义及有用的性质 排列数:从n个不同元素中依次取出m个元素排成一列的方案数.P(n,m)=n!/(n-m)! 组合数:从n个不同元素中依次取出m个元素形成一个集 ...
- codeforces 570 E. Pig and Palindromes (DP)
题目链接: 570 E. Pig and Palindromes 题目描述: 有一个n*m的矩阵,每个小格子里面都有一个字母.Peppa the Pig想要从(1,1)到(n, m).因为Peppa ...
- VS2010环境下.NET4.0中Tuple<T>的一个小BUG问题
启动一个桌面程序后,发现一个窗体cfdata=null, 执行时发生错误, 但是在初始化的时候,我明明是cfdata=new Cfdata();为什么会出现这个错误呢. 我开始跟踪,发现当执行cfda ...