html页面vue静态页面如何使用组件具名插槽

在HTML页面中使用Vue的具名插槽需要借助Vue的CDN或者其他构建工具，下面是使用Vue的CDN完成HTML页面的具名插槽示例：

首先，需要在HTML页面中引入Vue的CDN：

<!-- 引入Vue的CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

然后，在Vue组件中定义具名插槽。具名插槽需要使用`<slot>`标签，并添加`name`属性来指定插槽的名称：

<!-- 定义Vue组件 -->
<script>
Vue.component('my-component', {
  template: `
    <div>
      <h2>这是子组件</h2>
      <p>子组件的内容</p>
      <slot name="header"></slot>
      <slot name="body"></slot>
      <slot name="footer"></slot>
    </div>
  `
})
</script>

最后，在HTML页面中使用这个Vue组件，并使用`v-slot`指令来指定具名插槽的内容：

<!-- 使用Vue组件 -->
<div id="app">
  <my-component>
    <!-- 使用具名插槽 -->
    <template v-slot:header>
      <h3>这是头部内容</h3>
    </template>
    <template v-slot:body>
      <p>这是主体内容</p>
    </template>
    <template v-slot:footer>
      <p>这是底部内容</p>
    </template>
  </my-component>
</div>

<script>
new Vue({
  el: '#app'
})
</script>

这样，使用具名插槽的内容就会自动显示在Vue组件中对应的插槽位置上。需要注意的是，在使用Vue的CDN时，需要在Vue实例的`el`属性指向的元素中使用Vue组件。