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 请大家继续关注我们！！
发表评论 取消回复