如何选用正确的html元素

我们在写原生html的时候，经常会遇到如何选用合适的html元素的问题，因为除了少数有特定native功能的元素，比如<video><canvas><form>等，大多数元素都只是默认css样式不同而已，可以随便切换使用的，比如<div><span><h1><p><header>等等。对于前者自然只能选择特定元素，但是对于后者，就容易出现选择困难症了。有些人就使用div和span这种0样式的基础元素，统一使用，但是这样为了区分彼此，需要设置id和class等，这又遇到了取名困难症，怎么办呢？

根据我多年的开发经验，可以直接创建并使用新的元素。而且非常暴力，不需要提前定义，就是直接写！比如广告栏轮番图容器通常叫banner，那就直接来一个<banner></banner>就好了。简单粗暴，不会有任何报错。它比什么vue脚手架或者原生Web Components都方便，因为不需要提前定义这个新元素，就可以直接使用。

而且这是符合规范的，这种创建出来的元素它的类型叫做HTMLUnknownElement而不是其他的比如HTMLDivElement，也就是未知元素，虽然这种写法比较冷门，但是经过实践，没有任何问题，带来的只有更高的开发效率。官方定义：HTMLUnknownElement - Web APIs | MDN

但是，也不是说完全摒弃掉原生的弱语义元素，当语义符合的时候也要优先使用标准html，比如h1到h6，aside，header，footer，main，article，figure等等。

这种写法虽然只是减少了一些命名困难，但是积少成多，这只是我多年海量开发经验中的其一，往期内容中我已经发表了许多其他的原生开发技巧，当所有技巧融合在一起，开发一个web应用会非常容易，愉悦。