一、html元素可分为三大类:块元素、内联元素、可变元素

1.块元素:

常见块状元素:div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption

块状元素特点:

  (a)以块的形式显示为一个矩形区域;

  (b)块状元素独占一行,自上而下排列;

  (c)块状元素可以定义自己的宽度和高度,以及盒模型中的margin,padding,border;

  (d)块状元素可以作为一个容器包含其他的块状元素或内联元素。

2.内联元素(行内元素):

常见内联元素:a,strong,b,i,em,span,label,img,input

内联元素特点:

  (a)内联元素在一行逐个进行显示;

  (b)内联元素没有自己的形状,不能定义宽度和高度,它的宽高由内容来决定;

  (c)内联元素设置与高度相关的一些属性(如margin-top,margin-bottom,padding-top,padding-bottom,line-height),显示无效或显示不准确;

  (d)内联元素设置左右填充和外间距是可以的。

内联块状元素:img,input,textarea

内联块状元素特点:

  (a)即具有内联元素特点,也具有块状元素特点

  (b)即可以定义容器的宽,高,margin,padding等,还可以和其他内联元素在一行显示

3.可变元素

二、元素类型转换

display:block|inline|inline-block|none|list-item;

  block:将元素转换为块状元素(大部分块状元素的默认display属性值)

  inline:将元素转换为内联元素(大部分内联元素的默认display属性值)

  inline-block:将元素转换为内联块状元素(img,input等元素的默认display属性值)

  list-item:将元素转换为列表类型(li的默认display属性值)

  none:元素隐藏不可见

注:当元素设置了float属性后,就相当于设置了display:block;可以给元素定义宽,高了

三、置换元素和非置换元素

1.置换元素

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

如img标签,src属性决定了在网页呈现不同的图片

如input标签,type属性决定了在网页中呈现什么类型的input控件

2.非置换元素

除置换元素外其他的html元素都是非置换元素

标签之间书写什么样的内容,浏览器就显示什么内容

如:<h1>hello world</h1

前端之Html元素的分类的更多相关文章

  1. HTML元素的分类

    HTML元素的分类 EC前端 - HTML教程 块元素 div:无语义,常用于布局 aside:表示article元素的内容之外的与article元素的内容相关内容 figure:表示一段独立的流内容 ...

  2. 好程序员web前端分享CSS元素类型

    好程序员web前端分享CSS元素类型 目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依 ...

  3. [转]HTML标签元素的分类

      在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素和内联块状元素. 常用的块状元素有: <div>.<p ...

  4. HTML元素以及HTML元素的分类

    HTML元素以及HTML元素的分类 html标签又叫做html元素,它分为块级元素和内联元素(也可以叫做行内元素),都是html规范中的概念 块级元素 含义:块级元素是指本身属性为display:bl ...

  5. html元素的分类有哪些?

    今天零度给大家讲一下基本的html元素分类: HTML元素的分类其实主要有两种元素构成——块级元素和内联元素. html元素的分类有块级元素和行内元素 一.块级元素(block)的特点: 1.总是在新 ...

  6. CSS入门(边框、轮廓、元素的分类、盒子模型的三个构成部分)

    一.边框属性 作用:给元素加上一个边框 第一种: border-top border-bottom border-left boder-right 三个属性值: 粗细 线型 颜色 第二种: borde ...

  7. css中元素的分类

    按照显示元素分类: 行内元素(lnline-element):元素的高度,行高,顶底边距由元素所包含的图片或文字所决定,不可改变:其宽度为内容文字或图片的宽度所决定,而其左右边距可人为设置. 行内元素 ...

  8. Web前端 css实现元素垂直居中的常用方法

    方法1:table-cell html结构: 1 2 3 <div class="box box1">         <span>垂直居中</spa ...

  9. html元素的分类以及特点

    解释几个概念: 替换元素:官方解释是,一个内容不受css视觉格式化模型控制,css渲染模型并不考虑对此内容的渲染,且元素一般拥有固定的尺寸,(高度,宽度)的元素,被称为置换元素.通俗来说就是浏览器根据 ...

随机推荐

  1. 「NOIP2002」「Codevs1099」 字串变换(BFS

    1099 字串变换 2002年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold   题目描述 Description 已知有两个字串 $A$, ...

  2. PhpStorm中如何配置SVN,详细操作方法

    1.简介: PhpStorm是一个轻量级且便捷的PHP IDE,其提供的智能代码补全,快速导航以及即时错误检查等功能大大提高了编码效率.它是一款商业的 PHP 集成开发工具,以其独特的开发便利性,短时 ...

  3. OpenService 打开一个已经存在的服务

    SC_HANDLE WINAPI OpenService( _In_ SC_HANDLE hSCManager, _In_ LPCTSTR lpServiceName, _In_ DWORD dwDe ...

  4. ubuntu 安装配置 JDK7和Android Studio(apt-get方式)

    Ubuntu 安装配置JKD 7 $ sudo add-apt-repository ppa:webupd8team/java $ sudo apt-get update $ sudo apt-get ...

  5. WebService完成文件上传下载

    由于开发需要使用webservice,第一个接触的工具叫axis2.项目开发相关jar下载. service端: 启动类: import java.net.InetAddress; import ja ...

  6. node本地服务启动报Error: listen EADDRINUSE解决方法

    Error: listen EADDRINUSE 127.0.0.1:1337 at Object.exports._errnoException (util.js:1018:11) at expor ...

  7. error:: undefined reference to symbol '__glewBufferSubData' 未定义的引用 以及 error: main.o: undefined reference to symbol 'glTexImage2D'

    在把DSO移植到QT工程中,出现了 /usr/bin/ld: KeyFrameDisplay.o: undefined reference to symbol '__glewBufferSubData ...

  8. 利用python数据分析panda学习笔记之Series

    1 Series a:类似一维数组的对象,每一个数据与之相关的数据标签组成 b:生成的左边为索引,不指定则默认从0开始. from pandas import Series,DataFrame imp ...

  9. Identity Server 4 原理和实战(完结)_为 MVC 客户端刷新 Token

    服务端修改token的过期使劲为60秒 过期了 仍然还能获取到api1的资源 api1,设置每隔一分钟就验证token 并且要求token必须要有超时时间这个参数, 1分钟后提示超时,两边都是一分钟, ...

  10. c# 调用 webservices (转载)

    .net 调用webservice 总结 最近做一个项目,由于是在别人框架里开发app,导致了很多限制,其中一个就是不能直接引用webservice . 我们都知道,调用webserivice 最简单 ...