当前位置: 首页 > news >正文

HTML5 article标签,<time>...</time>标签和pubdate属性的运用

1、<article>...</article>标签的运用

        article标签代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报竟杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件,或者其他任何独立的内容。把文章正文放在header元素后面的p元素中,然后用section标签把正文与评论部分进行区分。section是一个分块标签可以单独存储到数据库中或输出到word文档中。用来对页面中的内容进行分块,在section标签中嵌入评论的内容,评论中有几个人的评论,每个人的评论部分相对来说又是比较独立、完整的,因此对它们都使用一个article标签,在评论的article标签中,又可以分为标题与评论内容部分,分别放在header标签与p标签中。关于示例中提到的time标签与pubdate属性,可查看本节结尾处关于time标签与pubdate属性的说明.

dw页面效果截图:

HTML5代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body>
<article><header><h1>苹果</h1><p>发表日期:<time pubdate datetime="2010/10/09">2010/10/09</time></p></header><p><b>苹果</b>,植物类水果,多次花果...("苹果"文章正文)</p><section><h2>评论</h2><article><header><h3>发表者:陆凌牛</h3><p><time pubdate datetime="2010-10-10T19:10-08:00">1小时前</time></p></header><p>我喜欢苹果,我最喜爱的品种是红富士。</p></article><article><header><h3>发表者: 张玉</h3><p><time pubdate datetime="2010-10-10T19:15-08:00">1小时前</time></p></header><p>苹果? 我不喜欢,我喜欢吃橘子。</p></article></section>
</article>
</body>
</html>

   2、<time>...</time>标签和pubdate属性的运用 

         示例中有两个time元素,分别定义了两个日期一一一个是舞会日期,另一个是通知发布日期。由于都使用了time元素,所以需要使用pubdate属性表明哪个time元素代表通知的发布日期。

dw页面效果截图:

HTML5代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head><body>
<footer>
</footer>
<article><header><h1>关于<time datetime=2010-10-29>10月29日</time>的舞会通知</h1><p>发布日期:<time datetime=2010-10-11 pubdate>2010年10月11日</time></p></header><p>大家好:我是法律系3年级学生代表,...(关于舞会的通知)</p>
</article></body>
</html>

http://www.lryc.cn/news/277041.html

相关文章:

  • Amazing OpenAI API:把非 OpenAI 模型都按 OpenAI API 调用
  • RK3568平台开发系列讲解(驱动篇)pinctrl 函数操作集结构体讲解
  • vue购物车案例,v-model 之 lazy、number、trim,与后端交互
  • 云原生Kubernetes: Kubeadm部署K8S 1.29版本 单Master架构
  • C++协程操作
  • 计算机配件杂谈-鼠标
  • 用Python来制作一个微信聊天机器人
  • 2024年第九届机器学习技术国际会议(ICMLT 2024) 即将召开
  • 算法训练day9Leetcode232用栈实现队列225用队列实现栈
  • linux驱动(四):platform
  • Guava:Cache强大的本地缓存框架
  • #{}和${}的区别?
  • string的模拟实现
  • 算法练习:查找二维数组中的目标值
  • 考研自命题资料、考题如何找
  • MySQL 存储引擎和索引类型介绍
  • element-ui table height 属性导致界面卡死
  • Vue2.v-指令
  • Java中SpringBoot组件集成接入【Knife4j接口文档(swagger增强)】
  • 继承和多态的详解
  • 【Unity】UniTask(异步工具)快速上手
  • k8s三种常用的项目发布方式
  • Nodejs搭配axios下载图片
  • 强化学习在生成式预训练语言模型中的研究现状简单调研
  • python_selenium_安装基础学习
  • 面试宝典进阶之关系型数据库面试题
  • Agisoft Metashape 地面点分类参数设置
  • 计算机科学速成课【学习笔记】(4)——二进制
  • 数据库开发工具Navicat Premium 15 mac软件特色
  • 从零开始构建区块链:我的区块链开发之旅