`
荷戟者
  • 浏览: 282064 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML块级元素属性说明、内敛元素

 
阅读更多

转自:http://www.gold98.net/article.asp?id=960

 

在谈论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 这样的属性,让它也有每次都从新行开始的属性。

分享到:
评论

相关推荐

    H5+CSS3.zip

    css盒模型:块级元素,内联元素,内敛块状元素,none使元素隐身,设置宽度、高度、背景色、边框、圆角,padding内边距,margin外边距; css布局模型:流动模型flow,浮动模型float,层模型layer,层模型的绝对定位、...

    win7修复本地系统工具

    win7修复本地系统工具

    《自动化专业英语》04-Automatic-Detection-Block(自动检测模块).ppt

    《自动化专业英语》04-Automatic-Detection-Block(自动检测模块).ppt

    《计算机专业英语》chapter12-Intelligent-Transportation.ppt

    《计算机专业英语》chapter12-Intelligent-Transportation.ppt

    西门子S7-1200博图平台下3轴伺服螺丝机程序解析与应用

    内容概要:本文详细介绍了基于西门子S7-1200博图平台的3轴伺服螺丝机程序。该程序使用SCL语言编写,结合KTP700组态和TIA V14及以上版本,实现了对X、Y、Z三个轴的精密控制。文章首先概述了程序的整体架构,强调了其在自动化控制领域的高参考价值。接着深入探讨了关键代码片段,如轴初始化、运动控制以及主程序的设计思路。此外,还展示了如何通过KTP700组态实现人机交互,并分享了一些实用的操作技巧和技术细节,如状态机设计、HMI交互、异常处理等。 适用人群:从事自动化控制系统开发的技术人员,尤其是对西门子PLC编程感兴趣的工程师。 使用场景及目标:适用于希望深入了解西门子S7-1200博图平台及其SCL语言编程特点的学习者;旨在帮助读者掌握3轴伺服系统的具体实现方法,提高实际项目中的编程能力。 其他说明:文中提供的代码示例和设计理念不仅有助于理解和学习,还能直接应用于类似的实际工程项目中。

    MATLAB仿真:非线性滤波器在水下长基线定位(LBL)系统的应用与比较

    内容概要:本文详细探讨了五种非线性滤波器(卡尔曼滤波(KF)、扩展卡尔曼滤波(EKF)、无迹卡尔曼滤波(UKF)、粒子滤波(PF)和变维卡尔曼滤波(VDKF))在水下长基线定位(LBL)系统中的应用。通过对每种滤波器的具体实现进行MATLAB代码展示,分析了它们在不同条件下的优缺点。例如,KF适用于线性系统但在非线性环境中失效;EKF通过雅可比矩阵线性化处理非线性问题,但在剧烈机动时表现不佳;UKF利用sigma点处理非线性,精度较高但计算量大;PF采用蒙特卡罗方法,鲁棒性强但计算耗时;VDKF能够动态调整状态维度,适合信标数量变化的场景。 适合人群:从事水下机器人(AUV)导航研究的技术人员、研究生以及对非线性滤波感兴趣的科研工作者。 使用场景及目标:①理解各种非线性滤波器的工作原理及其在水下定位中的具体应用;②评估不同滤波器在特定条件下的性能,以便为实际项目选择合适的滤波器;③掌握MATLAB实现非线性滤波器的方法和技术。 其他说明:文中提供了详细的MATLAB代码片段,帮助读者更好地理解和实现这些滤波器。此外,还讨论了数值稳定性问题和一些实用技巧,如Cholesky分解失败的处理方法。

    VMware-workstation-full-14.1.3-9474260

    VMware-workstation-full-14.1.3-9474260

    DeepSeek系列-提示词工程和落地场景.pdf

    DeepSeek系列-提示词工程和落地场景.pdf

    javaSE阶段面试题

    javaSE阶段面试题

    《综合布线施工技术》第5章-综合布线工程测试.ppt

    《综合布线施工技术》第5章-综合布线工程测试.ppt

    安川机器人NX100使用说明书.pdf

    安川机器人NX100使用说明书.pdf

    S7-1200 PLC改造M7120平面磨床电气控制系统:IO分配、梯形图设计及组态画面实现

    内容概要:本文详细介绍了将M7120型平面磨床的传统继电器控制系统升级为基于西门子S7-1200 PLC的自动化控制系统的过程。主要内容涵盖IO分配、梯形图设计和组态画面实现。通过合理的IO分配,确保了系统的可靠性和可维护性;梯形图设计实现了主控制逻辑、砂轮升降控制和报警逻辑等功能;组态画面则提供了友好的人机交互界面,便于操作和监控。此次改造显著提高了设备的自动化水平、运行效率和可靠性,降低了维护成本。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是熟悉PLC编程和控制系统设计的专业人士。 使用场景及目标:适用于需要进行老旧设备升级改造的企业,旨在提高生产设备的自动化水平和可靠性,降低故障率和维护成本。具体应用场景包括但不限于金属加工行业中的平面磨床等设备的控制系统改造。 其他说明:文中还分享了一些实际调试中的经验和技巧,如急停逻辑的设计、信号抖动的处理方法等,有助于读者在类似项目中借鉴和应用。

    chromedriver-linux64-136.0.7103.48.zip

    chromedriver-linux64-136.0.7103.48.zip

    IMG_20250421_180507.jpg

    IMG_20250421_180507.jpg

    《网络营销策划实务》项目一-网络营销策划认知.ppt

    《网络营销策划实务》项目一-网络营销策划认知.ppt

    Lianantech_Security-Vulnerabil_1744433229.zip

    Lianantech_Security-Vulnerabil_1744433229

    MybatisCodeHelperNew2019.1-2023.1-3.4.1.zip

    MybatisCodeHelperNew2019.1-2023.1-3.4.1

    《Approaching(Almost)any machine learning problem》中文版第13章(最后一章)

    【深度学习部署】基于Docker的BERT模型训练与API服务部署:实现代码复用与模型共享

    火车票订票系统设计与实现(代码+数据库+LW)

    摘  要 传统办法管理信息首先需要花费的时间比较多,其次数据出错率比较高,而且对错误的数据进行更改也比较困难,最后,检索数据费事费力。因此,在计算机上安装火车票订票系统软件来发挥其高效地信息处理的作用,可以规范信息管理流程,让管理工作可以系统化和程序化,同时,火车票订票系统的有效运用可以帮助管理人员准确快速地处理信息。 火车票订票系统在对开发工具的选择上也很慎重,为了便于开发实现,选择的开发工具为Eclipse,选择的数据库工具为Mysql。以此搭建开发环境实现火车票订票系统的功能。其中管理员管理用户,新闻公告。 火车票订票系统是一款运用软件开发技术设计实现的应用系统,在信息处理上可以达到快速的目的,不管是针对数据添加,数据维护和统计,以及数据查询等处理要求,火车票订票系统都可以轻松应对。 关键词:火车票订票系统;SpringBoot框架,系统分析,数据库设计

    【ABB机器人】-00标准保养简介.pdf

    【ABB机器人】-00标准保养简介.pdf

Global site tag (gtag.js) - Google Analytics