Html中<br>和<p>标签的换行区别

br与p标签区别,br和p标签认识之div+css开发时候常用换行标签
接下来,我们介绍下html中常遇见和常用到的<br />和<p>标签之间的区别及用法,以及使用css对他们控制设置属性样式——扩展知识css换行,css不换行。

一、综合介绍br p
首先,相同之处是br和p都是有换行的属性及意思
其次,区别<br />是只需一个单独使用,而<p>和</p>是一对使用
再次,br标签是小换行提行,p标签是大换行(分段)各行作用。

Br实例,特别注意是br的web标准是<br />,而如果用<br>没有"/"虽然效果相同,但是是不符合w3c标准的。

这个是<p>标签实例,可以看出使用html p标签是换了一个大行,有一个空白行样式。
在未对p设置css样式时候,一般使用一个<p>段落标签效果等于使用两个<br />换行标签效果。
说明如下图示意图:

上图表现的正是两个br标签等于一个p实例

使用p标签的时候需要注意的是需要<p>和</p>是一对配合使用的,可见以上图例即可了解与理解。

当然可以让p标签换行与br换行一样没有空白,可以使用css对对应p标签进行设置margin:0; padding:0;即可实现,实例p{ margin:0; padding:0;},即可实现<p>等于一个<br />。

以上是div css网给大家通俗介绍br“<br />”和p“<p>”标签用法。

Html p与br区别用法知识篇

P和Br都有换行作用,p标签是段落标签,br是强制换行标签。

二、相关html知识 - TOP

1、html p
2、html br

三、<P>和<br />标签区别 - TOP

P是使用一对<p></p>组合标签,而br独立一个<br />闭合标签。

1、P段落标签介绍
通常文章中段落区分明显上段文字与下段文字有一定间隔我们就可以对上下段文字都使用p标签,我们使用p段落标签,在一段文字开始前使用<p>,在这段文字结束加个</p>标签。段落p标签将让上段与下段文字有一定距离,大概是两倍line-height行高距离。
案例效果截图:

p标签演示截图

2、Br强制换行标签介绍
区别于p段落标签,br标签我们用于文段换行排版。换行后上下行文字距离是按line-height行高实现间距。

html <br />强制换行标签演示截图

通常同等初始化下网页里,要实现上下文字间隔相同,2个br换行标签相当于使用p段落标签。

P与br标签对比使用案例截图

html p与html br标签对比区别说明截图

Html P段落与html Br换行对比案例HTML代码片段:

第一行文字 www.divcss5.com<br />
02.第二行文字<br /><br />
03.第三行文字<br />
04.第四行文字
05.<p>第一段文字</p>
06.<p>第二段文字</p>
07.<p>第三段文字</p>

四、Br与p总结 - TOP

我们需要文字小换行时候我们使用br换行标签,如果要实现段落可以使用p标签,这样HTML结构清晰有利于搜索引擎与用户阅读文章,适当的段落与换行布局应该从用户阅读习惯。

相关阅读:
1、Br强制换行
2、P段落换行
3、html标签内title属性换行方法

来源网址:http://www.divcss5.com/html/h78.shtml

原文地址:https://www.cnblogs.com/iamspecialone/p/11156669.html

时间: 2024-10-24 23:39:36

Html中<br>和<p>标签的换行区别的相关文章

H5中section和article标签之间的区别

大家都知道,H5最大的特点就是标签语义化,可以使我们和浏览器更好的理解结构与阅读,section和article就是两只新的语义化标签.这两个标签的使用结构就是都有标题和内容主体,那么如何在使用过程中区分它们呢?下面就说一下我自己的小见解. 我们在阅读一本书籍的时候,通常在目录检索中看到以下结构,如下: 第一章 第一节 第二节 第三节 第二章 第二节 第三节 第三章 第四章 从上面的目录结构中可以看出,第一章和第二章中有小节,第三章和第四章为单独的一片文章.大章节中的小节为该章节的小分支,虽然有

Web前端开发如何利用css样式来控制Html中的h1/h2/h3标签不换行

  H1/H2/H3/H4标题标签常常使用在一个网页中唯一标题.重要栏目.重要标题等情形下. H1在一个网页中最好只使用一次,如对一个网页唯一标题使用.H2.H3.H4标签则可以在一个网页中多次出现,但必要随意添加或添加过度. 在Web前端开发中,经常要使用H1标签对关键字进行优化,可是如果是一行文字中的某个词加上了H1标记,就会换行.可以使用下面的方法,H标签就不会强制换行了.Css控制为一行文字中某个字加上<h2>标签不换行,display:inline; 解释为:内联对象的默认值.用该值

HTML中head与body标签

一 head内常用标签 1.meta相关 #1.指定字符集 <meta charset="gbk"> #2.页面描述 <meta name="Description" content="具体描述..."> #3.关键字:有助于搜索引擎SEC优化,再怎么优化也抵不过竞价排名 <meta name="Keywords" content="网易,邮箱,游戏,新闻"> #4.3秒

HTML5中新加的标签和属性定义

HTML5 <!DOCTYPE> 标签所有主流浏览器都支持 <!DOCTYPE> 声明.<!DOCTYPE> 声明非常重要,它是一种标准通用标记语言的文档类型声明,通过该标签,浏览器能够了解HTML5文档正在使用的HTML规范,<!DOCTYPE> 声明是HTML5文档的起始点,也就是说它必须位于HTML5文档的第一行!标签定义及使用说明:<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前.<!DO

Web全栈-HTML中被废弃的标签

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>40-HTML中被废弃的标签</title> <style type="text/css"> .one { font-weight: bold; } .two { text-decoration: underline; } .

优化vscode格式html代码,保持标签不换行

vscode格式话代码:ctrl+shift+f, 一般情况下,在vscode中格式化代码,都是如图一所示的效果图 一个标签换了好几行,看起来很难看,也不利于修改 图一 如下配置,即可保持标签不换行 vscode中的文件->首选项->设置->工作区->setting.json 在setting.json中 { "vetur.format.defaultFormatter.js": "vscode-typescript", "vetu

ThinkPHP中的内置标签

ThinkPHP中的内置标签 1.内置标签分类 闭合标签 <tag></tag> 开放标签 <tag /> 2.包含文件标签 主要功能:实现对文件的包含(类似于require或include) 基本语法: <include?file="模板文件名"?/> 特别注意:include标签中模板文件的路径是基于项目的入口文件(index.php)位置. 案例:实现项目首页功能 ① 在View视图模板中,创建一个Public文件夹,作为公用文件夹

【js】在js中加HTML注释标签的原因?

<script type="text/JavaScript"> <!-- js代码 //--> //就是这句,为什么还要在-->前加上js注释 </script> 我们偶尔可能会看到上面这样的js注释代码,可是原因是什么呢? 答案: 原因是那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示.为了防止这种情况发生,我们可以使用这样的 HTML 注释标签.注释行末尾的两个正斜杠是 JavaScript 的注释符号,它会阻止 Ja

java中结合struts2自定义标签的使用

java中结合struts2自定义标签的使用 一.建立一个继承于SimpleTagSupport类实现它的doTag方法 1 package com.xiangshang.tag; 2 3 import java.io.IOException; 4 import java.util.List; 5 6 import javax.servlet.jsp.JspException; 7 import javax.servlet.jsp.PageContext; 8 import javax.serv