Html5的使用越来越广泛了，不仅仅在传统的PC端制作网页的界面，现在在移动的APP界面上，在移动端的游戏开发上也使用的越来越多，如同雨后春笋一般。当然，学习Html5（简称：H5）时，得从最开始的基本元素学起，下面一个网页讲述的是H5的基本元素用法：
<!DOCTYPE html>
<html>
<head>
<title>HTML5保留的常用元素</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<style type="text/css">
div div{
display:inline-block;
padding:10px;
background-color:#aaa;
margin:3px;
}
</style>
</head>
<body>
<!--1.基本标签-->
<!--采用标题一到标题六来输出文本-->
<h1>Crazy JAVA</h1>
<h2>Crazy JAVA</h2>
<h3>Crazy JAVA</h3>
<h4>Crazy JAVA</h4>
<h5>Crazy JAVA</h5>
<h6>Crazy JAVA</h6>
<!--输出一条水平线-->
<hr/>
<!--使用span定义三节，不进行换行-->
<span>Tomcat</span>
<span>Jetty</span>
<span>OBA</span>
<!--使用div定义三节，进行换行-->
<div>Tomcat</div>
<div>Jetty</div>
<div>OBA</div>
<!--使用P定义三节-->
<p>Tomcat</p>
<p>Jetty</p>
<p>OBA</p>
<!--2.文本格式化标签-->
<span><b>加粗文本</b></span><br/>
<span><i>斜体文本</i></span><br/>
<span><b><i>加粗斜体文本</i></b></span><br/>
<span><em>被强调的文本</em></span><br/>
<span><strong>粗体文本</strong></span><br/>
<span><big>大号文本</big></span><br/>
<span><small>小号文本</small></span><br/>
<span>X<sup>2</sup></span><br/>
<span>X<sub>2</sub></span><br/>
<span><bdo dir="ltr">从左到右显示</bdo></span><br/>
<span><bdo dir="rtl">从右到左显示</bdo></span><br/>
<!--3.语义相关标签-->
<!--使用q表示一段短的引用文本,会带上引号-->
<p>疯狂Java精神是<q cite="http://www.fkjava.org">疯狂缘自梦想,技术成就辉煌。</q></p>
<!--使用blockquote表示一段長的引用文本-->
<div>
<blockquote>
业精于勤,荒于嬉。<br/>
行成于思,毁于随。<br/>
</blockquote>
</div>
<!--cite常用于表示作品的标题-->
<p>
<cite>《芙蓉镇》</cite>.<cite>《蓝风筝》</cite>是国内很有影响力的电影。
</p>
<!--code使用-->
<p>
下面定义一个Java类<br/>
<code>
public class Cat<br/>
{<br/>
private int name="abc";<br/>
}<br/>
</code>
</p>
<!--pre元素包含预定义格式的文本-->
<pre>
pubic class Cat
{
private int name="bcd";
}
</pre>
<p>
<!--使用abbr定义缩写-->
疯狂Java教育中心的缩写是<abbr title="疯狂教育">fkjy</abbr><br/>
<!--使用address定义地址-->
疯狂软件地址是<address>中国软件基地</address>
</p>
<p>
<!--使用dfn定义专业术语-->
<dfn>HTML</dfn>是一种广为认知标签语言。
</p>
<p>
可通过输入如下命令:<br/>
<kbd>list -l</kbd>
在Linux的shell窗口中查看当前目录下所有文件,目录的详细信息。
</p>
<!--使用samp定义示范文本内容-->
<samp>
我在阅读xxxx图书的第一章
</samp>
<!--使用var变量-->
<var>i</var>.<var>j</var>.<var>k</var>通常用作循环计数变量。
<!--使用del和ins表示修订-->
<p>
Android是一个<del>开发</del><ins>开放</ins>式的手机.平板电脑操作系统。
</p>
<!--4.超链接和锚点-->
<a href="http://www.baidu.com">百度一下,你就知道?</a><br/>
<a href="http://www.baidu.com" target="_blank">百度一下,你就知道?</a><br/>
<a href="http://www.baidu.com"><img src="imgs/1.jpg" alt="百度"/></a>
<!--5.列表相关元素-->
<!--无序-->
<ul>
<li>java</li>
<li>ajax</li>
<li>android</li>
</ul>
<!--有序-->
<ol start="2" type="I">
<li>java</li>
<li>ajax</li>
<li>android</li>
</ol>
<!--定义列表-->
<dl>
<dt>Crazy JAVA</dt>
<dt>Crazy AJAX</dt>
<dt>Crazy ANDROID</dt>
<dt>Crazy XML</dt>
</dl>
<!--6.图像相关-->
<img src="imgs/yzcw.jpg" alt="渔舟唱晚" width="500" height="500" usemap="#test"/>
<map name="test" id="test">
<area shape="circle" coords="57,55,25" href="http://www.baidu.com" alt="BaiDu Search"/>
<area shape="ploy" coords="188,28,185,50,200,74,224,72,246,51" href="http://www.google.com" alt="Google Search"/>
</map>
<!--7.表格相关元素-->
<table style="width:400px" border="1">
<caption><b>疯狂Java体系图书</b></caption>
<tr>
<td>书名</td>
<td>作者</td>
</tr>
<tr>
<td>疯狂Java</td>
<td>LiG</td>
</tr>
<tr>
<td>轻量级JavaEE</td>
<td>LiG</td>
</tr>
</table>
<!--跨行.跨列的表格-->
<table style="width:240px" border="1">
<tr>
<td rowspan="2">跨兩行的單元格</td>
<td>普通單元格</td>
</tr>
<tr>
<td>普通單元格</td>
</tr>
<tr>
<td colspan="2">跨兩列的單元格</td>
</tr>
<tr>
<td>普通單元格</td>
<td>普通單元格</td>
</tr>
</table>
<!--使用thead 。tbody,tfoot单元格-->
<table style="width:400px" border="1">
<caption><b>疯狂Java</b></caption>
<thead>
<tr>
<td>书名</td>
<td>作者</td>
</tr>
</thead>
<tbody>
<tr>
<td>XML</td>
<td>LiG</td>
</tr>
<tr>
<td>疯狂Java</td>
<td>LiG</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:right">总计2本</td>
</tr>
</tfoot>
</table>
<!--为指定列设置属性值-->
<table style="background-color:black;
border-collapse:separate;
border-spacing:1px;">
<caption><b>疯狂Java体系图书</b></caption>
<!--定义所有列的背景色是白色-->
<colgroup style="background-color:#FFF;">
<!--设置第一列的列度-->
<col style="width:160px;"/>
<!--定义横跨两列,设置两列各宽100px-->
<col span="2" style="width:100px;"/>
</colgroup>
<thead>
<tr>
<td>书名</td>
<td>作者</td>
<td>价格</td>
</tr>
</thead>
<tbody>
<tr>
<td>XML</td>
<td>LiG</td>
<td>100</td>
</tr>
<tr>
<td>疯狂Java</td>
<td>LiG</td>
<td>99</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align:right">总计2本</td>
</tr>
</tfoot>
</table>
<!--8.框架相关元素-->
<iframe src="http://wwww.baidu.com" width="200px" height="120px"></iframe>
<hr/>
<!--HTML5新增的屬性-->
<!--1.contentEditable屬性,指定contentEditable=“true”表示該元素是可编辑的-->
<div id="target" contentEditable="true" style="width:500px;border=1px solid black">
疯狂Java讲义
<!--contentEditable属性是可继承的-->
<table style="width:420px;border-collapse:collapse;" border="1">
<thead>
<tr>
<td>书名</td>
<td>作者</td>
</tr>
</thead>
<tbody>
<tr>
<td>XML</td>
<td>LiG</td>
</tr>
<tr>
<td>疯狂Java</td>
<td>LiG</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align:right">总计2本</td>
</tr>
</tfoot>
</table>
</div>
<!--2.designMode属性 相当于一个全局的contentEditable属性-->
<!--3.hidden属性(IE下未隐藏,Chrome下正常)-->
<button onClick="var target=document.getElementById(‘target‘);target.hidden=!target.hidden;">显示与隐藏</button><br/>
<!--4.spellcheck属性-->
<textarea spellcheck="true" rows="3" cols="40"></textarea>
<!--5.文档结构元素-->
<article>
<header>
<h1>学习Android必须先学习Java?</h1>
<div>作者:johson</div>
</header>
<p>
这个还真是必须得学!
</p>
<section>
<article>
<header>
<h1>还是得学习Java</h1>
<div>作者:abc</div>
</header>
<p>
虽然android不一定适用Android开发,还可以选择其他语言开发.
</p>
<article>
<article>
<header>
<h1>Java是基础</h1>
<div>作者:heidi</div>
</header>
<p>
Java是基础,学好Java再学习Android事半功倍!
</p>
<article>
</section>
<footer>
以上帖子和回复只代表个人观点。
</footer>
<aside>
<h3>关于楼主</h3>
<section>
<div>用户组:编程摸索</div>
<div>注册时间:2012-08-20</div>
<div>最后发表时间:2012-09-20</div>
</section>
</aside>
</article>
<aside>
<h3>页面导航</h3>
<nav>
<ul>
<li><a href="#">查看本页</a></li>
<li><a href="http://www.baidu.com">BaiDu</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</nav>
</aside>
<figure style="border:2px solid black;padding:5px;width:500px">
<figcaption>
<b>搜索引擎</b>
<img src="imgs/1.jpg" alt="BaiDu"/>
<img src="imgs/1.jpg" alt="Google"/>
</figcaption>
</figure>
<!--语义相关元素-->
<article>
<header>
<h2>疯狂软件将引入<mark>HTML5></mark>相关课程</h2>
</header>
<p>
0 <mark>HTML5</mark>是下一代HTML规范,疯狂软件计划在<time datetime="2012-08-20">2012年8月</time>
引入<mark>HTML5</mark>相关课程,疯狂软件上课时间是<time datetime="09:00">早上9点</time>到
<time datetime="17:30">下午5点半</time>，疯狂软件将于龙年的<time datetime="2012-01-30DT09:00">正月初八</time>
正式上课,也就是<time>2012-01-30</time>
</p>
</article>
<!---只有Chrome支持如下两个属性-->
<details>
<summary>芙蓉镇</summary>
芙蓉镇是一部好片子,值得一看!
</details>
<p>
<!--两个特殊功能的元素-->
当前的行车速度是<meter value="200" min="0" max="220" low="0" high="160">200</meter>千米/小时.<br/>
任务完成是<progress value="30" max="100">30/100</progress><br/>
</p>
<br/>
<!--HTML5新增的拖放API-->
<div id="source" style="width:80px;height:80px;border:1px solid black;background-color:#bbb;" draggable="true">
瘋狂軟件教育
</div>
<script type="text/javascript">
var source=document.getElementById(‘source‘);
source.ondragstart=function(evt){
//让拖动操作携带数据
evt.dataTransfer.setData("text/plain","www.baidu.com");
}
document.ondragover=function(evt){
//取消事件的默认行为
return false;
}
document.ondrop=function(evt){
source.style.position="absolute";
source.style.left=evt.pageX+"px";
source.style.top=evt.pageY+"px";
//取消事件默认行为
return false;
}
</script>
<!--通过DataTransfer对象，可以让拖放操作完成更多的功能
下面实现一个允许通过拖放来添加、删除收藏夹的功能：
-->
<div style="width:600px;border:1px solid black;">
<h2>可将喜欢的项目拖入收藏夹</h2>
<div draggable="true" ondragstart="dsHandler(event)">百度</div>
<div draggable="true" ondragstart="dsHandler(event)">谷歌</div>
<div draggable="true" ondragstart="dsHandler(event)">淘宝</div>
<div draggable="true" ondragstart="dsHandler(event)">微博</div>
</div>
<div id="dest" style="width:400px;height:400px;border:1px solid black;float:left;">
<h2 ondragleave="return false">收藏夹</h2>
</div>
<img id="gb" draggable="false" src="imgs/3.jpg" alt="垃圾桶" style="width:50px;height:50px;float:left;"/>
<script type="text/javascript">
var dest=document.getElementById(‘dest‘);
var myicon=document.createElement(‘img‘);
myicon.src="imgs/1.jpg";
var dsHandler=function(evt){
var dt=evt.dataTransfer;
//改变拖动图标
dt.setDragImage(myicon,0,0);
dt.setData("text/plain","<item>"+evt.target.innerHTML);
}
//当元素被拖放到收藏夹上所触发的行为
dest.ondrop=function(evt){
var text=evt.dataTransfer.getData("text/plain");
if(text.indexOf(‘<item>‘)==0){
//创建一个新的div元素
var newEle=document.createElement("div");
newEle.id=new Date().getUTCMilliseconds();
newEle.draggable="true";
newEle.innerHTML=text.substring(6);
newEle.ondragstart=function(evt){
evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);
}
dest.appendChild(newEle);
}
}
//当元素被拖到垃圾箱上所触发的行为
var gb=document.getElementById(‘gb‘);
gb.ondrop=function(evt){
var id=evt.dataTransfer.getData("text/plain");
if(id.indexOf(‘<remove>‘)==0){
var target=document.getElementById(id.substring(8));
dest.removeChild(target);
}
}
document.ondragover=function(evt){
return false;
}
document.ondrop=function(evt){
return false;
}
</script>
<!--通过设置DataTransfer对象的effectAllowed、dropEffect属性可以控制拖放行为，effectAllowed用于控制被拖动元素的拖动行为，通常放在ondragstart事件监听器中，dropEffect则控制被放入目标组件的行为，因此通常放在ondragover事件监听器中
如果dropEffect设置的拖放行为不在effectAllowed属性设置的多个拖放行为之内，拖放操作将会失败
-->
<div id="test" draggable="true" style="width:80px;height:60px;border:1px solid black">
拖动我
</div>
<script type="text/javascript">
var test=document.getElementById("test");
test.ondragstart=function(evt){
var dt=evt.dataTransfer;
dt.effectAllowed=‘link‘;
dt.setData("text/plain","www.baidu.com");
}
</script>
<!--HTML表单相关元素和属性-->
<!--一、HTML原有表单及表单控件
1.表单元素
form的相关属性：
action---表单被提交到哪个地址
method--GET/POST请求类型
enctype---对表单内容编码所采用的字符集
---application/x-www-form-urlencoded（默认编码方式，URL编码格式）
---multipart/form-data（二进制方式处理表单--文件上传）
---text/plain（直接通过表单发送邮件）
name---指定表单唯一名称
target---打开目标URL方式
有name属性的会生成请求参数，否则不会生成；
表单属性设置为disabled则不会被提交
2.input元素
size指定元素宽度，maxlength指定最大输入字符数
3.label元素
当用户单击<label>元素所生成的标签时，该标签关联的表单控件元素会获得焦点
让标签和表单控件关联有两种方式：
隐式关联：使用for属性
显式关联：将表单元素直接放在<label>标签中（IE不支持）
4.button元素
比<input type="button">功能更强大、更丰富
不要在button标签之间放置图像映射，会干扰表单按钮的行为
5.列表框和下拉列表
<select>生成的是下拉列表还是列表框完全由是否指定size或multiple属性来决定，只要指定了其中一个属性，就会生成列表框
6.使用textarea指定文本域
textarea元素不能指定value属性
-->
<form action="http://www.baidu.com" method="get">
<!--input元素-->
<!--label标签隐士关联-->
<label for="username">单行文本框:<input id="username" name="username" type="text" /></label><br/>
不能编辑的文本框:<input id="username2" name="username" type="text" readonly="true"/><br/>
<!--label标签显示关联-->
<label>密码框:<input id="password" name="password" type="password"/></label><br/>
隐藏框:<input id="hidden" name="hidden" type="hidden"/><br/>
单选框:
<input id="red" name="red" type="radio" value="red"/>红
<input id="yellow" name="yellow" type="radio" value="yellow"/>黄
<input id="green" name="green" type="radio" value="green"/>绿<br/>
复选框:
<input id="eat" name="eat" type="checkbox" value="eat"/>吃
<input id="sleep" name="sleep" type="checkbox" value="sleep"/>睡
文件上传:<input id="file" name="file" type="file"/><br/>
图像域:<input id="image" name="image" type="image" src="imgs/1.jpg"/><br/>
四个按钮:<br/>
<input id="submit" type="submit" value="提交"/>
<input id="reset" type="reset" value="取消"/>
<input id="submit2" type="submit" disabled="true" value="提交"/>
<input id="no" type="button" value="无动作"/><br/>
<!--button 元素-->
<button type="button"><b>提交</b></button><br/>
<button type="submit"><img src="imgs/1.jpg" title="BAIDU"/></button><br/>
<!--列表框和下拉列表-->
<select id="skills" name="skills">
<option value="java">java语言</option>
<option value="ruby">ruby语言</option>
</select><br/>
<!--允许多选的下拉列表-->
<select id="books" name="books" multiple="multiple" size="4">
<option value="java">java语言</option>
<option value="ruby">ruby语言</option>
<option value="html5">html5语言</option>
</select>
<!--允许多选的列表框-->
<select id="johnson" name="johnson" multiple="multiple" size="6">
<optgroup label="疯狂Java体系图书">
<option value="java" label="aaa">java语言</option>
<option value="ruby">ruby语言</option>
<option value="html5">html5语言</option>
</optgroup>
<optgroup label="其他">
<option value="struts" >struts权威指南</option>
<option value="ajax">ajax</option>
</optgroup>
</select><br/>
<textarea cols="20" rows="2"></textarea><br/>
<textarea cols="20" rows="8" readonly="readonly"></textarea><br/>
</form>
<!--二、HTML5新增属性和元素
1.html5为表单控件新增的属性
form属性：可以让表单控件在<form>元素之外，提高了灵活性
formaction属性：处理表单内包含了多个按钮，不同按钮提交到不同action的场景
formxxx属性：与formaction相似，用于指定formenctype、formmethod、formtarget等属性
autofocus属性：为某个表单添加该属性后，浏览器打开页面时会自动获得焦点（整个页面最多只能定义一个）
placeholder属性：单行文本框、多行文本域显示的提示信息
list属性：用于实现下拉框和文本框结合实现自动补全功能，需要与datalist标签配合使用
autocomplete属性：主要用于和list组合，当开发者不希望某些用户看到下拉菜单，可通过设置autocomplete来实现，on表示显示下拉菜单，off表示不显示（目前只有Opera支持）
-->
<form id="addForm" action="add">
物品名:<input type="text" name="name" list="books" autocomplete="on"/><br/>
用户名:<input type="text" name="username" id="username" placeholder="input username" autofocus="true"/><br/>
密码:<input id="password" name="password" type="password" placeholder="input password"/><br/>
<input type="submit" value="register" formaction="register" formmethod="get"/>
<input type="submit" value="login" formaction="login" formmethod="post"/><br/>
</form>
物品描述:<textarea cols="40" rows="3"name="desc" form="addForm"></textarea>
<datalist id="books">
<option value="java">Java</option>
<option value="html5">html5</option>
<option value="android">android</option>
</datalist>
<!--功能丰富的input标签-->
<form action="do">
color:<input name="color" type="color"/><br/>
date:<input name="date" type="date"/><br/>
time:<input name="time" type="time"/><br/>
datetime:<input name="datetime" type="datetime"/>
datetime-local:<input name="datetime-local" type="datetime-local"/><br/>
month:<input name="month" type="month"/><br/>
week:<input name="week" type="week"/><br/>
email:<input name="email" type="email"/><br/>
tel:<input name="tel" type="tel"/><br/>
url:<input name="url" type="url"/><br/>
number:<input name="nmber" type="number"/><br/>
range:<input name="range" type="range"/><br/>
search:<input name="search" type="search"/><br/>
<!--<output>必属于某个表单，要么定义在某个表单内部，要么指定form属性-->
<output name="a" for="color" onforminput="innerHTML=color.value"></output>
</form>
</body>
</html>