首页 / 知识

html的内联元素和块级元素有哪些不同

2023-04-11 15:05:00

　　html标签分为两种，内联元素和块级元素，首先我们先了解一下内联元素和块级元素的概念：
 
　　块级元素：一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)高度(height)属性，正常流中的块级元素会垂直摆放。常见块状元素为“div”
 
　　内联元素（行内元素）：内联元素只能容纳文本或者其他内联元素，是块级元素的后代，它允许其他内联元素与其位于同一行，不能设置高度（height）和宽度（width）。常见内联元素为“a”。
 
　　根据块级元素的概念我们可以理解为块级元素前后带有换行符，也就相当于元素前后加了一个<br>标签。我们可以把块级元素想象成一个块或一个矩形，所以块级元素能设置高度宽度属性
 
　　例：
 
　　css文件:
 
　　#div1{
 
　　width:200px;
 
　　height:200px;
 
　　background:#666
 
　　}
 
　　div2{
 
　　width:200px;
 
　　height:200px;
 
　　background:#F00
 
　　}
 
　　html文件：
 
　　<divid="div1">
 
　　div1
 
　　块级元素排斥其他元素与其位于同一行
 
　　</div>
 
　　<divid="div2">
 
　　div2
 
　　块级元素排斥其他元素与其位于同一行
 
　　</div>
 
　　两个div元素不位于同一行
 
　　根据内联元素的概念，我们可以理解为内联元素前后没有换行符。我们可以把内联元素想象成一条线，所以它不能设置height属性和width属性。
 
　　块级元素（blockelement）标签
 
　　address-地址
 
　　blockquote-块引用
 
　　center–居中对齐
 
　　dir-目录列表
 
　　div-常用块级容易，也是CSSlayout的主要标签
 
　　dl-定义列表
 
　　fieldset-form控制组
 
　　form-交互表单
 
　　h1-大标题
 
　　h2-副标题
 
　　h3-3级标题
 
　　h4-4级标题
 
　　h5-5级标题
 
　　h6-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-定义变量







本文转载自中文网

块级元素内联元素元素标签行内元素属性

最新内容

相关内容

热门文章

推荐文章

标签云

猜你喜欢