中科白癜风医院康复经历分享 https://baijiahao.baidu.com/s?id=1720357219423649513&wfr=spider&for=pcHTML5中有一些特性需要我们知道。空白折叠现象空白折叠现象有两种：1、就是文字和文字之间的多个空格、换行会被折叠成一个空格。2、标签的“内壁”和文字之间的空格会被忽略。接下来我具体的演示一下，第1种空白折叠现象到底是怎么回事。打开vscode，这次我在之前创建的第三个网页.html里面写代码来演示。我先生成一个HTML5的骨架，如下图：然后我在body里面写一个p标签，在这个p标签里面随便写一段文字：不矜细行，终累大德。我在不矜细行后面打好多个空格，然后再给终累大德换行，如下：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbodyp不矜细行，终累大德。/p/body/html然而在浏览器中的效果如下：不矜细行和终累大德之间仅仅只有一个空格。也就是说，文字和文字之间的空格和换行无论有多么复杂，无论有多少个空格、有多少次换行，都会被折叠成一个空格，这就是空白折叠现象。接下来我再演示一下第2中空白折叠现象到底是怎么回事。我再写一个p标签，里面写上文字：吉光片羽，然后在起始标签和这句话的开头之间打上很多空格，在这句话的结尾和结束标签之间也打上很多空格，如下：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbodyp不矜细行，终累大德。/pp吉光片羽/p/body/html然后在浏览器中，看的的效果如下：这个现象说明，在标签的内壁和文字之间，无论打多少空格，在浏览器中显示时，都不会有空格。所以，空白折叠现象的真正意义是：如果你想给文字换行，无论你在代码里面如何打空格，打换行，都不会起作用，只有通过标签的语义和特性才能实现。也就是说，如果你想给某些文字换行，你就在这些文字外面包裹个p标签就行，但是你在编辑器的代码里面，无论怎么换行，在浏览器中都不会起作用。转义字符为了说明转义字符的作用，我先演示一个小例子：我把前面为了演示空白折叠现象的代码都删除掉，直接在body里面写上这样一句话：我们知道p/p标签对的功能是表示一个段落，如下：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbody我们知道p/p标签对的功能是表示一个段落/body/html然后看到浏览器中的效果是这样：是不是很奇怪？明明我写的是这样一句话：我们知道p/p标签对的功能是表示一个段落，但是在浏览器中显示的结果是这样：p/p没有了，而且从我们知道这四个字后面换行了。这是为什么呢？这是因为浏览器把p/p直接看成HTML的p标签了，这个p/p中没有任何文字，所以在浏览器中对应的位置，就什么都没有，而且p标签具有换行的作用，所以就换行了。那么，如何才能在浏览器中显示出p/p这几个字符，而不是被浏览器当做p标签解析掉呢？这就需要转义字符。常见的转义字符：也就是说，你想在浏览器中显示一个小于号，你就在代码中写lt;，你想在浏览器中显示一个大于号，你就在代码中写gt;，那么你想在浏览器中显示p/p，你就应该在代码中这样写：lt;pgt;lt;/pgt;其实更简单的写法是：lt;plt;/p;!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbody我们知道lt;plt;/p标签对的功能是表示一个段落/body/html此时浏览器显示效果：也就是说，在代码中，我用转义字符把p标签的小于号破坏掉了，这样浏览器就不会把它看做一个标签了。也就是说，浏览器看到代码中直接写小于号、大于号的p/p，就会把它们整体看做是标签，而浏览器看到转义字符lt;和gt;，就会把它看做是小于号和大于号，这样就避免了冲突和歧义：你本来是想在浏览器中直接显示p/p这几个字符，但是如果你在代码中直接这样写，浏览器就会认为是p标签从而给你解析掉，而你用转义字符来表达的话，它就明白这是大于号小于号。再来看看另外两个转义字符nbsp;和copy;nbsp;表示空格，而且不会被折叠，前面说了，在HTML5中，文字之间的多个空格会被折叠，但是你用转义字符nbsp;来表示空格，就不会被折叠。copy;表示版权符号。接下来看看nbsp;和copy;的效果。!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbody我们知道lt;plt;/p标签对的功能是表示一个段落p空格哈喽nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;你好/pp版权符号copy;/p/body/html我在哈喽和你好之间用转义字符nbsp;来表示空格，总共写了8个空格，不会被折叠成1个空格：注意：转义字符不要忘记写分号。HTML注释任何编程语言的代码，注释都是非常重要的。它可以为自己或他人日后阅读代码提供提示。HTML的代码，注释的语法是这样的：!----HTML的注释，在vscode中，可以使用快捷键ctrl+/来输入。HTML的注释，在代码中是这样的：!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0titleDocument/title/headbody!--网页的头部--我们知道lt;plt;/p标签对的功能是表示一个段落!--网页的中部--p空格哈喽nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;你好/p!--网页的底部--p版权符号copy;/p/body/html注释是给程序员自己或者同事看的，浏览器不会去解析，所以用户在浏览器网页中是看不到你写的注释的。
转载请注明：http://www.aierlanlan.com/rzfs/6128.html
