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