精华内容
下载资源
问答
  • br为什么换行

    2020-12-09 18:16:45
    同时,我们也知道,这肯定浏览器默认样式(user agent stylesheet)在作祟,可以从控制台看到浏览器默认样式如下: // user agent stylesheet body { display:block; margin: 8px; } 于是,就想着看看其它H

    背景

    在做富文本编辑器基础研究时,研究到DOM节点的offsetLeft属性,发现当我们不对浏览器默认样式进行如下reset时,该属性的值会比期望的多出8px的宽度(chrome浏览器):

    * {
    	margin: 0;
    }
    

    同时,我们也知道,这肯定是浏览器默认样式(user agent stylesheet)在作祟,可以从控制台看到浏览器默认样式如下:

    // user agent stylesheet
    body {
    	display:block;
    	margin: 8px;
    }
    

    于是,就想着看看其它HTML标签的默认样式是什么,搜索到了chrome内核源码默认CSS样式表

    通过查阅该文档,理解了很多之前无法理解的内容,比如,为什么div是块级元素而span就是内联元素,而为什么我们又可以通过css规则将div改变为内联元素或者把span元素转变为块级元素。

    但是在这份文档里,我却没有看到br标签的默认样式,于是就产生了好奇,是什么样式设置让br可以实现换行的呢?

    经过一番搜索,终于有了答案。

    这个故事,得从头讲起。

    浏览器的组成

    我们常说的浏览器,实际上由以下几部分组成,先看图:

    在这里插入图片描述

    上图箭头表示各个组成部分之间的通讯

    • 用户界面:包括地址输入框、前进返回按钮、书签、历史记录等用户可见和可操作性的区域;
    • 浏览器引擎:负责在用户界面和渲染引擎之间传送指令,或者在本地缓存中读写数据,相当于在各个模块之间跑腿送货的。
    • 渲染引擎:即我们说的浏览器内核。负责解析DOM文档(HTML等)和CSS规则并将内容排版到浏览器中显示有样式的界面,这个是我们下面要讲的。
    • 网络模块: 负责开启网络县城发送请求和下载资源
    • JS引擎: 负责解释和执行JS脚本,典型的如:V8引擎
    • UI后端: 负责绘制基本的浏览器窗口内控件,如按钮、输入框等
    • 数据持久化:负责cookie/localStorage等本地缓存的存储

    渲染引擎

    我们的网页之所以能够有各种各样的布局与样式,全依赖于渲染引擎对我们所写HTMLCSS的解析渲染。

    网页呈现流程

    在这里插入图片描述

    webkit渲染流程

    在这里插入图片描述

    gecko渲染流程
    在这里插入图片描述

    从这3张图我们得到以下信息点:

    • 网络模块负责从网络获取得到HTMLJSCSS等资源
    • 渲染引擎中的HTML解析器与JS引擎分别解释执行HTML内容与JS脚本,生成DOM树。
    • CSS解析器解析CSS规则生成了样式规则集(即 CSSOM树)
    • 渲染引擎根据DOM树与CSSOM树生成样式树
    • 再根据样式树与布局(gecko成为重排,主要是计算后的元素位置)生成渲染树
    • 最后渲染引擎将渲染树绘制到显示设备上。

    既然HTML的作用只是用来构建DOM树,体现结构与语义,那么同理<br> 标签也就只是表示文档某处有一个换行,但是却无法真正实现换行的效果。

    那么这个真正的换行效果是谁实现的呢?答案是——CSS.

    CSS的五种来源

    有这样一段代码:

    <html>
    	<body>
    		<h1>静夜思</h1>
    		<p>
    			<span>窗前明月光</span><br>
    			<span>疑是地上霜</span><br>
    			<span>举头望明月</span><br>
    			<span>低头思故乡</span><br>
    		</p>
    	</body>
    </html>
    

    我们不给它设置任何CSS样式,看看效果:

    在这里插入图片描述

    在没有设置任何样式的情况下,标题依旧加粗加大,内容依旧有换行。

    而这些效果,全部来自于浏览器的默认样式: user agent stylesheet

    说到这里,我们就要说一下网页中CSS的五种来源了:

    在这里插入图片描述

    上面三种样式来源,就是我们在前端开发时经常要编写的部分,而下面两种,则是浏览器内置的,而由下到上,上面一级的样式可以覆盖下面一级的,其中:

    • 浏览器用户自定义样式,是指用户可以通过浏览器选项中提供的功能来设置浏览器默认的一些样式,比如字体,字号等;

    在这里插入图片描述

    • 浏览器默认样式,就是我们上面说的user agent stylesheet,是在我们没有在程序中编写样式,也没有设置浏览器用户自定义样式时,浏览器会去读取一份内置的样式表,利用这份样式表里的样式来渲染页面。

    在这里插入图片描述

    可是在检查元素这里却看不到<br>标签对应的浏览器默认样式,我们查阅浏览器源码中的 默认CSS样式表,也没有发现有 <br> 标签的样式,那它的换行是如何实现的呢?

    br的CSS实现

    几经周折,我们在HTML规范的HTML标签示例中找到了它:

    在这里插入图片描述

    原来 <br>标签的换行是这几条css规则

    br:before       { 
        content: "\A"; 
        white-space: pre-line 
    }
    

    为什么这几条就能实现换行呢?

    我们知道white-space:pre-line的作用是去除空格,保留换行,但它本身并不会添加换行效果,那剩下的就是要弄清楚content: '\A' 是什么意思就知道换行是如何实现的了。

    通过查看规范,CSScontent属性只能用于:after:before伪元素,它接受以下类型的值:

    • 普通字符串,如content: '你好'
    • 元素属性,如 content: attr(alt)
    • 外部资源:如 content:url(http://www.baidu.com/picture/a.jpg)
    • 调用计数器: 如 content: counter(dd) ' '
    • unicode字符: 如 content:'\21e0'
    • 引号标志:如 content: open-quote | close-quote | no-open-quote | no-close-quote

    !!!恍然大悟,原来\Aunicode 字符,那么\Aunicode字符中表示什么呢?

    在这里插入图片描述

    众所周知,unicodeascii的超级,并且unicode码是16进制的,那16进制的A正好是十进制的010,我们终于在这张表里找到了十进制010ascii码对应的字符:\n—— 换行符!!!

    现在我们知道br为什么可以换行了:

    • 利用伪元素创建了一个内容为换行符的元素
    • 利用white-space属性保留了这个换行符

    扩展1: 自己实现换行

    我们完全可以不用br标签,自己实现换行:

    <style>
    span:before {
                content:'\A';
                white-space: pre-line;
            }
            span:after {
                content: '\A';
                white-space: pre-line;
            }
    </style>
    
    <body>
    	A<span>测试下换行</span>B
    </body>
    

    我们看看效果:

    在这里插入图片描述

    扩展2: 小写的a行不行

    由于unicode码是不区分大小写的,所以把 \A 替换成\a也是完全没有问题的,读者可自行测试。

    扩展3:只能使用 pre-line吗

    使用white-space的目的就是保留我们利用content创建的换行符,所以所有可以保留换行的值都是可以的:

    在这里插入图片描述

    由上表知,可以保留换行符的pre,pre-wrap,pre-line,break-spaces都是可以的,读者可自行测试

    扩展4:换行换成回车可以吗?

    我们知道,要生成换行的效果,除了换行符,回车也可以达到相同效果,那把这里的换行符换成回车符(\d)可以吗?

    不可以。

    这涉及到回车和换行的区别,简而言之,这两个词是借鉴于老式打字机:

    *“回车”,告诉打字机把打印头定位在左边界

    “换行”, 告诉打字机把纸向下移一行。

    对应到计算机输入中,回车只是代表把光标定位到行首,并不能实现换行,真正要移动到下一行,要使用换行符

    扩展5:能不能覆盖br标签的样式让她不换行

    既然我们前面讲CSS五个来源时,说上一级的会覆盖下一级,我们可以利用这个特性,将span变成块级元素,将p变成内联元素,那我们在自己的CSS中重写br的伪元素样式,可以改变它的行为吗?

    br::before {
                content: '\d';
                white-space: nowrap;
            }
            br::after {
                content: '\d';
                white-space: nowrap;
            }
    

    经过测试,不可以。

    原因暂时未知,如果读者中有研究出结果的,欢迎分享出来。

    经过对规范文档一番搜索,发现一些蛛丝马迹:

    首先,在HTML规范中关于br标签的说明部分, 我们可以找到以下说明:

    This element has rendering requirements involving the bidirectional algorithm.

    该元素渲染时需要符合双向演化算法的要求

    好,先暂停一下,啥是个双向演化算法?

    我们都知道,一般来说,我们接触的书写语言,无论是汉语还是英语还是德语法语,它的书写顺序都是从左至右的,可是世界是多样的,就有那么一些语言,它的书写方向偏偏就是从右至左的,比如阿拉伯语等,这还不是问题,关键是,这些语言中的数字却又是从左至右书写的,这样就导致这种语言实质上同时包含了两种书写方向,而在计算机中,这些语言的文字都是使用unicode编码来实现的,所以,聪明的大神们设计了针对unicode字符集的双向演化算法来解决这类问题。

    好巧不巧,任何语言的书写都需要换行(这不废话吗),所以br 的渲染也要符合双向演化算法的要求。

    知道了这个,我们再来看双向演化算法的要求

    The mapping of HTML to the Unicode bidirectional algorithm must be done in one of three ways. Either the user agent must implement CSS, including in particular the CSS unicode-bidi, direction, and content properties, and must have, in its user agent style sheet, the rules using those properties given in this specification’s rendering section, or, alternatively, the user agent must act as if it implemented just the aforementioned properties and had a user agent style sheet that included all the aforementioned rules, but without letting style sheets specified in documents override them, or, alternatively, the user agent must implement another styling language with equivalent semantics. [CSS-WRITING-MODES-3] [CSS3-CONTENT]

    HTML到Unicode双向算法的映射必须通过以下三种方式之一完成。 用户代理必须实现CSS,特别是CSS unicode-bidi,direction和content属性,并且必须在其用户代理样式表中具有使用本规范呈现部分中给出的那些属性的规则,或者,** 用户代理必须充当仅实现上述属性的行为,并且具有包括所有上述规则的用户代理样式表,但又不能让文档中指定的样式表覆盖它们,或者,用户代理必须实施另一种样式语言 具有相同的语义 **

    看到上面我用一对星号括起来的内容没,就是说作为用户代理,浏览器有两种选择:

    • 实现规范给出的规则,并且不允许文档中的样式表覆盖他们。【吼吼,被我抓到了】
    • 试试另一种样式语言,具有相同的语义【也可能是这种】

    那我们看看规范给出的规则

    @namespace url(http://www.w3.org/1999/xhtml);
    
    [dir]:dir(ltr), bdi:dir(ltr), input[type=tel i]:dir(ltr) { direction: ltr; }
    [dir]:dir(rtl), bdi:dir(rtl) { direction: rtl; }
    
    address, blockquote, center, div, figure, figcaption, footer, form, header, hr,
    legend, listing, main, p, plaintext, pre, summary, xmp, article, aside, h1, h2,
    h3, h4, h5, h6, hgroup, nav, section, table, caption, colgroup, col, thead,
    tbody, tfoot, tr, td, th, dir, dd, dl, dt, ol, ul, li, bdi, output,
    [dir=ltr i], [dir=rtl i], [dir=auto i] {
      unicode-bidi: isolate;
    }
    
    bdo, bdo[dir] { unicode-bidi: isolate-override; }
    
    input[dir=auto i]:matches([type=search i], [type=tel i], [type=url i],
    [type=email i]), textarea[dir=auto i], pre[dir=auto i] {
      unicode-bidi: plaintext;
    }
    /* see prose for input elements whose type attribute is in the Text state */
    
    /* the rules setting the 'content' property on <br> and <wbr> elements also has bidi implications */
    

    看到第22行的注释了吗?

    它的意思是br标签的content属性可以设置类似以上的规则。

    但同时,br标签又属于段落文本类型,它同样可以实现段落文本的规则

    //……
    br { display-outside: newline; } /* this also has bidi implications */
    //……
    

    遗憾的是,这些都只是规范推荐的规则,浏览器可以不按这些规则实现,只要实现相同的语义就可以。

    那浏览器还有什么选择呢?

    这又引出了另一对概念:替换元素与非替换元素

    说到CSS的模型,我们都知道块级元素和内联元素的区分,但却很少了解,其实还有一种维度的区分方式,就是替换元素和非替换元素。

    所谓替换元素,就是在渲染时,直接用其它内容将它替换掉,所以它并不属于CSS格式化模型,而是独立计算渲染的,但是我们可以通过CSS样式设置它的大小和位置。(这个具体比较复杂,有兴趣可以自行研究下)

    比如,img标签就是典型的替换元素,浏览器在渲染它的时候,实际上是直接拿它的src属性所指向的图片对象将它替换了。 尽管我们查看源码可以看到它的位置仍旧是一个img标签,但是实际上在渲染层面,它已经被替换,

    MDN文档中,我们也可以找到这样的话:

    ==before==after 生成的伪元素 包含在元素格式框内, 因此不能应用在*替换元素上,* 比如<img><br>元素。

    就是这么奇怪,在HTML规范中,替换元素并不包含<br>,但在这里,又说<br>是替换元素,我们只能暂时认为,在浏览器内核实现时,开发人员可能会选择使用这种方式来实现换行:

    ——直接将br标签替换为一个换行符。

    根据可以查阅到的资料,目前就只有这两种猜测:

    • 浏览器实现了规范推荐的规则,这些规则被隐藏起来了,所以查看元素时看不到它的默认规则,同时根据双向演化算法要求禁止我们去覆盖它的规则
    • 浏览器选择了将它实现为替换元素,因为替换元素不属于CSS格式化模型,所以我们无法通过自己编写的CSS规则改变它的行为
    展开全文
  • <br>为什么换行

    千次阅读 2017-12-01 10:42:49
    br中content:"00A"其实在元素内容前面加上换行键,因为换行键的ASCII码0A;然后设置white-space,这个属性用来设置对于元素中空格和换行的处理方式,pre-line则表示合并多个空格并且保留换

    在浏览器的默认样式中,是这样对br设置的

    br:before{content:"A"}
    :before, :after{white-space: pre-line}


    br中content:"00A"其实是在元素内容前面加上换行键,因为换行键的ASCII码是0A;然后设置white-space,这个属性是用来设置对于元素中空格和换行的处理方式,pre-line则表示合并多个空格并且保留换行,以达到换行的目的。如果没有white-space属性设置的话,则不能换行。


    展开全文
  • 自闭合标签,其中 br 就是英文 break(换行) 的缩写。 这里以苏轼的《题西林壁》例,如下图所示 如果想对这首诗进行换行,有两种方法; 方法一:使用两个 p 标签方法二:使用 br 标签 这里我把两种方法在编辑...

     

    在 HTML 中,如果你不想在产生一个新段落的情况下换行,可以使用 br 标签来给文字进行换行。

    <br/> 是自闭合标签,其中 br 就是英文 break(换行) 的缩写。

    这里以苏轼的《题西林壁》为例,如下图所示
    在这里插入图片描述
    如果想对这首诗进行换行,有两种方法;

    方法一:使用两个 p 标签
    方法二:使用 br 标签

    这里我把两种方法在编辑器的效果,以及在浏览器里运行后效果做一下对比

    先来看一下在编辑器的对比效果
    在这里插入图片描述
    再来看一下浏览器显示效果的对比
    在这里插入图片描述
    由浏览器显示效果对比图可知:使用 p 标签会导致段落与段落之间有一定的间隙,而使用 br 标签不会出现这个现象。

    如果你只是想给文字换行,就用 br 标签,如果是两个或者多个段落之间的分段,那就用 p 标签。

    展开全文
  • !... 这前端的显示效果 ...这数据库字段的信息,要显示在html页面中,可是数据库中的<br />标签输出到html页面中就成了<br />要想数据库中的<br/>标签在html页面中起作用,这种情况应该怎么处理?
  • @Override public Object convertFromString(Map context, String[] value, Class toClass) { String[] values = value[0].split...如题,为什么在页面输出<br>的时候 显示的转义字符 而不能换行 而\r\n也不行
  • 在php的换行操作中,\n与<br/>的区别

    万次阅读 2017-03-22 00:26:08
    博主我今天遇见了一个情况就是在php代码中写入\n换行操作符,以为在浏览器那里呈现的输出是换行,没想到却没有。代码和结果如下所示: $name="haha";...为什么会出现这样子的结果呢?我们来从源

        博主我今天遇见了一个情况就是在php代码中写入\n换行操作符,以为在浏览器那里呈现的输出是换行,没想到却没有。代码和结果如下所示:

    <?php
    $name="haha";
    echo "hi,$name";
    echo "\n";
    echo 'hi,$name';
    ?>

    如果将中间的换行操作符改为<br/>,则浏览器呈现出来的结果会换行,如下图所示:


    为什么会出现这样子的结果呢?我们来从源码来进行分析,在火狐浏览器那里右击查看页面源代码,我们会发现,上述第一种情况在源码那里会出现分行,如图所示:


    而上述第二种情况除了出现一个<br>标签外就没有换行,结果如图所示:


    从而可以得出一个结论是:在php中,\n这个换行操作符是对源码进行操作,在浏览器中是无作用的;而<br>这个标签在浏览器中起换行作用,在源码中会出现这个标签,但是在源码中不换行。

    展开全文
  • div强制换行和强制不换行

    千次阅读 2010-08-03 16:56:00
    你把111111111111 改成一段中文试看看, 因为系统把这一大堆111111111认作一个单词了...." ><br />你好朋友朋友朋友我为什么不能看到效果啊<br /></div><br />2、css自动换行<br />div{ word-wrap
  • 有人问我为什么他的Magento商品描述不折行,如上图。我进入他的后台查看他的商品描述如何编辑的折行的,如下图。 magento商品描述后台 于是我google了一把,其他人也遇到类似的问题。使用nl2br( )这个...
  • /br>解析成换行 "\n"会被解析成空白符,空白符就被解析成一个空格 所以,一般情况下:  writeln()和write()的区别,前者多一个空格 还有一种情况下,writeln()会换行 当在<pre></pre><t....
  • php换行操作总结

    2018-07-29 16:05:02
     那就是在php代码中写入\n换行操作符,以为在浏览器那里呈现的输出...和\n都可以,为什么说都可以呢? 这和php文件的执行方式有关.php文件有两种执行方式,一种是通过网页访问,一种是通过命令提示符.    ...
  • response.getWriter().print("<br>"+i);//只有这个能实现换行 response.getWriter().print(i+"<br>");//这个并不能实现换行 response.getWriter().print("<br>");//这个也不能实现换行 请问这是为什么呢?
  • 实现textarea内换行

    万次阅读 多人点赞 2018-03-26 15:07:53
    为什么会出现这个问题呢?因为我在做自己个人网站的留言板时,我想预设好textarea的值,像这样,让用户输入的时候直接另起一行! 不墨墨唧唧了,直接告诉你们,下面两种方法没有用的。 1.企图在html里面加上&...
  • php里 \r\n换行问题

    2015-04-30 09:40:00
    在浏览器输出的hello world ,没有换行是为什么? \n的作用给源代码换行,查看html源代码,就看会到有换行,而浏览器认为它没用的东西,用不用都一样显示。  如果输出给浏览器,就用<br/>...
  • ![图片说明]... 数据由数据库查询得到,想让绑定的数据在分号处换行显示。 试了设置占位符属性,标记类型HTML。数据字段添加<br>标签,<br>直接显示了。 不知道这个绑定是什么原理?有没有办法换行显示...
  • 而在div标签中,则我们所熟悉的样子,空格换行什么的都无效的,要换行,就必须使用<br/>标签。 如果我们通过后端的字符串的方式,存进数据库,再查出来显示到前端,亦或者直接从后端传字符串显示到前端...
  • 我有一个文件需要用ruby正则表达式替换<br><br>文件内容如下<br><br>AAAAAAAAAAAAAAAAAAA<br> */<br>BBBBBBBBBBBBBBBBBBBBBB<br> */<br><br>为什么在多行模式下,用AAAAAAAAAAAAAA.*\*\/ 匹配到的全部而不是<br>...
  • 有的使用“return false”解决了ie的插入<br>问题,但是firefox并没有解决。而且这个问题连fckeditor都没解决。呵呵,不知是否有意之。 可能看了以上的描述还不太明白什么问题。我们做个实验,打开fckeditor切换到...
  • 1.1什么是网页 网站指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合。 网页网站中的一“页”,通常 HTML 格式的文件,它要通过浏览器来阅读。 网页构成网站的基本元素,它...
  • 导出EXCEL换行符br为什么没有起到作用br是html中的换行符,在excel中并不起效,excel中换行是用alt enter强制插入的,或者用vba代码强制换行的。导出EXCEL换行符为什么没有起到作用br是html中的换行符,在excel中并...
  • 个人遇到问题: 在html的富文本框里面输入... 经过text = text.replace(/(\n)/g, "<br/>");使得存入数据库的<br/>...为什么是<br/>,而不是直接存入\n,因为\n经过测试无效,会按照原样输出。 ...
  • <br />标签的强制问题

    2017-09-04 14:03:38
    <br />称为强制换行为什么是强制呢?这个强制怎么体现的?
  • 不知道为什么这次<br/>在JavaScript中无法换行,之后把它换成\n可以的。 换过浏览器,还是没有换行,而是直接输出<br/> 就是很奇怪为什么<br/>无法换行,\n就可以? **附上图片** ![图片说明]...
  • 为什么不压缩 HTML

    2010-11-08 16:01:00
    也就是说换行等空白字符的删除不安全的,有可能导致部分元素的样式产生差异。HTML 元素中,有一个pre , 表示 preformatted text. 里面的任何空白,都不能被删除。HTML 中有可能有 IE 条件注释。这些条件注释...
  • <br />大概意思:之前在编辑框里写条数据,然后点击发送按钮发送过去,现在想增加个功能,把待发送的数据写入txt文件,每行一条,服务端增加一个功能,FileDialog选择这个文件,然后每行读取文件,把读取的内容...
  • VC的文件路径为什么要用双斜杠?

    千次阅读 2010-11-29 20:31:00
    <br />因为 / 在 C/C++/C# 中转义前导字符,例如 /n 代表换行。 如果路径中刚好有类似转义字符开头的,那么就会引起问题,所以路径中的 / 必须用 // 的形式。 如:,d://vc//Ex1//ex1.ini
  • {//消息换行。。 str1 += "/n"; mHandler.sendMessage(mHandler.obtainMessage()); }//发送消息。。 } catch (IOException e) { // TODO Auto-generated catch block e....
  • client.println("<br />"); } client.println("</html>"); break; } if (c == '\n') { // 已经开始一个新行 currentLineIsBlank = true; } else if (c != '\r') { ...
  • 存入oracle数据库,然后利用.net从数据库中取出来,放到html 网页的一个表格列中,为什么就不换行了,而如果放到一个textarea中就会正常的换行.这种情况就需要在控制器里面把 换行符 替换成网页中的<br> (data...
  • html 标签与元素

    2017-06-24 14:30:03
    标签有双标签和单标签,双标签有开始标签和结束标签,例如:“<p></p>”,单标签只有一个标签,例如::“<br>换行标签”。 2、什么是元素? 由标签和内容或者单个标签组成的内容我们称之元素。HTML由不同元素的...

空空如也

空空如也

1 2 3 4
收藏数 67
精华内容 26
关键字:

为什么br是换行