HTML基础--元素类型及类型转换
元素类型及类型转换
一、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基础--元素类型及类型转换的更多相关文章
- JS基础-变量类型和类型转换
JS 变量类型 JS中有 6 种原始值,分别是: boolean number string undefined symbol null 引用类型: 对象 数组 函数 JS中使用typeof能得到哪些 ...
- [No0000B5]C# 类型基础 值类型和引用类型 及其 对象判等 深入研究1
引言 本文之初的目的是讲述设计模式中的 Prototype(原型)模式,但是如果想较清楚地弄明白这个模式,需要了解对象克隆(Object Clone),Clone其实也就是对象复制.复制又分为了浅度复 ...
- [浅谈CSS核心概念] CSS元素类型和盒模型
元素类型 在CSS中,HTML标签元素分为三种类型: 块状元素 内联元素(也叫行内元素) 内联块状元素 它们之间的区别在于: 块级元素会独占一行,内联元素和内联块状元素则都会在一行内显示 块状元素和内 ...
- typescript学习笔记(一)---基础变量类型
作为一个前端开发者,学习新技术跟紧大趋势是必不可少的.随着2019年TS的大火,我打算利用一个月的时间学习这门语言.接下来的几篇文章是我学习TS的学习笔记,其中也会掺杂一些学习心得.话不多说,先从基础 ...
- [CLR via C#]4. 类型基础及类型、对象、栈和堆运行时的相互联系
原文:[CLR via C#]4. 类型基础及类型.对象.栈和堆运行时的相互联系 CLR要求所有类型最终都要从System.Object派生.也就是所,下面的两个定义是完全相同的, //隐式派生自Sy ...
- javascript基础(二)类型转换
原文http://pij.robinqu.me/ 类型转换 当期望使用一个布尔值的时候,可以提供任意类型值,JavaScript将根据需要自行转换类型.类型转换可以分为隐式转换和显式转换. 显式转换 ...
- C#基础 常用语&数据类型定义&类型转换
int temp = Console.Read(); Console.WriteLine(temp); Console.Read(); Console.Write(" ");直接 ...
- [No0000B9]C# 类型基础 值类型和引用类型 及其 对象复制 浅度复制vs深度复制 深入研究2
接上[No0000B5]C# 类型基础 值类型和引用类型 及其 对象判等 深入研究1 对象复制 有的时候,创建一个对象可能会非常耗时,比如对象需要从远程数据库中获取数据来填充,又或者创建对象需要读取硬 ...
- c++ STL 常用容器元素类型相关限制 指针 引用
c++ 的 STL 中主要有 vector , list, map, set , multimap,multiset 这些容器完全支持使用内置类型和指针(指针注意内存泄露问题). 就是说乱用智能指针 ...
随机推荐
- eslint使用
参考文档 http://www.cnblogs.com/hahazexia/p/6393212.html http://blog.guowenfh.com/2016/08/07/ESLint-Rule ...
- zoj1002 Fire Net
Fire Net Time Limit: 2 Seconds Memory Limit: 65536 KB Suppose that we have a square city with s ...
- 让asp.net网站支持多语言,使用资源文件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs&quo ...
- Interface request structure used for socket ioctl's
1. 结构体定义 /* * Interface request structure used for socket * ioctl's. All interface ioctl's must have ...
- C语言 流缓冲
**From : https://www.gnu.org/software/libc/manual/html_node/Stream-Buffering.html** 12.20 流缓冲 通常情况下, ...
- 【Vue】浅谈Vue(一):从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
- mac idea sbt工程打jar包
1.首先保证sbt已下载,否则下载homebrew:在命令行输入/usr/bin/ruby XXX ->下载完成后在终端输入brew install sbt ->安装完毕后可以打jar包 ...
- Object类—复写equals方法,hashCode方法,toString方法
Object:所有类的根类. Object是不断抽取而来,具备着所有对象都具备的共性内容. class Person extends Object { private int age; Person( ...
- MySQL中字段类型为timestamp的小坑
之前遇到过一个MySQL的字段为timestamp类型的小坑. MySQL中一个字段存储时间类型数据的时候,该字段的类型如果为timestamp类型的话,最多只能存储到2038-01-19 11:14 ...
- 浅试 Webview 一app 加载 H5小游戏
整体架构: InventionActivity:实现UI的实例化,基本的按钮Activity之间跳转 GameActivity:实现UI的实例化,Webview的基本使用 MyProgressDial ...