jsp 与 html5

2015-08-08 17:46:24 nevergiveup12345 阅读数 1625

<!DOCTYPE html>
<head>
<meta charset=utf-8>
<title>HTML5</title>
<script src="jquery-1.5.1.js"></script>
<style type="text/css">
#xu{border: 1px solid #ccc;}
</style>
</head>
<body>
<canvas id="xu" width="500" height="400" ></canvas>
<script type="text/javascript">
var canvas = document.getElementById("xu");
var xx = canvas.getContext("2d");
xx.lineWidth = 5;
xx.strokeStyle = "blue";
var flag = false;
//当鼠标按下时
$("#xu").mousedown(function (e) {
alert("aa");
var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标
var mouseY = e.pageY - this.offsetTop;//y
flag = true;
xx.moveTo(mouseX,mouseY);//起始位置
});
//当鼠标抬起时
$("#xu").mouseup(function (e) {
flag = false;
});
//当鼠标移动时
$("#xu").mousemove(function (e) {
var mouseX = e.pageX - this.offsetLeft;//获得当前页面的x坐标
var mouseY = e.pageY - this.offsetTop;//y
if(flag){
xx.lineTo(mouseX,mouseY);//终止位置
xx.stroke();//结束图形
}
});
}
</script>
</body>
</html>

展开阅读原文

jsp 与html5 相关内容

原 HTML5简介

2018-12-24 14:50:12 qq_39660309 阅读数 837

HTML5简介

HTML是互联网上应用最广泛的标记语言。HTML文件就是普通文本+HTML标记，而不同的HTML标记能表示不同的效果。

1.1 HTML到HTML5

虽然W3C努力为HTML制定规范，但由于绝大部分编写HTML页面的人并没有受过专业训练，他们对于HTML规范、XHTML规范也不甚了解，所以他们制作的HTML网页绝大部分都没有遵守HTML规范。
现有的HTML页面大量存在如下4中不符合规范的内容:

元素的标签名大小写混杂的情况。
元素没有合理结束的情况。
元素中使用了属性，但没有制定属性值的情况。
为元素的属性制定属性值时没有使用引号。

而为了解决上述问题W3C推出了HTML5

1.2 HTML5的优势

HTML5并不是一种革新的的升级，而是一种向规范向习惯的妥协，因此HTML5并不会带给开发者过多的冲击，从HTML4到HTML5过渡会非常轻松。

HTML5解决了以下四点问题

解决跨浏览器问题
部标签代替了原来的JavaScript
更明确的语义支持
增强了web应用程序和功能

1.3 HTML5基本结构与语法变化

HTML5完全遵守以下3点规则: 兼容性:HTML5在老版本的浏览器上也可以正常运行。; 实用性:HTML5内部并没有特别复杂的功能，它只封装了那些常用的简单功能; 非革命性:HTML5并不是革命性的发展，他只是一种“妥协式”的规范
语法方面同样进行了变化: 标签不在区分大小写; 元素可以省略结束标签; 支持boolean值的属性; 允许属性值不适用引号

内容参考自《疯狂讲义系列-HTML5+CSS3+javaScript》

展开阅读原文

jsp 与html5 相关内容

原 HTML5与传统HTML的区别

2018-09-27 19:42:52 xiaojinguniang 阅读数 3074

参考

1.什么是 HTML5?

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。

HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

为 HTML5 建立的一些规则:

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

减少对外部插件的需求(比如 Flash)

更优秀的错误处理

更多取代脚本的标记

HTML5 应该独立于设备

开发进程应对公众透明

2.为什么推出HTML5?

传统WEB浏览器存在的问题包括以下三点

WEB浏览器之间的兼容性很低

在某个WEB浏览器上可以正常运行的HTML5、CSS、JavaScript等WEB程序，在另一个WEB浏览器上就不一定能正常运行了。导致这种问题的主要原因就是规范不统一，没有被标准化。在HTML5中，这个问题被解决了。HTML5的使命是详细分析各WEB浏览器所具有的功能，然后以此为基准，要求这些浏览器内部的功能都要符合一个通用标准。
文档结构不够明确

在HTML5之前的HTML版本中，文档结构不够明确、清晰。例如为了要表示标题、正文、之前一般都会使用DIV元素，但是严格来说，DIV元素不是一个能把文档结构表示的很清楚的元素，使用过多会导致阅读时不仔细研究或者很难去看出文档结构，而且对于搜索引擎或者屏幕阅读等等应用程序来说，过多的使用DIV元素，那这些程序从哪到哪算是正文都很难确定。在HTML5中，为了解决这个问题，增加很多和结构相关的元素。
WEB应用程序的功能受到限制

HTML5与WEB应用程序的关系十分薄弱，WEB应用程序的特征是先从网络下载，然后忠实的运行。因此，他会对威胁到用户安全的功能进行限制，目前安全性的保障这方面已经做到了。但是对于WEB应用程序来说，一直以来HTML5真正所做出的贡献是很少的。例如就连想同时上传多个文件都不允许。为了弥补这方便的不足，HTML5已经开始提供各种各样的WEB应用上的新API。各浏览器也在快速封装这些API。 HTML5已经丰富了WEB应用的实现变成了可能。

3.世界知名浏览器厂商对HTML5的支持

微软的IE<分两个阶段IE9以上支持HTML5>
Google的Chrome
苹果的Safari
Opera
Mozilla Firefox

4.新增的元素

新增的结构元素(section、article、aside、header、hgroup、footer、nav、figure)
新增的其他元素(video、audio、embed、mark、 progress、 meter、time、ruby、rt、rp、wbr、canvas、command、details、datagrid、keygen、output、source、menu)
新增的input元素的类型(email、url、number、range、Date 、Search)

标签	描述
<article>	定义 article。
<aside>	定义页面内容之外的内容。
<audio>	定义声音内容。
<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<canvas>	定义图形。
<command>	定义命令按钮。
<datalist>	定义下拉列表。
<details>	定义元素的细节。
<embed>	定义外部交互内容或插件。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<footer>	定义 section 或 page 的页脚。
<header>	定义 section 或 page 的页眉。
<hgroup>	定义有关文档中的 section 的信息。
<keygen>	定义生成密钥。
<mark>	定义有记号的文本。
<meter>	定义预定义范围内的度量。
<nav>	定义导航链接。
<output>	定义输出的一些类型。
<progress>	定义任何类型的任务的进度。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<section>	定义 section。
<source>	定义媒介源。
<summary>	定义 details 元素的标题。
<time>	定义日期/时间。
<track>	定义用在媒体播放器中的文本轨道。
<video>	定义视频。

5，废除的元素

能使用CSS代替的元素(basefont、big、center、font、s、tt、u)等等
不再使用frame框架
只有部分浏览器支持的元素
其他被废除的元素

6.新增的属性

表单相关的属性

email

Url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

链接相关的属性
其他属性

展开阅读原文

jsp 与html5 相关内容

原 HTML5--HTML5元素周期表

2018-07-07 22:40:10 zy2317878 阅读数 1630

写在前面

其实自己看了HTML5好久了，主要标签多少也都有用过了，但是呢，缺少一定的总结。看了一遍相当于再读代码不会陌生，但是只有总结才能把知识整理成自己的，相当于对于这一块知识有了头绪。

HTML5元素周期表

发现HTML5元素周期表，整理一下:有两个版本:

中文:HTML5 标签含义之元素周期表
英文:Periodic Table of the HTML5 Elements

源代码

这个直接可以查看别人的网页源代码，我在这里自己记一下，仅用于个人学习。


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/periodic-table.css">
<script src="js/jquery-2.0.0.min.js"></script>
<title>HTML5元素周期表</title>
</head>
<body>
<div id="content">
<script type="text/javascript">
$(function(){
$('#elements td').click(function(){
var self = $(this).hasClass('active');
$('.active .info').fadeOut();
$('.active').removeClass('active');
if (!self) {
$(this).find('.info').fadeIn();
$(this).addClass('active');
}
});
$('#elements a').click(function(event){
window.open(event.target.href, 'table');
return false;
});
})
</script>
<h1 class="star">Periodic Table of the HTML5 Elements</h1>
<table id="elements" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="">
<div class="element root">
<div class="info" style="display: none;">
<h3>&lt;html&gt;</h3>
<p>Document root element.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/html">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-html-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">html</div>
</div></td><td></td><td></td><td></td><td class="active"></td><td></td><td></td><td class=""></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element table">
<div class="info">
<h3>&lt;col&gt;</h3>
<p>Columns in a table.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/col">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-col-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">col</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3>&lt;table&gt;</h3>
<p>Table of multi-dimensional data.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/table">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-table-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">table</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3>&lt;head&gt;</h3>
<p>First element of the HTML document. Contains document metadata.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/head">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-head-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">head</div>
</div></td><td class="">
<div class="element text">
<div class="info" style="display: none;">
<h3>&lt;span&gt;</h3>
<p>Container with no semantic meaning.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/span">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-span-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">span</div>
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element grouping">
<div class="info">
<h3>&lt;div&gt;</h3>
<p>Container with no semantic meaning.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/div">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-div-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">div</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3>&lt;fieldset&gt;</h3>
<p>Set of form controls grouped by theme.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/fieldset">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-fieldset-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">fieldset</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3>&lt;form&gt;</h3>
<p>Form.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/form">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/forms.html#the-form-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">form</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;body&gt;</h3>
<p>Document content.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/body">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-body-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">body</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;h1&gt;</h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h1</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;section&gt;</h3>
<p>Contains elements grouped by theme, for example a chapter or tab box.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/section">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-section-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">section</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3>&lt;colgroup&gt;</h3>
<p>Defines a group of columns in a table.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/colgroup">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-colgroup-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">colgroup</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3>&lt;tr&gt;</h3>
<p>A row of cells.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/tr">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-tr-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">tr</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3>&lt;title&gt;</h3>
<p>Document title.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/title">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#the-title-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">title</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3>&lt;a&gt;</h3>
<p>Hyperlink.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/a">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-a-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">a</div>
</div></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td>
<div class="element grouping">
<div class="info">
<h3>&lt;pre&gt;</h3>
<p>Text that is preformatted in the HTML code.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/pre">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-pre-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">pre</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3>&lt;meter&gt;</h3>
<p>Control for entering a numeric value in a known range.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/meter">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-meter-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">meter</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3>&lt;select&gt;</h3>
<p>Control for selecting from multiple options.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/select">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/rendering.html#the-select-element-0">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">select</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;aside&gt;</h3>
<p>Content related to surrounding elements that doesn't belong inline, such as a advertising or quotes.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/aside">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-aside-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">aside</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;h2&gt;</h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h2</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;header&gt;</h3>
<p>Navigation or introductory elements for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/header">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-header-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">header</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3>&lt;caption&gt;</h3>
<p>Title of a table.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/caption">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-caption-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">caption</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3>&lt;td&gt;</h3>
<p>Table cell.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/td">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/tabular-data.html#the-td-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">td</div>
</div></td></tr>
<tr>
<td>
<div class="element document">
<div class="info">
<h3>&lt;meta&gt;</h3>
<p>Document metadata that can't be represented with other elements.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/meta">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/semantics.html#meta">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">meta</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3>&lt;rt&gt;</h3>
<p>Annotation of preceding text.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/rt">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-rt-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">rt</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3>&lt;dfn&gt;</h3>
<p>Term being defined by the parent section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-dfn-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">dfn</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3>&lt;em&gt;</h3>
<p>Text that should be emphasised.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/phrase_elements">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-em-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">em</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3>&lt;i&gt;</h3>
<p>Text in a alternate voice or mood, such as a technical term.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/i">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-i-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">i</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3>&lt;small&gt;</h3>
<p>An aside, such as fine print.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/small">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-small-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">small</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3>&lt;ins&gt;</h3>
<p>Text that has been inserted during document editing.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/ins">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/edits.html#the-ins-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">ins</div>
</div></td><td>
<div class="element text">
<div class="info">
<h3>&lt;s&gt;</h3>
<p>Text that is outdated or no longer accurate.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/s">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-s-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">s</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3>&lt;br&gt;</h3>
<p>Line break.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/br">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-br-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">br</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3>&lt;p&gt;</h3>
<p>Paragraph content.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/p">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-p-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">p</div>
</div></td><td>
<div class="element grouping">
<div class="info">
<h3>&lt;blockquote&gt;</h3>
<p>Quote from another source.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/blockquote">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/grouping-content.html#the-blockquote-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">blockquote</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3>&lt;legend&gt;</h3>
<p>Define a name for a fieldset.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/legend">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/forms.html#the-legend-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">legend</div>
</div></td><td>
<div class="element form">
<div class="info">
<h3>&lt;optgroup&gt;</h3>
<p>Group of option.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/optgroup">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/the-button-element.html#the-optgroup-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">optgroup</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;address&gt;</h3>
<p>Contact information for the current article.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/address">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-address-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">address</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;h3&gt;</h3>
<p>Heading for the current section.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/hn/">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-h1-h2-h3-h4-h5-and-h6-elements">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">h3</div>
</div></td><td>
<div class="element sections">
<div class="info">
<h3>&lt;nav&gt;</h3>
<p>Contains a collection of links.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/nav">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/sections.html#the-nav-element">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">nav</div>
</div></td><td>
<div class="element interactive">
<div class="info">
<h3>&lt;menu&gt;</h3>
<p>Set of commands.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/menu">Mozilla</a></li><li><a href="http://www.w3.org/TR/html5/interactive-elements.html#menus">W3C Reference</a></li></ul>
</div>
<div class="icon" style="">menu</div>
</div></td><td>
<div class="element table">
<div class="info">
<h3>&lt;th&gt;</h3>
<p>Table heading.</p> <ul class="links"><li><a href="https://developer.mozilla.org/en/HTML/Element/th">Mozilla</a></li