7-HTML的标签类型

2024-12-03 技术教程

HTML 标签的类型块级标签

独占一行的标签
能随时设置宽度和高度（比如div、p、h2、h3、ul、li）
以上这些标签无论宽度有多窄，都是独占一行的。

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ background-color: red; } </style></head><body>  <div>我是块级标签</div></body></html>

上图：可以看到网页两边是有空白处的

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ background-color: red; } </style></head><body>  <div>我是块级标签</div></body></html>

代码：使用通配符，将两边的空白处去掉

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ background-color: red; width: 400px; height: 100px; } p{ background-color: blue; width: 50px; } </style></head><body>  <div>我是块级标签</div> <p>段落</p></body></html>

代码：修改div和p标签的宽度

上图：可以看到因为div和p标签都属于块级标签，都会独占一行，所以即使它俩的宽度在窄，也不会合并到一行。

行内标签（内联标签）

多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ background-color: red; width: 400px; height: 100px; } p{ background-color: blue; /*width: 250px;*/ } span{ background-color: violet; } a { background-color: teal; } </style></head><body>  <div>我是块级标签</div> <p>段落</p> <br> <br>  <span>我是span，行内标签</span> <span>我是span，行内标签</span> <a href="#">我是超链接</a> <a href="#">我是超链接</a></body></html>

代码：
新增行内标签span、a
新增span和a设计

上图：因为是属于行内标签所以span和a都出现在同一行。

a { background-color: teal; width: 300px; height: 150px; }

代码：修改a标签设计，修改器宽度和高度

上图：可以看到高度和宽度并没有改变

行内-块级标签（内联-块级标签）

多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ background-color: red; width: 400px; height: 100px; } p{ background-color: blue; /*width: 250px;*/ } span{ background-color: violet; } a { background-color: teal; width: 300px; height: 150px; } input{ width: 500px; height: 50px; } button{ width: 250px; height: 100px; } </style></head><body>  <div>我是块级标签</div> <p>段落</p> <br> <br>  <span>我是span，行内标签</span> <span>我是span，行内标签</span> <a href="#">我是超链接</a> <a href="#">我是超链接</a> <br> <br>  <input placeholder="我是输入框"> <button>我是按钮</button></body></html>

代码：
body中新增了换行符和行内-块级标签input、button
style中新增了input、button设计

上图：行内-块级标签是可以在一行显示的，且能调整高度、宽度，这样设计页面更灵活。

修改标签显示类型

CSS中有个display属性，能修改标签的显示类型
none：隐藏标签

block：让标签变为块级标签

inline：让标签变为行内标签

inline-block：让标签变为行内-块级标签（内联-块级标签）

隐藏标签

div{ background-color: red; width: 400px; height: 100px; display: none; }

代码：修改div设计样式，加一个display: none;

上图：将div中的内容和样式给隐藏了。

div{ background-color: red; width: 400px; height: 100px; /*display: none;*/ }

代码：将display: none 注释掉。

将行内标签变成块级标签

span{ background-color: violet; display: block; }

代码：修改span设计样式，新增display: block; 将行内标签修改成块标签

上图：可以看到span本身是个行内标签，不会占据整行的空间，但修改成块标签后就占据整行了。

span{ background-color: violet; width: 300px; height: 150px; display: block; }

代码：修改span设计样式的高度、宽度。

上图：修改成块标签以后，再去修改高度和宽度是可以的，否则如果还是行内标签，修改高度和宽度是不生效的。

span{ background-color: violet; width: 300px; height: 150px; /*display: block;*/ }

代码：注释掉display: block;

将块级标签变成行内标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } div{ background-color: red; width: 400px; height: 100px; /*display: none;*/ display: inline; } p{ background-color: blue; /*width: 250px;*/ } span{ background-color: violet; width: 300px; height: 150px; /*display: block;*/ } a { background-color: teal; width: 300px; height: 150px; } input{ width: 500px; height: 50px; } button{ width: 250px; height: 100px; } </style></head><body>  <div>我是块级标签</div> <div>我是块级标签</div> <p>段落</p> <br> <br>  <span>我是span，行内标签</span> <span>我是span，行内标签</span> <a href="#">我是超链接</a> <a href="#">我是超链接</a> <br> <br>  <input placeholder="我是输入框"> <button>我是按钮</button></body></html>

代码：
修改div标签，新增display: inline;
body中增加一条div标签。

上图：块级标签变成了行内标签，且因为变成了行内标签设计的宽度和高度是不生效的。

行内-块级标签

div{ background-color: red; width: 400px; height: 100px; /*display: none;*/ /*display: inline;*/ display: inline-block; }

上图：变成了行内-块级标签，可以将多个标签放在同一行，且能改变宽度、长度大小。