HTML段落

最新推荐文章于 2024-07-24 16:53:23 发布

重生之我是Banana

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量694

点赞数

文章标签： html 前端 javascript

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

版权

文章目录

一、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>

结果:

在这里插入图片描述

五、HTML的输出

我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。

对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

重生之我是Banana

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML段落

html、body、div、header、footer、nav、section、p、h1~h6、ul、form、table、tbody、thead、tfoot、tr 等。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。span、a、img、textarea、button、input、lable、select、canvas、audio、video等。是块级元素，浏览器会自动在段落的前后添加空格，将HTML文档分割为若干段落的标签。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
复制链接

扫一扫