html内联元素和块级元素的基础定义及应用示例

html标识分成两种,内联元素和块级元素,最先大家先掌握1下内联元素和块级元素的定义:

块级元素:1般是其它元素的器皿,可容下内联元素和其它块级元素,块级元素抵触其它元素与其坐落于同1行,可设定宽度(width)高宽比(height)特性,一切正常流中的块级元素会竖直放置。普遍块状元素为“div”

内联元素(行内元素):内联元素只能容下文字或别的内联元素,是块级元素的子孙后代,它容许别的内联元素与其坐落于同1行,不可以设定高宽比(height)和宽度(width)。普遍内联元素为“a”。

依据块级元素的定义大家能够了解为块级元素前后左右带有换行符,也就非常于元素前后左右加了1个<br>标识。大家能够把块级元素想像成1个块或1个矩形框,因此块级元素能设定高宽比宽度特性

例:
css文档:

拷贝编码
编码以下:

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

html文档:

拷贝编码
编码以下:

<div id="div1">
div1
块级元素抵触别的元素与其坐落于同1行
</div>
<div id="div2">
div2
块级元素抵触别的元素与其坐落于同1行
</div>

显示信息实际效果:

两个div元素不坐落于同1行

依据内联元素的定义,大家能够了解为内联元素前后左右沒有换行符。大家能够把内联元素想像成1条线,因此它不可以设定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 - 界定自变量