内联元素和块级元素

html标签分为两种,内联元素和块级元素,首先我们先了解一下内联元素和块级元素的概念:

块级元素:一般是其它元素的容器,可容纳内联元素和其它块级元素,块级元素排斥其它元素与其位于同一行,可设置宽度(width)高度(height)属性,正常流中的块级元素会垂直摆放。常见块状元素为“div

内联元素(行内元素):内联元素只能容纳文本或者其他内联元素,是块级元素的后代,它允许其他内联元素与其位于同一行,不能设置高度(height)和宽度(width)。常见内联元素为“a”

根据块级元素的概念我们可以理解为块级元素前后带有换行符,也就相当于元素前后加了一个<br>标签。我们可以把块级元素想象成一个块或一个矩形,所以块级元素能设置高度宽度属性

例:

css文件:

 #div1{
	 width:200px;
	 height:200px;
	 background:#666
	 }
#div2{
	 width:200px;
	 height:200px;
	 background:#F00
	 }
html文件:

<div id="div1">
     div1
     块级元素排斥其他元素与其位于同一行
  </div>
  <div id="div2">
     div2
    块级元素排斥其他元素与其位于同一行
  </div>
显示效果:

 两个div元素不位于同一行

根据内联元素的概念,我们可以理解为内联元素前后没有换行符。我们可以把内联元素想象成一条线,所以它不能设置height属性和width属性。

 

块级元素(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 -
定义打字机文本
var -
定义变量
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值