HTML5的学习-基础认识HTML5的改变

widuu 2012-12-18 前台技术 4,095 0 喜欢 (0)

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

[php]
<!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> 表示重要性而不是强调符号
[/php]
下边我们就用实例来演示一下
[php]
<!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>

[/php]

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

转载请注明来自微度网络,本文标题:《HTML5的学习-基础认识HTML5的改变》

喜欢 0 发布评论
Top