行元素、块元素、行内块元素


<!DOCTYPE html><!--h5写法 -->
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		 <style type="text/css">
		 <!-- 行元素没有高宽,一行依次排列; -->
		 <!-- 块元素有高宽,一行一个元素; -->
		 <!-- 行内快有高宽,一行依次排列; -->
			span{			
				width:100px;
				height:100px;
				border:1px red solid;
				display:block;<!--行内元素转块元素-->
			}
			div{
				width:100px;
				height:100px;
				border:1px red solid;
				display:inline;<!--块元素转行内元素-->
			}
			a{
				width:100px;
				height:100px;
				border:1px red solid;
				display:inline-block;<!--行元素转行内快元素-->
			}
			p{
				width:100px;
				height:100px;
				border:1px red solid;
				display:inline-block;<!--块元素转行内快元素-->
			}
		</style>
  </head>
    <body>
	<div>div块元素转行内元素</div>
	<div>div块元素转行内元素</div>
	<span>span行内元素转块元素</span>
	<span>span行内元素转块元素</span>
	<a>a行元素转行内快元素</a>
	<a>a行元素转行内快元素</a>
	<p>p块元素转行内快元素</p>
	<p>p块元素转行内快元素</p>
  </body>
</html>

附录:

块元素(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) 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 - 客户端脚本

  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值