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

相关推荐
We་ct1 分钟前
LeetCode 162. 寻找峰值:二分高效求解
前端·算法·leetcode·typescript·二分·暴力
HWL56793 分钟前
uni-app的生命周期
前端·vue.js·uni-app
softbangong5 分钟前
829-批量提取各子文件夹下文件到一级目录
java·服务器·前端·自动化工具·批量文件处理·文件提取工具·文件夹整理
李剑一5 分钟前
别再瞎写 Cesium 可视化!热力图 + 四色图源码全公开,项目直接复用!
前端·vue.js·cesium
SuperEugene7 分钟前
Vue3 + Vue Router + Pinia 路由守卫规范:beforeEach 应做 / 不应做,避死循环、防重复请求|状态管理与路由规范篇
开发语言·前端·javascript·vue.js·前端框架
Greg_Zhong8 分钟前
Css知识之伪类和伪元素
前端·css
Mintopia9 分钟前
GPT-5.3-Codex 底层逻辑是什么,为什么编码强?
前端·人工智能·ai编程
Mintopia11 分钟前
Opus 模型凭什么收费贵,与其他模型对比理由是什么?
前端·人工智能
东东__net12 分钟前
js逆向与谷歌加密库
开发语言·前端·javascript
程序员小郭8320 分钟前
Spring Ai 05 ChatClient Advisor 实战(日志、提示词增强、内容安全)
java·开发语言·前端