HTML5新特性及应用

1.删繁就简

2.新标签

#结构标签

#媒体标签

#表单控件标签

#其他标签

3.应用展示

#其他标签

<!doctype html>
<html lang="zh-CN">
<head>	
<meta charset="utf-8">
	<title>HTMl5新特性</title>
<style type="text/css">
</style>
	
	</head>	
<body>
		

	
	<h3>mark标记</h3>
	<p>My guitar is <mark>Taylor 314E</mark> </p>
	
	<h3>progress进度条</h3>
	<progress max="100" value="80"> <span>80%</span></progress>
	
	<h3>time时间注释</h3>		
	<p>发布时间<time datetime="2013-10-2T09:00Z"pubdate>9:00</time></p> <!--pubdate文章发布时间 用于搜索引擎的检测-->
	
	<h3>ruby中文注释</h3>
	<ruby>
	漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>  <!--rt--rp 如果浏览器不支持则效果为加上括号-->
	</ruby>
	
	<h3>wbr软换行</h3>
	<p>	
	生存还是毁灭，这是一个问题。
	<wbr></wbr>
	给鸟儿的翅膀绑上黄金，它便无法飞翔。
	</p>	
	
	<h3>cavas绘图板</h3>
	<p> 用于绘制图像（通过脚本，通常是 JavaScript）。</p>
	
	<h3>menu菜单的表单控件</h3>
	<menu>
	<li><input type="checkbox" checked=""/>Red</li>
	<li><input type="checkbox" checked="checked"/>blue</li>
	</menu>
	<h3>detail详细信息</h3>
	<details open>
	<summary>Related website</summary>
	<ul>
	<li>Baidu</li>
	<li>Alibaba</li>
	<li>Tencent</li>
	<li>Deerwings</li>
	</ul>	
	
	<h3>datalist预选项</h3>
	<input list="browsers"/>
	<datalist id="browsers">
   <option value="Internet Explorer">
   <option value="Firefox">
   <option value="Chrome">
   <option value="Opera">
   <option value="Sa fari">
	</datalist>
	
	<h3>keygen加密</h3>
	<form action="demo_keygen.asp" method="get">
	Username: <input type="text" name="usr_name" />
	Encryption: <keygen name="security" />
	<input type="submit" />
	</form>		
	<h3>output输出</h3>						  
	<form action="form_action.asp" method="get" name="sumform">
	<output name="sum"></output>
	</form>								 											   
</body>
</html>

效果展示：

参考链接：http://www.imooc.com.cn/

http://www.w3school.com.cn/

HTML5新特性及应用

猜你喜欢