初识html5

2018-03-22  本文已影响0人  艾米酱小白

说是初识,其实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事件使用

上一篇下一篇

猜你喜欢

热点阅读