三种:

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. [Bayes] Improve HMM step by step

    以下是HMM,当emission probability变为高斯时,只需改变其中相关部分即可,也就是下图最后一行. 如下可见,在优化过程中套路没有太大的影响,但变为高斯后表达变得更精确了呢. 当然,这 ...

  2. 检测浏览器是否支持某个css属性

    以浏览器是否支持translate3d 为例说明,当然现代浏览器已经支持该属性.如果浏览器实现了带有前缀的某个属性,比如说支持-webkit-transform,但是不支持直接写transform,可 ...

  3. 浅谈webpack4.0 性能优化(转)

    前言:在现实项目中,我们可能很少需要从头开始去配置一个webpack 项目,特别是webpack4.0发布以后,零配置启动一个项目成为一种标配.正因为零配置的webpack对项目本身提供的“打包”和“ ...

  4. @Cacheable注解式缓存不起作用的情形

    @Cacheable注解式缓存使用的要点:正确的注解式缓存配置,注解对象为spring管理的hean,调用者为另一个对象.有些情形下注解式缓存是不起作用的:同一个bean内部方法调用,子类调用父类中有 ...

  5. Mac下git通过SSH进行免密码安全连接github

    Git——The stupid content tracker(傻瓜内容跟踪器) Git是Linux的缔造者Linus Torvalds为了帮助管理Linux内核源码而开发的一款免费.开源的分布式版本 ...

  6. jmeter中split分隔字符

    jmeter中自带了split函数,但是,注意但是,不能使用"-",","等等符合,否则会报错. 没办法,转投入beanshell的怀抱,使用split,发现& ...

  7. hashlib

    登录认证 加密 --> 解密 摘要算法 两个字符串 : import hashlib # 提供摘要算法的模块 md5 = hashlib.md5() md5.update(b') print(m ...

  8. MSI/MSI-X Capability结构 (转)

    http://blog.sina.com.cn/s/blog_6472c4cc0102dskj.html

  9. org.apache.jasper.JasperException:Unable to read TLD "META-INF/c-1_0-rt.tld" from JAR file jstl-1.2.jar

    前两天把项目从eclipse EE版搬到MyEclipse中了.配置好jdk,确定build path中没有报错后,在tomcat中运行.结果,报错: org.apache.jasper.Jasper ...

  10. 2017-2018 ACM-ICPC Latin American Regional Programming Contest

    题面pdfhttps://codeforc.es/gym/101889/attachments/download/7471/statements-2017-latam-regional.pdf zyn ...