一麦推文 發表於 2019-12-7 17:09:00

html5中time元素详解

<h1 style="text-align: center">html5中time元素详解</h1>
<h2>一、总结</h2>
<h3>一句话总结：</h3>
<h5>time的使用的话主要是将时间放在datetime属性里面：&lt;time datetime="2015-10-22"&gt;文章发表于2015年10月22日&lt;/time&gt;</h5>
<h5>time作用主要是为了方便浏览器对时间数据的提取</h5>
<p>&nbsp;</p>
<h3>1、HTML5中的 time元素 微格式 是什么？</h3>
<h5>HTML5中的微格式，是一种利用HTML5中的新标签（比如time标签）对网页添加附加信息的方法，附加信息例如新闻事件发生的日期和时间，文章发表的日期等。</h5>
<p>&nbsp;</p>
<h3>2、HTML5中的微格式的作用是什么？</h3>
<h5>为了简化浏览器对数据的提取，方便搜索引擎的搜索.</h5>
<p>&nbsp;</p>
<h3>3、html5中time微格式使用实例？</h3>
<h5>&lt;time datetime="2015-10-22"&gt;文章发表于2015年10月22日&lt;/time&gt;</h5>
<h5>用pubdate属性指明为文档的发布时间：&lt;time datetime="2015-10-22" pubdate="pubdate"&gt;文章发表于2015年10月22日&lt;/time&gt;</h5>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>二、html5--2.7新的布局元素(4)-time</h2>
<p>&nbsp;</p>
<h3>学习要点</h3>
<ol>
<li>了解<span style="color: rgba(255, 0, 0, 1)"><strong>微格式</strong></span>的概念</li>
<li>掌握time元素的用法</li>
</ol><ol><ol>
<li>微格式的概念</li>
<ul>
<li>HTML5中的微格式，是一种利用HTML5中的新标签对网页添加<strong><span style="color: rgba(255, 0, 0, 1)">附加信息</span></strong>的方法，附加信息例如新闻事件发生的<strong><span style="color: rgba(255, 0, 0, 1)">日期和时间</span></strong>，文章发表的<span style="color: rgba(255, 0, 0, 1)"><strong>日期</strong></span>等。</li>
<li>HTML5中的<strong><span style="color: rgba(255, 0, 0, 1)">微格式</span></strong>是为了<span style="color: rgba(255, 0, 0, 1)"><strong>简化浏览器对数据的提取，方便搜索引擎的搜索</strong></span>.</li>
</ul>
</ol></ol>
<p>&nbsp;</p>
<ol><ol>
<li>time元素</li>
<ul>
<li>time是HTML5新增的元素</li>
<li>time元素代表24小时中的某个时刻或某个日期，表示时刻时允许带<strong><span style="color: rgba(255, 0, 0, 1)">时差</span></strong>。它可以定义很多格式的日期和时间</li>
<li>datetime属性中日期与时间之间要用"T"文字分隔，"<strong><span style="color: rgba(255, 0, 0, 1)">T</span></strong>"表示<strong><span style="color: rgba(255, 0, 0, 1)">时间</span></strong>。请注意倒数第二行，时间加上<strong><span style="color: rgba(255, 0, 0, 1)">Z</span></strong>文字表示给机器编码时使用<strong><span style="color: rgba(255, 0, 0, 1)">UTC标准时间</span></strong>，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加<strong><span style="color: rgba(255, 0, 0, 1)">时差</span></strong>。</li>
<li>pubdate属性是个可选标签，加上它<span style="color: rgba(255, 0, 0, 1)"><strong>搜索引擎/浏览器</strong></span>就可以很方便的识别出那个日期是文章、新闻的发表日期。</li>
</ul>
</ol></ol>
<p>&nbsp;</p>
<ol><ol>
<li>time元素示例</li>
<ul>
<li>&amp;lttime datetime="2015-10-22"&amp;gt2015年10月12日&amp;lt/time&amp;gt</li>
<li>&amp;lttime datetime="2015-10-22<span style="color: rgba(255, 0, 0, 1)"><strong>T</strong></span>20:00"&amp;gt2015年10月12日晚上8点&amp;lt/time&amp;gt</li>
<li>&amp;lttime datetime="2015-10-22<strong><span style="color: rgba(255, 0, 0, 1)">T</span></strong>20:00<strong><span style="color: rgba(255, 0, 0, 1)">Z</span></strong>"&amp;gt2015年10月12日晚上8点&amp;lt/time&amp;gt</li>
<li>&amp;lttime datetime="2015-10-22<strong><span style="color: rgba(255, 0, 0, 1)">T</span></strong>20:00<strong><span style="color: rgba(255, 0, 0, 1)">+</span></strong>09:00"&amp;gt美国时间2015年10月12日8点&amp;lt/time&amp;gt</li>
</ul>
</ol></ol>
<p>&nbsp;</p>
<hr>
<h3>&nbsp;实例</h3>
<p>&nbsp;<img src="https://images2018.cnblogs.com/blog/1163900/201711/1163900-20171128230051034-922290275.png" alt=""></p>
<div class="cnblogs_code"><img id="code_img_closed_518688ab-5e8d-4fb3-b295-11a9b86d0a4b" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_518688ab-5e8d-4fb3-b295-11a9b86d0a4b" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_518688ab-5e8d-4fb3-b295-11a9b86d0a4b" class="cnblogs_code_hide">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> <span style="color: rgba(0, 0, 255, 1)">&lt;!</span><span style="color: rgba(255, 0, 255, 1)">doctype html</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 2</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 3</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 4</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 5</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>无标题文档<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 6</span> <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 7</span>   <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">time </span><span style="color: rgba(255, 0, 0, 1)">datetime</span><span style="color: rgba(0, 0, 255, 1)">="2015-10-22"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>文章发表于2015年10月22日<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">time</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 8</span>   <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">br</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 9</span>   <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">time </span><span style="color: rgba(255, 0, 0, 1)">datetime</span><span style="color: rgba(0, 0, 255, 1)">="2015-10-22"</span><span style="color: rgba(255, 0, 0, 1)"> pubdate</span><span style="color: rgba(0, 0, 255, 1)">="pubdate"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>文章发表于2015年10月22日<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">time</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">10</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">11</span> <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">12</span> <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp;</p>
<div>&nbsp;</div>

</div>
<div id="MySignature" role="contentinfo">
    <div id="fry_added_part">
    <div class="fry_website">
      <div class="fry_website" style="color:#3c8dbc;padding: 10px 0;display:none;">
            我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：
            【读书编程笔记】fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
      </div>
      <div class="copyright" style="color: red;padding-bottom: 10px;">
            版权申明：欢迎转载，但请注明出处
            <div style="font-size: 12px">一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。</div>
      </div>
      <div id="fry_know_friends" style="color: red;padding-bottom: 10px;font-size: 22px;">
            <div style="display:none;"></div>
            <div style="display:none;">在校每年国奖、每年专业第一，加拿大留学，先后工作于华东师范大学和香港教育大学。</div>
            <div style="display:none;">2025-04-30：宅加太忙，特此在网上找女朋友，坐标上海，非诚勿扰，vx：fan404006308</div>
      </div>
      <div class="copyright" style="color: green;padding-bottom: 10px;">
            录播课资料github地址：https://github.com/fry404006308/fry_course_materials
      </div>
      <div style="display:none;"></div>
    </div>
    <div class="fry_tech_group" style="color: mediumpurple;">
      <div>
            AI交流资料群：753014672
      </div>
    </div>
    <div class="fry_recommend">
      <h2>作者相关推荐</h2>
      <div id="fry_recommend" style="padding-bottom: 40px">
      </div>
    </div>
    <style>
      #fry_added_part .inspiration_content{
            //max-height: 120px;
            overflow: auto;
            margin: 20px 0;
      }
      #fry_added_part .fry_inspiration .simple a{
            margin-right: 25px;
      }
    </style>
    <div style="display:none;" class="fry_inspiration">
      <div style="color: red;font-size: 20px;text-align: center;" class="title">
            感悟总结
      </div>
      <!--分为详细部分和简略部分-->
      <!--详细部分-->
      <div class="detail">
            <div class="url_set">
                <div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/13498246.html"></div>
                <!--<div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/14379366.html"></div>-->
                <!--<div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/14154624.html"></div>-->
            </div>
            <div class="content_set"></div>
      </div>
      <!--简略部分-->
      <div style="display: none;" class="simple">
            <div style="color: #FF9966;margin-bottom: 10px;">其它重要感悟总结</div>
            <div>
                感悟总结200813
                最近心境200830
                最近心境201019
                201218-210205
            </div>
      </div>
    </div>
</div><br><br>
来源：https://www.cnblogs.com/Renyi-Fan/p/12002512.html
頁: [1]
查看完整版本: html5中time元素详解