| html | col | table | |||||||||||||||
| head | span | div | fieldset | form | body | h1 | section | colgroup | tr | ||||||||
| title | a | pre | meter | select | aside | h2 | header | caption | td | ||||||||
| meta | rt | dfn | em | i | small | ins | s | br | p | blockquote | legend | optgroup | address | h3 | nav | menu | th |
| base | rp | abbr | time | b | strong | del | kbd | hr | ol | dl | label | option | datalist | h4 | acticle | command | tbody |
| link | noscript | q | var | sub | mark | bdi | wbr | figcaption | ul | dt | input | output | keygen | h5 | footer | summary | thead |
| style | script | cite | samp | sup | ruby | bdo | code | figure | li | dd | textarea | button | progress | h6 | hgroup | details | tfoot |
| img | area | map | embed | object | param | source | iframe | canvas | track | audio | video |
H5元素周期表
还记得化学上的元素周期表么，现在是前端时代了呢，咱给来了H5周期表学学html5吧~~
先看一下效果喽，还是比较方便的哦~~
吼吼来共享一下代码吧~~
H5周期表--来自欣欣博客
- 根元素
- 元数据和脚本
- 嵌入式内容
- 文本级别语义
- 组合内容
- 表单
- 文档章节
- 表格数据
- 交互元素
$(function(){
var $td = $("td");
var $info = $(".info");
var data;
$.ajax({
type:"get",
url:"js/elements.json",
async:true,
success:function(d){
data = d;
}
});
$td.mouseenter(function(e){
$(this).mousemove(function(e){
mousex = e.clientX;
mousey = e.clientY;
var $tdCont = $(this).text();
if($tdCont!= ""){
$(this).addClass("active");
}
for(var attr in data){
var title = data[attr].name;
if(title == $tdCont){
$info.css("display","block");
$info.find("h3").html("<"+title+">");
$info.find("p").html(data[attr].value);
if(mousex > ($(window).width()- $info.width()-10)){
$info.offset({left:mousex - $info.width()-10,top:mousey+10})
}else{
$info.offset({left:mousex +10,top:mousey+10})
}
}
}
})
})
$td.mouseleave(function(){
$(this).removeClass("active");
$info.hide();
})
})[
{"name":"html","value":"Document root element.
文档根元素","type":"html"},
{"name":"col","value":"Columns in a table.
表格中的列","type":"table"},
{"name":"table","value":"Table of multi-dimensional data.
表格","type":"table"},
{"name":"head","value":"First element of the HTML document. Contains document metadata.
HTML文档中的第一个元素。包含文档元数据","type":"head"},
{"name":"span","value":"Container with no semantic meaning.
无语义的容器","type":"inline"},
{"name":"div","value":"Container with no semantic meaning.
无语义的容器","type":"block"},
{"name":"fieldset","value":"Set of form controls grouped by theme.
按用途组合的一组表单控制元素","type":"form"},
{"name":"form","value":"Form.
表单","type":"form"},
{"name":"body","value":"Document content.
文档的主体","type":"title"},
{"name":"h1","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"h2","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"h3","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"h4","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"h5","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"h6","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"section","value":"Contains elements grouped by theme, for example a chapter or tab box.
包含同主题一组元素的容器，例如文档的章节","type":"title"},
{"name":"colgroup","value":"Defines a group of columns in a table.
对表格中的若干列进行组合","type":"table"},
{"name":"tr","value":"A row of cells.
表格中的一行单元","type":"table"},
{"name":"title","value":"Document title.
文档标题","type":"head"},
{"name":"a","value":"Hyperlink.
超链接","type":"inline"},
{"name":"pre","value":"Text that is preformatted in the HTML code.
在HTML代码中预先格式化的文本","type":"block"},
{"name":"meter","value":"Control for entering a numeric value in a known range.
控制在已知范围内输入度量值","type":"form"},
{"name":"select","value":"Control for selecting from multiple options.
有多选值的下拉列表","type":"form"},
{"name":"aside","value":"Content related to surrounding elements that doesn't belong inline, such as a advertising or quotes.
与周围元素相关的内容，但分开显示","type":"title"},
{"name":"h","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"header","value":"Navigation or introductory elements for the current section.
当前章节的导航或引导性元素","type":"title"},
{"name":"caption","value":"Title of a table.
表格的标题","type":"table"},
{"name":"td","value":"Table cell.
表格单元格","type":"table"},
{"name":"meta","value":"Document metadata that can't be represented with other elements.
文档的元数据","type":"head"},
{"name":"rt","value":"Annotation of preceding text.
文本的解释","type":"inline"},
{"name":"dfn","value":"Term being defined by the parent section.
由父级章节定义的项","type":"inline"},
{"name":"em","value":"Text that should be emphasised.
需要强调的文本","type":"inline"},
{"name":"i","value":"Text in a alternate voice or mood, such as a technical term.
斜体的文本","type":"inline"},
{"name":"small","value":"An aside, such as fine print.
更小的旁注信息","type":"inline"},
{"name":"ins","value":"Text that has been inserted during document editing.
在文档编辑过程中插入的文本","type":"inline"},
{"name":"s","value":"Text that is outdated or no longer accurate.
失效或不再准确的文本","type":"inline"},
{"name":"br","value":"Line break.
换行符","type":"block"},
{"name":"p","value":"Paragraph content.
段落内容","type":"block"},
{"name":"blockquote","value":"Quote from another source.
从其它源引用的内容","type":"block"},
{"name":"legend","value":"Define a name for a fieldset.
图例或表的说明","type":"form"},
{"name":"optgroup","value":"Group of option.
选项组","type":"form"},
{"name":"address","value":"Contact information for the current article.
当前文章的联系信息","type":"title"},
{"name":"h","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"nav","value":"Contains a collection of links.
导航链接的容器","type":"title"},
{"name":"menu","value":"Set of commands.
菜单列表","type":"menu"},
{"name":"th","value":"Table heading.
表头","type":"table"},
{"name":"base","value":"Specifies URL which non-absolute URLs are relative to.
定义非绝对的链接地址所相对的默认 URL","type":"head"},
{"name":"rp","value":"Contains semantically meaningless markup for browsers that don't understand ruby annotations.
针对不支持ruby 注音的浏览器，用于注释信息","type":"inline"},
{"name":"abbr","value":"Abbreviation or acronym.
缩写或缩略词","type":"inline"},
{"name":"time","value":"Time defined in a machine readable format.
时间","type":"inline"},
{"name":"b","value":"Stylistically separated text of equal importance, such as a product name.
粗体文本，用于强调","type":"inline"},
{"name":"strong","value":"Text that is important.
重要的文本","type":"inline"},
{"name":"del","value":"Text that has been removed during document editing.
在编辑过程中被删除的文本","type":"inline"},
{"name":"kbd","value":"Example input (usually keyboard) for a program.
由键盘输入的文本","type":"inline"},
{"name":"hr","value":"Thematic break within a paragraph.
水平线/内容主题的变化","type":"block"},
{"name":"ol","value":"Ordered list.
有序列表","type":"block"},
{"name":"dl","value":"List of term-description pairs.
带定义的列表","type":"block"},
{"name":"label","value":"Caption for a form control.
表单控件的标题（标签）","type":"form"},
{"name":"option","value":"Single option within a select control.
下拉列表中的单一选项","type":"form"},
{"name":"datalist","value":"Define sets of options.
定义选项列表","type":"form"},
{"name":"h","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"article","value":"Section of the page content, such as a blog or forum post.页面内容的独立部分，如博客文章、论坛帖子","type":"title"},
{"name":"command","value":"Command the user can perform, such as publishing an article.
用户可以执行的命令，如发表一篇文章","type":"menu"},
{"name":"tbody","value":"Contains rows that hold the table's data.
表格主体","type":"table"},
{"name":"link","value":"Other resources related to the document.
与文档相关的其它资源","type":"head"},
{"name":"noscript","value":"Contains elements that are part of the document only if scripting is disabled.
当脚本被禁用时显示的一部分文档内容","type":"head"},
{"name":"q","value":"Quoted text.
引用的文本","type":"inline"},
{"name":"var","value":"Mathematical or programming variable.
数学或程序变量","type":"inline"},
{"name":"sub","value":"Subscript text.
上标","type":"inline"},
{"name":"mark","value":"Text highlighted for referencing elsewhere.
突出显示的文本","type":"inline"},
{"name":"bdi","value":"Text that is separated from directional formatting of its surroundings.
从周围内容分开，而设置不同的文本方向","type":"inline"},
{"name":"wbr","value":"Opportunity for a line break.
软回车（必要时才回车）","type":"inline"},
{"name":"figcaption","value":"Caption for a figure.
图片的标题，图题","type":"block"},
{"name":"ul","value":"Unordered list.
无序列表","type":"block"},
{"name":"dt","value":"Term which will be described.
带定义的列表中的项目","type":"block"},
{"name":"input","value":"Generic form input.
表单中的输入字段","type":"form"},
{"name":"output","value":"Contains the results of a calculation.
输出的结果","type":"form"},
{"name":"keygen","value":"Generates private-public key pairs.
生成密钥对","type":"form"},
{"name":"h","value":"eading for the current section.
当前章节的标题","type":"title"},
{"name":"footer","value":"Footer of the current section.
当前章节的页脚","type":"title"},
{"name":"summary","value":"Caption of a details element.
dedails元素的标题","type":"menu"},
{"name":"thead","value":"Contains rows with table headings.
表格中的表头行","type":"table"},
{"name":"style","value":"Styling defined inline data.
在文档中定义的样式","type":"head"},
{"name":"script","value":"Inline or linked client side scripts.
内部或外部链接的脚本","type":"head"},
{"name":"cite","value":"Title of a referenced piece of work.
对参考文献等的引用","type":"inline"},
{"name":"samp","value":"Sample output of a program.
程序的样本","type":"inline"},
{"name":"sup","value":"Superscript text.
下标","type":"inline"},
{"name":"ruby","value":"Contains text with annotations, such as pronounciation hints. Commonly used in East Asian text.
东亚文字的注音，如中文的拼音","type":"inline"},
{"name":"bdo","value":"Defines directional formatting for content.
定义内容的排版方向","type":"inline"},
{"name":"code","value":"Fragment of code.
代码的片断","type":"inline"},
{"name":"figure","value":"Contains elements related to single concept, such as an illustration or code example.
独立的内容，如图像、代码等","type":"block"},
{"name":"li","value":"List item.
列表项目","type":"block"},
{"name":"dd","value":"Description for the preceding term.
带定义列表中对项目的描述","type":"block"},
{"name":"textarea","value":"Multiline free-form text input.
多行的文本输入区域","type":"form"},
{"name":"button","value":"A button.
按钮","type":"form"},
{"name":"progress","value":"Control for displaying progress of a task.
运行中的进度控制","type":"form"},
{"name":"h","value":"Heading for the current section.
当前章节的标题","type":"title"},
{"name":"hgroup","value":"Collection of headings for the current section. The highest ranked heading represents the group in the document outline.
当前章节各标题的组合","type":"title"},
{"name":"details","value":"Contains additional information, such as the contents of an accordian view.
附加的详细信息","type":"menu"},
{"name":"tfoot","value":"Contains rows with summary of data.
表格的页脚/脚注行","type":"table"},
{"name":"img","value":"An image.
图像","type":"inlineBlock"},
{"name":"area","value":"Hyperlink area in an image map.
图像映射的超链接区域","type":"inlineBlock"},
{"name":"map","value":"Image map for adding hyperlinks to parts of an image.
在图像的一部分区域定义图像映射用于添加超链接","type":"inlineBlock"},
{"name":"embed","value":"Reference to non-HTML content.
嵌入的非HTML内容","type":"inlineBlock"},
{"name":"object","value":"External resource such as an image, iframe or plugin.
嵌入的外部资源，如图像、iframe或插件","type":"inlineBlock"},
{"name":"param","value":"Parameters for the parent object.
父级对象的参数","type":"inlineBlock"},
{"name":"source","value":"Alternative sources for parent video or audio elements.
父级视频或音频元素的资源","type":"inlineBlock"},
{"name":"iframe","value":"Nested browser frame.
嵌套的框架","type":"inlineBlock"},
{"name":"canvas","value":"Bitmap which is editable by client side scripts.
可以通过客户端脚本编辑的图形（画布）","type":"inlineBlock"},
{"name":"track","value":"Specifies external timing track for media elements.
媒体类元素的外部轨道","type":"inlineBlock"},
{"name":"audio","value":"Audio file.
音频文件","type":"inlineBlock"},
{"name":"video","value":"Video.
视频","type":"inlineBlock"}
]
scss
$labelWidth:52px;
$fontSize:12px;
$htmlColor:#81d183;
$headColor:#6575d3;
$inlineColor:#d1d157;
$blockColor:#d17d47;
$formColor:#55d157;
$titleColor:#8591d3;
$tableColor:#d17d57;
$menuColor:#d1d1d3;
$inlineBlockColor:#d17dd3;
html{
font-family: "microsoft yahei";
}
body{
width: 100%;
height:100%;
overflow: hidden;
background:#1C1D26;
}
li{list-style: none;color: #fff;}
.main{
margin:50px 0;
}
.active{
opacity: 1;
box-shadow: 1px 1px 5px #fff ;
}
a{
text-decoration: none;
color:#FF8215 ;
}
.info{
background:#fff;
box-shadow: 1px 1px 5px #000;
width: auto;
float: left;
padding: 10px;
border-radius: 10px;
position: absolute;
display: none;
}
table{
border: 0;
margin: 0 auto;
tr{
td{
width:$labelWidth;
height:$labelWidth;
border-radius: 10px;
text-align: center;
border:none;
font-size: $fontSize;
word-break: break-all;
opacity: 0.7;
position: relative;
}
}
}
.htmlColor{
background:$htmlColor;
}
.tableColor{
background:$tableColor;
}
.headColor{
background: $headColor;
}
.inlineColor{
background:$inlineColor;
}
.titleColor{
background:$titleColor;
}
.blockColor{
background: $blockColor;
}
.formColor{
background: $formColor;
}
.menuColor{
background: $menuColor;
}
.inlineBlockColor{
background: $inlineBlockColor;
}
.end{
margin-top:100px;
ul{
float: left;
margin-right: 100px;
li{
height:30px;
span{
display: block;
width:20px;
height:20px;
border-radius: 2px;
float:left;
margin-right: 10px;
}
}
}
}
ok~~完工