HTML5的兼容性还没有那么强,大学如果学习HTML5我建议大家使用几款浏览器,譬如猎豹我也刚知道这款的,使用才发现它是用IE和chrome的内核,双内核兼容性比较强,再下载一个火狐就差不多了!下面开始了! 先介绍HTML5的更改、删除、增加的标签 html5的学习 DTD申明简单了

<!doctype html>只需要这些并且不区分大小写
新增的标签

	<article>	    标记定义一篇文章
	<header>	 	标记定义一个页面或一个区域的头部
 	<nav> 			标记定义导航链接
	<section>	    标记定义一个区域
	<aside> 	    标记定义页面内容部分的侧边栏
	<hgroup>	    标记定义文件中一个区块的相关信息
	<figure> 	    标记定义一组媒体内容以及它们的标题	
	<figcaption>	标签定义 figure 元素的标题。
	<footer> 		标记定义一个页面或一个区域的底部
	<dialog>	 	标记定义一个对话框(会话框)类似微信

	网页布局的改变提升对搜索引擎的友好
	
	新增多媒体标签
	<video>	  标记定义一个视频
	<audio>   标记定义音频内容
	<source>  标记定义媒体资源
	<canvas>  标记定义图片
	<embed>   标记定义外部的可交互的内容或插件 比如flash
	
	Web应用标签
	
	<menu>命令列表
	<menuitem>menu命令列表标签 FF(嵌入系统)
	<command> menu标记定义一个命令按钮
	<meter>状态标签(实时状态显示:气压、气温)C、O
	<progress>状态标签 (任务过程:安装、加载) C、F、O
	<datalist> 为input标记定义一个下拉列表,配合option F、O
	<details> 标记定义一个元素的详细内容 ,配合dt、dd   C
	其他标签
	
	注释标签
	<ruby> 标记定义 注释或音标
	<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示
	<rt> 标记定义对ruby的注释内容文本

	其他标签
	<keygen> 标记定义表单里一个生成的键值(加密信息传送)O、F
	<mark> 标记定义有标记的文本 (黄色选中状态)
	<output> 标记定义一些输出类型,计算表单结果配合oninput事件
	<time> 标记定义一个日期/时间 目前所有主流浏览器都不支持
	
	删除的HTML标签
	
	纯表现的元素:
	basefont,big,center,font, s,strike,tt,u;

	对可用性产生负面影响的元素:
	frame,frameset,noframes;

	产生混淆的元素:
	acronym ,applet,isindex,dir。
	
	重新定义的HTML标签
	
	HTML元素	HTML5中的意义
	<b>	代表内联文本,通常是粗体,没有传递表示重要的意思
	<i>	代表内联文本,通常是斜体,没有传递表示重要的意思
	<dd>	可以同details与figure一同使用,定义包含文本,dialog也可用
	<dt>	可以同details与figure一同使用,汇总细节,dialog也可用
	<hr>	表示主题结束,而不是水平线,虽然显示相同
	<menu>	重新定义用户界面的菜单,配合commond或者menuitem使用
	<small>	表示小字体,例如打印注释或者法律条款
	<strong>	表示重要性而不是强调符号
下边我们就用实例来演示一下
<!doctype html>
<html>
	<head>
	<meta charset=utf-8>
		<title>演示的内容</title>
	<style>
		/*所有的html5标签本质上来说就是一个div标签,值不过是有意义的*/
		/*页面的头部*/
		header{
			height:150px;
			background:#ABCDEF;
		}
		/*页面的中间的区域*/
		div{margin-top:10px;height:700px;}
		section{
			height:600px;
			background:#ABCDEF;
			width:70%;
			float:left;
		}
		article{
			background:#ff9900;
			width:500px;
			margin:0 auto;
			text-align:center;
		}
		aside{
			height:600px;
			background:#ABCDEF;
			width:25%;
			float:right;
		}
		footer{
			height:100px;
			background:#ABCDEF;
			margin-top:10px;
			clear:both;
		}
		nav{
			height:30px;
			background:#ff9900;
			margin-top:100px;
		}
		nav ul li{
			float:left;
			list-style:none;
			width:100px;
			height:30px;
			line-height:30px;
		}
	</style>
	</head>
	<body>
		<header>
			<p>这是一个header标签</p>
			<nav>
				<ul>
				<li>导航1</li>
				<li>导航2</li>
				<li>导航3</li>
				<li>导航4</li>
				<li>导航5</li>
				<li>导航6</li>
				</ul>
			</nav>
		</header>

		<div>
			<section>
			<p>这是一个section标签</p>
				<article>
					<h2>这里是哥文章标题</h2>
					<p>
						这里写什么呢??就随便这样把
					</p>
				</article>
				<hr/>
				<figure>
					<figcaption>UFO</figcaption>
					<p>不明飞行物ubknow flying opject</p>
				</figure>
				<figure>
					<dt>UFO再次</dt>
					<dd>这个我也不知道说什么好</dd>
				</figure>
				<hr/>
				<dialog>
					<dt>你还好吗??</dt>
					<dd>你不好?</dd>
				</dialog>
				<hr/>
				<menu>
					<li>点击</li>
					<li>右键单击</li>
					<li>你才</li>
					<li>不知道</li>
				</menu>
				<hr />
				<span contextmenu="candan">右键单击我试试</span>
				<menu type="context" id="candan">
					<menuitem label="菜单一" onclick="alert('我是一个寂寞')" icon="http://www.baidu.com/img/baidu_sylogo1.gif"></menuitem>
				</menu>
				<hr />
				<meter min="0" max="10" value="5" lower="3" high="7"></meter>
				<progress max="100" value="0" id="pro"></progress>
				<script>
				var pro=document.getElementById('pro');
				setInterval(function(){
					pro.value+=1;
				},100);
				</script>
				<hr/>
				<details>
					<dt>看看这个是什么效果</dt>
					<dd>这里我们就能看出来了</dd>
				</details>
				<hr/>
				<ruby>你<rp>(</rp><rt>ni</rt><rp>)</rp><ruby>
				<mark>女人最喜欢的事情就是买东西</mark>
			</section>
			<aside>
				<p>这是一个aside标签</p>
				<hgroup>
						<h3>这里是新的html的使用方法</h3>
						<h3>这里是新的html的使用方法</h3>
						<h3>这里是新的html的使用方法</h3>
						<h3>这里是新的html的使用方法</h3>
						<h3>这里是新的html的使用方法</h3>
						<h3>这里是新的html的使用方法</h3>
				</hgroup>
			<aside>
		</div>
		<footer>
			<p>这是一个footer标签</p>
			<hr/>
			<small>版权申明|</small>
			<small>联系我们</small>
		</footer>
	</body>
	</html>

慢慢的给大家介绍HTML5的东西哈!谢谢大家对微度网络-网络技术中心的支持 http://yun.widuu.com 请大家继续关注我们!!

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部