元素类型笔记总结

keepfaith

贡献于2017-06-12

字数:2323 关键词:

元素类型 一、XHTML元素分类 根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素,可变元素 1.块状元素(block element)     1)块状元素在网页中就是以块的形式显示,所谓块状就是元素显示为矩形区域,常用的块状元素包块div,dl,dt,dd,ol,ul,fieldset,(h1-h6),p,form,hr,colgroup,col,table,tr,td,等;   2)默认情况下,块状元素都会占据一行,通俗地说,两个相邻块状元素不会出现并列显示的现象;默认情况下,块状元素会按顺序自上而下排列。   3)块状元素都可以定义自己的宽度和高度。    4)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。 * address - 地址  * blockquote - 块引用  * center - 举中对齐块  * dir - 目录列表  * div - 常用块级容易,也是css layout的主要标签  * dl - 定义列表  * fieldset - form控制组  * form - 交互表单 (只能用来容纳其它块元素)  * h1 - 大标题  * h2 - 副标题  * h3 - 3级标题  * h4 - 4级标题  * h5 - 5级标题  * h6 - 6级标题  * hr - 水平分隔线  * isindex - input prompt  * menu - 菜单列表  * noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容  * noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)  * ol - 排序表单  * p - 段落  * pre - 格式化文本  * table - 表格  * ul - 非排序列表 2.内联元素(inline element)(或是行内元素) 1) 常见的内联元素如:a,span,i,em,strong,b等 2) 内联元素的表现形式是始终以行内逐个进行显示; 3) 内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状; 4)内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示; * a - 锚点   * abbr - 缩写   * acronym - 首字   * b - 粗体(不推荐)   * bdo - bidi override   * big - 大字体   * br - 换行   * cite - 引用   * code - 计算机代码(在引用源码的时候需要)   * dfn - 定义字段   * em - 强调   * font - 字体设定(不推荐)   * i - 斜体   * img - 图片   * input - 输入框   * kbd - 定义键盘文本   * label - 表格标签   * q - 短引用   * s - 中划线(不推荐)   * samp - 定义范例计算机代码   * select - 项目选择   * small - 小字体文本   * span - 常用内联容器,定义文本内区块   * strike - 中划线   * strong - 粗体强调   * sub - 下标   * sup - 上标   * textarea - 多行文本输入框   * tt - 电传文本   * u - 下划线   * var - 定义变量 3、可变元素 需要根据上下文关系确定该元素是块元素或者内联元素。 4、 元素类型的转换 盒子模型可通过display属性来改变默认的显示类型 1)display属性与属性值 (18个属性值) 属性值:block/inline/inline-block/none/list-item/table-header-group/table-footer-group.... 作用:该属性设置或检索对象元素应该生成的盒模型的类型。 说明:各属性值的作用 1)block块状显示:类似在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。 2)inline内联显示:在元素后面删除换行符,多个元素可以在一行内并列显示。input,img特殊的内联元素。 3)当元素设置了float属性后,就相当于给该元素加了display:block;属性; 4)inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行。(只有这一个元素类型支持vertical-align属性)img,input。 5)none 此元素不会被显示。 6)list-item:将元素转换成列表。li的默认类型,li是特殊的块状元素 说明: 1、大部分块元素display属性值默认为block,其中li默认值为list-item。 2、大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block。  总结: 行内块元素/行内元素设置margin-top时,会影响着一行的所有的行内元素,向下移动,如果不想影响别的块内元素,要给本元素设置float 内联元素添加浮动后,自动转换成块元素,块元素添加浮动后,体积与内容同宽 图片:如果只设置了宽度,没有设置高度,会等比例的缩放,所以要设置高度  置换元素/替换元素  .一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。  置换元素就是浏览器根据元素的属性,来决定元素的具体显示内容。  例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容; 例如根据input标签的type属性来决定是显示输入框,还是单选按钮等。  HTML中的img、input、textarea、select、object都是替换元素。 非置换元素/不可替换元素  HTML的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器), 例如:span是非置换元素 因此 hello word 被展示出来 而不是被替换成其他内容 hello word      

下载文档,方便阅读与编辑

文档的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享文档获得金币 ]
0 人已下载

下载文档

相关文档