为什么在html文档中使用html实体字符?
假设我们在一个html文档中的一个段落元素<p></p>
内部放一段文本,如果这段文本的内容是<em></em>
(从而这段html代码是<p><em></em></p>
),由于这个文本的内容本身就是一个标签,那么浏览器是不会把p元素中的内容当作文本处理的,它只会将其看作一个没有包含任何内容的em
标签,那么如何才能达到本意呢?我们可以这样写:<p><em></em></p>
,其中<
和>
分别表示了字符<
和>
,这样就能把带有特殊字符(如<
、>
、&
等)的文本显示出来了。
其他表示实体html字符的方法
我们上述的表示法可以叫做用实体名称表示的方法(常见的如用表示非换行空格),起始除此以外我们还可以使用实体的编号(实际就是utf-8下的编码),如非换行空格的编码为160,因此也可写作
,160用表示成16进制是A0,因此也可写作
 
,以上所有写法都得到一个非换行空格。
一个小应用
我在一个小项目中有这样一个细节,在一个段落引用下方要署名,署名前有一个大约两个中文字符宽度的横线,如何处理呢?
方法一:加两个减号符号,结果两个减号符号中间会有空白,不行;
方法二:在署名文本前添加一个span.cite_line元素,添加下边框,然后用相对定位将其上移当文本行中间,代码如下:
span.cite_line{
display: inline-block;
position: relative;
bottom: -0.5em;
border-width: 1px;
border-style: solid;
}
这是我当时的方案,可以解决问题。
方法三:借助bootstrap框架,这是那个项目示例源码中的方案。将作者签名放在blockquote>footer
元素中,bootstrap框架会自动在作者署名前加上横线。查看源码如下:
blockquote footer:before{
content: '\2014 \00A0'
}
上面代码中\2014
就是指定了横线字符,十六进制数2014是其对应的编码,后面的A0正好是我们上面说过的非换行空格符的编码。书写方式和在html中有所不同。
方法四:根据方法三,我们知道了横线字符的编码,我们似乎可以直接在html中引入横线字符,这样写:—
,结果证明是OK的。