初识html5

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容

  • 一、认识HTML5 1. 什么是HTML5 HTML 5草案的前身名为Web Applications 1.0,是...
    年少懵懂丶流年梦阅读 1,084评论 1 8
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5的设计目的是为...
    JoeyYu阅读 354评论 0 0
  • 格式后期处理。 Jeremy Keith在 Fronteers 2010 上的主题演讲 今天我想跟大家谈一谈HTM...
    LordZhou阅读 1,118评论 0 17
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 1,310评论 0 10