：外部内容嵌入元素预览pdf在utf-8中，为何汉字占3个字节innerText、textContent和innerHTML三者的区别1. 语法2. 描述3. 与innerText的区别4. 与innerHTML的区别5. 归属区别 ：外部内容嵌入元素HTML 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源（如浏览器插件）提供。 其他用于嵌入各种类型内容的元素还包括：, , </a>, <a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img"><img></a>, <a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/MathML/Element/math"><math></a>, <a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/object"><object></a>, <a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg"><svg></a> 和 <a rel="nofollow" href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video"><video></a>. <a name="ynPkE"></a></p> <h1 id="7cegx5"><a name="7cegx5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>预览pdf</h1><p>使用object标签，或者a、embed、iframe、pdf.js ```html</p> </li></ul> <object type="application/pdf" data="/media/examples/In-CC0.pdf" width="250" height="200"> </object> <p>``` <a name="p9QsH"></a></p> <h1 id="60bp12"><a name="60bp12" class="reference-link"></a><span class="header-link octicon octicon-link"></span>在utf-8中，为何汉字占3个字节</h1><p>UNICODE是万能编码，包含了所有符号的编码，它规定了所有符号在计算机底层的二进制的表示顺序。有关Unicode为什么会出现就不叙述了，Unicode是针对所有计算机的使用者定义一套统一的编码规范，这样计算机使用者就避免了编码转换的问题。Unicode定义了所有符号的二进制形式，也就是符号如何在计算机内部存储的，而且每个符号规定都必须使用两个字节来表示，也就是用16位二进制去代表一个符号，这样就导致了一个问题，英文编码的空间浪费，因为在ANSI中的符号都是一个字节来表示的，而使用了UNICODE编码就白白浪费了一个字节。也就代表着Unicode需要使用两倍的空间去存储相应的ANSI编码下的符号。虽然现在硬盘或者内存都很廉价，但是在网络传输中，这个问题就凸显出来了，你可以这样想想，本来1M的带宽在ANSI下可以代表1024<em>1024个字符，但是在Unicode下却只能代表1024</em>1024/2个字符。也就是1MB/s的带宽只能等价于512KB/s，这个很可怕啊。所以为了解决符号在网络中传输的浪费问题，就出现了UTF-8编码，Unicode transfer format -8 ，后面的8代表是以8位二进制为单位来传输符号的，但是这样又导致了一个问题，虽然UTF-8可以使用一个字节来表示ANSI下的符号，但是对于其它类似汉语的符号，得需要两个字节来表示，所以计算机不知道如何去截取一个符号，也就是一个符号对应的二进制的截取开始位置和截取结束位置。所以为了解决Unicode下的ANSI符号的空间浪费和网络传输下如何截取字符的问题，UTF规定：如果一个符号只占一个字节，那么这个8位字节的第一位就为0。如果为两个字节，那么规定第一个字节的前两位都为1，然后第一个字节的第三位为0，第二个字节的前两位为10，然后如果是三个字节的话，那么第一个字节的前三位为111，第四位为0，剩余的两个字节的前两位都为10。按照这样的算法去思考一个中文字符的UTF-8是怎么表示的：一个中文字符需要两个字节来表示，两个字节一共是16位，那么UTF-8下，两个字节是不够的，因为两个字节下，第一个字节已经占据了三位：110，然后剩余的一个字节占据了两位：10，现在就只剩下11位，与Unicode下的两个字节，16位去表示任意一个字符是相悖的。所以就使用三个字节去表示非ANSI字符：三个字节下，一共是24位，第一个字节头四位是：1110，后两个字节的前两位都是：10，那么24位-8位=16位，刚好两个字节去表示Unicode下的任意一个非ANSI字符。这也就是为什么UTF-8需要使用三个字节去表示一个非ANSI字符的原因了！</p> <p>题外话：<br />然，中国的汉字多达10多万，常用的汉字3500左右[08年统计]，如果用3个字节来表示，一共只有2^16(65535)种可能，不足以表示10多万的汉字。所以中日韩的超大字符集是采用的4个字节来表示的，多达6万多个。但是平时使用超大字符集的概率0.01%都不到。所以我们一般认为日常的中文在UTF-8中占三个字节 即可！<br />多个字节提供的位数超过了所需要的，多余的位以0补全到编码前面</p> <p><a name="bA5K5"></a></p> <h1 id="4x05fk"><a name="4x05fk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>innerText、textContent和innerHTML三者的区别</h1><p><img src="https://cdn.nlark.com/yuque/0/2021/png/1413110/1632643872425-e57f903d-87f7-4929-811e-4c3ce484baa7.png#clientId=ueab3bf27-2d14-4&from=paste&height=841&id=uf09b2cb6&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1682&originWidth=1258&originalType=binary&ratio=1&size=229899&status=done&style=none&taskId=u767231e7-db67-4a1b-a686-332b10b171f&width=629" alt="image.png"><br />Node.textContent 属性表示一个节点及其后代的文本内容。 <a name="EhvGi"></a></p> <h2 id="dxhs3w"><a name="dxhs3w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. 语法</h2><p>let text = element.textContent; element.textContent = “this is some sample text”; <a name="HA0wc"></a></p> <h2 id="1kxh4f"><a name="1kxh4f" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 描述</h2><ul> <li>如果 element 是 Document，DocumentType 或者 Notation 类型节点，则 textContent 返回 null。如果你要获取整个文档的文本以及CDATA数据，可以使用 document.documentElement.textContent。</li><li>如果节点是个CDATA片段，注释，ProcessingInstruction节点或一个文本节点，textContent 返回节点内部的文本内容（即 nodeValue）。</li><li>对于其他节点类型，textContent 将所有子节点的 textContent 合并后返回，除了注释、ProcessingInstruction节点。如果该节点没有子节点的话，返回一个空字符串。</li><li><p>在节点上设置 textContent 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。 <a name="vG1Py"></a></p> <h2 id="fri8i0"><a name="fri8i0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. 与innerText的区别</h2><p>Internet Explorer 引入了 node.innerText。意图类似，但有以下区别：</p> </li><li><p><strong>textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 不会。</strong></p> </li><li><strong>innerText意识到样式</strong>，并且<strong>不会返回隐藏元素的文本</strong>，<strong>而textContent会。</strong></li><li>由于 innerText 受 CSS 样式的影响，<strong>它会触发重排（reflow），但textContent 不会。</strong></li><li><p>与 textContent 不同的是, <strong>在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改</strong>， 不仅会移除当前元素的子节点，<strong>而且还会永久性地破坏所有后代文本节点</strong>（所以不可能再次将节点再次插入到任何其他元素或同一元素中）。 <a name="maOK6"></a></p> <h2 id="2gmh0z"><a name="2gmh0z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4. 与innerHTML的区别</h2><p>正如其名称，innerHTML 返回 HTML 文本。通常，为了<strong>在元素中</strong>检索或写入文本，人们使用innerHTML。但是，<strong>textContent通常具有更好的性能，因为文本不会被解析为HTML。此外，使用textContent可以防止 XSS 攻击。</strong> <a name="e3e9H"></a></p> <h2 id="8zpkm1"><a name="8zpkm1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5. 归属区别</h2></li><li><p>textContent 是 Node 对象的属性；</p> </li><li>innerHTML 是 Element 对象的属性；</li><li>innerText 是 HTMLElement 对象的属性；</li></ul> <p><a name="QXUPU"></a></p> <h1 id="4h3vis"><a name="4h3vis" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /><br /></h1>
