html中块元素和内联元素的简单介绍（代码解析）

2020-07-19 00:28:44 来源：易采站长站作者：

本篇文章给大家带来的内容是关于html中块元素和内联元素的简单介绍（代码解析），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>demo</title>        <!--            <style type="text/css">            h1{                color: red;            }            </style>        -->        <link rel="stylesheet" type="text/css" href="css/style.css"/>    </head>    <body>        <h1>这是一个漂亮的网页</h1>                        <!--            块元素，会独占一整行；                div,p,h1,h2,h3,h4,h5,h6 都是块元素；                div标签没有任何语义；是一个纯粹的块，不会有任何默认样式；                div元素主要对我们的页面进行布局；                                ps：p元素不能包含任何块元素；        -->        <div style="background-color: red; width: 200px;">            我是一个快元素        </div>                <div style="background-color: yellow;width: 400px;">            我是一个快元素        </div>                <hr />                <!--            内联元素：只会占用自身的大小，一行占满后自动换行；、            常见的内联元素：            a,img,iframe,span                        span也没有任何语义，是专门用来选中文字设置样式；            让span圈一段字，为这段文件进行设置样式；                        一般会在块元素中放一个span元素；而反过来不行；            ps：a元素可以包含任意元素；除了a本事；        -->        <span>            I am is a spane        </span>        <span>            I am is a spane        </span>    </body></html>