• <var id="zvtmq"></var>
      <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

      <font id="zvtmq"></font>

      <tt id="zvtmq"></tt>

        <var id="zvtmq"></var>
        <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

        1. 
          

          <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

            <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
            <strike id="zvtmq"><output id="zvtmq"></output></strike>

          1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

          2. <small id="zvtmq"></small>

            <code id="zvtmq"><rt id="zvtmq"></rt></code>
          3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                  广告

                  HTML 替换元素与非替换元素

                  2018-11-16 09:49| 作者: admin| 查看: 1290| 评论: 0|来自: 蚂蚁部落

                  从不同的角度,元素可以有不同的分类。

                  比如HTML元素可以分为块级元素,行内元素或者块级行内(内联)元素。

                  具体可以参阅CSS块级/内联元素一章节。

                  HTML元素还可以划分为替换元素与非替换元素,下面简单进行一下相关介绍。

                  一.替换元素:

                  所谓替换元素就是根据元素内相关属性的不同,浏览器会有不同的解析展现。

                  比如input元素、img元素或者iframe元素等。

                  input会根据type属性值的不同会有不同的展现,img会根据src属性值的不同?#19981;?#26377;不同的展现。

                  可以看到这些元素都是空元素,没有实际内容。

                  代码如下:

                  [HTML] 纯文本查看 复制代码
                  <input type="text" value="蚂蚁部落"/>
                  <img src="girl.jpg"/> 
                  <iframe src="http://www.pecf.tw">

                  二.非替换元素:

                  div、span或者p等都是非替换元素。

                  它们都是非常"直率"的元素,直接将内容展现给浏览器。

                  [HTML] 纯文本查看 复制代码
                  <div>蚂蚁部落</div>

                  上述主要目的是让读者对替换元素与非替换元素有一个大致概念。

                  两种类型元素还具有其他特点,本文不做介绍。

                  三.行内替换元素:

                  通常情况下,我们会说行内元素是不能进行如下操作:

                  (1).设置元素的尺寸。

                  (2).设置上下内外边距。

                  但是行内替换元素是例外,比如img图片和input元素。

                  代码实例如下:

                  [HTML] 纯文本查看 复制代码运行代码
                  <!DOCTYPE html>
                  <html>
                  <head>
                  <meta charset="utf-8">
                  <meta name="author" content="http://www.pecf.tw/" />
                  <title>蚂蚁部落</title>
                  <style type="text/css">
                  input{
                    margin:50px;
                    width:200px;
                    height:60px;
                  }
                  </style>
                  </head>
                  <body>
                    <input type="text" value="蚂蚁部落"/>
                  </body>
                  </html>

                  代码运行效果截图如下:

                  a:3:{s:3:\"pic\";s:43:\"portal/201811/16/095142ug4p0althjts0si2.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

                  input是一个行内元素,但是我们可以设置它的上下内外边距和尺寸。

                  绝大多数替换元素都是行内元素。

                  四.行内非替换元素:

                  对于行内非替换元素会遵守我们经常提起的规则:

                  (1).无法设置元素的尺寸。

                  (2).无法设置元素的上下内外边距。


                  鲜花

                  握手

                  雷人

                  路过

                  鸡蛋

                  最新评论

                  返回顶部
                1. <var id="zvtmq"></var>
                    <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                    <font id="zvtmq"></font>

                    <tt id="zvtmq"></tt>

                      <var id="zvtmq"></var>
                      <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                      1. 
                        

                        <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                          <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                          <strike id="zvtmq"><output id="zvtmq"></output></strike>

                        1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                        2. <small id="zvtmq"></small>

                          <code id="zvtmq"><rt id="zvtmq"></rt></code>
                        3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                快乐10分破解如何计算
                              1. <var id="zvtmq"></var>
                                  <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                  <font id="zvtmq"></font>

                                  <tt id="zvtmq"></tt>

                                    <var id="zvtmq"></var>
                                    <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                    1. 
                                      

                                      <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                        <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                        <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                      1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                      2. <small id="zvtmq"></small>

                                        <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                      3. <listing id="zvtmq"><object id="zvtmq"></object></listing>

                                            1. <var id="zvtmq"></var>
                                                <tt id="zvtmq"><pre id="zvtmq"></pre></tt>

                                                <font id="zvtmq"></font>

                                                <tt id="zvtmq"></tt>

                                                  <var id="zvtmq"></var>
                                                  <mark id="zvtmq"><pre id="zvtmq"><td id="zvtmq"></td></pre></mark>

                                                  1. 
                                                    

                                                    <var id="zvtmq"><object id="zvtmq"><noscript id="zvtmq"></noscript></object></var><label id="zvtmq"><button id="zvtmq"><address id="zvtmq"></address></button></label>

                                                      <tt id="zvtmq"><wbr id="zvtmq"></wbr></tt>
                                                      <strike id="zvtmq"><output id="zvtmq"></output></strike>

                                                    1. <del id="zvtmq"><wbr id="zvtmq"><meter id="zvtmq"></meter></wbr></del>

                                                    2. <small id="zvtmq"></small>

                                                      <code id="zvtmq"><rt id="zvtmq"></rt></code>
                                                    3. <listing id="zvtmq"><object id="zvtmq"></object></listing>