当前位置: 首页> 文旅> 文化 > html5-新标签

html5-新标签

时间:2025/7/12 1:39:06来源:https://blog.csdn.net/u013776700/article/details/141753050 浏览次数:0次

年龄稍大一点的码农可能见证了html的发展,亲历了头声明的变化,但是现在起步就是html5,那么html有哪些不为大家常用的新东西呢,这一章我先来谈谈这个问题。

1 dialog标签——弹窗标签。

弹窗可能前端一路走来,见过很多。甚至现在我们在用各种UI库的时候这个弹窗也是必须的一个功能。

这个标签支持的api:

show: 展示弹窗框,采用决定定位,

showModel: 展示弹窗,并带有遮罩,采用了一个特殊的#top-layer的标记层,会位于整个页面的最顶层,且水平,垂直居中。通过::backdrop伪元素控制其遮罩的透明度。

close: 关闭上述的弹窗。

事件:支持一个close事件,并且在close中可以拿到returnvalue,可用用来判断关闭事件传递的参数。比如你通过那个按钮关闭的弹窗。如果弹窗里面有表单,设置了method="dialog"表单的提交动作可以自动关闭弹窗。这时这个close中可以通过returnValue获取到点击按钮的值。

2 component---自定义标签

这个没错这就是html5原生支持的自定义组件,当然实现起来还是要借助js来完成。当然他里面也能做得到css和js的隔离(通过shadow)。也支持插槽,也有生命周期的概念。当然也有相应的框架和UI组件库。

  <my-element>#shadow-root<style>p { color: red; }</style><p>This is in shadow DOM and styled red.</p></my-element><template id="my-template"><p>My Template</p></template>

参考的地址:

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_components/Using_custom_elements

html lit框架

Lit

下面基于Lit举一个例子

  <div id="app"><div class="hello">i'm from browser</div><hello-world></hello-world><!--模板部分--><template id="hello"><style>.hello {color: red;}</style><div class="hello">hello world</div></template></div><script>class HelloWorld extends HTMLElement {constructor () {super()const shadow = this.attachShadow({mode: 'open'})// 这里我们直接获取页面中的 templateconst div = document.getElementById('hello')shadow.appendChild(div.content.cloneNode(true))}}customElements.define('hello-world', HelloWorld)</script>

关键字:html5-新标签

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: