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--2.7新的布局元素(4)-time的更多相关文章

  1. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  2. html5--2.9新的布局元素(5)-hgroup/address

    html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...

  3. html5--2.1新的布局元素概述

    html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...

  4. html5--2.6新的布局元素(5)-nav

    html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...

  5. html5--2.5新的布局元素(4)-aside/nav

    html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...

  6. html5--2.4新的布局元素(3)-section

    html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...

  7. html5--2.3新的布局元素(2)-article

    html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...

  8. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  9. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

随机推荐

  1. Git-flow 基本使用方法

    本文参考自:https://juejin.im/entry/5ad9a28d6fb9a07ac76e5e22 1.分支模型 master 分支:用于上线的分支,保护性分支,只包含经过测试的稳定代码,开 ...

  2. HDU 4746 Mophues (莫比乌斯反演应用)

    Mophues Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 327670/327670 K (Java/Others) Total ...

  3. iOS UITableViewDelegate && UITableViewDataSource 执行顺序

    #pragma mark - Table view data source - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableV ...

  4. RF常用库简介(robotframework)

    标准库 Robot Framework可以直接导入使用的库,包括: Builtin:包含经常需要的关键字.自动导入无需import,因此总是可用的 Dialogs:提供了暂停测试执行和从用户的输入方式 ...

  5. 关于iOS Tabbar的一些设置

    事实上iOS Tabbar的可定制性很高,我们没有必要反复造轮子,以下是笔者收集的一些tabbar的经常使用设置.希望对大家有所帮助. 设置tabbar选中颜色 iOS7设置例如以下: [self.t ...

  6. 五分钟了解 Service Mesh

      1 背景   1.1 多语言   微服务理念是提倡不同业务使用最适合它的语言开发,现实情况也确实如此,尤其是AI的兴起,一般大型互联网公司存在 C/C++.Java.Golang.PHP.Pyth ...

  7. 制作FAT12软盘以查看软盘的根目录条目+文件属性+文件内容

    [-1]Before for specific info , please visit http://wiki.osdev.org/Loopback_Device [0]我们先上干货,看到效果后,我们 ...

  8. ios --转载 使用SMSSDK实现短信验证:

    1.先到http://www.mob.com/#/网站注册账号,然后下载最新的sdk(有Android和iOS两个版本,根据需要进行下载) 2.进入到后台选择SecurityCodeSDk(支持全球短 ...

  9. struts2 Eclipse 中集成strust2开发框架实例

    下面通过建立一个小的实例具体来说明Eclipse 集成struts2,以下实例采用的为 struts2 版本为 struts2 2.2.3.1 为应用. 1. 下载struts2的开发包 第一步: 在 ...

  10. go module

    前言 go 1.5 引进了vendor管理工程依赖包,但是vendor的存放路径是在GOPATH底下,另外每个依赖还可以有自己的vendor,通常会弄得很乱,尽管dep管理工具可以将vendor平级化 ...