HTML相关知识补充

最新推荐文章于 2024-10-01 15:16:55 发布

whisper49

最新推荐文章于 2024-10-01 15:16:55 发布

阅读量180

点赞数

文章标签： html

本文链接：https://blog.csdn.net/whisper49/article/details/116091425

版权

一、HTML的标签分类

1.按标签个数分类

双标签：由开始标签和结束标签组成，也叫闭合标签，允许嵌套和承载内容。如<html></html>、<body></body>等。

单标签：只有一个标签,也叫空标签，规范书写后面要加‘/’，不加‘/’效果上没影响。如<br />、<input type=“属性” />等。

2. 按标签特性分类

（1）块级元素（标签）：本身属性为display:block;的元素

1)块级元素的特点：

可以设置宽高，并且宽度高度以及外边距margin，内填充padding都可随意控制，也可控制盒子模型的相关css属性。
会自动换行，每一个块级元素都会从新的一行重新开始，从上到下排布。
在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。
在不设置高度的情况下，块级元素的高度是它本身内容的高度

2)块级元素有哪些：
div、ul、ol、dl、li、h1-h6、pre（格式化文本）、form、table等

3）作用：进行大布局（大结构）的搭建。

（2）行内元素（标签）：也成内联（行级）标签，指本身属性为display:inline;的元素。

1）行内元素的特点：

行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高
（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding
上下无效，左右有效。也不能设置盒子模型的相关css属性
行内元素不会自动换行，它和其他行内元素都会在一条水平线上排列，都是在同一行的。
行内元素的宽高是由本身内容的大小决定（文字、图片等）。

2)行内元素有哪些：span、img、input、select、label、em、button、textarea、a、strong、b等

3）作用：进行文字、小图标（小结构）的搭建。

PS：

块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。
行内元素与块级元素可以相互转换，通过修改 display 属性值来切换块级元素和行内元素，行内元素 display：inline，块级元素 display：block。

（3）行内块标签：可以和其他块级标签、行内标签放在一起，同时具备它们的特点。
1）特点：

可设置宽高，外边距、内边距都可以控制。
一行内显示。
和相邻行内元素在同一行，但是之间会有空白缝隙。

2）行内块元素有哪些：<img>、<input>等

二、有序列表补充：

可以使用type属性规定有序列表符号的类型：

1 按数字有序排列，为默认值，（1、2、3、4）；
a 按小写字母有序排列，（a、b、c、d）；
A 按字母大写有序排列，（A、B、C、D）；
i 按小写罗马字母有序，（i, ii, iii, iv）；
I 按小写罗马字母有序，（I, II, III, IV）。

三、div和span的区别

（1）span和div在功能上的区别：div是块级元素，其包含的元素会自动换行；span是行内元素，在它的前后不会换行。
同时div元素可以包含span元素，即span可以作为div的子元素，而div不能是span的子元素。
（2）span和div在使用上的区别：span元素宽度是由包围的内容宽度决定，一般不给span设置宽度属性width，
可以给span设置margin值，设置与父元素之前的距离。