HTML5新增加的功能
- 获取焦点
<header>...</header>
<nav>...</nav>
<article>
<section>
......
......
</section>
</article>
<aside>...</aside>
<footer>...</footer>
- 空元素语法的元素
<area> 用于定义图片映射的内部区域
<base>
<br>
<col>
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<mata>
<param>
<source>
<wbr>
- 可以省略结束标签的元素
<colgroup></colgroup>
<dt></dt>
<dd></dd>
<li></li>
<optgroup></optgroup>
<option></option>
<p></p>
<rt></rt>
<rp></rp>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<td></td>
<th></th>
- 可以省略全部标签的元素
<html></html>
<head></head>
<body></body>
<tbody></tbody>


- contentEditable属性
<!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>
- designMode属性
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> designMode属性 </title>
</head>
<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>
</html>
- hidden属性
HTML5为所有元素提供了一个hidden属性,属性值为true和false,一旦把某个HTML元素的hidden设为true,该组件就不会显示,浏览器也不会保留该组件所占用的空间!
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> hidden属性 </title>
</head>
<body>
<div id="target" hidden="true" style="height:80px">
文字内容
</div>
<button onclick="var target=document.getElementById('target');
target.hidden=!target.hidden;">显示/隐藏</button>
</body>
</html>
- spellcheck属性
HTML为<input..../>、<textarea..../>等元素增加了spellcheck属性。该属性有true和false两个属性,如果spellcheck="true",浏览器将会负责对用户输入的文本内容执行输入检查,如果检查不通过的话,浏览器就会对拼错的单词进行提示。
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> spellcheck属性 </title>
</head>
<body>
<!-- 指定执行拼写检查 -->
<textarea spelllcheck="true" rows="3" cols="40">
</textarea>
</body>
</html>
显示效果如下:
9、 HTML5新增的常用元素
- 文档结构元素
在HTML5以前,HTML页面只能使用<div.../>元素作为结构元素,而HTML5则提供了<article.../>、<section.../>、<nav.../>、<aside.../>、<header.../>、<footer.../>等文档结构元素。
这些元素的功能的简单介绍:
- <article>:该元素用于代表页面的独立
- <article>元素内部使用<header.../>定义文章的标题部分;
- <article>元素内部使用<footer.../>定义文章的脚注部分;
- <article>元素内部使用多个<section.../>把文章内容分成几个“段落”;
- <article>元素内部可嵌套多个<article.../>作为它的附属文章。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 论坛帖子 </title>
</head>
<body>
<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>
</body>
</html>
将<article.../>元素放在<body.../>内部,表明为整个页面添加“边栏”。
将<article.../>元素放在其他父元素的内部,表明为父元素添加“边栏”。
例如:
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 论坛帖子 </title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<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>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 图片区域 </title>
</head>
<body>
<figure style="border:2px solid black;padding:5px;width:500px">
<figcaption><b>疯狂Java体系图书</b></figcaption>
<img src="data:images/java.png" alt="疯狂Java讲义"/>
<img src="data:images/android.png" alt="疯狂Android讲义"/>
<img src="data:images/ee.png" alt="轻量级Java EE企业应用实战"/>
</figure>
</body>
</html>
- 语义相关元素
<mark>用于显示HTML页面中需要重点“关注”的内容,就像我们看书时喜欢用荧光笔标记出来的效果相同。该元素指定id、class、style和hidden等通用的属性。浏览器通常会用红色显示<mark.../>标注的内容。
<time>用来显示被标注的内容是日期、时间或者日期时间,该元素除了可以使用<mark>元素可以使用的属性外,还可以使用属性datetime,该属性主要用于向机器提供时间。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 语义相关元素 </title>
</head>
<body>
<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>
</body>
</html>

- 两个特殊功能的元素
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> meter和progress </title>
</head>
<body>
当前行车速度是:<meter value="120" min="0" max="220" low="0" high="160">
120</meter>千米/小时。<br/>
任务完成比:<progress value="30" max="100">30/100</progress>
</body>
</html>
显示效果为:
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部,不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
http-equiv:指定元信息的名称,该属性名称具有特殊的意义,他可以向浏览器传回一些有用的信息,帮助浏览器正确处理网页中的内容。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 可拖动 </title>
</head>
<body>
<a href="http://www.fkjava.org">疯狂软件教育</a>
<img src="logo.jpg" alt="crazyit"/>
</body>
</html>
显示效果分别如下:
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 可拖动的Div </title>
</head>
<body>
<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" , "疯狂软件");
}
</script>
</body>
</html>
document.ondragover = function(evt)
{
// 取消事件的默认行为
return false;
}
不同的浏览器对于拖放操作的默认动作并不相同,如果希望开发者希望取消拖放操作的默认动作,则可以为document的ondrop事件绑定监听器。也就是再增加如下代码:
document.ondrop = function(evt)
{
// 取消事件的默认行为
return 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> 可自由拖动的Div </title>
</head>
<body>
<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>
</body>
</html>
下面的页面实现了一个允许通过拖放来添加、删除“ 收藏夹”的功能。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 通过拖放实现添加、删除 </title>
<style type="text/css">
div>div{
display: inline-block;
padding: 10px;
background-color: #aaa;
margin: 3px;
}
</style>
</head>
<body>
<div style="width:600px;border:1px solid black;">
<h2>可将喜欢的项目拖入收藏夹</h2>
<div draggable="true" ondragstart="dsHandler(event);">疯狂Java联盟</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:260px;
border:1px solid black;float:left;">
<h2 ondragleave="return false;">收藏夹</h2>
</div>
<img id="gb" draggable="false" src="garbagebin.png"
alt="垃圾桶" style="float:left;"/>
<script type="text/javascript">
var dest = document.getElementById("dest");
// 开始拖动事件的事件监听器
var dsHandler = function(evt)
{
// 将被拖动元素的innerHTML属性值设置成被拖动的数据
evt.dataTransfer.setData("text/plain"
, "<item>" + evt.target.innerHTML);
}
dest.ondrop = function(evt)
{
var text = evt.dataTransfer.getData("text/plain");
// 如果该text以<item>开头
if (text.indexOf("<item>") == 0)
{
// 创建一个新的div元素
var newEle = document.createElement("div");
// 以当前时间为该元素生成一个唯一的ID
newEle.id = new Date().getUTCMilliseconds();
// 该元素内容为“拖”过来的数据
newEle.innerHTML = text.substring(6);
// 设置该元素允许拖动
newEle.draggable="true";
// 为该元素的开始拖动事件指定监听器
newEle.ondragstart = function(evt)
{
// 将被拖动元素的id属性值设置成被拖动的数据
evt.dataTransfer.setData("text/plain"
, "<remove>" + newEle.id);
}
dest.appendChild(newEle);
} }
// 当把被拖动元素“放”到垃圾桶上时激发该方法。
document.getElementById("gb").ondrop = function(evt)
{
var id = evt.dataTransfer.getData("text/plain");
// 如果id以<remove>开头
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>
</body>
</html>
HTML5新增加的功能的更多相关文章
- Html5新增加的属性
用2中方法给单复选框增加新的特性,使直接点击文字就可以被选中 1.将选项放入label标签内添加for属性,并在input标签内添加id,两者值相同. 2.将input标签放到label标签内,注意l ...
- Dynamics CRM 2013 初体验(3):新增加的功能
新系统除了修补系统历史漏洞外当然还会添加些比较有意思的新功能,至于这些新功能是否好用那就得看它是否能经过咱们这些使用者的考验了.Dynamics CRM 2013系统将不再支持Dynamics CRM ...
- 检测浏览器对HTML5新input类型的支持
HTML5新增加了很多input元素类型,比如color,date,datetime,datetime-local,email,month,number,range,search,tel,time,u ...
- 关于自我总结的html5新特性
最近本包子制订了一个学校计划,第一步就是了解并总结一下html5现在所含有的新特性,好吧,这只是一个了解,- -! 自己总结了一个word文档,里面很多东西自己都还没实际用过,下一步,本包子要写pc端 ...
- HTML5每日一练之input新增加的六种时间类型应用
今天介绍一下input在HTML5中新增加的时间类型的应用,与昨天的练习一样,如果在以下这几种输入框中输入的格式不正确,也是无法提交的. 注意:此种类型的input在Opera10+中效果为佳,Chr ...
- HTML5新表单新功能解析
HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...
- html5 javascript 新增加的高级选择器更精准更实用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- HTML5学习笔记(三)新属性、功能
HTML5 拖放 1.元素的 draggable 属性设置为 true 2.ondragstart 属性调用函数,函数中dataTransfer.setData() 方法设置被拖数据的数据类型和值 3 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?
* HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加. * 拖拽释放(Drag an ...
随机推荐
- CentOS 7 安装 Gitlab
https://segmentfault.com/a/1190000002729796
- AndroidUI 视图动画-移动动画效果 (TranslateAnimation)
移动动画效果可以使用 TranslateAnimation; <Button android:id="@+id/btnTranslate1" android:layout_w ...
- 采用OSChina代码托管管理项目(一)
.Git是什么 Git在Wikipedia上的定义:它是一个免费的.分布式的版本号控制工具,或是一个强调了速度快的源码管理工具. Git最初被Linus Torvalds开发出来用于管理Linux内核 ...
- android 混淆配置
proguard 原理Java代码编译成二进制class 文件,这个class 文件也可以反编译成源代码 ,除了注释外,原来的code 基本都可以看到.为了防止重要code 被泄露,我们往往需要混淆( ...
- MessageQueue
MessageQueue myQueue = new MessageQueue(".\\private$\\myQueue"); try { Message myMessage = ...
- 解决VS2010打开Web页面时经常由于内存较低而导致VS2010自动关闭的问题
在使用VS2010 开发Web应用程序的时候,经常打开一个Web页面进行编辑前台代码的时候要等待很久(甚至等了半天结果还挂掉,简直令人抓狂), 之前也在网上找了很多相关的方法,都没办法解决,今天无意中 ...
- c# 借助cmd命令解析apk文件信息
借助aapt.exe文件 aapt.exe 解析apk包信息cmd命令: aapt dump badging *.apkaapt d badging *.apk >1.txt(保存成1.txt文 ...
- nginx fastcgi buffers影响页面输出数据大小记录
一台测试服务器由于没做fastcgi_buffer单独设置,在跑一个显示10w条数据的循环输出时只能显示4700-5200条记录 <?php $str = ''; for($i = 0; $i ...
- leetcode 3Sum Closest python
class Solution(object): def threeSumClosest(self, nums, target): """ :type nums: List ...
- struts2笔记02-action和Action类
1.action action表示一个struts2的请求! 2.Action类 能够处理struts2请求的类. (1)属性的名字需要与JavaBeans属性保持一致. 属性的类型可以是任 ...