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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/306210.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【HarmonyOS4.0】第四篇-ArkUI基础实战

一、ArkUI框架简介 ArkUI开发框架是方舟开发框架的简称&#xff0c;它是一套构建 HarmonyOS / OpenHarmony 应用界面的声明式UI开发框架&#xff0c;它使用极简的UI信息语法、丰富的UI组件以及实时界面语言工具&#xff0c;帮助开发者提升应用界面开发效率 30%&#xff0c;开发…

(23)Linux的软硬连接

前言&#xff1a;上一章我们讲解了 inode&#xff0c;为文件系统收了尾&#xff0c;这几章我们充分地讲解完了文件系统的知识点&#xff0c;现在我们开始开始学习软硬链接了。 软硬链接 1、Linux 下的快捷方式&#xff1a;软链接 上一章我们介绍完了 inode &#xff0c;我们…

试用统信服务器操作系统UOS 20

作者&#xff1a;田逸&#xff08;formyz&#xff09; 试用统信Linux操作系统UOS&#xff0c;想了解一下用已有的Linux经验能否轻松驾驭它。以便在某些场景下&#xff0c;可以多一种选择。本次试验在Proxmox VE 8&#xff08;以下简称PVE 8&#xff09;平台下进行&#xff0c;采…

【题解】—— LeetCode一周小结

1.经营摩天轮的最大利润 题目链接&#xff1a; 1599. 经营摩天轮的最大利润 你正在经营一座摩天轮&#xff0c;该摩天轮共有 4 个座舱 &#xff0c;每个座舱 最多可以容纳 4 位游客 。你可以 逆时针 轮转座舱&#xff0c;但每次轮转都需要支付一定的运行成本 runningCost 。摩…

JRT打印元素绘制协议之-A4Double

以前打印相信很多人因为A4打印两个报告头大过&#xff0c;M要把一堆报告既有A4的也有A5的还有微生物的&#xff0c;可能输出Page还不那么严谨。要么换页不对叠加了、要么多空白页、中间夹杂A4报告就更加头大。也有的人为了打印页码的共几页而头大。 借助新设计的优势&#xff…

uni-app中轮播图实现大图预览

参考效果 当轮播图滑动切换的时候更新自定义下标&#xff0c;当图片被点击的时候大图预览。 参考代码 商品详情页轮播图交互 <script setup lang"ts"> // 轮播图变化时 const currentIndex ref(0) const onChange: UniHelper.SwiperOnChange (ev) > …

TAX税类小知识

历史及发展 我国作为流转税为主国家&#xff0c;目前经历3类税制&#xff1a;统收统付--包干制---分税制&#xff0c; 分别对应时间为建国--改革开放--93年朱提出分税延续至今&#xff1b; 未来趋势必然是完善所得税。 ps:流转税是间接税&#xff0c;间接转嫁给消费者&#…

TypeScript基础

ts学习 目录概述需求&#xff1a; 设计思路实现思路分析1.TypeScript 基础类型2.TypeScript 变量声明3.TypeScript 接口4.TypeScript 类5.TypeScript 函数5.TypeScript 泛型5.TypeScript 枚举TypeScript 类型推论TypeScript 类型兼容性TypeScript 高级类型TypeScript 迭代器和生…

深度解析Dubbo的基本应用与高级应用:负载均衡、服务超时、集群容错、服务降级、本地存根、本地伪装、参数回调等关键技术详解

负载均衡 官网地址&#xff1a; http://dubbo.apache.org/zh/docs/v2.7/user/examples/loadbalance/ 如果在消费端和服务端都配置了负载均衡策略&#xff0c; 以消费端为准。 这其中比较难理解的就是最少活跃调用数是如何进行统计的&#xff1f; 讲道理&#xff0c; 最少活跃数…

金和OA C6 upload_json 任意文件上传漏洞

产品介绍 金和网络是专业信息化服务商,为城市监管部门提供了互联网监管解决方案,为企事业单位提供组织协同OA系统开发平台,电子政务一体化平台,智慧电商平台等服务。 漏洞概述 金和 OA C6 upload_json接口处存在任意文件上传漏洞&#xff0c;攻击者可以通过构造特殊请求包上…

视频号小店新手该怎么运营?团队实操经验分享!

我是电商珠珠 视频号小店作为一个新兴平台&#xff0c;自然预示着有更多的机会在。 所以有很多新手想要了解这个平台并进行入驻&#xff0c;但是却不知道该怎么去运营&#xff0c;没有货源怎么办。 今天我就来给大家详细的讲一下。 一、入驻 入驻的话需要一张企业的营业执…

阿里巴巴秋招前端笔试题

单选题 下面的 JSX 代码中&#xff0c;哪一个无法达到预期的效果&#xff1f; A.<h2>Hello World</h2> B.<input type”checkbox”/> C.<div class”msg-box”>{msg}</div> D.<label htmlFor”name”>Leo</label> E.div styl…

人工智能_机器学习091_使用三维瑞士卷数据_KMeans聚类算法进行瑞士卷数据聚类---人工智能工作笔记0131

然后我们首先来构建一下数据 准备瑞士卷数据: import numpy as np 导入数学计算包 import matplotlib.pyplot as plt 导入画图包 #自底向上聚类 from sklearn.cluster import AgglceerativeClustering 导入分层聚类模型 from sklearn.datasets import make_swiss_roll # 瑞士卷…

“五岳杯”2023量子计算挑战赛启动仪式在南方科技大学成功举办

​2023年11月4日下午&#xff0c;由北京图象图形学学会、中国移动云能力中心&#xff08;以下简称“移动云”&#xff09;主办&#xff0c;南方科技大学承办&#xff0c;北京玻色量子科技有限公司&#xff08;以下简称“玻色量子”&#xff09;协办的“五岳杯”2023量子计算挑战…

RT-Thread:SPI万能驱动 SFUD 驱动Flash W25Q64,通过 STM32CubeMX 配置 STM32 SPI 驱动

关键词&#xff1a;SFUD,FLASH,W25Q64&#xff0c;W25Q128&#xff0c;STM32F407 说明&#xff1a;RT-Thread 系统 使用 SPI万能驱动 SFUD 驱动 Flash W25Q64&#xff0c;通过 STM32CubeMX 配置 STM32 SPI 驱动。 提示&#xff1a;SFUD添加后的存储位置 1.打开RT-Thread Sett…

OpenGL学习笔记-Blending

混合方程中&#xff0c;Csource是片段着色器输出的颜色向量&#xff08;the color output of the fragment shader&#xff09;&#xff0c;其权重为Fsource。Cdestination是当前存储在color buffer中的颜色向量&#xff08;the color vector that is currently stored in the …

ROS2 Humble学习笔记

本文发表与个人的github pages。部分内容未同步到这里。 想查看完整内容&#xff0c;请移步到ROS2 Humble学习笔记。 一、前言 2013年的时候已经接触ROS了&#xff0c;当时断断续续学习了一些ROS的基础知识。16年搬到深圳之后&#xff0c;也有幸参加过星火的一次关于ROS的一些…

S281 LoRa网关在智能电力监测系统中的应用

随着能源消耗的增加和环境保护的要求&#xff0c;智能电力监测系统在电力行业得到了广泛的应用。作为一家领先的科技公司&#xff0c;钡铼技术有限公司推出的S281 LoRa网关为智能电力监测系统提供了强大的支持和解决方案。本文将重点介绍S281 LoRa网关在智能电力监测系统中的应…

【Android Studio】APP练手小项目——切换图片APP

本项目效果&#xff1a; 前言&#xff1a;本项目最终实现生成一个安卓APP软件&#xff0c;点击按钮可实现按钮切换图片。项目包含页面布局、功能实现的逻辑代码以及设置APP图标LOGO和自定义APP名称。 关于Android Studio的下载与安装见我的博文&#xff1a;Android Studio 最新…

Native Crash回溯栈

获取调用栈四种方案&#xff1a;Android Native Crash 收集 1、使用系统的<unwind.h>库 可以获取到出错文件与函数名。只不过需要自己解析函数符号&#xff0c;同时经常会捕获到系统错误&#xff0c;需要手动过滤。 2、libcorkscrew 在4.1.1以上&#xff0c;5.0以下&…