HTML标签类型

标签分类:

一、块标签:块标签是指本身属性为display:block;的元素。

                      1.默认占一行可以设置宽高,

                      2.在不设置宽度的情况下,块级元素的宽度是它父级元素内容的宽度

                      3.在不设置高度的情况下,块级元素的高度是它本身内容的高度

                      4.块标签的居中问题:块级标签左右居中:先设置自身width;然后,margin: 0 auto;

常用的块标签

标签描述
div常用块级容器,也是css layout的主要标签
h1大标题
h2副标题
h3三级标题
h4四级标题
h5五级标题
h6六级标题
hr水平分隔线
menu菜单列表
ol有序列表
ul无序列表
li列表项
dl定义列表
dt定义术语
dd定义描述
table表格
p段落
form交互表单


二、行标签:行标签是指本身属性为display:inline;的元素。

                      1.默认不占一行,不可以设置宽高,大小根据内容来

                      2.内联元素只能容纳文本或者其他内联元素(此处请注意,不要在内联元素中嵌套块级元素)

                      3.子级行标签之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size

                         行标签居中:由于行标签自身不支持width,使用在父级元素设置text-alian : center

常用的行标签

标签描述
span常用内联容器,定义文本内区块
a锚点
b加粗
strong加粗强调
i斜体
em斜体强调
s中划线(不推荐使用)
strike中划线
del文档中已被删除的文本
br强制换行
u下划线
textarea多行文本输入框
input输入框
select下拉列表
labelinput 元素定义标注(标记)
img引入图片
sub下标
sup上标
big大字体文本
small小字体文本


三、行内块标签:

1.默认不占一行,可以设置宽高

2.通过设置float属性也会将元素转换为行内块标签

   通过定位属性fix, absolute都可以将元素转换为行内块标签

   设置样式 display: inline-block;转换为行内块标签

 

总结:HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:

  (1)display:inline;转换为行内元素

  (2)display:block;转换为块状元素

  (3)display:inline-block;转换为行内块状元素

1.块状元素特征:(1)能够识别宽高

        (2)margin和padding的上下左右均对其有效

        (3)可以自动换行

        (4)多个块状元素标签写在一起,默认排列方式为从上至下

 

2.行内元素特征:(1)设置宽高无效

        (2)对margin仅设置左右方向有效,上下无效;padding设置上下左右都有效,即会撑大空间

        (3)不会自动进行换行

 

3.行内块状元素特征:(1)不自动换行

          (2)能够识别宽高

          (3)默认排列方式为从左到右


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/365436.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HashMap的fast-fail和ConcurrentHashMap的fail-safe实例

声明:迁移自本人CSDN博客https://blog.csdn.net/u013365635 Java HashMap遍历过程中如果元素被修改会导致遍历失败,ConcurrentHashMap则不会有这个问题。由此引出HashMap的fast-fail机制和ConcurrentHashMap的的fail-safe机制。 看如下实例。 首先看Hash…

访问权限冲突定义_一文读懂F5 REST API的细粒度角色访问控制

↑ 点击上方“小咩社长”关注我阅读提示|本文大概4718字 阅读需要12分钟写在前面:前两天一个保险的客户联系我说有个需求,问通过调用F5 REST API可否实现?:需要把F5负载均衡上面的配置相关的信息,包含每个…

Java:在JPA中使用规范模式

本文是在Java中使用规范模式的简介。 我们还将看到如何将经典规范与JPA Criteria查询结合使用,以从关系数据库中检索对象。 在本文中,我们将使用以下Poll类作为创建规范的示例实体。 它表示具有开始和结束日期的民意调查。 在这两个日期之间的时间中&am…

python财经数据接口包Tushare pro的入门及简单使用方式(大数据,股票数据接口)...

最近在做一个项目,需要用到股票的数据,我在网上查了很久,最终发现在股票数据上面还是tushare比较专业,而且对于将来做金融行业的大数据这一块的,tushare绝对是你的一个好帮手,所以下面我就简单介绍一下。 一…

java ean13 条形码_【教程】Spire.Barcode 教程:如何在C#中创建EAN-13条码

基于UPC-A标准的EAN-13在世界范围内用于标记零售商品。 13位EAN-13号码由四部分组成:国家代码 - 2或3位数字制造商代码 - 5至7位数字产品代码 - 3至5位数字检查数字 - 最后一位数字代码演示:Step 1: 创建一个BarcodeSettings实例。BarcodeSettings setti…

C# 中串口通信 serialport1.DataReceived 函数无法触发或者出发延时等等问题解决方法...

C# 中串口通信 serialport1.DataReceived 函数无法触发或者出发延时等等问题解决方法 原文:C# 中串口通信 serialport1.DataReceived 函数无法触发或者出发延时等等问题解决方法曾经这个问题困扰我多天最后查资料一大堆,最后终于解决了,看到很多人做C#串…

Module的加载实现

烂笔头开始记录小知识点啦&#xff5e; 浏览器要加载 ES6模块&#xff0c;&#xff1a; <script type"module" src"./foo.js"></script> 异步加载&#xff0c;相当与defer属性。可以另外设置async属性。ES6 模块也允许内嵌在网页中&#xff0…

python 线型_CCF 202006-1 线性分类器 python

题目&#xff1a;线性分类器(line)【题目描述】考虑一个简单的二分类问题——将二维平面上的点分为A和B两类。训练数据包含n个点&#xff0c;其中第i个点(1≤i≤n)可以表示为一个三元组(x,y,type)&#xff0c;即该点的横坐标、纵坐标和类别。在二维平面上&#xff0c;任意一条直…

[Swift]LeetCode682. 棒球比赛 | Baseball Game

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号&#xff1a;山青咏芝&#xff08;shanqingyongzhi&#xff09;➤博客园地址&#xff1a;山青咏芝&#xff08;https://www.cnblogs.com/strengthen/&#xff09;➤GitHub地址&a…

Java调试器–权威的工具列表

Java调试是一个复杂的空间。 调试器的类型很多&#xff0c;并且有很多工具可供选择。 在此页面中&#xff0c;我们将介绍7种类型的调试器之间的区别&#xff0c;并查看每个类别中的主要工具&#xff0c;以帮助您为正确的工作选择正确的工具。 以下是我们涵盖的调试器类型&…

java项目中多个定时器_在java项目中如何使用Timer定时器

在java项目中如何使用Timer定时器发布时间&#xff1a;2020-11-16 16:36:16来源&#xff1a;亿速云阅读&#xff1a;97作者&#xff1a;Leah在java项目中如何使用Timer定时器&#xff1f;很多新手对此不是很清楚&#xff0c;为了帮助大家解决这个难题&#xff0c;下面小编将为大…

慎使用sql的enum字段类型

在sql的优化中&#xff0c;会有同学提到一点&#xff1a;使用enum字段类型&#xff0c;代替其他tinyint等类型。以前这也是不少人喜欢优化的&#xff0c;但是现在细想&#xff0c;是非常不合理的。 优点&#xff1a; 1.可以设置区间范围&#xff0c;比如设置性别&#xff1a;1男…

js对HTML字符转义与反转义

注意&#xff1a; 在编写html时&#xff0c;经常需要转义&#xff0c;才能正常显示在页面上。 并且&#xff0c;还可以防止xss。 解决方案&#xff1a; 一&#xff0c; 使用正则&#xff1a; 使用正则转码&#xff1a; var value document.getElementById(input).value.t…

python三维数据图_matplotlib中三维数据的热图

我想用我的三维数据生成一张热图。在我已经能够用这些数据绘制出trisurf。在有人能帮我制作热图吗&#xff1f;我看到了在线教程&#xff0c;但是它们对3D来说都很复杂&#xff0c;我在这个网站上找到了一个在matplotlib中生成带有散点的热图&#xff0c;但是它只有2D数据。在我…

区分基于Ant目标的Gradle任务

在我的博客文章《 从Ant Build演变Gradle构建&#xff1a;导入Ant构建文件》中 &#xff0c;我演示了如何使用Gradle内置的基于AntBuilder的Ant支持在Gradle构建中导入Ant目标。 然后&#xff0c;可以将这些Ant目标作为Gradle任务进行访问&#xff0c;并与Gradle构建直接引入的…

java显示长度和第一个字符_从Java字符串中以长度1的字符串返回的第一个字母的最佳方法是什么?...

假设以下内容&#xff1a;String example "something";String firstLetter "";以下分配方式firstLetter可能会影响性能&#xff0c;请注意是否存在差异&#xff1b; 哪个最好&#xff0c;为什么&#xff1f;firstLetter String.valueOf(example.charAt(…

sequelize difference between hasone and hasmany

Query is equal, hasone return the first instance from the collection,hasmany return the whole collection. 转载于:https://www.cnblogs.com/ybleeho/p/9772902.html

localStorage封装借口store.js的使用

localstorage是 HTML5 提供的在客户端存储数据的新方法&#xff0c;主要作用是将数据保存在客户端中&#xff0c;并且数据是永久保存的&#xff0c;除非人为干预删除。localstorage 的局限 1、只有版本较高的浏览器中才支持 localstorage2、localStorage的值的类型限定为strin…

AmazonSQS和Spring用于消息传递队列

下一篇文章将演示如何将Spring JMS模板和DLMC与AmazonSQS API一起使用&#xff0c;以放置消息队列。 我为什么要使用Amazon SQS&#xff1f; 易于配置 跨平台支持 从您的自我冗余&#xff0c;连带和扩展方面的烦恼中赚钱。 为什么我不使用Amazon SQS&#xff1f; 如果延迟…

3.3-3.9 周记

3.3-3.10 1. NIM游戏 百度链接&#xff1a;https://baike.baidu.com/item/Nim%E6%B8%B8%E6%88%8F/6737105?fraladdin 定义&#xff1a; P局面&#xff1a;先手必败N局面&#xff1a;先手必胜P局面的所有子局面都是N局面。N局面的子局面中必有一个是P局面 性质&#xff1a;\(a_…