html5-yuansu.rar_h5周期表_h5超炫元素表_htmlyuansu_www.5/yuansu.com

共5个文件

js：4个

html：1个

版权申诉

2 浏览量 2022-09-20 22:29:59 上传评论收藏 99KB RAR 举报

HTML5元素周期表是一种创新的方式，用于展示HTML5中的各种元素，它借鉴了化学中的元素周期表概念，将HTML5的标签和特性以可视化、动态的形式展现出来。这个"html5-yuansu.rar"压缩包包含了一个名为"html5-元素周期表"的文件，可能是网页文件或者相关资源，旨在呈现一个炫酷且交互式的HTML5元素学习工具。 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，是Web开发的标准之一。它引入了许多新的元素和API，以增强网页的结构、交互性和表现力。在HTML5周期表中，我们可以期待看到这些新元素被分类并按照它们的功能或特性排列，例如结构元素、语义元素、媒体元素、表单元素等。 1. 结构元素：如`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, 和 `<footer>`，这些元素帮助构建网页的基本结构，使内容更加有组织。 2. 语义元素：如`<figure>`, `<figcaption>`, `<mark>`, `<time>`, `<details>`, 和 `<summary>`，这些元素提供了更丰富的语义，有助于搜索引擎理解和解析网页内容。 3. 媒体元素：包括`<audio>`和`<video>`，允许直接在网页内嵌入音频和视频，还有`<source>`和`<track>`来辅助管理和控制媒体资源。 4. 表单元素：如`<input type="date">`, `<input type="range">`, `<datalist>`, `<output>`，以及`<form>`, `<fieldset>`, `<legend>`等，改进了用户输入和数据验证。 5. canvas和svg：`<canvas>`元素提供了动态图形绘制的能力，而`<svg>`则支持矢量图形，两者都能实现炫酷的视觉效果。 6. Web存储和Web Workers：`<localStorage>`和`<sessionStorage>`提供了本地数据存储，Web Workers则让后台处理成为可能，提升了网页性能。 7. Web组件（Web Components）：包括自定义元素（`<element>`）、Shadow DOM和模板（`<template>`），使得创建可重用的、封装良好的UI组件成为可能。 8. 连接性API：如Web Sockets、Server-Sent Events (SSE) 和Fetch API，提供了实时通信和数据获取的新途径。这个"html5-yuansu.rar"压缩包中的"html5-元素周期表"可能包含动画效果，比如粒子分布，这可能通过CSS3动画或JavaScript实现，使得用户在浏览时能体验到卡片漂浮式的动态视觉效果。这种互动性的设计不仅增加了学习的趣味性，也加深了对HTML5元素理解的印象。 HTML5周期表是一个富有创意的学习工具，它将枯燥的HTML元素学习变得生动有趣，通过直观的视觉呈现和动态效果，帮助开发者和初学者更好地掌握和记忆HTML5的新特性。如果你对HTML5感兴趣，这个压缩包中的资源无疑是一个值得一试的教育资源。

资源详情

资源评论

资源推荐

收起资源包目录

html5-yuansu.rar （5个子文件）

html5-元素周期表

CSS3DRenderer.js 6KB

tween.min.js 5KB

index.html 54KB

TrackballControls.js 11KB

three.min.js 402KB

<!doctype html> <html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>three.js css3d - periodic table</title> <style> html, body { height: 100%; } body { background-color: #000000; margin: 0; font-family: Arial; overflow: hidden; } a { color: #ffffff; } #info { position: absolute; width: 100%; color: #ffffff; padding: 5px; font-family: Monospace; font-size: 13px; font-weight: bold; text-align: center; z-index: 1; } #menu { position: absolute; bottom: 20px; width: 100%; text-align: center; } .element { width: 140px; height: 180px; box-shadow: 0px 0px 20px rgba(0,255,255,0.5); border: 1px solid rgba(127,255,255,0.25); cursor: default; } .element:hover { box-shadow: 0px 0px 20px rgba(0,255,255,0.75); border: 1px solid rgba(127,255,255,0.75); } .element .number { position: absolute; top: 20px; right: 20px; font-size: 20px; color: rgba(127,255,255,0.75); } .element .symbol { position: absolute; top: 40px; width: 100%; font-size: 70px; text-align: center; color: rgba(255,255,255,0.75); font-weight: bold; -webkit-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95)); -moz-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95)); -o-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95)); -ms-filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95)); filter: drop-shadow(0px 0px 20px rgba(0,255,255,0.95)); } .element .details { position: absolute; top: 125px; width: 100%; font-size: 18px; text-align: center; color: rgba(127,255,255,0.75); } button { color: rgba(127,255,255,0.75); background: transparent; outline: 1px solid rgba(127,255,255,0.75); border: 0px; padding: 5px 10px; cursor: pointer; } button:hover { background-color: rgba(0,255,255,0.5); } button:active { color: #000000; background-color: rgba(0,255,255,0.75); } </style> </head> <body youdao="bind"> <script src="three.min.js"></script> <script src="tween.min.js"></script> <script src="TrackballControls.js"></script> <script src="CSS3DRenderer.js"></script> <div id="container"><div style="display:none;overflow: hidden; -webkit-transform-style: preserve-3d; -webkit-perspective-origin-x: 50%; -webkit-perspective-origin-y: 50%; width: 1280px; height: 320px; position: absolute; -webkit-perspective: 413.12244319066224px;"><div style="-webkit-transform-style: preserve-3d; width: 1280px; height: 320px; -webkit-transform: translate3d(0px, 0px, 413.12244319066224px) matrix3d(-0.9968612790107727, -0.07797463238239288, 0.013693835586309433, 0, 0.07722374051809311, -0.9196252226829529, 0.38513100147247314, 0, 0.017437251284718513, -0.3849796950817108, -0.9227602481842041, 0, 0, -0.0000048539791350776795, -1856.7379150390625, 1) translate3d(640px, 317px, 0px);"><div class="element" style="background-color: rgba(0, 127, 127, 0.654902); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1380, 900, 0, 1);"><div class="number">1</div><div class="symbol">H</div><div class="details">Hydrogen<br>1.00794</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.713726); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1340, 900, 0, 1);"><div class="number">2</div><div class="symbol">He</div><div class="details">Helium<br>4.002602</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.705882); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1380, 700, 0, 1);"><div class="number">3</div><div class="symbol">Li</div><div class="details">Lithium<br>6.941</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.513726); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1220, 700, 0, 1);"><div class="number">4</div><div class="symbol">Be</div><div class="details">Beryllium<br>9.012182</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.529412); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 540, 700, 0, 1);"><div class="number">5</div><div class="symbol">B</div><div class="details">Boron<br>10.811</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.337255); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 700, 700, 0, 1);"><div class="number">6</div><div class="symbol">C</div><div class="details">Carbon<br>12.0107</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.576471); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 860, 700, 0, 1);"><div class="number">7</div><div class="symbol">N</div><div class="details">Nitrogen<br>14.0067</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.560784); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1020, 700, 0, 1);"><div class="number">8</div><div class="symbol">O</div><div class="details">Oxygen<br>15.9994</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.278431); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1180, 700, 0, 1);"><div class="number">9</div><div class="symbol">F</div><div class="details">Fluorine<br>18.9984032</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.690196); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 1340, 700, 0, 1);"><div class="number">10</div><div class="symbol">Ne</div><div class="details">Neon<br>20.1797</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.541176); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1380, 500, 0, 1);"><div class="number">11</div><div class="symbol">Na</div><div class="details">Sodium<br>22.98976...</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.745098); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, -1220, 500, 0, 1);"><div class="number">12</div><div class="symbol">Mg</div><div class="details">Magnesium<br>24.305</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.286275); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 540, 500, 0, 1);"><div class="number">13</div><div class="symbol">Al</div><div class="details">Aluminium<br>26.9815386</div></div><div class="element" style="background-color: rgba(0, 127, 127, 0.705882); position: absolute; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(-50%, -50%, 0px) matrix3d(1, 0, 0, 0, 0, -1, 0, 0, 0, 0, 1, 0, 700, 500, 0, 1);"><div class="number">14</div><div class="symbol">Si</div><div