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. Python 源码剖析 目录

    Python 源码剖析 作者: 陈儒 阅读者:春生 版本:python2.5 版本 本博客园的博客记录我会适当改成Python3版本 阅读 Python 源码剖析 对读者知识储备 1.C语言基础知识, ...

  2. oracle命令行导出、导入dmp文件

    1.导出语句: exp test/test@127.0.0.1:1521/orcl file=d:\gpmgt.dmp full=n: 导出test用户数据库对象,full=n表示默认只导出test用 ...

  3. MySQL数据库开发规范-EC

    最近一段时间一边在线上抓取SQL来优化,一边在整理这个开发规范,尽量减少新的问题SQL进入生产库.今天也是对公司的开发做了一次培训,PPT就不放上来了,里面有十来个生产SQL的案例.因为规范大部分还是 ...

  4. h5中hash的用法实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. openstack转移新建虚拟机存储路径

    在云计算openstack中以为新建的虚拟机都存放在/var/lib/nova/instances中,在新建虚拟机时内存当然不够用,所以可以将nova转移到新的存储位置 以下操作只在计算节点上进行 一 ...

  6. 使用SikuliX定位Object（flash）元素

    先说一下背景,这个是我们测试的系统上的一个上传文件的地方,但是用传统的selenium方法很难定位的到.具体的样子是下面这样的. 使用id等属性定位做点击操作好像不能直接操作.无奈之下,只好从网上找找 ...

  7. java.lang.NoClassDefFoundError: org/apache/zookeeper/proto/SetWatches

    Session 0x16b21fa441900b6 for server 192.168.240.126/192.168.240.126:2181, unexpected error, closing ...

  8. 创建型模式(过渡模式) 简单工厂模式（Simple Factory）

    简单工厂模式(Simple Factory Pattern)属于类的创建型模式,又叫静态工厂方法模式(Static FactoryMethod Pattern) 是通过专门定义一个类来负责创建其他类的 ...

  9. faster-rcnn在ubuntu16.04环境下的超级详细的配置（转）

    首先,下载好必须要的安装包.为了方便,我已经全部上传在了百度云. - ubuntu16.04系统 链接:http://pan.baidu.com/s/1geU8piz 密码:25mk - cuda8. ...

  10. python - alipay sdk 使用 及 注意点

    一. 在 点击跳转 这里拿到自己的 appid  和  支付宝公钥 ,    如果想要得到 支付宝的公钥 就需要获取 应用的公钥,具体获取方式 : 获取应用公钥和私钥 a. 应用私钥和支付宝公钥 获取 ...