• 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 - 下划线

  • 相关阅读:
    php 中ASCII编码的使用
    BASE64
    微信公众平台--6.JS-SDK 微信内网页开发工具包
    python3中zipfile模块的常用方法
    python3开发进阶-Django框架学习前的小项目(一个简单的学员管理系统)
    python3开发进阶-Django框架的起飞加速一(ORM)
    python3开发进阶-Django框架起飞前的准备
    python3开发进阶-Web框架的前奏
    前端基础-jQuery的最常用的的方法each、data、
    前端基础-jQuery的动画效果
  • 原文地址:https://www.cnblogs.com/laogai/p/3334996.html
Copyright © 2020-2023  润新知