首 页IT知识库收藏内容
当前位置:翔宇亭IT乐园IT知识库WEBHTML

HTML 块级元素和内联元素

减小字体 增大字体 作者:本站  来源:本站整理  发布时间:2023-05-26 13:16:30

HTML中每个元素都按照默认值来处理自己的显示效果。这些HTML 元素可以被分为两大类:块级元素和内联元素。

HTML款元素与内联元素

HTML 块级元素

HTML 块级元素在浏览器浏览时总是以新行开始,即HTML 块级元素在默认情况下不会与其他元素共享浏览器水平行的空间。

HTML 块级元素在浏览器浏览时会占据整个设备的宽度。

常见的块级元素有<p>、<div>、<table>、<h1>~<h6>、<ul>、<ol>、<pre>等。

块级元素在浏览器中显示时,上下都会有一定的空白。

块级元素的例子

为了更好的说明块级元素的显示效果,例子中为每个块级元素添加了边框,以便更清晰的展示其效果。

<h2 style="border: 1px solid red;">块级元素实例</h2>
<p style="border: 1px solid gray;">翔宇亭IT乐园</p>
<div style="border:1px solid gray;">HTML教程,CSS教程</div>
<ul style="border:1px solid gray;">
 <li style="border: 1px solid blue;">HTML 块级元素</li>
 <li style="border: 1px solid green;">HTML li元素</li>
</ul>

显示效果如下图所示:

HTML 块级元素显示效果

HTML内联元素

内联元素不会以新行开始,其仅占据其必要的宽度。

内联元素常运用在块级元素内,用于修饰文本、添加图像、添加连接等,但一般块级元素不会运用到内联元素内。

<b>、<strong>、<em>、<img>、<span>、<td>、<a>、<sup>、<sub>等属于内联元素。

内联元素的例子

<h2>内联元素的例子</h2>
<p>我们网站的名称是:<span style="border:1px solid blue;">翔宇亭IT乐园</span></p>
<p><em>HTML</em>是简单易学的一门语言。</p>
<p>勾股定理公式:a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></p>

其显示效果如下:

HTML内联元素

HTML <div> 元素

HTML <div> 元素经常用于其他元素的容器。

HTML <div>元素除了常用的styleclassid之外没有特别的属性。

HTML <div>属于块级元素,默认情况下,该元素同水平行上不会出现其他元素。

在现代WEB设计中,<div>CSS技术结合起来经常用于网页的布局,或对局部内容运用样式。

<div>元素使用的例子

<div style="background-color:black;color:white;padding:10px;border-radius:6px;">
  <h2>HTML</h2>
  <p>HTML的英文全称为Hyper Text Markup Language,中文意思是超文本标记语言。HTML使用一系列标签来定义WEB文档的结构和格式。这些标签可以用于定义网页中的文字,图形、动画、声音、表格、链接等。</p>
</div>

其显示效果如下:

HTML DIV元素使用的例子

HTML <span> 元素

HTML <span> 元素是经常使用的一个内联元素,由于它不会独占一行,HTML <span> 元素经常用于对一部分文本进行修饰或对网页的局部应用一定的样式。

HTML <span> 元素常用 class属性style属性id属性来指定样式,或借助Javascript动态地运用某种样式。

HTML <span>运用的例子

<p>HTML <span style="margin-left:5px;margin-right:5px;color:red;background-color:yellow;">span</span> 元素运用的例子</p>
<div style="background-color:black;color:white;padding:20px;border-radius:10px;">
  <span style="font-size:20px;font-family:'courier new',monospace;">Example</span>
  <p><span style="font-style:italic;color:red;">深爱着</span>我的祖国,无边的<span style="color:green;">原野</span>,蜿蜒的<span style="color:blue">大河</span></p>
</div>

上面的例子中,使用<span>元素对文本中的不同局部内容指定了不同的样式。

其显示效果如下:

HTML 内联元素 span

HTML区块与内联元素总结

本文主要讲了以下内容:

  • HTML元素依据显示时占据行区域的风格可以分为块级元素和内联元素。
  • 块级元素总是以新行开始,并占据显示器提供的整个宽度。
  • 内联元素不会以新行开始,且仅占据需要的宽度。
  • <div>元素作为块级元素经常用于其他元素的容器。
  • <span>元素作为内联元素经常用于修饰局部文本或网页局部效果。

本文的例子效果,读者可以点击这里查看效果


如对以上内容有疑问或文中有错误之处,请留言指出。如需转载,请注明出处:翔宇亭IT乐园(http://www.biye5u.com),并给出本文的链接地址:http://www.biye5u.com/article/html5/2023/6598.html

微信搜索“优雅的代码”关注本站的公众号,或直接使用微信扫描下面二维码关注本站公众号,以获取最新内容。

个人成长离不开各位的关注,你的关注就是我继续前行的动力。

知识评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论
愿您的精彩评论引起共鸣,带来思考和价值。
用户名: 查看更多评论
分 值:100分 90分 80分 70分 60分 40分 20分
内 容:
验证码:
关于本站 | 网站帮助 | 广告合作 | 网站声明 | 友情连接 | 网站地图
本站部分内容来自互联网,如有侵权,请来信告之,谢谢!
Copyright © 2007-2024 biye5u.com. All Rights Reserved.