html实体字符

2017-07-08  本文已影响0人  jacktown

为什么在html文档中使用html实体字符?

假设我们在一个html文档中的一个段落元素<p></p>内部放一段文本,如果这段文本的内容是<em></em>(从而这段html代码是<p><em></em></p>),由于这个文本的内容本身就是一个标签,那么浏览器是不会把p元素中的内容当作文本处理的,它只会将其看作一个没有包含任何内容的em标签,那么如何才能达到本意呢?我们可以这样写:<p><em></em></p>,其中<&gt分别表示了字符<>,这样就能把带有特殊字符(如<>&等)的文本显示出来了。

其他表示实体html字符的方法

我们上述的表示法可以叫做用实体名称表示的方法(常见的如用表示非换行空格),起始除此以外我们还可以使用实体的编号(实际就是utf-8下的编码),如非换行空格的编码为160,因此也可写作,160用表示成16进制是A0,因此也可写作&#xA0,以上所有写法都得到一个非换行空格。

一个小应用

我在一个小项目中有这样一个细节,在一个段落引用下方要署名,署名前有一个大约两个中文字符宽度的横线,如何处理呢?

方法一:加两个减号符号,结果两个减号符号中间会有空白,不行;

方法二:在署名文本前添加一个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中引入横线字符,这样写:&#x2014,结果证明是OK的。

相关参考:

上一篇 下一篇

猜你喜欢

热点阅读