HTML5新增的标签:canvas、audio、video、source、embed、track、datalist、keygen、output、article、aside、bdi、nav、mark、rt、rp、ruby、time、wbr等。canvas标签可定义图形、audio标签可定义音频内容,video可定义视频,source可定义多媒体资源,embed可定义嵌入的内容等。

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
HTML5是HTML的最新版本,由W3C在2014年完成标准定制。增强的浏览器本机功能,减少了浏览器插件(如:flash)应用程序,提高了用户体验满意度,使开发更加方便。HTML1.0到5.0经历了巨大的变化,从单一的文本显示功能到图文并茂的多媒体显示功能,许多特性经过多年的完善,已经发展成为一种非常重要的标记语言。
html5的新增标签
HTML5新增了一些结构性标记、多媒体标记和表单标记。下面给大家介绍一下。
立即学习“前端免费学习笔记(深入)”;
| 标签 | 描述 |
|---|---|
| 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
新多媒体元素
| 标签 | 描述 |
|---|---|
| 定义音频内容 | |
| 定义视频(video 或者 movie) | |
| 定义多媒体资源 | |
| @@@###@@@ | 定义嵌入的内容,比如插件。 |
| 为诸如 |
新表单元素
| 标签 | 描述 |
|---|---|
| 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 | |
| 规定用于表单的密钥对生成器字段。 | |
| 定义不同类型的输出,比如脚本的输出。 |
新的语义和结构元素
| 标签 | 描述 |
|---|---|
| 定义页面独立的内容区域。 | |
| 定义页面的侧边栏内容。 | |
| 允许您设置一段文本,使其脱离其父元素的文本方向设置。 | |
| 定义命令按钮,比如单选按钮、复选框或按钮 | |
| 用于描述文档或文档某个部分的细节 | |
| 定义对话框,比如提示框 | |
| 标签包含 details 元素的标题 | |
| 规定独立的流内容(图像、图表、照片、代码等等)。 | |
| 定义 |
|
| 定义 section 或 document 的页脚。 | |
| 定义了文档的头部区域 | |
| 定义带有记号的文本。 | |
| 定义度量衡。仅用于已知最大和最小值的度量。 | |
| 定义导航链接的部分。 | |
| 定义任何类型的任务的进度。 | |
| 定义 ruby 注释(中文注音或字符)。 | |
| 定义字符(中文注音或字符)的解释或发音。 | |
| 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 | |
| 定义文档中的节(section、区段)。 | |
| 定义日期或时间。 | |
| 规定在文本中的何处适合添加换行符。 |
html5标签的使用示例
(1)定义导航链接
它也是有意义的标签,并不是在某处加上这个标签就有了导航的样式了,这都是有意义的p而已,在头部header中加入菜单标签
html代码:
这是一个header部分
css代码:
/*定义nav的高和颜色*/
nav{
height:30px;
background-color:#F33;
margin-top:100px;}
/*正常设置li的样式*/
li{
list-style:none;
float:left;
width:100px;
height:30px;
}这样就可以实现之前只用p进行的菜单布局了

(2)定义文章标签
可以使用文章块标签进行写文章,这就使用这个标签进行写文章在section部分,可以和
合用
html代码:
文章标题
文章内容文章内容文章内容文章内容文章内容文章内容
文章内容文章内容文章内容文章内容文章内容文章内容
文章内容文章内容文章内容
css样式:
article{
background-color:#F33;
width:500px;
text-align:center; /*水平居中*/
margin:0px auto;
}这样就可以写一篇文章了

(3)定义媒介内容的分组,以及它们的标题
A。这个标签可以和它的配套标签联合使用
标题 标题内容

B。还可以和
标题1 标题内容
(4)定义对话框或窗口
在这个标签中也是可以使用dd和dt标签,对话框中的标题和内容,对话框有个属性是open,这个标签的兼容性不是很好

主要更新介绍: 完美整合Discuz!论坛,实现一站式登陆、退出、注册; 同步所有会员资料; 新增购物车功能,商品购买更加方便、快捷; 新增部分快捷菜单,网站访问更加方便; 限制首页商品、店铺标题显示长度; 修正会员后台管理不能更改密码的错误; 完善商品显示页面所有功能链接; 修正后台标签管理部分错误; 修正前台学校列表不按后台顺序显示的错误; 修正搜索功能中学校名称过长导致显示紊乱的现象; 修正
(5)定义命令的列表或菜单
A。这个标签可以和li合用

B。可以给右键单击中添加自己的内容(只有火狐浏览器可以兼容)
联合(定义用户可以从弹出菜单调用的命令/菜单项目)
单击我试试右键单击后出现想要的菜单项

单击菜单项,弹出内容

(6)标题组
里面可以写一些标题的结合
合用
标题
标题1
标题2
标题3
标题
标题1
标题2
标题3

(7)定义小号文本
这个标签和其他的加粗什么的标签其实是差不多的
法律条文 联系我们 客户意见

(8)定义元素的细节
里面的内容可以配合标题和内容标签来使用
问题 解答 问题 解答 问题 解答
点击详细信息就可以看到标题和内容了

(9)定义 ruby 注释
碰到不认识的字了可以使用这个进行注释拼音,但是有的兼容性不是很好,到时候可以进行修改
夼
(10)定义预定义范围内的度量
有几个属性值,min="" max="" value="" low="" high="",其中low和high是范围,当value范围超了话就会显示不同的效果

value值超出了范围后

(11)进度条的标签
进度条
最大值就是进度条的长度就行,value值就是显示的进度,用它可以进行动态的进度条
进度条
这样进度条就可以完成了,是不是比只用js写的好多了,不同的浏览器表现形式还不一样

更多编程相关知识,请访问:编程学习!!










