请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-5-28 21:44 编辑
HTML5 允许自定义元素,我在做原生 CSS+HTML 时钟的时候,就是用了自定义元素,只是不够规范。HTML5规定,自定义元素的命名规则需要一个连接符号 - ,例如,my-box 是符合标准的,mybox 是非标准的,这种标准的制定得到绝大多数浏览器的支持,并完美解析。
自定义元素标签与 span 一样,属于行内标签,因此应根据需要决定是否设置 display 属性。如果你想让它能像 div 一样的表现,则建议将其设置为 block 或 flex、grid 等等。试看以下例子:
<style>
my-circle {
margin: auto;
display: grid;
place-items: center;
width: 200px;
height: 200px;
font-size: 2em;
background: olive;
border-radius: 50%;
box-shadow: 0 0 6px gray;
text-shadow: 1px 1px 1px #000;
}
</style>
<my-circle>花潮</my-circle>
自定义元素和标准元素一样,可以拥有自己的 id 和 class 属性。下面给的例子,my-circle 标签有自己的 id 属性,JS 可以通过该属性识别并操纵 my-circle 元素:每一次单击运行后出现的 my-circle 元素,都会改变自定义元素的背景颜色。
<style>
my-circle {
margin: auto;
display: grid;
place-items: center;
width: 200px;
height: 200px;
font-size: 2em;
background: purple;
border-radius: 50%;
box-shadow: 0 0 6px gray;
text-shadow: 1px 1px 1px #000;
}
</style>
<my-circle id="mine">花潮</my-circle>
<script>
mine.onclick = () => mine.style.background = `#${Math.random().toString(16).substr(-6)}`;
</script>
自定义元素的主要作用是让元素的命名更具备语义化属性。
|