元素类型及类型转换

一、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)块状元素一般都作为其他元素的容器,它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子。

2.内联元素(inline element)(或是行内元素)

1) 常见的内联元素如:a,span,i,em,strong,b,del,等

2) 内联元素的表现形式是始终以行内逐个进行显示;

3) 内联元素没有自己的形状,不能定义它的宽和高,它显示的宽度、高度只能根据所包含内容的高度和宽度来确定,它的最小内容单元也会呈现矩形形状;

4)内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性不能正确显示;

3、可变元素

需要根据上下文关系确定该元素是块元素或者内联元素。

4、 元素类型的转换

盒子模型可通过display属性来改变默认的显示类型

1)display属性与属性值 (18个属性值)

属性值:block/inline/inline-block/none/list-item/table-header-group/table-footer-group....

作用:该属性设置或检索对象元素应该生成的盒模型的类型。

说明:各属性值的作用

1)Block块状显示:类似在元素后面添加换行符,也就是说其他元素不能在其后面并列显示。

2)inline内联显示:在元素后面删除换行符,多个元素可以在一行内并列显示。

3)当元素设置了float属性后,就相当于给该元素加了display:block;属性;

4)Inline-block行内块元素显示:元素的内容以块状显示,行内的其他元素显示在同一行。(只有这一个元素类型支持vertical-align属性)img,input。

5)none 此元素不会被显示。

6)list-item:将元素转换成列表。li的默认类型

7)

1、大部分块元素display属性值默认为block,其中li默认值为list-item。

2、大部分内联元素的display属性值默认为inline,其中img,input,默认为inline-block。

二、置换元素/替换元素

概念:一个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸(宽度,高度,宽高比)的元素,被称之为置换元素。HTML中的img、input、textarea、select、object都是置换元素。这些元素往往没有实际的内容,即是一个空元素

置换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。

例如浏览器会根据img标签的src属性的值来读取图片信息并显示出来。

又例如根据input标签的type属性来决定是显示输入框,还是单选按钮等。

非置换元素/不可置换元素 :HTML中除了可转换元素外,其它都是不可转换元素(即其内容直接表现给用户端例如浏览器)

<del></del>删除线标签

HTML基础--元素类型及类型转换的更多相关文章

  1. JS基础-变量类型和类型转换

    JS 变量类型 JS中有 6 种原始值,分别是: boolean number string undefined symbol null 引用类型: 对象 数组 函数 JS中使用typeof能得到哪些 ...

  2. [No0000B5]C# 类型基础 值类型和引用类型 及其 对象判等 深入研究1

    引言 本文之初的目的是讲述设计模式中的 Prototype(原型)模式,但是如果想较清楚地弄明白这个模式,需要了解对象克隆(Object Clone),Clone其实也就是对象复制.复制又分为了浅度复 ...

  3. [浅谈CSS核心概念] CSS元素类型和盒模型

    元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...

  4. typescript学习笔记(一)---基础变量类型

    作为一个前端开发者,学习新技术跟紧大趋势是必不可少的.随着2019年TS的大火,我打算利用一个月的时间学习这门语言.接下来的几篇文章是我学习TS的学习笔记,其中也会掺杂一些学习心得.话不多说,先从基础 ...

  5. [CLR via C#]4. 类型基础及类型、对象、栈和堆运行时的相互联系

    原文:[CLR via C#]4. 类型基础及类型.对象.栈和堆运行时的相互联系 CLR要求所有类型最终都要从System.Object派生.也就是所,下面的两个定义是完全相同的, //隐式派生自Sy ...

  6. javascript基础(二)类型转换

    原文http://pij.robinqu.me/ 类型转换 当期望使用一个布尔值的时候,可以提供任意类型值,JavaScript将根据需要自行转换类型.类型转换可以分为隐式转换和显式转换. 显式转换 ...

  7. C#基础 常用语&数据类型定义&类型转换

    int temp = Console.Read(); Console.WriteLine(temp); Console.Read(); Console.Write("  ");直接 ...

  8. [No0000B9]C# 类型基础 值类型和引用类型 及其 对象复制 浅度复制vs深度复制 深入研究2

    接上[No0000B5]C# 类型基础 值类型和引用类型 及其 对象判等 深入研究1 对象复制 有的时候,创建一个对象可能会非常耗时,比如对象需要从远程数据库中获取数据来填充,又或者创建对象需要读取硬 ...

  9. c++ STL 常用容器元素类型相关限制 指针 引用

    c++ 的 STL 中主要有 vector , list, map, set  , multimap,multiset 这些容器完全支持使用内置类型和指针(指针注意内存泄露问题). 就是说乱用智能指针 ...

随机推荐

  1. 【转】python time模块详解

    python 的内嵌time模板翻译及说明  一.简介 time模块提供各种操作时间的函数  说明:一般有两种表示时间的方式:       第一种是时间戳的方式(相对于1970.1.1 00:00:0 ...

  2. zoj3710 friends(floyd变形)

    Friends Time Limit: 2 Seconds      Memory Limit: 65536 KB Alice lives in the country where people li ...

  3. HDU 1219 AC Me

    strlen能不用就不用 #include<cstdio> #include<cstdlib> #include<iostream> #include<alg ...

  4. [置顶] 一个demo学会c#

    学习了c#4.5高级编程这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的c#编程知识.让你一个demo掌握c#编程,如果有问题可以留言. 此demo主要包括五个文件:Stude ...

  5. PHP开发要点与技巧总结(一)

    Opcache:Opcache 来源于Zend Optimizer+改名,主要作用是通过将 PHP 脚本预编译的字节码存储到共享内存中来提升 PHP 的性能, 存储预编译字节码的好处就是省去了每次加载 ...

  6. nodejs+mongoose操作mongodb副本集实例

    继上一篇设置mongodb副本集之后,开始使用nodejs访问mongodb副本集: 1:创建项目     express 项目名称 2:npm install mongoose    安装mongo ...

  7. asp.net C# 实现微信服务器配置

    微信服务器配置接收页面示例代码 /// <summary> /// 微信的Token /// </summary> const string Token = "Tok ...

  8. 23种设计模式JAVA 实现目录总结

    曾看了不少的有关设计模式的文章,有的提供的实现在现在看来是有些问题,所以现在对以前看过的有关设计模式的文章在这里总结一下,随笔中有引用其他资料,并根据自己的理解重新实现了一次,23种设计模式中,并没有 ...

  9. JAVA基础知识总结:三

    一.Java语句的执行结构 1.顺序语句 按照顺序从上往下依次执行的语句,中间没有任何的判断和跳转 2.分支语句 根据不同的条件来产生不同的分支 if语句.switch语句 3.循环语句 重复执行某句 ...

  10. 记一次mysql千万订单汇总查询优化

    公司订单系统每日订单量庞大,有很多表数据超千万.公司SQL优化这块做的很不好,可以说是没有做,所以导致查询很慢. 正题 节选某个功能中的一句SQL EXPLAIN 查看执行计划 EXPLAIN + S ...