码迷,mamicode.com
首页 > 其他好文 > 详细

块级标签(行元素)和内联标签(行内元素)

时间:2018-09-17 17:35:26      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:输出   lock   target   标题   img   com   内联   示例   color   

  • 块级标签

如果两个同样的标签写在一起,出现在不同的行上面,这种就是块级标签。

块级标签的特点:

占据整行,自带换行效果。除了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>

输出大概如下:
百度 腾讯 (均为超链接)

 

块级标签(行元素)和内联标签(行内元素)

标签:输出   lock   target   标题   img   com   内联   示例   color   

原文地址:https://www.cnblogs.com/chichung/p/9662873.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!