html5中time元素详解

一、总结

一句话总结：

time的使用的话主要是将时间放在datetime属性里面：<time datetime="2015-10-22">文章发表于2015年10月22日</time>
time作用主要是为了方便浏览器对时间数据的提取

1、HTML5中的 time元素 微格式 是什么？

HTML5中的微格式，是一种利用HTML5中的新标签（比如time标签）对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间，文章发表的日期等。

2、HTML5中的微格式的作用是什么？

为了简化浏览器对数据的提取，方便搜索引擎的搜索.

3、html5中time微格式使用实例？

<time datetime="2015-10-22">文章发表于2015年10月22日</time>
用pubdate属性指明为文档的发布时间：<time datetime="2015-10-22" pubdate="pubdate">文章发表于2015年10月22日</time>

二、html5--2.7新的布局元素(4)-time

学习要点

  1. 了解微格式的概念
  2. 掌握time元素的用法
    1. 微格式的概念
      • HTML5中的微格式，是一种利用HTML5中的新标签对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间，文章发表的日期等。
      • HTML5中的微格式是为了简化浏览器对数据的提取，方便搜索引擎的搜索.
    1. time元素
      • time是HTML5新增的元素
      • time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带时差。它可以定义很多格式的日期和时间
      • datetime属性中日期与时间之间要用"T"文字分隔，"T"表示时间。请注意倒数第二行，时间加上Z文字表示给机器编码时使用UTC标准时间，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差。
      • pubdate属性是个可选标签，加上它搜索引擎/浏览器就可以很方便的识别出那个日期是文章、新闻的发表日期。
    1. time元素示例
      • &lttime datetime="2015-10-22"&gt2015年10月12日&lt/time&gt
      • &lttime datetime="2015-10-22T20:00"&gt2015年10月12日晚上8点&lt/time&gt
      • &lttime datetime="2015-10-22T20:00Z"&gt2015年10月12日晚上8点&lt/time&gt
      • &lttime datetime="2015-10-22T20:00+09:00"&gt美国时间2015年10月12日8点&lt/time&gt

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <time datetime="2015-10-22">文章发表于2015年10月22日</time>

     <br>

     <time datetime="2015-10-22" pubdate="pubdate">文章发表于2015年10月22日</time>

 <body>

 </body>

 </html>
 

html5中time元素详解的更多相关文章

  1. html5中output元素详解

    html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...

  2. html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  3. html5的datalist元素详解

    html5的datalist元素详解 一.总结 一句话总结: datalist元素配合input元素可以出现有提示选择作用的选框效果,还是相对比较简便好用的 1.optgroup元素是干嘛的? opt ...

  4. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  5. html5表单元素详解

    表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...

  6. Hibernate配置文件中映射元素详解

    对象标识符号 在关系数据库表中,主键(Primary Key)用来识别记录,并保证每条记录的唯一性.在Java语言中,通过比较两个变量所引用对象的内存地址是否相同,或者比较两个变量引用的对象值是否相同 ...

  7. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  8. HTML5有语义的内联元素详解

    HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...

  9. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

随机推荐

  1. tp5隐藏入口文件(基于nginx)

    location / {             try_files $uri $uri/ /index.php?$query_string; #这项配置解决访问根目录以外路径报404的错误      ...

  2. java git .gitignore常用规则

    # Created by .ignore support plugin (hsz.mobi).gitignore # Operating System Files *.DS_Store Thumbs. ...

  3. redhat6.7 yum网络源配置

    RedHat自带的yum源需要当前系统注册了RHN才可以使用,如果没有注册,当使用yum时,会提示需要注册RHN 如果没有注册RHN,则意味着我们不能使用RedHat自带的yum源.这个时候,我们可以 ...

  4. Linux命令——taskset

    参考:Linux taskset Command Tutorial for Beginners (with Examples) 简介 taskset命令用于设置进程(或 线程)的处理器亲和性(Proc ...

  5. Linux命令——dumpe2fs

    参考:Linux磁盘管理——Ext2文件系统 简介 dumpe2fs用于查询 Ext 家族 superblock以及GDT(Group Descriptor Table,块组描述符表) 信息. 用法 ...

  6. 《Exceptioning团队》第四次作业：项目需求调研与分析

    一.项目基本介绍 项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 Exception 作业学习目标 1.探索团队软件项目需求获取技巧与方法2.学会 ...

  7. 学underscore在数组中查找指定元素

    前言 在开发中,我们经常会遇到在数组中查找指定元素的需求,可能大家觉得这个需求过于简单,然而如何优雅的去实现一个 findIndex 和 findLastIndex.indexOf 和 lastInd ...

  8. 题解 UVa10892

    题目大意 多组数据,每组数据给定一个整数 \(n\),求满足 \(LCM(x,y)=n\) 的不同无序整数对 \((x,y)\) 的数目. 分析 若有 \(LCM(x,y)=n\),则有 \(GCD( ...

  9. Java - Annotation使用

    本文转载于(这个写的很好):https://www.cnblogs.com/be-forward-to-help-others/p/6846821.html Annotation Annotation ...

  10. CSS hack整理

    浏览器的兼容性一直是个头疼的问题,使用“欺骗”技术可使各个浏览器效果一致,花了些时间整理了各个浏览器的HACK,主要包括IE系列和最新版本的Chrome.Safari.Firefox. Opera,比 ...