script标签的type为text/x-template或text/html

第一次见这种写法是在vue文档的渲染函数&JSX章节中，类似以下写法：

    <script type="text/x-template" id="anchored-heading-template">
        <h1>小老弟，有事吗？</h1>
    </script>

当时就对text/x-template值好奇了起来，起初百度还以为是插件的写法为了方便编译，后面慢慢看到了几个大神的解释，自己也明白了一点；

首先我们先明确一点，如果script的标签type为以上两种时，此时script标签内可以正常写html代码（如果用IDE写的同学可以从语法高亮看出并不会报错，甚至还有标签语法补全），但因为写在script标签内，也就不会被显示。明确了这个作用就来说说这种写法的作用；

一般会被用来存储大量的html代码，解决了大量字符串拼接成html的痛点；需要用到的时候到获取到这个节点的内容去使用；

这里贴个vue的例子，也是利用了script去合理的存储html

    <div id="app">
        <anchored-heading content="小老弟，有事吗？"></anchored-heading>
    </div>

    <script type="text/x-template" id="anchored-heading-template">
        <h1>小老弟，有事吗？</h1>
    </script>

    <script>
        let anchoredHeading = Vue.component('anchored-heading', {
            template: '#anchored-heading-template',
            props: ['content']
        })
        new Vue({
            el: document.getElementById('app'),
            components: {
                anchoredHeading
            }
        })
    </script>

如果用于原生就更直接了，直接拿到innerHTML用

document.getElementById('app').innerHTML = document.getElementById('anchored-heading-template').innerHTML

说完以上使用，注意点再转移到这个type的值，难道官方真的还有这种写法，我们看看w3c是怎么说的

好家伙，根本就没有以上两个type的值的存在呀！

那问题来了，我们先看如果type不写，也就是默认为text/javascript的时候，script标签是写js代码的没错；但如果type的值不能被浏览器识别，那script就是一个平平无奇的html标签而已，就跟正常写div嵌套那么普通；

好比我来个diy，根本就不会有什么影响；这里推断text/x-template或text/html可能只是为了语义而已~而且在有些编辑器还具有语法高亮的显示

    <script type="text/diy" id="anchored-heading-template">
        <h1>小老弟，有事吗？</h1>
    </script>