碎片时间学编程「112]：转义 HTML

转义的 HTML 字符进行转义。

使用String.prototype.replace()方法与匹配需要转义的字符的正则表达式一起使用。
使用函数的回调，使用字典（对象）将每个转义字符实例替换为其关联的非转义字符。

JavaScript

const unescapeHTML = str =>
  str.replace(
    /&|<|>|'|"/g,
    tag =>
      ({
        '&': '&',
        '<': '<',
        '>': '>',
        ''': "'",
        '"': '"'
      }[tag] || tag)
  );

示例代码：

unescapeHTML('<a href="#">Me & you</a>');
// '<a href="#">Me & you</a>'

更多内容请访问我的网站：https://www.icoderoad.com

产生原因：

我们知道html是如这些标签包含的格式化文本，当用浏览器打开时，浏览器内部的标签解释器把不同的标签解释为不同的含义。这时默认所有内容都是在标签之内的，标签本身并不是内容。如果内容中也有标签怎么办？这是个问题吗？当然。当一个负责讲解html是什么的页面输出时，html页面中必然包含有标签需要输出显示，而浏览器并不能智能的分清楚哪些是需要解释哪些不需要。

解决方法：

其中一个办法就是转义。为了区分需要解释和不需要解释的<>，将不需要解释的<>用转义字符代替，html会将它们解释为<>。和html一样，其他编程语言也有一些内置特殊符号需要用这样的方法处理，比如php中的$，下面列举一些：

如HTML转义符、java 转义符、xml 转义符、 oracle 转义符、sql 转义符、sqlserver 转义符、php 转义符、asp 转义符、vb转义符、 javascript 转义符等等，还有网址中的百分号。

转义字符串有三部分组成:

＆符号+实体名称/编号+；符号

例如，HTML的< >&"©的转义字符串分别是

“＆lt;”或者“＆＃60;”

“＆gt;”或者“＆＃62;”

“＆amp;”或者“＆＃38;”

“＆quot;”或者“＆＃34;”

“＆copy;”或者“＆＃169;”

在高级编程语言中已经将转义字符的转义处理做成了函数。如php中的htmlspecialchars()负责将函数参数转为对应的转义字符串

么是HTML

Hyper Text Markup Language, 超文本标记语言

标记又称为标签(Tag), 一般语法:

它可以有属性(Attribute):

<tagName attributeName="value">, 如:

标签也可以不成对地关闭:

HTML文档由浏览器解释并执行。

HTML文档基本结构

<!DOCTYPE html> ----- 告诉浏览器用html5的标准来解释和执行该网页
<html>
<head> ---- 头部, 可包含meta, title等标签

</head>
<body> ---- 主体, 包含主要内容

</body>
</html>

title

网页标题, 显示在浏览器选项卡的标题栏上!

文本排版标签

h1-h6: 内容标题标签
p: 段落
br: 换行
hr: 水平线
strong: 粗体文本
em: 斜体文本
span: 无任何特殊样式的文本
pre: 预格式标签,其中的内容在页面上带格式渲染
small: 比当前字体小的文本

html特殊字符/转义字符

空格
< 小于
> 大于
© 版权符
" 双引号

html注释

图像标签

<img
src="图像地址"
title="鼠标悬停提示"
alt="图像加载错误时的替代文本"
width="宽度"
height="高度"
/>

图像地址分为2种:

1. 相对地址, 如: img/cc.jpg

2. 绝对地址, 如: http://img.bcd.com/2017/1644232421.jpg

超链接

<a href="链接地址" target="目标窗口">文本|图片</a>

目标窗口:

_self: 目标页面在当前窗口打开

_blank: 目标页面在新窗口中打开

如果是在页面具有frameset/frame/iframe的场景下:

_top: 在顶级窗口中打开

_parent: 在父级窗口中打开

_自定义名称: 在指定的特定窗口中打开

三种用法:

1. 页面间链接
<a href="page/login.html"></a>
2. 锚链接
<a href="#help"></a>
help是本页面中一处id为help的标签, 如: <p id="help">
或者:
help是通过a标签命名的锚记, 如: <a name="help"></a>
3. 功能性链接
唤醒本地安装的外部程序如 outlook/foxmail/qq/msn/aliwangwang...
<a href="mailto:abcdef@qq.com"></a>

div标签

div是一个容器, 常用于页面的布局

标签的分类:

1. 块级标签/块级元素
如: div, h1-h6, p, hr
特征: 独占容器中的一行, 其宽度是容器的100%
2. 行级标签/行级元素
如: span, img, strong, em, a

特征1: 多个行级元素可以同处一行, 其宽度由内容来撑开(auto)

特征2: 大部分行级元素设置其width/height无效

HBuilder常用快捷键

ctrl + D : 删除当前行
ctrl + PgUp : 当前行上移
ctrl + PgDown : 当前行下移
ctrl + / : 注释 | 取消注释
ctrl + shift + F : 整理代码格式
ctrl + C : 复制当前行
ctrl + X : 剪切当前行
ctrl + V : 粘贴
ctrl + Z : 撤消上一步操作
ctrl + S : 保存当前文件
ctrl + shift + S : 保存项目中全部文件
ctrl + Enter : 在当前行的下方插入新行
ctrl + shift + Enter : 在当前行的上方插入新行

以上知识能做的效果图

部分效果

在线咨询

上一篇：对面的新手看过来：爬虫常用代码双手奉送！
下一篇：html开发笔记20-合并单元格-列和行

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商