如何选用正确的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应用会非常容易,愉悦。

相关推荐
速易达网络2 小时前
Bootstrap 5 响应式网站首页模板
前端·bootstrap·html
etsuyou2 小时前
js前端this指向规则
开发语言·前端·javascript
lichong9512 小时前
Android studio 修改包名
android·java·前端·ide·android studio·大前端·大前端++
cai_huaer2 小时前
BugKu Web渗透之 cookiesWEB
前端·web安全
lichong9512 小时前
Git 检出到HEAD 再修改提交commit 会消失解决方案
java·前端·git·python·github·大前端·大前端++
@yanyu6662 小时前
Tomcat安装与HTML响应实战
java·tomcat·html
友友马3 小时前
『 QT 』QT控件属性全解析 (一)
开发语言·前端·qt
不想上班只想要钱3 小时前
vue3+vite创建的项目,运行后没有 Network地址
前端·javascript·vue.js
流***陌3 小时前
手办盲盒抽赏小程序前端功能设计:兼顾收藏需求与抽赏乐趣
前端·小程序
岁月宁静4 小时前
在富文本编辑器中封装实用的 AI 写作助手功能
前端·vue.js·人工智能