档声明,定义和用法
声明必须位于 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标签,除了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封装作为跨平台的应用程序。虽然这种方式在严格意义上来讲并非是完全跨平台,但这样也在后期的维护上可以节省出量的时间和精力。
用户可以离线使用、访问应用,这对于无法随时保持联网状态的移动终端用户来说是很重要的,且用户访问本地的缓存文件,通常意味着更快的访问速度,从这个角度来说,可谓是大大提高了用户的体验度。
*请认真填写需求信息,我们会在24小时内与您取得联系。