2023.02.27 Html中的块级标签和行内标签（标签转换）

中国人不卷中国人

已于 2023-02-27 15:25:51 修改

阅读量422

点赞数

文章标签： html 前端 Powered by 金山文档

于 2023-02-27 15:19:42 首次发布

本文链接：https://blog.csdn.net/m0_46551050/article/details/129242633

版权

在html中标签可分为块级标签和行内标签

块级标签特点

1. 独占一行

2. 可以换行

3. 可以设置宽高（width:/height:）

4. 可以设置边距（margin和padding）

标签

div：盒子

p：段落

h1-h6：标题

hr：水平分割线

ul>li：无序列表

ol>li：有序列表

dl>dt（表头）>dd：定义列表

table>th>tr>td：表格（包括表格标题caption标签、表格头部thead标签、表格主体tbody标签）

from：表单

行内标签特点

1. 不会独占一行，与其他的行内标签共处一行

2. 不会换行

3. 不可以设置宽高，高度由内容撑开，若没有内容，则高度为空

4. 可以设置外边距（margin）左右（宽）生效，上下（高）不会生效，内边距padding则都会生效

标签

span：用来组合文档中的行内元素

a：超链接

b/strong：字体加粗

small：字体弱化

u：下划线

i/em：倾斜

s/del：删除线

sup/sub：上标/下标

audio：音频

video：视频

textarea：多行文本框

select：下拉菜单

img：图片

button：按钮

特殊标签（行内块标签：属于行内标签，但可以设置宽高和边距：

img、audio、video、label、input、select、textarea、button

标签转换：

行内标签转换为块标签，为行内标签加上display:block 即可正常设置宽高与边距，独占一行；

块级标签转为行内标签，为块级标签加上display:inline

为块标签或者行内标签加上 display:inline-block转换为行内块标签

示例：块转为行内块

<style>
     .box1>div{
           width: 50px;
           height: 50px;
           display:inline-block ;
           border: 2px solid seagreen;
        }
</style>
 
<body>
    <div class="box1">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

————————————————

原文链接：https://blog.csdn.net/lingjiaxiaozila/article/details/126172335

中国人不卷中国人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2023.02.27 Html中的块级标签和行内标签（标签转换）

table>th>tr>td：表格（包括表格标题caption标签、表格头部thead标签、表格主体tbody标签）4. 可以设置外边距（margin）左右（宽）生效，上下（高）不会生效，内边距padding则都会生效。行内标签转换为块标签，为行内标签加上display:block 即可正常设置宽高与边距，独占一行；为块标签或者行内标签加上 display:inline-block转换为行内块标签。块级标签转为行内标签，为块级标签加上display:inline。dl>dt（表头）>dd：定义列表。
复制链接

扫一扫