html的内联元素和块级元素有什么不同

这篇文章给大家分享的是有关html的内联元素和块级元素有什么不同的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

创新互联建站是一家专业提供西乡企业网站建设,专注与成都网站设计、成都做网站、外贸网站建设HTML5建站、小程序制作等业务。10年已为西乡众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

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

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

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

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

例:

css文件:

#div1{

width:200px;

height:200px;

background:#666

}

div2{

width:200px;

height:200px;

background:#F00

}

html文件:

div1

块级元素排斥其他元素与其位于同一行

div2

块级元素排斥其他元素与其位于同一行

两个div元素不位于同一行

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

块级元素(blockelement)标签

address-地址

blockquote-块引用

center–居中对齐

dir-目录列表

div-常用块级容易,也是CSSlayout的主要标签

dl-定义列表

fieldset-form控制组

form-交互表单

h2-大标题

h3-副标题

h4-3级标题

h5-4级标题

h6-5级标题

h7-6级标题

hr-水平分隔线

isindex-inputprompt

menu-菜单列表

noframes-frames可选内容,(对于不支持frame的浏览器显示此区块内容

noscript-可选脚本内容(对于不支持script的浏览器显示此内容)

ol-排序表单

p-段落

pre-格式化文本

table-表格

ul-非排序列表

内联元素(inlineelement)

a-锚点

abbr-缩写

acronym-首字

b-粗体(不推荐)

bdo-bidioverride

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-定义变量

感谢各位的阅读!关于“html的内联元素和块级元素有什么不同”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


文章标题:html的内联元素和块级元素有什么不同
网站URL:http://scyanting.com/article/pjdege.html

其他资讯