HTML5新增加的功能
1、部分代码代替了以前的代码
例如：
- 获取焦点
旧：document.getElementById("price");.focus;
新：<input type="text" autofocus name="price" />
2、使用
HTML5之前，要表达一个文档的结构，只能通过<div>来实现；
在HTMl5之后，提供了更明确语义的元素，例如：
<header>...</header>
<nav>...</nav>
<article>
<section>
......
......
</section>
</article>
<aside>...</aside>
<footer>...</footer>
3、基本结构的变化
以前的时候是： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
现在只需要写： <meta charset=utf-8" /> 就OK了
注意：不要在<html><head>之间插入任何内容！不要在</head><body>之间插入任何内容！不要在</body></html>之间插入任何内容！
4、标签不再区分大小写
5、元素可以省略结束标签【空元素标签不允许开始标签和结束标签分开定义】
- 空元素语法的元素
<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>
6、允许省略属性值的属性
7、允许属性值不使用引号
传统的XHTML按XML规范对属性值进行要求，要求所有的属性值都必须用引号引起来，但是HTML5允许直接给出属性值，即使不放在引号中也是正确的。
注：如果某个属性值中含有空格的话，由于空格容易引起浏览器混涿的属性值，那么就需要用引号将其括起来。
8、HTML5新增的通用属性
- contentEditable属性
HTML5为大部分元素都增加了contentEditable属性，如果将该属性设为true，那么浏览器将会允许开发者直接编辑该html中的内容，此处的html元素并不是指那些原本就可以编辑输入的表单元素。
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>
- designMode属性
designMode属性相当于一个全局的contentEditable属性，如果把整个页面的designMode都设置成 on 时，该页面上所有支持contentEditable属性的元素都变成可编辑状态；designMode属性值默认为off。
document.designMode="on" ;
例如：
<!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，该组件就不会显示，浏览器也不会保留该组件所占用的空间！
注：hidden属性可以代替CSS样式中的display属性，设置hidden="true"相当于在CSS中设置display:none。
<!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.../>作为它的附属文章。
<section>:该元素用于对页面的内容进行分块。<section.../>元素通常也可由标题和内容组成。
通常建议<section.../>元素包含一个标题（由<h1>....<h6>定义的）。
<section.../>元素可以包含多个<article.../>元素，表示该“分块”内部包含多篇文章。
<section.../>元素可以嵌套<section.../>元素，用于表示该“分块”包含多个子分块。
注：
<article.../>则侧重于表达一篇独立的、完整的文章，而<section.../>则侧重于对页面内容进行分块，也就是说，如果想表达一块独立、完整的内容时，应该使用<article.../>元素；如果想吧一块内容分为几块的时候，则应该使用<section.../>元素
<nav>:该元素专门用于定义页面上的“导航条”，包括上方的“主导航条”、侧边的“边栏导航”、页面内部的“页面导航”、页面下方的“底部导航”等
<aside>专门用于定义当前页面或当前文章的附属信息
<header>该元素主要为<article.../>定义元素的“头部”信息
<hgroup>该元素主要用于组织<h1>...<h6>的标题元素,当<header.../>需要包含多个标题元素的时候，可以考虑使用<hgroup.../>把他们组成一组。
<footer>主要用于为<artcle.../>元素定义脚注部分，该部分包括该文章的版权信息，作者授权信息等。
<figure.../>:该元素用于表示一块独立的“图片区域”，该元素内部包含一个或多个<img.../>元素所代表的图片。除此之外，该元素内部还包含一个<figcaption.../>元素，用于定义该“图片区域”的标题。
<figcaption>:该元素通常放在<figure.../>内部，用于定义“图片区域”的标题。
注：除了<section.../>元素可指定cite属性之外，上面其余元素都只支持id、class、style、contentEditable、hidden等通用属性。
例如：
<!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>
显示的效果为：
下面页面代码使用<figure.../>元素定义了一块“图片区域”，在这块区域包含了3张图片；还使用CSS为<figure/>元素添加了一个边框。
例如：
<!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>
显示的效果为：
注：如果<time.../>元素包含的内容本身就满足标准的日期、时间格式，那么使用<time.../>元素时可以不指定datetime属性，否则就应该指定datetime属性。
只有Chrome支持<details.../>与<summary.../>元素
- 两个特殊功能的元素
<meter>:用于表示一个已知最大值和最小值的计数仪表，该元素除了通用的属性值id、class、style、hidden外，还有以下属性
value：指定计数仪表的当前值
min：指定计数仪表的最小值
max：指定计数仪表的最大值
low：指定计数仪表指定范围的最小值。该属性值必须大于等于min属性指定的值。
high：指定计数仪表指定范围的最大值。该属性值必须小于等于max属性指定的值。
optimum：指定计数仪表有效范围的最佳值。如果该值大于high属性指定的值，则意味着值越大越好；如果该值小于low属性指定的值，则意味着值越小越好。
<progress>:用于表示一个进度条。使用该元素除了可以使用指定的通用元素外，还有以下属性。
max：指定进度条完成时的值。
value：指定进度条当前完成的进度值。
<!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>
显示效果为：
10、HTML的元信息
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
http-equiv：指定元信息的名称，该属性名称具有特殊的意义，他可以向浏览器传回一些有用的信息，帮助浏览器正确处理网页中的内容。
name：指定元信息的名称，该名称值可以随意指定。
content：指定元信息的值。
Expires：指定网页的过期时间。
Pragma：指定禁止浏览器从本地磁盘缓冲中调阅页面内容，浏览器一旦离开该网页就无法脱机访问该页面
Refresh：指定浏览器多长时间后自动刷新指定页面。
Set-Cookie：设置Cookie。如果网页过期，那么客户端上的Cookie也被删除。
content-Type：设置该页面的内容类型和所用的字符集。
11、HTML5新增拖放的API
在HTML5中，<img.../>元素默认就是可拖动的；而<a.../>元素只要设置了href属性，他默认也是可拖动的。
例如：
<!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>
显示效果分别如下：
对于普通元素而言，如果希望它变为可拖动的，需要将该元素的属性draggable属性设为true即可，如果只设置draggable="true"只表示该元素可以拖动，但拖动时并未携带数据，因此看不到拖动效果。
为了让拖动操作能够携带数据，应该为被拖动的元素的ondragstart事件指定的监听器，在该监听器中让拖动操作可以携带数据。
例如：
<!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>
不管是拖动图片，还是拖动<div.../>元素，拖动时都显示一个“禁止”的标志，这表明拖动图片、拖动“div”时，被拖到目的地后并不接受被拖动的元素，这是因为当被拖动的元素被“拖过”document对象时，document对象默认阻止了拖动事件，而其他的HTML组件也是位于document对象内的，因此他们不接受“放”。
为了让document接收“放”，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为。
例如在上面代码中加上如下代码：
document.ondragover = function(evt)
{
// 取消事件的默认行为
return false;
}
不同的浏览器对于拖放操作的默认动作并不相同，如果希望开发者希望取消拖放操作的默认动作，则可以为document的ondrop事件绑定监听器。也就是再增加如下代码：
document.ondrop = function(evt)
{
// 取消事件的默认行为
return false;
}
下面的代码实现了一个可以自由拖放的<div.../>元素。
<!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 ...
随机推荐
- C++字符串之一（字符表示）
在C++中有两种类型可以用于表示字符,char和wchar_t. 但是字符串格式的标准却有很多种,如ASCII,UTF8,UTF16,UTF32等等.字符串的格式和char/wchar_t 的关系是什 ...
- Codeforces 325E
Codeforces 325E 原题 题目描述:给出\(n\)个点, 编号为\(0 \text ~ n-1\),每个点连出两条边分别为\(2i\)和\(2i+1\)(\(mod n\)),现从\(0\ ...
- [转]Net Framework引路蜂地图开发示例
From:http://www.2cto.com/kf/201207/140421.html 引路蜂地图也提供对.Net Framework平台的支持,可以开发桌面地图应用,由于Mono C#的跨平台 ...
- 04737_C++程序设计_第4章_类和对象
例4.1 描述点的Point类. 例4.2 根据上面对Point类的定义,演示使用Point类的对象. #define _SCL_SECURE_NO_WARNINGS #include <ios ...
- 不同版本的 IIS 中使用 ASP.NET MVC(C#)【转】
由微软 ASP.NET 团队|2008 年 8 月 19 日 推特 在本教程中,您将学习在不同版本的 Internet Information Services 中如何使用 ASP.NET MVC 和 ...
- node.js(四)path优化(路径优化)
1.normalize函数的基本用法 normalize函数将不符合规范的路径经过格式化转换为标准路径,解析路径中的.与..外,还能去掉多余的斜杠. 如下示例: var path = require( ...
- CDH（cdh5.7） 上集成 kafka
CDH 可以在线下载: 离线安装
- Programming C#.Classes and Objects.传递参数
ref 关键字通过引用(而非值)传递参数. 通过引用传递的效果是,对所调用方法中的参数进行的任何更改都反映在调用方法中. 说明: 不要混淆通过引用传递的概念与引用类型的概念. 这两种概念是不同的. 无 ...
- JavaWeb核心编程之(三.3)Servlet Init 配置
Servlet初始化 可以传入一些参数 通过 <init-param>来配置 新建 servletinit项目 新建包 com.xiaoan.test->new Class(Test ...
- Dnsmasq（局域网DNS，DHCP）
安装:yum -y install dnsmasq dnsmasq配置文件: /etc/dnsmasq.conf 默认指定DNS服务器(优先级)文件:/etc/resolv.conf 默认host ...