• :在线测试工具暂时不可用,小伙伴们可以使用本地编辑器来代替,绿叶全新版本正在快马加鞭开发中,比心~

4.7 网页特殊符号

一、网页中的空格

默认情况下,<p>标签的段落文字首行是不会缩进2个字的。例如:

HTML空格

为了使得每个段落首行缩进,我们要在段落前加入空格。空格的HTML代码是“&nbsp;”。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>网页空格</title>
</head>
<body>
    <h3>爱莲说</h3>
    <p>&nbsp; &nbsp;水陆草木之花,可爱者甚蕃。晋陶渊明独爱菊。自李唐来,世人甚爱牡丹。予独爱莲之出淤泥而不染,濯清涟而不妖,中通外直,不蔓不枝,香远益清,亭亭净植,可远观而不可亵玩焉。</p>
    <p>&nbsp; &nbsp;予谓菊,花之隐逸者也;牡丹,花之富贵者也;莲,花之君子者也。噫!菊之爱,陶后鲜有闻;莲之爱,同予者何人? 牡丹之爱,宜乎众矣。</p>
</body>
</html>

在浏览器预览效果如下:

HTML空格 

分析:

网页空格跟你平常排版的空格是不一样的,你不能在网页代码中按入space键来输入空格,这是无效的做法。在HTML中,空格也是要用代码来实现。

空格“&nbsp;”,在前端界又称为“牛逼SP”。一般大家说往<p>标签前加入两个空格,大家都称作“往<p>标签加入两个’牛逼SP’”。现在大家都记住了吧。

二、特殊符号

经常使用word的人都知道,当用输入法没办法输入某个字符(如欧元符号€、英镑符号£等)时,我们都会查找word本身提供的特殊字符。但是对于网页来说,怎样在网页输入这种特殊字符呢?

往网页中输入特殊字符,需要在HTML代码中输入该特殊字符相对应的代码。这些特殊字符相对应的代码都是以“&”开头,以“;”(注意是英文分号喔)结束的。

表1 可输入的特殊符号
特殊符号 名称 代码
" 双引号(英文) &quot;
左单引号 &lsquo;
右单引号 &rsquo;
× 乘号 &times;
÷ 除号 &divide;
< 小于号 &lt;
> 大于号 &gt;
& 与符号 &amp;
长破折号 &mdash;
| 竖线 &#124;

说明:

这些所谓的特殊符号,要想在网页中显示出来,你有两种方式:一是直接在网页HTML代码中输入该字符,二是用在HTML代码输入该字符所对应的代码(如表所示)。

:空格“牛逼SP”也可以看做一个特殊符号。

表2 难输入的特殊符号
特殊符号 名称 代码
§ 分节符 &sect;
© 版权符 &copy;
® 注册商标 &reg;
商标 &trade;
欧元 &euro;
£ 英镑 &pound;
¥ 日元 &yen;
° &deg;

对于表1中的特殊符号,我们可以通过输入法输入,没必要使用代码来实现。而对于表2中的特殊符号,我们可能没办法用输入法输入,那就使用代码进行输入。

举例:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>特殊符号</title>
</head>
<body>
    <p>欧元符号:&euro;</p>
    <p>英镑符号:&pound;</p>
</body>
</html>

在浏览器预览效果如下:

网页特殊符号

说明:

上面特殊符号效果,使用下面代码同样能实现,在浏览器预览效果是一样的:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>特殊符号</title>
</head>
<body>
    <p>欧元符号:€</p>
    <p>英镑符号:£</p>
</body>
</html>
:本站所有教程均为原创,大部分已经与人民邮电出版社合作出版,禁止转载和抄袭,否则绿叶学习网和人民邮电出版社必将追究法律责任,附录:互联网著作权保护法。【法律顾问:张俊律师】

小伙伴们也可以加一下QQ群,在“群文件”中可以获取学习资源以及配套资源,以及跟其他小伙伴交流,站长也在群内。

(1)QQ群:519225291(暗号:lvye

(2)绿叶学习网常见问题解答

回到顶部