From 0d5ca7465c227b2e0aec474ca4c6017900f55643 Mon Sep 17 00:00:00 2001
From: yutent <yutent.io@gmail.com>
Date: Fri, 22 Sep 2023 10:06:48 +0800
Subject: [PATCH] Update html & raw & svg

---
 html-%26-raw-%26-svg.md | 68 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 67 insertions(+), 1 deletion(-)

diff --git a/html-%26-raw-%26-svg.md b/html-%26-raw-%26-svg.md
index 5d08b7b..8993869 100644
--- a/html-%26-raw-%26-svg.md
+++ b/html-%26-raw-%26-svg.md
@@ -1 +1,67 @@
-Welcome to the Wiki.
\ No newline at end of file
+# html & raw & svg
+> 这几个方法, 功能比较简单, 就是将字符串html模板生成框架需要的模板对象。另外就是配合`string-html-css`插件来实现语法高亮。
+
+
+
+```js
+
+
+// 普通的html结构
+html`<div>hello world!</div>`
+
+// 不可写成
+html(`<div>hello world!</div>`)
+
+
+
+```
+
+由于`SVG`的特殊性, 一些属性不能按`html`节点来处理, 所以这种情况就需要换`svg函数`了
+
+```js
+
+svg`<svg><path d=""></svg>`
+
+// 但是, 如果svg节点是被包在其他html节点中的话, 可以不用svg函数
+// 这样也是可以正常解析的
+html`<div><svg><path d=""></svg></div>`
+
+```
+
+
+以上2个函数, 有个特点, 那就是**节点结构**都是明确的, 无法根据现有的**html文本**来创建模板对象。
+
+```js
+
+let somethingFromOther = '<h1>hello</h1>'
+
+// 这样的结果, 只会原样输出 '<h1>hello</h1>' 字符串, 而不是 h1节点
+html`<div>${somethingFromOther}</div>`
+
+```
+
+这种情况, 就是`raw函数`该出场了。
+
+
+```js
+
+let somethingFromOther = '<h1>hello</h1>'
+
+// 这样即可达到你想要的效果
+html`<div>${raw(somethingFromOther)}</div>`
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+