非替换元素和替换元素块级元素和行内元素

时间：2023-04-05 23:30:32 HTML5

1。替换元素和非替换元素就元素本身的特性而言，可以分为替换元素和非替换元素。替换元素替换元素是指浏览器根据元素的标签和属性来决定元素的具体显示内容。例如，浏览器会根据标签的src属性的值读取并显示图片信息，但是如果查看HTML代码，则看不到图片的实际内容；另一个例子是基于标签的类型属性。是否显示输入框，或单选按钮等。HTML中的、、、<select>、<object>都是替换元素。这些元素往往没有实际内容，即空元素，例如：<imgsrc="cat.jpg"/><inputtype="submit"name="submit"value="submit"/>浏览器将根据元素的标签类型和属性来显示那些元素。可替换元素还会在其显示中生成框。不可替换元素HTML的大多数元素都是不可替换元素，即它们的内容直接呈现给用户终端（例如浏览器）。示例：<p>ContentofParagraph</p>Paragraph<p>是不可替换元素，文本“ContentofParagraph”会完整显示。2、显示元素除了可替换元素和不可替换元素的分类方法外，CSS2.1中还有其他的元素分类方法：块级元素（block-level）和行内级元素（inline-level，也翻译为“内联”元素）。块级元素在视觉上被格式化为块元素。最明显的特点是默认水平填充其父元素的内容区域，其左右两边没有其他元素，即块级元素默认占一行。典型的块级元素有：<div>、<p>、<h1>到<h6>等。通过CSS设置浮动（float属性，可以向左或向右浮动）和设置显示（display）属性为“block”或“list-item”的元素，都是块级元素。然而，浮动元素是特殊的。由于浮动，它们旁边可能还有其他元素。而“list-item”（列表项<li>），会在其前面生成一个点号或数字序号。内联元素内联元素不构成新的内容块，即其周围可以有其他元素，如<a>、<span>、<strong>等，是典型的内联级元素。display属性等于“inline”的元素是行内元素。几乎所有的可替换元素都是行内元素，例如<img>、<input>等，但是元素的类型并不固定。通过设置CSS的display属性，可以将内联元素变为块级元素，也可以将块级元素变为内联元素。License可复制转发，但必须提供原作者信息，本项目不得用于商业用途</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="回流和重绘你真的了解吗" href="/webqianduan/253360.html">回流和重绘你真的了解吗</a> </div> <div class="prev">下一篇：<a title="关于写手机密码锁页面的css技巧" href="/webqianduan/253362.html">关于写手机密码锁页面的css技巧</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>非替换元素和替换元素块级元素和行内元素相关文章</code></div> <ul> <li><a href="/kejifunen/370709.html" target="_blank" title="399元！一加云耳开箱图！颈挂磁吸+Dash闪充">399元！一加云耳开箱图！颈挂磁吸+Dash闪充</a></li> <li><a href="/kejifunen/370700.html" target="_blank" title="AirPods 电池已过保修期，更换费用为 49 美元">AirPods 电池已过保修期，更换费用为 49 美元</a></li> <li><a href="/kejifunen/370698.html" target="_blank" title="苹果已向爱尔兰退还1150亿欧元税款">苹果已向爱尔兰退还1150亿欧元税款</a></li> <li><a href="/kejifunen/370691.html" target="_blank" title="非社交、非运动的《跑男》很受欢迎，启发了可穿戴设备的未来">非社交、非运动的《跑男》很受欢迎，启发了可穿戴设备的未来</a></li> <li><a href="/kejifunen/370664.html" target="_blank" title="非真人眼镜微软可穿戴设备测试">非真人眼镜微软可穿戴设备测试</a></li> <li><a href="/kejifunen/370662.html" target="_blank" title="AMD RX470显卡首次深度评测+拆解！全面击败GTX96">AMD RX470显卡首次深度评测+拆解！全面击败GTX96</a></li> <li><a href="/kejifunen/370628.html" target="_blank" title="可穿戴设备市场非常火热，厂商更是疯狂">可穿戴设备市场非常火热，厂商更是疯狂</a></li> <li><a href="/kejifunen/370600.html" target="_blank" title="英特尔计划以 3.5 亿美元估值出售 AR 眼镜部门多数股权">英特尔计划以 3.5 亿美元估值出售 AR 眼镜部门多数股权</a></li> <li><a href="/kejifunen/370583.html" target="_blank" title="超低功耗、超长待机、79元小米手环拆解图">超低功耗、超长待机、79元小米手环拆解图</a></li> <li><a href="/kejifunen/370568.html" target="_blank" title="暴风40寸电视，999元许诺？诚意有多少？ ">暴风40寸电视，999元许诺？诚意有多少？ </a></li> <li><a href="/kejifunen/370565.html" target="_blank" title="物联网AI服务商云知声获6亿元C+轮融资">物联网AI服务商云知声获6亿元C+轮融资</a></li> <li><a href="/kejifunen/370524.html" target="_blank" title="暴风TV推40寸AI电视价格拉入千元以下">暴风TV推40寸AI电视价格拉入千元以下</a></li> <li><a href="/kejifunen/370519.html" target="_blank" title="谷歌今年夏天推出第二代Jump VR相机，售价17000美元">谷歌今年夏天推出第二代Jump VR相机，售价17000美元</a></li> <li><a href="/kejifunen/370494.html" target="_blank" title="717京东游戏日直降，买送送，0元试用……你是最接近战神的！">717京东游戏日直降，买送送，0元试用……你是最接近战神的！</a></li> <li><a href="/kejifunen/370487.html" target="_blank" title="华米amazfit上手体验！与小米的299元相比，物超所值">华米amazfit上手体验！与小米的299元相比，物超所值</a></li> <li><a href="/kejifunen/370486.html" target="_blank" title="阿尔卡特150美元的“廉价”智能手表现已开始预购">阿尔卡特150美元的“廉价”智能手表现已开始预购</a></li> <li><a href="/kejifunen/370469.html" target="_blank" title="CODING获腾讯云1亿元B+轮融资，推出Cloud Stu">CODING获腾讯云1亿元B+轮融资，推出Cloud Stu</a></li> <li><a href="/kejifunen/370439.html" target="_blank" title="Pebble Time 半小时筹集超百万美元">Pebble Time 半小时筹集超百万美元</a></li> <li><a href="/kejifunen/370434.html" target="_blank" title="漫步者S90 SOUNDBAR电视音响产品发布，售价3599">漫步者S90 SOUNDBAR电视音响产品发布，售价3599</a></li> <li><a href="/kejifunen/370390.html" target="_blank" title="智能雨伞只要500元，能自拍、预测天气、防丢失">智能雨伞只要500元，能自拍、预测天气、防丢失</a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371283.html" title="首发！腾讯领投，优必选8.2亿美元C轮融资创始人周剑死磕机" target="_blank">首发！腾讯领投，优必选8.2亿美元C轮融资创始人周剑死磕机</a></li> <li><em>2</em><a href="/kejifunen/371277.html" title="日薪5000元的苏宁空调安装体验官有何经历？ " target="_blank">日薪5000元的苏宁空调安装体验官有何经历？ </a></li> <li><em>3</em><a href="/kejifunen/371260.html" title="可穿戴挑战赛的20万美元大奖就是这款手环" target="_blank">可穿戴挑战赛的20万美元大奖就是这款手环</a></li> <li><em>4</em><a href="/kejifunen/371245.html" title="艾伟P1C智能运动手表发布，记录7种游泳数据，售价299元" target="_blank">艾伟P1C智能运动手表发布，记录7种游泳数据，售价299元</a></li> <li><em>5</em><a href="/kejifunen/371220.html" title="Snapchat母公司4000万美元收购AR初创公司" target="_blank">Snapchat母公司4000万美元收购AR初创公司</a></li> <li><em>6</em><a href="/kejifunen/371215.html" title="全面评测399元华为荣耀手环零！你不知道的偏执" target="_blank">全面评测399元华为荣耀手环零！你不知道的偏执</a></li> <li><em>7</em><a href="/kejifunen/371179.html" title="米家投影仪评测！ 3999元轻松享受大屏观影娱乐，值得购买" target="_blank">米家投影仪评测！ 3999元轻松享受大屏观影娱乐，值得购买</a></li> <li><em>8</em><a href="/kejifunen/371126.html" title="百元最强手环小米Bong2是谁" target="_blank">百元最强手环小米Bong2是谁</a></li> <li><em>9</em><a href="/kejifunen/371094.html" title="号称全球最先进的语音AI银行平台，美国AI初创公司Clinc" target="_blank">号称全球最先进的语音AI银行平台，美国AI初创公司Clinc</a></li> <li><em>10</em><a href="/kejifunen/371052.html" title="第二代蚂蚁TV VR头盔淘宝众筹于8月19日结束，众筹总额达" target="_blank">第二代蚂蚁TV VR头盔淘宝众筹于8月19日结束，众筹总额达</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/370986.html" title="智能手表还在关注 Apple Watch 吗？华米智能手表" target="_blank">智能手表还在关注 Apple Watch 吗？华米智能手表</a></li> <li><em>2</em><a href="/kejifunen/370978.html" title="光感版小米手环来了！ 99元+心率监测+双11首发" target="_blank">光感版小米手环来了！ 99元+心率监测+双11首发</a></li> <li><em>3</em><a href="/kejifunen/370973.html" title="医药市场规模达1.2万亿美元，会被大数据和可穿戴设备颠覆吗？" target="_blank">医药市场规模达1.2万亿美元，会被大数据和可穿戴设备颠覆吗？</a></li> <li><em>4</em><a href="/kejifunen/370967.html" title="诺基亚的VR相机售价30万元，太贵了，可以租， " target="_blank">诺基亚的VR相机售价30万元，太贵了，可以租， </a></li> <li><em>5</em><a href="/kejifunen/370946.html" title="VR商业化元年即将到来，国内的生态系统准备得怎么样了？ " target="_blank">VR商业化元年即将到来，国内的生态系统准备得怎么样了？ </a></li> <li><em>6</em><a href="/kejifunen/370924.html" title="Oculus Rift 售价 599 美元，将于 3 月发售" target="_blank">Oculus Rift 售价 599 美元，将于 3 月发售</a></li> <li><em>7</em><a href="/kejifunen/370888.html" title="防伪315这些淘宝百元智能手表不靠谱" target="_blank">防伪315这些淘宝百元智能手表不靠谱</a></li> <li><em>8</em><a href="/kejifunen/370873.html" title="面部追踪公司 Pinscreen 获得 180 万美元种子投" target="_blank">面部追踪公司 Pinscreen 获得 180 万美元种子投</a></li> <li><em>9</em><a href="/kejifunen/370868.html" title="小米发布三款电视新品！价格999元起" target="_blank">小米发布三款电视新品！价格999元起</a></li> <li><em>10</em><a href="/kejifunen/370861.html" title="不负众望！华米科技AMAZFIT智能手表正式亮相，售价799" target="_blank">不负众望！华米科技AMAZFIT智能手表正式亮相，售价799</a></li> <li><em>11</em><a href="/kejifunen/370855.html" title="预算1500元以内联想 Z5、小米X6 和荣耀8X 怎么选" target="_blank">预算1500元以内联想 Z5、小米X6 和荣耀8X 怎么选</a></li> <li><em>12</em><a href="/kejifunen/370850.html" title="西门子组建投资部门，五年内投资11亿美元用于人工智能等领域" target="_blank">西门子组建投资部门，五年内投资11亿美元用于人工智能等领域</a></li> <li><em>13</em><a href="/kejifunen/370846.html" title="小米光感手环评测：30元值得升级吗？ " target="_blank">小米光感手环评测：30元值得升级吗？ </a></li> <li><em>14</em><a href="/kejifunen/370831.html" title="谷歌能否将其 VR 耳机的价格下调一半至 49 美元以重振市" target="_blank">谷歌能否将其 VR 耳机的价格下调一半至 49 美元以重振市</a></li> <li><em>15</em><a href="/kejifunen/370816.html" title="2016年，虚拟现实“元年”？ " target="_blank">2016年，虚拟现实“元年”？ </a></li> <li><em>16</em><a href="/kejifunen/370801.html" title="雷鸟科技发布全球OTT白皮书！ 2020年全球OTT视频内容" target="_blank">雷鸟科技发布全球OTT白皮书！ 2020年全球OTT视频内容</a></li> <li><em>17</em><a href="/kejifunen/370794.html" title="融资动态｜被玉泉青睐的公子小白机器人完成过亿元A轮融资" target="_blank">融资动态｜被玉泉青睐的公子小白机器人完成过亿元A轮融资</a></li> <li><em>18</em><a href="/kejifunen/370786.html" title="酷我K3蓝牙音乐耳机线上发售仅99.9元" target="_blank">酷我K3蓝牙音乐耳机线上发售仅99.9元</a></li> <li><em>19</em><a href="/kejifunen/370784.html" title="降价1000美元，定制版Apple Watch还是很贵" target="_blank">降价1000美元，定制版Apple Watch还是很贵</a></li> <li><em>20</em><a href="/kejifunen/370754.html" title="2023年全球智能家居市场规模将达1550亿美元" target="_blank">2023年全球智能家居市场规模将达1550亿美元</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div>   </body> </html>