一.HTML5新增的通用属性
1.contentEditable属性
contentEditable属性具有可继承的特点，如果一个HTML元素的父元素是可编辑的，那么它默认是可编辑的，除非显示指定contentEditable = false
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> contentEditable属性 </title>
</head>
<body>
<!-- 直接指定contentEditable="true"表明该元素是可编辑的 -->
<div contentEditable="true" style="width:500px;border:1px solid black">
疯狂Java讲义
<!-- 该元素的父元素有contentEditable="true"，因此该表格也是可编辑的 -->
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>疯狂Java讲义</td>
<td>疯狂Android讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>经典Java EE企业应用实战</td>
</tr>
</table>
</div>
<hr/>
<!-- 这个表格默认是不可编辑的
双击之后该表格变为可编辑状态 -->
<table id="target"
ondblclick="this.contentEditable=true;"
style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>Java</td>
<td>Ruby</td>
</tr>
<tr>
<td>C/C++</td>
<td>Python</td>
</tr>
</table>
</body>
</html>
contentEditable属性
2.designMode属性
相当于一个全局的contentEditable属性,如果整个页面的designMode属性为on时，该页面上所有可支持contentEditable属性的元素都变成可编辑的状态:document.designMode="on"
<body ondblclick="document.designMode='on';">
<div>aaaa</div>
<table style="width:420px;border-collapse:collapse" border="1">
<tr>
<td>疯狂Java讲义</td>
<td>疯狂Android讲义</td>
</tr>
<tr>
<td>轻量级Java EE企业应用实战</td>
<td>经典Java EE企业应用实战</td>
</tr>
</table>
</body>
3.hidden属性
把某个HTML元素的hidden设置成true时，就意味着浏览器不显示该组件
<div id="target" hidden="true" style="height:80px">
文字内容
</div>
<button onclick="var target=document.getElementById('target');
target.hidden=!target.hidden;">显示/隐藏</button>
</body>
4.spellCheck属性
HTML为<input>，<textarea>元素添加了spellCheck属性,如果设置spellCheck=true，浏览器会负责对用户输入的文本内容执行输入检查
<!-- 指定执行拼写检查 -->
<textarea spelllcheck="true" rows="3" cols="40">
</textarea>
二.HMTL5新增的常用元素
1.文档结构元素
<article>一篇独立的完整的文章
<section>段落，对页面内容进行分块
<nav>导航条
<aside>当前页面或当前文章的附属信息
<header>头部信息
<hgroup>
<footer>注脚
<figure>表示一块独立的图片区域
<figcaption>图片区域的标题
<article>
<!-- 帖子的“头部” -->
<header>
<h1>学习Android，必须先学习Java吗</h1>
<div>作者：crazystu</div>
</header>
<p>
学习Android，必须先学习Java吗？
Android上的应用程序只能用Java编写吗？可以用C++吗？</p>
<!-- 帖子的“回复”部分，用section元素表示 -->
<section>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的头部 -->
<header>
<h2>还是得学习Java</h2>
<div>作者：kongyeeku</div>
</header>
<p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br/>
或NDK开发，但Java毕竟是Android主要的开发语言，<br/>
因此建议学习Android之前还是先学习Java</p>
</article>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的头部 -->
<header>
<h2>Java是基础</h2>
<div>作者：kuan008</div>
</header>
<p>Java是基础，学好Java再去学习Android事半功倍。</p>
</article>
</section>
<!-- 帖子的“脚注” -->
<footer>
以上帖子和回复只代表其个人观点，不代表疯狂Java联盟的观点或立场
</footer>
</article>
使用<article>,<section>模拟定义一个论坛帖子
<article>
<!-- 帖子的“头部” -->
<header>
<h1>学习Android，必须先学习Java吗</h1>
<div>作者：crazystu</div>
</header>
<p>
学习Android，必须先学习Java吗？
Android上的应用程序只能用Java编写吗？可以用C++吗？</p>
<!-- 帖子的“回复”部分，用section元素表示 -->
<section>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的头部 -->
<header>
<h2>还是得学习Java</h2>
<div>作者：kongyeeku</div>
</header>
<p>虽然Android不一定要使用Java开发，还可以选择JavaScript、<br/>
或NDK开发，但Java毕竟是Android主要的开发语言，<br/>
因此建议学习Android之前还是先学习Java</p>
</article>
<!-- 每个article代表一个回复 -->
<article>
<!-- 回复的头部 -->
<header>
<h2>Java是基础</h2>
<div>作者：kuan008</div>
</header>
<p>Java是基础，学好Java再去学习Android事半功倍。</p>
</article>
</section>
<!-- 帖子的“脚注” -->
<footer>
以上帖子和回复只代表其个人观点，不代表疯狂Java联盟的观点或立场
</footer>
<!-- 该aside放在article内部，将作为该文章的“边栏”信息 -->
<aside>
<h3>关于楼主</h3>
<section>
<div>用户组: 编程摸索者</div>
<div>注册日期: 2009-7-27</div>
<div>上次访问: 2012-1-3 20:02</div>
<div>最后发表: 2012-1-1 17:38</div>
<div>发帖数级别: 小试牛刀</div>
<div>阅读权限: 30</div>
</section>
</aside>
</article>
<!-- 该aside放在body内部，将作为整个HTML文档的“边栏”信息 -->
<aside>
<h3>页面导航</h3>
<nav>
<ul>
<li><a href="#">查看相关内容</a></li>
<li><a href="http://www.crazyit.org">返回首页</a></li>
<li><a href="http://www.crazyit.org/forum-63-1.html">返回本版</a></li>
</ul>
</nav>
</aside>
<aside>示例
<figure style="border:2px solid black;padding:5px;width:500px">
<figcaption><b>疯狂Java体系图书</b></figcaption>
<img src="images/java.png" alt="疯狂Java讲义"/>
<img src="images/android.png" alt="疯狂Android讲义"/>
<img src="images/ee.png" alt="轻量级Java EE企业应用实战"/>
</figure>
<figure>示例
2.语义相关元素
<mark>用于显示HTML页面中需要重点“关注”的内容
<time>显示日期，时间或者日期时间
<article>
<header>
<h2>疯狂软件即将引入<mark>HTML 5</mark>相关课程</h2>
</header>
<p>
<mark>HTML 5</mark>是下一代的HTML规范，<br/>
<mark>HTML 5</mark>即将把前端开发者从繁重的开发中释放出来。<br/>
为了把握技术潮流的脉搏，疯狂软件教育计划在
<time datetime="2012-04-01">2012年4月</time>
引入<mark>HTML 5</mark>的相关课程。<br/>
疯狂软件教育的上课时间是<time datetime="09:00">早上9点</time>
到<time datetime="17:30">下午5点半</time>。<br/>
疯狂软件教育龙年的将于<time datetime="2012-01-30T09:00">正月初八</time>
开始上班，也就是<time>2012-01-30</time>。
</p>
</article>
<mark>和<time>演示
3.两个特殊功能的元素
<meter>
属性:
value 当前值
min max low high optimum
<progress>表示一个进度条
当前行车速度是:<meter value="120" min="0" max="220" low="0" high="160">
120</meter>千米/小时。<br/>
任务完成比：<progress value="30" max="100">30/100</progress>
image.png
三.HTML5头部和元信息
<base>指定页面中所有链接的基准链接
属性href:指定所有链接的基准链接。target:指定超链接默认在哪个窗口打开,属性值有_blank,_self,_top,_parent
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> base元素 </title>
<base target="_blank" href="http://www.crazyit.org" />
</head>
<body>
<a href="index.php">疯狂Java联盟</a>
</body>
<meta>定义页面元数据
四.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.fkjava.org");
}
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>
网友评论