三种：

1.块级标签： 独占一行，可设置宽度，高度。如果设置了宽度和高度，则就是当前的宽高。如果宽度和高度没有设置，宽度是父盒子的宽度，高度根据内容填充。

2.行内标签：在一行内显示,不能设置宽度，高度。它的宽度，高度根据内容去填充。

3.行内块标签：在一行内显示，可设置宽度，高度。

标签分类

HTML中标签元素三种不同类型：块级标签，行内标签，行内块状标签。

常用的块级标签：

<div> <p> <h1>~<h6> <ol> <ul> <table><form> <li>

常用的行内标签：

<a> <span> <br> <i> <em> <strong> <label>

常用的行内块状标签：

<img> <input>

块级标签特点：CSS样式：display:block;

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

可以设置高度，宽度

行内标签特点：CSS样式：display:inline;

1、和其他元素都在一行上；

2、元素的高度、宽度及顶部和底部边距不可设置；

3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

行内块状标签的特点：CSS样式：display:inline-block;

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <div>

        <!-- 行内块标签：<img/> <input>

            1.一行内显示

            2.可以设置宽度、高度

         -->

        <input type="text" style="height: 200px;width: 200px">

    </div>

</body>

</html>

注意

我们可以通过display属性对块级元素、行内元素、行内块元素进行转换

前端 HTML 标签分类的更多相关文章

  1. 前端入门html（常用标签及标签分类）

    day47 参考:https://www.cnblogs.com/liwenzhou/p/7988087.html 任何标签都有有三个属性:ID,class.style <!DOCTYPE ht ...

  2. Python-HTML 最强标签分类

    编程: 使用(展示)数据 存储数据 处理数据 前端 1. 前端是做什么的? 2. 我们为什么要学前端? 3. 前端都有哪些内容? 1. HTML 2. CSS 3. JavaScript 4.jQue ...

  3. scikit-learn一般实例之八:多标签分类

    本例模拟一个多标签文档分类问题.数据集基于下面的处理随机生成: 选取标签的数目:泊松(n~Poisson,n_labels) n次,选取类别C:多项式(c~Multinomial,theta) 选取文 ...

  4. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  5. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  6. 前端c标签foreach传值给后台

    前端c标签foreach传值给后台 <div style="margin-bottom: 10px"> <c:forEach items="${good ...

  7. htm基础知识，css的链入以及标签分类。

    <!DocTYPE>  DOC--Document 文档  TYPE  类型  文档类型 告诉浏览器这是什么文件 单标签: meta  设置   charset  设置编码 双标签: 开始 ...

  8. 如何用softmax和sigmoid来做多分类和多标签分类

    首先,说下多类分类和多标签分类的区别 多标签分类:一个样本可以属于多个类别(或标签),不同类之间是有关联的,比如一个文本被被划分成“人物”和“体育人物”两个标签.很显然这两个标签不是互斥的,而是有关联 ...

  9. 使用 scikit-learn 实现多类别及多标签分类算法

    多标签分类格式 对于多标签分类问题而言,一个样本可能同时属于多个类别.如一个新闻属于多个话题.这种情况下,因变量yy需要使用一个矩阵表达出来. 而多类别分类指的是y的可能取值大于2,但是y所属类别是唯 ...

随机推荐

  1. Error - SqlDateTime overflow. Must be between 1/1/1753 12:00:00 AM and 12/31/9999 11:59:59 PM

    I find using the following works quite well for SQL min/max dates after many DB related errors: Date ...

  2. webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 它的异步加载原理是,事先将编译好后的静态文件,通过js对象映射,硬编 ...

  3. Ubuntu 14.04 配置VNC服务 配置Xfce4桌面

    一.安装配置VNC 1.首先安装VNC apt-get install vnc4server 2.为VNC设置密码 vncpasswd 输入密码,然后再确认一遍,就OK了. 3.启动VNC vncse ...

  4. U3D对齐功能

    1,按快捷键Shift + v 的用法:    [1]先选中你要对齐的模型A,[将物体A对齐到物体B].    [2]按快捷键Shift + v ,此时将鼠标移到模型A的各个顶点处,可发现各个顶点上会 ...

  5. centos7 安装zookeeper3.4.8集群

    1.下载上传文件到centos中 2.解压文件夹 3.cd conf 文件下,cp  zoo_sample.cfg  zoo.cfg 4.vim zoo.cfg # The number of mil ...

  6. 【黑金原创教程】【FPGA那些事儿-驱动篇I 】实验四：按键模块③ — 单击与双击

    实验四:按键模块③ - 单击与双击 实验三我们创建了"点击"还有"长点击"等有效按键的多功能按键模块.在此,实验四同样也是创建多功能按键模块,不过却有不同的有效 ...

  7. docker 怎么下载指定版本的镜像文件

    在使用Docker时我想pull远端仓库的CentOS 6的镜像,但是我直接搜索下载下来的是最新的版本.那我有没有什么办法直接下载Centos6呢? 方法: 直接上 hub.docker.com 查 ...

  8. WMware 安装 Mac OSX

    1,下载unlock.zip工具,破解VMware没有mac选项情况 2. 下载OS X 10.11.1(15B42).cdr 3.MWare虚拟机提示:“锁定文件失败,打不开磁盘或快照所依赖的磁盘” ...

  9. python----流程控制

    计算机程序在解决某个具体问题时,包括三种情形,即顺序执行所有的语句.选择执行部分的语句和循环执行部分语句,这正好对应着程序设计中的三种程序执行结构流程:顺序结构.选择结构和循环结构. 事实证明,任何一 ...

  10. db2 基础语法

    一.db2 基础 基本语法 注释:“--”(两个减号) 字符串连接:“||” 如set msg=’aaaa’||’bbbb’,则msg为’aaaabbbb’ 字符串的引用:‘’(一定用单引号),如果需 ...