整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5学习笔记四:html5新增标签、语义特性-文档声明

档声明,定义和用法

  • 声明必须位于 HTML5 文档中的第一行,也就是位于 标签之前。该标签告知浏览器文档所使用的 HTML 规范。

  • doctype 声明不属于 HTML 标签; 它是一条指令,告诉浏览器编写页面所用的标记的版本。

  • 在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。

  • HTML 4.01 中的 doctype 需要对 DTD 进行引用,因为 HTML 4.01 基于 SGML。而 HTML5不基于 SGML,因此不需要对 DTD 进行引用,但是需要 doctype 来规范浏览器的行为(让浏览器按照它们应该的方式来运行。)。

结构性标签

结构性标签(construct tag)主要负责Web的上下文结构的定义,确保 HTML文档的完整性,这类标签包括以下几个:

  • section。用于表达书的一部分或一章,或者一章内的一节。在Web页面应用中,该标签也可以用于区域的章节表述。

  • hgroup 对网页或区段(section)的标题进行组合:。

  • header。页面主体上的头部,注意区别于head标签。这里可以给初学者提供一个判断的小技巧:head标签中的内容往往是不可见的,而header标签往往在一对body标签之中。

  • footer。页面的底部(页脚)。通常,人们会在这里标出网站的一些相关信息,例如关于我们、法律申明、邮件信息、管理入口等。

  • nav。是专门用于菜单导航、链接导航的标签,是navigator的缩写。

  • article。用于表示一篇文章的主体内容,一般为文字集中显示的区域

块级性标签

级块性标签(block tag)主要完成Web页面区域的划分,确保内容的有效分隔,这类标签包括以下几个:

  • aside。用以表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。从一个简单页面显示上看,就是侧边栏,可以在左边,也可以在右边。从一个页面的局部看,就是摘要。

  • figure 标签规定独立的流内容,通常与figcaption联合使用。

  • code。表示一段代码块。

  • dialog 对话标签 配合dt dd标签使用

行内标签。

行内语义性标签(in-line tag )主要完成Web页面具体内容的引用和表述,是丰富内容展示的基础,这类标签包括以下几个:

  • meter。表示特定范围内的数值,可用于工资、数量、百分比等 max表示最大值,min表示最小值,value代表当前值。

  • time。表示时间值,属性datetime强调时间

  • progress。用来表示进度条

多媒体标签

  • video。视频标签,用于支持和实现视频(含视频流)文件的直接播放,支持缓冲预载和多种视频媒体格式,例如MPEG-4、OggV和WebM等。

  • audio。音频标签,用于支持和实现音频(音频流)文件的直接播放,支持缓冲预载和多种音频媒体格式。

列表标签

  • datalist 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。
  • 所有主流浏览器都支持datalist标签,除了internet Explorer 和 Safari。

交互性标签

交互性标签(interactive tag)主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础,这类标签包括以下几个:

  • menu。主要用于交互菜单(这是一个曾被废弃现在又被重新启用的标签)。

  • command。用来处理命令按钮。

下期预告(假期到了,大家可以先放下编程学习,出去走走,听听Tommy讲讲自己的故事):

一个迷茫大学生进入编程世界的心路历程

番外篇:说说愚人节

其实,对于现在国人过洋节的兴致大于传统节日,我真的没什么好说的。不知道是开放带来的进步,还是我们对文化的失守。Tommy不做愤青,是提倡大家追求洋文化的同时,要做到对自我文化的坚守。

们都知道,对于更新及时的信息列表,显示什么时候发出的,尤为重要。比如:微博更新信息,会显示几秒钟之前、几分钟之前、几小时之前等。这不仅可以显示信息的及时性,对于用户体验也是极好的。就如下图所示:

消息提示时间戳

对于显示这样的列表,时间戳,随着时间的推移(页面不刷新),也需要自动更新。对于这个需求,我们肯定是要在本地浏览器来处理的,非即时消息不需要服务器中转的。

对于这样的小需求,你可以js来实现,不是太麻烦。不过,这么,推荐一个成熟的时间戳自动更新插件:jquery-timeago。

那么什么是jquery-timeago.js呢?

它是一款jQuery插件,可以轻松支持自动更新模糊时间戳(例如:1分钟前 或者 约1天前)。

不管当前页面停留多长时间,它都会自动更新,以显示时效性,它利用浏览器页面缓存来计算时间。

你可以使用HTML5的标准标签(比如:time)。

那么怎么使用它呢?

首先,你需要到github上搜索:jquery-timeago,然后引入到页面中。

使用jquery-timeago的步骤

通过上边的介绍,你就可以轻松的使用自动更新模糊时间戳了。

功能虽然小,但是也算一个产品体验的改进,如果你项目中有需要,不妨试一下。

至此,就简单介绍完了,这个轻巧的小功能插件了。

此图来自网络

想要及时了解新内容,请关注我们。也欢迎转发、收藏、评论。

们都知道,想要成为一名合格的前端开发人员,掌握好HTML5是一个重要的先决条件,相比较于HTML,HTML5中新增了许多功能标签,那么这么标签都有哪些呢?

青岛HTML5

格式:

<bdi>定义文本的文本方向,使其脱离其周围文本的方向设置。

<mark>定义有记号的文本。

<meter>定义预定义范围内的度量。

<progress>定义任何类型的任务的进度。

<rp>定义若浏览器不支持 ruby 元素显示的内容。

<rt>定义 ruby 注释的解释。

<ruby>定义 ruby 注释。

<time>定义日期/时间。

<wbr>定义可能的换行符。

表单:

<datalist>定义下拉列表。

<keygen>定义生成密钥。

<output>定义输出的一些类型。

图像:

<canvas>定义图形。

<figcaption>定义 figure 元素的标题。

<figure>定义媒介内容的分组,以及它们的标题。

音频和视频:

<audio>定义声音内容。

<source>定义媒介源。

<track>定义用在媒体播放器中的文本轨道。

<video>定义视频。

链接:

nav>定义导航链接。

列表:

<command>定义命令按钮。

样式:

<header>定义section或page的页眉。

<footer>定义section或page的页脚。

<section>定义section。

<article>定义文章。

<aside>定义页面内容之外的内容。

<details>定义元素的细节。

<dialog定义对话框或窗口。

<summary>为 <details> 元素定义可见的标题。

编程:

<embed>为外部应用程序(非HTML)定义容器。

HTML5的优势:

1、做出更多好看的动画效果,让前端开发人员实现更好的页面交互

HTML5实现的网页更加的精美,这些动画是基于HTML5标签和CSS3样式共同实现的效果。

2、解决了跨浏览器问题

跨浏览器问题在HTML5出现之前,对于前端开发人员来说,绝对是一个噩梦级的问题。明明在一个浏览器中完全正常运行的HTML、CSS和JavaScript页面,但换一个浏览器之后,就会出现很多问题,比如:JavaScript运行出错、页面布局混乱等。改变了这种局面的正是HTML5编程语言,目前主流浏览器如Internet Explorer、Chorme、Firefox、Safari都表现出对HTML5的极大热情。

3、跨平台、离线使用

HTML5 可以做到跨平台,多数核心代码不用重写,JavaScript的代码用得好的话,在许多地方都可以用到,包括移动应用、移动网站、PC网站、各种浏览器插件,甚至可以用WebKit封装作为跨平台的应用程序。虽然这种方式在严格意义上来讲并非是完全跨平台,但这样也在后期的维护上可以节省出量的时间和精力。

用户可以离线使用、访问应用,这对于无法随时保持联网状态的移动终端用户来说是很重要的,且用户访问本地的缓存文件,通常意味着更快的访问速度,从这个角度来说,可谓是大大提高了用户的体验度。