说是初识,其实html5并非一个全新的东西,而是之前学习过的html超文本标记语言的最新版本。在html5中添加了很多新的东西,使得整个开发变得更加便捷快速,我们一起来看看吧。
1.html5的特点
HTML5新增了离线存储,更丰富的表单,js线程,socket,标准扩展embed,css3,流媒体与多媒体引擎如audio,video,canvas,webgl等等。具有搜索引擎与无障碍领域,移动互联网,跨平台,快速迭代,降低成本,导流入口多,分发效率高的特点。html5是唯一一个通吃pc,mac,iPhone,Android等主流平台的跨平台语言。在当今时代,互联网产品大多免费,且有网络效应,后入者抢夺用户的难度非常大。html5开发比原生app开发成本降低一倍,应用导流也非常容易。有了这么多的特点,难怪html5能在Web开发中独树一帜。下面我们来看看html5相比以前的版本多了哪些标签吧!
2.html5标签的变化
首先html5与以前版本相比,它不基于SGML,因此不需要引用DTD。在第一行声明的时候,也就不需要像之前的版本一样写一长串的DTD文档链接,所以只需要留下以下代码:
<!DOCTYPE HTML> //HTML5第一行声明
关于DTD是什么?
文档类型定义(DTD)可定义合法的XML文档构建模块,它使用一系列合法的元素来定义文档的结构,html中,DTD规定了标记语言的规则,这样浏览器才能正确地呈现内容。如此说来,其实html也是xml的一种,只不过有了DTD去规定一些个标记的语义使得他们能被浏览器识别。这就是为什么html需要引用DTD的原因啦。
<!DOCTYPE HTML> 这段声明要放在<html>标签前面,它并非是html标签,它指示的是web浏览器关于页面使用哪个html版本进行编写的指令。
新增的标签
HTML5中新增了结构标签,多媒体标签,web应用标签,还有其它的一些标签
1)结构标签(块状元素)——有意义的div
这些标签都能顾名思义:
<article> //定义一片文章
<header> //定义一个页面或一个区域的头部
<nav> //定义导航链接
<section> //定义一个区域
<aside> //定义页面内部的侧边栏
<hgroup> //定义文件中一个区域的相关信息,几个hn标签放一起
<figure> //定义一组媒体内容及它们的标题
<figcaption> //定义figure元素的标题
<footer> //定义一个页面或一个区域的底部
<dialog> //定义一个对话框
这些标签其实都是div,只不过是有意义的div,使得标签更加的语义化。也正是这些标签有了语义化,他们不能像div那样那么的随性想加多少加多少,想加在哪里就加在哪里。他们有了各自的职责,使用他们的时候要严格的根据他们的语义来使用。
2)多媒体标签
<video> //插入视频
<audio> //插入音频
<source> //由于视频和音频的格式有很多,这个是媒体资源可以负责对视频音频的转码。 一般和
<video><audio>配合使用
<canvas> //定义图片,画布
<embed> //定义外部的可交互的内容或插件,比如flash
多媒体标签的出现,使得富媒体发展以及支持在不使用插件的情况下即可操作媒体文件,大大的提升了用户体验。
3)web应用标签
<meter> //实时情况显示:气压,气温等
<progress> //任务过程:安装,加载(进度条)
<datalist> //为Input标签定义一个下拉列表,配合option使用,美观又实用
<details> //定义一个元素的详细内容,配合summary使用,就是一个标题展开和折叠的效果
<menu> //菜单列表,主流浏览器下不支持,感觉又是要被否掉的命运啊
这些标签的兼容性不是很好,在使用的时候多多考虑浏览器兼容性问题
4)其他标签
<ruby><rt><rp> //定义注释用的标签,像标注拼音一样把<rt>标注的内容标注在头顶,如果不兼容时,
使用<rp> 标注补救的显示形式
<mark> //黄色选中文字,像word文档中的黄色刷子一样的效果
<output> //定义一些输出类型,计算表单结果,配合outinput事件使用