H5标签周期表（一）

最新推荐文章于 2022-05-22 23:02:37 发布
最新推荐文章于 2022-05-22 23:02:37 发布
阅读量207 收藏
点赞数
文章标签： 嵌入式
原文链接：https://my.oschina.net/u/3695701/blog/1546828
版权

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5元素周期表</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="box1">
        <table class="element" id="element">
            <tr>
                <td class="group1">html</td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="group8">col</td>
                <td class="group8">table</td>
            </tr>
            <tr>
                <td class="group2">head</td>
                <td class="group3">span</td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="group4">div</td>
                <td class="group5">filedset</td>
                <td class="group5">form</td>
                <td class="group6">body</td>
                <td class="group6">h1</td>
                <td class="group6">section</td>
                <td class="group8">colorgroup</td>
                <td class="group8">tr</td>
            </tr>
            <tr>
                <td class="group2">title</td>
                <td class="group3">a</td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="group4">pre</td>
                <td class="group5">meter</td>
                <td class="group5">select</td>
                <td class="group6">aside</td>
                <td class="group6">h2</td>
                <td class="group6">header</td>
                <td class="group8">caption</td>
                <td class="group8">td</td>
            </tr>
            <tr>
                <td class="group2">meta</td>
                <td class="group3">rt</td>
                <td class="group3">dfn</td>
                <td class="group3">em</td>
                <td class="group3">i</td>
                <td class="group3">small</td>
                <td class="group3">ins</td>
                <td class="group3">s</td>
                <td class="group4">br</td>
                <td class="group4">p</td>
                <td class="group4">blockquote</td>
                <td class="group5">legend</td>
                <td class="group5">optgroup</td>
                <td class="group6">address</td>
                <td class="group6">h3</td>
                <td class="group6">nav</td>
                <td class="group7">menu</td>
                <td class="group8">th</td>
            </tr>
            <tr>
                <td class="group2">base</td>
                <td class="group3">rp</td>
                <td class="group3">abbr</td>
                <td class="group3">time</td>
                <td class="group3">b</td>
                <td class="group3">strong</td>
                <td class="group3">del</td>
                <td class="group3">kbd</td>
                <td class="group4">hr</td>
                <td class="group4">ol</td>
                <td class="group4">dl</td>
                <td class="group5">label</td>
                <td class="group5">option</td>
                <td class="group5">datalist</td>
                <td class="group6">h4</td>
                <td class="group6">article</td>
                <td class="group7">command</td>
                <td class="group8">tbody</td>
            </tr>
            <tr>
                <td class="group2">link</td>
                <td class="group2">noscript</td>
                <td class="group3">q</td>
                <td class="group3">var</td>
                <td class="group3">sub</td>
                <td class="group3">mark</td>
                <td class="group3">bdi</td>
                <td class="group3">wbr</td>
                <td class="group4">figcaption</td>
                <td class="group4">ul</td>
                <td class="group4">dt</td>
                <td class="group5">input</td>
                <td class="group5">output</td>
                <td class="group5">keygen</td>
                <td class="group6">h5</td>
                <td class="group6">footer</td>
                <td class="group7">summary</td>
                <td class="group8">thead</td>
            </tr>
            <tr>
                <td class="group2">style</td>
                <td class="group2">script</td>
                <td class="group3">cite</td>
                <td class="group3">samp</td>
                <td class="group3">sup</td>
                <td class="group3">ruby</td>
                <td class="group3">bdo</td>
                <td class="group3">code</td>
                <td class="group4">figure</td>
                <td class="group4">li</td>
                <td class="group4">dd</td>
                <td class="group5">textarea</td>
                <td class="group5">button</td>
                <td class="group5">progress</td>
                <td class="group6">h6</td>
                <td class="group6">hgroup</td>
                <td class="group7">details</td>
                <td class="group8">tfoot</td>
            </tr>
            <tr>
                <td class="hidden"></td>
            </tr>
            <tr>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="hidden"></td>
                <td class="group9">img</td>
                <td class="group9">area</td>
                <td class="group9">map</td>
                <td class="group9">embed</td>
                <td class="group9">object</td>
                <td class="group9">param</td>
                <td class="group9">source</td>
                <td class="group9">iframe</td>
                <td class="group9">canvas</td>
                <td class="group9">track</td>
                <td class="group9">audio</td>
                <td class="group9">video</td>
            </tr>
        </table>
    </div>
    <div class="box2">
        <table class="description">
            <tr>
                <td class="group1 block"></td>
                <td class="text">根元素</td>
                <td class="group2 block"></td>
                <td class="text">文本级别语义</td>
                <td class="group3 block"></td>
                <td class="text">表单</td>
                <td class="group4 block"></td>
                <td class="text">表格数据</td>
            </tr>
            <tr>
                <td class="group5"></td>
                <td class="text">元数据和脚本</td>
                <td class="group6"></td>
                <td class="text">组合内容</td>
                <td class="group7"></td>
                <td class="text">文档章节</td>
                <td class="group8"></td>
                <td class="text">交互元素</td>
            </tr>
            <tr>
                <td class="group9"></td>
                <td class="text">嵌入式内容</td>
            </tr>
        </table>
    </div>
    <div class="box3">
        <div class="showBox" id="showBox"></div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

CSS：

body {
    background-color: #1b1c27;
}
.box2 {
    position: relative;
    top: 80px;
}
.box3 {
    width: 600px;
    height: 800px;
    background-color: darkgrey;
    top: 10px;
    left:1000px;
    position: absolute;
    font-size: 18px;
    font-family: Consolas;
}
.showBox {
    width: 560px;
    height: 760px;
    background-color: whitesmoke;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.element {
    border-collapse:separate;/*是否设置间距*/
    border-spacing:2px 2px;/*行列间距*/
}
.element td {
    border-radius: 10px;
    width: 50px;
    height: 50px;
    word-wrap: break-word;/*是否允许断句*/
    word-break: break-all;/*标明怎么样断句*/
    text-align: center;
    font-family: Consolas;
}
.element .hidden {
    visibility: hidden;
}
.element .group1, .description .group1{
    background-color: #609765;
}
.element .group2, .description .group2{
    background-color: #4c579d;
}
.element .group3,
.description .group3{
    background-color: #999949;
}
.element .group4,
.description .group4{
    background-color: #be7946;
}
.element .group5, .description .group5{
    background-color: #419846;
}
.element .group6, .description .group6{
    background-color: #4c579d;
}
.element .group7, .description .group7{
    background-color: #98989d;
}
.element .group8, .description .group8{
    background-color: #8b5244;
}
.element .group9, .description .group9{
    background-color: #c572c8;
}
.description {
    border-collapse:separate;
    border-spacing:4px 10px;
}
.description td{
    border-radius: 2px;
}
.description .block {
    width: 18px;
    height: 18px;
}
.description .text {
    color: whitesmoke;
}

 

转载于:https://my.oschina.net/u/3695701/blog/1546828

chongnao2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5元素周期表
03-24
像元素周期表的格式，来描述HTML的元素。 表是在HTML5 working draft中的104个元素与两 proposed 元素(marked with an asterisk).
H5元素周期表
欣欣博客
11-02 3670
还记得化学上的元素周期表么，现在是前端时代了呢，咱给来了H5周期表学学html5吧~~ 先看一下效果喽，还是比较方便的哦~~ 吼吼来共享一下代码吧~~ H5周期表--来自欣欣博客 html
基于 HTML5 Canvas 的元素周期表展示
weixin_30797199的博客
07-01 240
前言 之前在网上看到别人写的有关元素周期表的文章，深深的勾起了一波回忆，记忆里初中时期背的“氢氦锂铍硼，碳氮氧氟氖，钠镁铝硅磷，硫氯氩钾钙”、“养（氧）龟（硅）铝铁盖（钙），哪（钠）家（钾）没（镁）青（氢）菜（钛）”，高中时期记的质量守恒、元素守恒、原子守恒、电子守恒，时间过的飞快，转眼我们都已经这么大了。。。 现在我用HT来实现它，HT 有 2D 拓扑和 3D 模型场景，两种形式我都实现...
HTML5——HTML5元素周期表
zy2317878的博客
07-07 6393
写在前面 其实自己看了HTML5好久了，主要标签多少也都有用过了，但是呢，缺少一定的总结。看了一遍相当于再读代码不会陌生，但是只有总结才能把知识整理成自己的，相当于对于这一块知识有了头绪。 HTML5元素周期表 发现HTML5元素周期表，整理一下：有两个版本： 中文：HTML5 标签含义之元素周期表 英文：Periodic Table of the HTML5 Elements ...
H5标签周期表（二）
10-05 245
JS： var tdList = document.getElementById("element").getElementsByTagName("td"); for(var i = 0; i < tdList.length; i++){ //隐藏的td不执行onmouseo...
html5-yuansu.rar_h5周期表_h5超炫元素表_html yuansu_www.5/yuansu.com_元素周期
09-20
HTML5元素周期表是一种创新的方式，用于展示HTML5中的各种元素，它借鉴了化学中的元素周期表概念，将HTML5的标签和特性以可视化、动态的形式展现出来。这个"html5-yuansu.rar"压缩包包含了一个名为"html5-元素周期表...
H5微信小游戏源码-开心消消乐.zip
11-11
【标签】"微信小程序 小游戏 H5 源码"提供了更多的上下文。微信小程序是微信平台推出的一种轻量级应用开发框架，它允许开发者在微信内部创建无需下载安装的应用，而小游戏则是微信小程序的一个特定类别，通常具有...
wechat-h5-boilerplate-master
09-21
标签中的 "h5" 指的是HTML5，是一种超文本标记语言的版本，它增强了网页的交互性和多媒体支持，使得创建动态、响应式的web应用变得更加容易。"egret" 是一个流行的2D游戏开发引擎，也可用于开发H5应用，它提供了丰富...
运动手表演示支持H5Android微信小程序
08-10
描述中的"⌚运动手表演示-支持H5，Android，微信小程序"进一步强调了这个项目是关于运动手表的用户界面展示，它不仅可以在浏览器环境下通过H5运行，还能够适配Android智能手表，并且兼容微信小程序这一在中国非常...
HTML化学元素周期表
06-18
HTML化学元素周期表，JS化学元素周期表，点击某个化学元素符号，显示名称、序号、重量、排列、轨道、融点、沸点等化学性质。 化学元素周期表是1869年俄国科学家门捷列夫(Dmitri Mendeleev)首创的，他将当时已知的63种元素依原子量大小并以表的形式排列，把有相似化学性质的元素放在同一行，就是元素周期表的雏形，在周期表中，元素是以元素的原子序排列，最小的排行最先，表中一横行称为一个周期，一列称为一个族
3D炫酷元素周期表源代码HTML
08-29
HTML源代码，3D元素周期表完整版特效，好看又有科技感
用html5做元素周期表,Web纯前端“旭日图”实现元素周期表
weixin_39753584的博客
06-23 752
一、什么是旭日图旭日图是在Excel 2016中新增的一种图表。有些类似饼图，饼图的优势是可以显示占比。但是饼图只能显示单级数据。旭日图用来表示多层级数据的占比。旭日图以一种分层方式显示，非常适合用来显示层级数据。层次结构中每个级别的比例通过1个圆环表示，离原点越近代表圆环级别越高，最内层的圆表示顶级结构，然后一层一层去看数据的占比情况。我们通过一个简单的示例，初步感受一下旭日图的魅力。季度月份周...
(转载)网站元素周期表
yanghuidang
11-17 352
HTML页面的生命周期
热门推荐
极客神殿
09-19 1万+
页面生命周期：DOMContentLoaded, load, beforeunload, unload HTML页面的生命周期有以下三个重要事件： DOMContentLoaded — 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是 <img>和样式表等外部资源可能并没有下载完毕。 load — 浏览器已经加载了所有的资源（图像，样式表等）。 beforeunload/...
web前端学习
qq_44795449的博客
05-22 519
5.HTML基础结构与属性 HTML 超文本（超出文本的内容）：文本内容 +非文本内容（图片、视频、音频等） 标记（标签）：<单词（标识符）> 写法分为两种：单标签 双标签 创建标签的快捷键：tab +单词 标签是可以上下排列，也可以组合嵌套 例子： <header> hello world 可以实现嵌套 <div> * <div> **</div> <div>***</
有趣的HTML5元素周期表
简生的代码备忘录
08-21 3661
网站在这里:http://joshduck.com/periodic-table.html 点击每一个元素,还会弹出相应的简介. 更有趣的就是, 在下面图显示的文本框中输入相应的网址,然后点击Inspect. H
h5标签、
最新发布
06-01
h5标签对应的标题通常比h4小一级，比h6大一级。h5标签的默认样式通常是比较小的粗体字，通常用于子标题、段落标题等。例如： ``` <h5>这是一个h5标题</h5> ``` 通常情况下，HTML中共有六个级别的标题标签，分别是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值