zoukankan      html  css  js  c++  java
  • html块级元素与内联元素的区别

    1、  块级元素(block element):

    概念理解:如果不用css控制,块级元素在文档流中以一行显示,及它所占的宽度为其父级元素所占的宽度,若超过宽度会重新另起一行显示,高度会随着内容高度的增加而增加。

                  可以用display:inline属性将块级元素转换为内联元素形式显示,这样块级元素就不会重新起行显示,而是变成行内元素与其他元素在一行内显示。

                  常见的html元素是:<p>。

    常见块级元素标签有:

    <address>:内容以斜体显示;

    <blockquote>:引用,有时候会是斜体,会在正常文本中脱离出来,如果不用css控制该属性的margin:0;那么该元素的内容会自动在左右进行缩进,上下也有一定的间边距,

                         如果设置margin:0;那么该块引用的高度就是内容的高度,而宽度就是父级元素的宽度。

                         如需把页面作为 strict XHTML (严格的可扩展的html)进行验证,那么 <blockquote> 元素必须包含块级元素,比如这样:

                                 <blockquote>

                                        <p>here is a long quotation here is a long quotation</p>

                                </blockquote> 

     <center>:水平居中

    <dir>:目录列表,同上,默认有margin值,而且有padding-left值。

    <div>:区域或块。

    <dl>:定义列表:有默认的margin-top和margin-bottom值,且值相同。

    <fieldset>:控制组,有默认的边框。通常内嵌form元素。

    <h1>…<h6>:标题,默认的有margin-top和margin-bottom值,且值的大小相同.

    <isindex>:单标签。会自动生成一个form表单,表单中有默认的索引搜索框,并且有上下两条底边,左右没有。

    <menu>:菜单。有默认的margin-top和margin-bottom值,值相同,还有padding-left值。

    <pre>:格式化文本。有默认的margin-top和margin-bottom值,值相同。保留输入时的样式,不改变,常用于再网页中输入数学公式等格式不要求改变的饿内容。

    <ol>:有序列表。有默认的margin-top和margin-bottom值,值相同,有一定的padding-left值,但该部分用于填充项目编号内容,如果css控制padding:0,

             那么项目编号将会消失不存在,可以通过改变list-style-type属性来调整项目编号的样式:

                     disc:实心圆;

                     circle:空心圆;    

                     square:实心方块;    

                     decimal:十进制数字;    

                     lower-roman:小写罗马数字;    

                     upper-roman:大写罗马数字;    

                     lower-alpha:小写英文字母;     

                     upper-alpha:大写英文字母;    

                     none:不显示项目符号和编号。

    <table>:虽然宽度和高度根据需要需要设置,如果不设置tr和td,系统会认为table高度和宽度为0,若有tr和td并且当中有内容,那么宽度和高度是随内容决定的,

                 但是有另一个table元素时,就会另起一行显示。它的宽度虽不是整行父级元素的宽度,但是该行剩下的宽度也不会被其他元素占用,因为元素内容后面相当于有一个换行符。

    <ul>:同ol。只是项目符号默认的时实心原点。和ol标签一样可以通过list-style-type属性来改变项目符号的样式。

    <p>:段落,总是另起一行,通过display:inline 或者display:inline-block属性来使段落与其他元素在一行显示。

    2、  内联元素/行内元素/内嵌元素/直进式元素(inline element):

    概念理解:内联元素就是在一行中显示的内容,和其他元素都是在一行显示,它的高度和宽度是由它当中的内容决定的,其中内容一般为文字或图片,这些文字或图片的宽度有多少,

                   该行内元素的宽度和高度就该是多少。用display:block 可以使行内元素以块元素形式显示,它会另起一行显示,宽度也变为了其父级元素所在的宽度。常见的html元素是<a>。

    * a - 锚点

    * abbr - 缩写

    * acronym - 首字

    * b - 粗体(不推荐)-----》改为:strong

    * bdo - bidi override:定义文字的显示方向(不常用):有属性dir=”ltr”或dir=”rtl”表示将文字从左向右输出还是从右向左输出,例如:123,ltr就为:123;rtl就为:321显示。该标签不常用。

    * big - 大字体-----》已被w3c抛弃,不使用

    * small - 小字体文---》通常用css代替

    * br - 换行

       用于定义的标签:

    * cite - 引用,有倾斜效果。

    * code - 计算机代码(在引用源码的时候需要),颜色会比一般问题颜色稍浅。

    * dfn - 定义字段,一个定义项目:字体稍倾斜,程度不如cite强,且文字颜色比cite文字颜色稍深。

    * em – 斜体强调

    strong - 粗体强调

    * samp - 定义样本文本

    * var - 定义变量

    * kbd - 定义键盘文本

     

    * font - 字体设定(不推荐)---》一般使用css来代替,而不再在html中再使用该标签来设置字体。

    * i - 斜体  标签定义与文本中其余部分不同的部分,并把这部分文本呈现为斜体文本。在没有其他元素可以使用时,比如 <b>, <cite>, <dfn>, <em>, <q>, <small>, <strong>,请使用 <i> 标签。

            可用font-style:normal;属性去除其斜体效果。

    * img - 图片:单标签

    * input - 输入框:单标签

    * label - 表格标签 (它的for属性,可以将其和另外的元素对应起来 ,详细见链接:http://www.w3school.com.cn/tiy/t.asp?f=html_label

    * q - 短引用:默认内容被双引号包起来。

    * s - 中划线(不推荐)     和删除线del以及strike效果相同,但是strike不适用,通常用del来代替,和s标签效果相同。

    * select - 项目选择,常和option连用,构成一个下拉列表。默认的有margin值。

    * span - 常用内联容器,定义文本内区块

    * strike - 中划线

    * sub - 下标-à不常用

    * sup - 上标-à不常用

    * textarea - 多行文本输入框:默认为两行的高度,如需设置高度和宽度可以通过属性cols=”X”和rows=”X”来设置。

    * tt - 电传文本:加小的字体。

    * u - 下划线

  • 相关阅读:
    Struts2+Spring3+Mybatis3开发环境搭建
    spring+struts2+mybatis
    【LeetCode】Populating Next Right Pointers in Each Node
    【LeetCode】Remove Duplicates from Sorted Array
    【LeetCode】Remove Duplicates from Sorted Array II
    【LeetCode】Binary Tree Inorder Traversal
    【LeetCode】Merge Two Sorted Lists
    【LeetCode】Reverse Integer
    【LeetCode】Same Tree
    【LeetCode】Maximum Depth of Binary Tree
  • 原文地址:https://www.cnblogs.com/laogai/p/3334996.html
Copyright © 2011-2022 走看看