HTML段落

最新推荐文章于 2024-09-19 20:20:49 发布

重生之我是Banana

最新推荐文章于 2024-09-19 20:20:49 发布

阅读量781

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/Bananaaay/article/details/129465809

版权

本文介绍了HTML中段落的作用，行级元素（如span、a）、块级元素（如div、p）和行块盒的概念及特点，强调了它们在布局和排列上的区别。同时，讲解了如何使用HTML的标签创建段落和 标签进行换行。

摘要由CSDN通过智能技术生成

文章目录

一、HTML段落的作用

HTML中可以使用标签将文档分成若干段落。

二、行级元素、块级元素和行块盒

行级元素（行盒：inline）

常见的行级元素： span、a、img、textarea、button、input、lable、select、canvas、audio、video等。

特点：

不换行、与其他行级元素共享一行。
由于不用来搭建网页结构，宽高不能改变，自适应宽高。
img、textarea、button、input 可以设置宽高。
行级元素内不能且套块级元素。
水平方向排列。

块级元素（块盒：block）

常见的块级元素： html、body、div、header、footer、nav、section、p、h1~h6、ul、form、table、tbody、thead、tfoot、tr 等。

特点：

宽度默认是100%，独占一行（相对于父元素独占一行，视图区是最大父元素），高度由子元素及其内容决定。也可以设置宽高
宽高。边距可控制
垂直方向排列
可以容纳块级元素、行内元素

行块盒（inline-block）

特点：

有bolck 和 inline的特点
不换行（inline的特点）
高度，行高以及外边距和内边距可控制（block）；
宽度是100%（不是相对浏览器，是相对前一级容器大小）
可以设定一个宽度）
可以放置其他块元素以及行元素（block）

行级元素和块级元素的区别

块级元素可以改变宽高，行级元素不能
块级元素可以容纳行级元素和块级元素，行级元素内不能容纳块级元素
行内水平方向排列，块级垂直方向排列

三、HTML段落使用

说明： HTML中的段落是通过标签（Paragraph）定义的。由于是块级元素，浏览器会自动在段落的前后添加空格，将HTML文档分割为若干段落的标签。文本在一个段落中会根据浏览器的窗口代销自动换行。

格式： 这是一个段落>

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>这是一个段落</p>
    <!--忘记使用结束标签，大多数浏览器也会正确地将HTML显示出来-->
    <!--不建议这么使用-->
    <p>这是一个段落
</body>
</html>

结果：
在这里插入图片描述

四、HTML拆行

说明： 如果希望在不产生一个新段落的情况下进行换行（新行），可以使用 标签。

格式：  段落这这里 进行分行

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>段落这这里<br>进行分行</p>
</body>
</html>