小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
写在开头
这是一篇短文！短文！短文！了解一下，很快的，你又会进步一点噢。(✪ω✪)
在使用 HTML 标签的时候，大部分标签的使用是自由奔放的，可以随意两者去镶嵌使用，但是有几个标签是需要我们注意的，如 <table>、 <ul>、<ol> 与 <select> 这几个标签，其内部能出现的标签是有严格限制的。
举个栗子，<table> 标签内部应该出现 <thead> 、<tbody> 和 <tr> 等标签，<ul> 标签的内部应该出现 <li> 标签。但是，如果强行把 <h1> 标签写下它们内部下，又会发生什么呢？
<!DOCTYPE html>
<html>
<head>
<title>is</title>
</head>
<body>
<table>
<h1>橙某人</h1>
</table>
<ul>
<li>我是li</li>
<h1>我不是li</h1>
</ul>
</body>
</html>
观察上图，我们发现，直接写在 <table> 标签内部下的 h1 标签，竟然被移动到 <table> 标签外了，而写在 <ul> 标签下的 <h1> 虽然没有被移动，但是也没有被 <ul> 本身识别处理，直接就被无视了。
（啊...就这？好吧，我知道了，我以后注意下，不这么写不就行了 ￣▽￣）
一个坑
应该正常来说，大部分人不会去这么写，但是对于用 Vue 的小伙伴来说，我猜可能还是有人踩过坑的，先来看看以下的两段伪代码。
<table>
<my-row v-for="(item, index) in list" :key="index"></my-row>
</table>
// or
<ul>
<my-li v-for="(item, index) in list" :key="index"></my-li>
</ul>
是不是非常非常熟悉？它们有问题？没有问题？一半一半吧！
如果你是在工程化的 Vue 项目中，也就是写到 .vue 文件里的，那没有问题，在编译阶段的时候，Vue 会帮你处理。
但是，如果你是 CDN 形式的项目，那你就要注意了，比如：
<!DOCTYPE html>
<html lang="en">
<head>
<title>is</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.4/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<my-row></my-row>
</table>
</div>
<script>
Vue.component('my-row', {
template: `<h1>橙某人</h1>`
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
那你依然会产生上面的问题，这个问题可能是初学者才比较容易遇到，Vue 官网也有略微提及。点这里
is属性来填坑
Vue 官网既然有提及到这个问题，当然也有对应的解决方法了，答案就是 is属性 。熟悉动态组件的小伙伴可能就对它比较熟了。is属性 经常被用于配合内置组件 component 来实现动态组件的效果。
但它也可以被用来解决这个问题，我们把上面的代码稍微改改：
<!DOCTYPE html>
<html>
<head>
<title>is</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.4/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tr is="my-row"></tr>
</table>
</div>
<script>
Vue.component('my-row', {
template: `<h1>橙某人</h1>`
})
new Vue({
el: "#app"
})
</script>
</body>
</html>
这样子坑就填起来了，虽然是个很微小的问题，但也值得被记录，那就到此为止了，本章完。(◕ˇ∀ˇ◕)
至此，本篇文章就写完啦，撒花撒花。
希望本文对你有所帮助，如有任何疑问，期待你的留言哦。
老样子，点赞+评论=你会了，收藏=你精通了。
