年龄稍大一点的码农可能见证了html的发展,亲历了头声明的变化,但是现在起步就是html5,那么html有哪些不为大家常用的新东西呢,这一章我先来谈谈这个问题。
1 dialog标签——弹窗标签。
弹窗可能前端一路走来,见过很多。甚至现在我们在用各种UI库的时候这个弹窗也是必须的一个功能。
这个标签支持的api:
show: 展示弹窗框,采用决定定位,
showModal: 展示弹窗,并带有遮罩,采用了一个特殊的#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框架
下面是一个简单的基于JS扩展的一个例子
<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'
})
// 这里我们直接获取页面中的 template
const div = document.getElementById('hello')
shadow.appendChild(div.content.cloneNode(true))
}
}
customElements.define('hello-world', HelloWorld)
</script>
3 新增属性
1 hidden可直接隐藏该元素
<div hidden>我是被隐藏的</div>
2 contextmenu允许自定义右键
<div contextmenu="myMenu">右键点击这里显示自定义菜单。</div>
<menu id="myMenu" style="display:none;">
<command onclick="alert('Hello!')">Hello</command>
</menu>
3 draggable和dropzone
draggable 允许被拖动
<img draggable="true" src="image.png" alt="拖动我">
dropzone 拖拽到目标位置可以被复制
<div dropzone="copy">拖动文件到这里以复制文件。</div>
4 spellcheck 语法校验
<input type="text" spellcheck="true">
5 translate 翻译
<p translate="no">这段文字不应被翻译。</p>
6 表单项自动获取焦点
<input type="text" autofocus>