html标签类型及转化

最新推荐文章于 2024-03-07 17:14:20 发布

y15518325965

最新推荐文章于 2024-03-07 17:14:20 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/y15518325965/article/details/79463819

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>html标签类型及其转化</title>
        <style type="text/css">
            /*
            行标签和块标签和行内块标签可以相互转化类型。
            */
            span{
                background-color:orange;
                width: 100px;
                height: 100px;
                /*display：用于标签的转化*/
                /*block:快标签类型*/
                display: block;
            }
            div{
                background-color:yellow;
                width: 100px;
                height: 100px;
                /*inline:行标签类型*/
                display: inline;
                /*inline-block:行内块标签*/
            }
            img{
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <!-- 1.行标签 2.块标签 3.行内块标签 -->

        <!-- 
            行标签：代表标签<span></span>
            特点：
            1>行标签不能设置宽度和高度，宽度和高度和内容宽高保持一致；
            2>行标签尽可能少的占用body的空间，不会独占一行文档的内容；
         -->
         <span>span标签</span>
         <span>span2</span>

         <!-- 
            块标签：代表标签<div></div>
            特点：
            1>可以设置宽度和高度；
            2>尽可能多的占用body空间，一个块标签会独占一行文档内容；
          -->
          <div>div标签</div>
          <div>div标签2</div>
          <span>span3</span>

          <!-- 
            行内块标签：代表标签<img>
            特点：
            1>可以设置宽度和高度；
            2>不会独占一行文档内容
           -->
           <img src="1.jpg">
           <span>span4</span>
    </body>
</html>

y15518325965

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html标签类型及转化

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;html标签类型及其转化&lt;/title&gt; &lt;style type="text/css"&gt;
复制链接

扫一扫