碎片時間學編程「112]：轉義 HTML

轉義的 HTML 字符進行轉義。

使用String.prototype.replace()方法與匹配需要轉義的字符的正則表達式一起使用。
使用函數的回調，使用字典（對象）將每個轉義字符實例替換為其關聯(lián)的非轉義字符。

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 中使用。

使用String.prototype.replace()方法與匹配需要轉義的字符的正則表達式一起使用。
使用回調函數使用字典對象將每個字符實例替換為其關聯(lián)的轉義字符。

JavaScript

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

示例

escapeHTML('<a href="#">我 & 你</a>');
// '<a href="#">我 & 你</a>'

更多內容請訪問我的網站：https://www.icoderoad.com

么是HTML

Hyper Text Markup Language, 超文本標記語言

標記又稱為標簽(Tag), 一般語法:

它可以有屬性(Attribute):

<tagName attributeName="value">, 如:

標簽也可以不成對地關閉:

HTML文檔由瀏覽器解釋并執(zhí)行。

HTML文檔基本結構

<!DOCTYPE html> ----- 告訴瀏覽器用html5的標準來解釋和執(zhí)行該網頁
<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 : 在當前行的上方插入新行

以上知識能做的效果圖

部分效果

在線咨詢

上一篇：手把手教你編寫Python搶購腳本
下一篇：CSS基礎知識（六）CSS字體樣式及文本樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商