您的位置:首页 > 博客中心 > 前端开发 >

前端基础HTML---内联和块元素

时间:2022-04-11 14:44

块元素和内联元素

div就是一个块元素
所谓的块元素就是会独占一行的元素,无论他的内容有多少
他都会独占一整行

块元素有: div p h1 h2 h3....
div这个标签没有任何语义,就是一个纯粹的块元素
并且不会为它里面的元素设置任何的默认样式

div元素主要用来对页面进行布局的


span是一个内联元素(行内元素)
所谓的行内元素,指的是只占自身大小的元素,不会占用一行
常见的内联元素:
a img iframe span
span没有任何的语义,span标签专门用来选中文字,
然后为文字设置样式

块元素主要用来做页面布局,内联元素主要用来选择文本设置样式,
一般情况只是用块元素包含内联元素,而不会用内联包含一个块元素
a元素可以包含任意元素,但是除了它本身
p元素不可包含任何其他的块元素(包括他自身也不行)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内联和块元素</title>
    </head>
    <body>
        <!-- 
            块元素和内联元素
            
            div就是一个块元素
                所谓的块元素就是会独占一行的元素,无论他的内容有多少
                他都会独占一整行
            
            块元素有: div p h1 h2 h3....
            div这个标签没有任何语义,就是一个纯粹的块元素
                并且不会为它里面的元素设置任何的默认样式
            
            div元素主要用来对页面进行布局的
            
            
            span是一个内联元素(行内元素)
                所谓的行内元素,指的是只占自身大小的元素,不会占用一行
                常见的内联元素:
                    a img iframe span
                span没有任何的语义,span标签专门用来选中文字,
                然后为文字设置样式
                
            块元素主要用来做页面布局,内联元素主要用来选择文本设置样式,
                一般情况只是用块元素包含内联元素,而不会用内联包含一个块元素
                a元素可以包含任意元素,但是除了它本身
                p元素不可包含任何其他的块元素(包括他自身也不行)
         -->
        <div src="http://image.mamicode.com/info/202106/20210629155838006625.png"  loading="lazy">

 

本类排行

今日推荐

热门手游