HTML如何使用块和内联元素?

2021年3月18日16:38:04 发表评论 601 次浏览

HTML中的每个元素都有一个默认显示值, 该值取决于元素类型。块or排队是大多数元素的默认显示值。

块级元素:块级元素总是从一个新行开始,并尽可能地向左右延伸。

div元素:div元素用作其他HTML元素的容器。它没有必需的属性。Style、class和id是常用的属性。

语法如下:

<div>GFG</div>

示例1:

<!DOCTYPE html>
< html >
  
< body >
     < style >
         body {
             text-align: center;
         }
          
         h1 {
             color: green;
         }
     </ style >
    
     <!-- Div element. -->
     < div style="background-color:black;
                 color:white;
                 padding:20px;">
        
         < h1 >lsbin</ h1 >
        
         < h3 >lsbin is a science 
           portal for geeks.</ h3 >
  
         < h3 >You can give reviews as well as 
           contribute posts on this portal.</ h3 >
  
   </ div >
  
</ body >
  
</ html >

输出如下:

HTML |块和内联元素1

内联元素内联元素与块级元素相反。它不会从新行开始, 仅占用必要的宽度。

span元素:span元素用作文本的容器。它没有必需的属性。Style、class和id是常用的属性

语法如下:

<span>GFG</span>

示例2:

<!DOCTYPE html>
< html >
< style >
     body {
         text-align: center;
     }
      
     h1 {
         color: green;
     }
</ style >
  
< body >
  
     <!-- Sapn element. -->
     < h1 >Geeks< span style = "color:red" >
       for</ span >Geeks</ h1 >
  
</ body >
  
</ html >

输出2:

HTML |块和内联元素2

支持的浏览器:

  • 谷歌浏览器
  • 火狐浏览器
  • 边缘
  • 苹果浏览器
  • 歌剧

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: