块级标签(行元素)和内联标签(行内元素)
Posted chichung
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了块级标签(行元素)和内联标签(行内元素)相关的知识,希望对你有一定的参考价值。
-
块级标签
如果两个同样的标签写在一起,出现在不同的行上面,这种就是块级标签。
块级标签的特点:
占据整行,自带换行效果。除了div以外,一般块级标签都会有内外边距,宽度和高度。
常见的块级标签:
<h1-h6></h1-h6>,<p></p>,<div></div>
块元素标签示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>标题1</h1> <h1>标题2</h1> </body> </html> 输出大概如下: 标题1 标题2
-
内联标签
如果两个同样的标签写在一起,出现在同一行上面,这种就是内联标签。
内联标签的特点:
不会占据多余面积。没有内外边距,但是可以通过css来设置。没有宽度和高度。
常见的内联标签:
<span></span>,<a></a>,<img/>
注意:在内联标签中,有一个标签,img标签,是有边距和宽度和高度的,叫行内块级标签。
内联元素标签示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="https://www.baidu.com" target="_blank">百度</a> <a href="https://www.qq.com" target="_blank">腾讯</a> </body> </html> 输出大概如下: 百度 腾讯 (均为超链接)
以上是关于块级标签(行元素)和内联标签(行内元素)的主要内容,如果未能解决你的问题,请参考以下文章