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

news2025/1/17 5:54:58

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.coloradmin.cn/o/1370700.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

奇偶大冒险(判断奇偶,逆序输出)

题目&#xff1a; 代码&#xff1a; #include <bits/stdc.h> using namespace std; int main(){int n;cin>>n;int i0;int c[100]{0}; //数组初始化 while(n!1) {if(n%21){ //判断奇数 c[i]n;n3*n1;i;}else if(n%20){ //判断偶数 c[i]n;nn…

flutter 打包安卓apk 常用配置

打包之前需要先不配置不然会报错 Execution failed for task ‘:app:mergeReleaseResources’. APP目录下的build.gradleaaptOptions.cruncherEnabled falseaaptOptions.useNewCruncher false如图 配置targetSdkVersion 、minSdkVersion 在android/app/src目录下的build.…

PINN物理信息网络 | 泊松方程的物理信息神经网络PINN解法

基本介绍 泊松方程是一种常见的偏微分方程&#xff0c;它在物理学和工程学中具有广泛的应用。它描述了在某个区域内的标量场的分布与该场在该区域边界上的值之间的关系。 物理信息神经网络&#xff08;PINN&#xff09;是一种结合了物理定律和神经网络的方法&#xff0c;用于…

6 - 数据备份与恢复|innobackupex

数据备份与恢复&#xff5c;innobackupex 数据备份与恢复数据备份相关概念物理备份与恢复逻辑备份&#xff08;推荐&#xff09;使用binlog日志文件实现对数据的时时备份‘使用日志 恢复数据 innobackupex 对数据做备份和恢复增量备份与恢复 数据备份与恢复 数据备份相关概念 …

[uniapp] uni-ui+vue3.2小程序评论列表组件 回复评论 点赞和删除

先看效果 下载地址 uni-app官方插件市场: cc-comment组件 环境 基于vue3.2和uni-ui开发; 依赖版本参考如下: "dependencies": {"dcloudio/uni-mp-weixin": "3.0.0-3090820231124001","dcloudio/uni-ui": "^1.4.28","…

提升测试多样性,揭秘Pytest插件pytest-randomly

大家可能知道在Pytest测试生态中&#xff0c;插件扮演着不可或缺的角色&#xff0c;为开发者提供了丰富的功能和工具。其中&#xff0c;pytest-randomly 插件以其能够引入随机性的特性而备受欢迎。本文将深入探讨 pytest-randomly 插件的应用&#xff0c;以及如何通过引入随机性…

Ubuntu设置国内镜像源

文章目录 环境背景方法1&#xff1a;使用清华大学镜像源使用HTTP方式使用HTTPS方式 方法2&#xff1a;使用阿里云镜像源总结参考 环境 RHEL 9.3Docker Community 24.0.7ubuntu:latest Docker image (jammy 22.04) 背景 启动Ubuntu容器&#xff1a; docker run -it ubuntu在…

2024,给管理者的三点建议

2024年&#xff0c;随着市场变化日新月异&#xff0c;各行各业竞争愈演愈烈&#xff0c;很多企业越发注重内部管理工作&#xff0c;管理者面临压力是必然的。在这样的情境下&#xff0c;作为管理者&#xff0c;应该怎么办呢&#xff1f;华恒智信根据多年的管理咨询服务经验&…

【2024系统架构设计】 系统架构设计师第二版-通信系统架构设计理论与实践

目录 一 通信系统网络架构 二 网络构建的关键技术 三 网络构建和设计方法 四 案例分析 注:本节内容可作为知识储备,做一个基本的了解即可。

Opencv实验合集——实验九:姿势估计

在上一章节(相机校准)&#xff0c;你已经找到了相机矩阵&#xff0c;畸变系数等等参数。给出一个图案图像&#xff0c;我们便可以利用上面的信息用于计算其姿势&#xff0c;或者物体在空间中位于何处&#xff0c;比如如何旋转&#xff0c;如何移动等等问题。对于一个平面物体&a…

Google Breakpad使用方法

源码下载地址&#xff1a;https://chromium.googlesource.com/breakpad/breakpad 依赖头文件下载地址&#xff1a; https://chromium.googlesource.com/linux-syscall-support Breakpad由三个主要组件&#xff1a; client 是一个库, 以library的形式内置在应用中&#xff0c…

Mongodb使用指定索引删除数据

回顾Mongodb删除语法 db.collection.deleteMany(<filter>,{writeConcern: <document>,collation: <document>,hint: <document|string>} ) 删除语法中&#xff0c;除了指定过滤器外&#xff0c;还可以指定写入策略&#xff0c;字符序和使用的索引。 …

分布式系统架构设计之分布式消息队列中间件的技术选型报告

1、主流消息队列中间件 01 Kafka 基本原理 Kafka 基于发布-订阅模式&#xff0c;它维护了一个或多个 Topic&#xff0c;生产者将消息发送到 Topic&#xff0c;消费者从 Topic 中读取消息。Kafka 强调高吞吐量&#xff0c;通过批量处理、顺序 I/O 和零拷贝等技术实现高性能 …

【算法Hot100系列】搜索插入位置

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

从起高楼到楼塌了的中台战略 —— 业务中台、数据中台、技术中台

目录 一. 前言 二. 中台能力总体框架 三. 业务中台 四. 数据中台 五. 技术中台 5.1. API 网关 5.2. 开发框架 5.3. 微服务治理 5.4. 分布式数据库 5.5. 数据处理组件 六. 阿里拆中台的原因和意义 七. 总结 一. 前言 中台是近年来互联网行业的一个热门话题。它最早是…

【STM32】| 01——常用外设 | USART

系列文章目录 【STM32】| 01——常用外设 | USART 失败了也挺可爱&#xff0c;成功了就超帅。 文章目录 前言1. 基础理论1.1 并行通信和串行通信1.2 同步通信和异步通信1.3 单工/半双工/全双工1.4 电平信号(RS232/TTL)和差分信号(RS485)1.5 端口(COM) 2. 串口理论2.1 串口物理…

基于apache的http文件服务配置

背景&#xff1a; 公司的产品使用的第三方模组可以OTA&#xff0c;厂家提供的是window开启软件&#xff0c;这样就可以在本机做http下载服务器&#xff0c;然后使用端口映射的方式&#xff0c;公开到外网&#xff0c;这样就可以进行4G网络访问内网服务器了。但这个有个弊端&am…

【C++】—— 工厂模式详解

目录 &#xff08;一&#xff09;工厂模式的特点 &#xff08;二&#xff09;工厂模式分类 1、简单工厂模式 2、工厂方法模式 3、抽象工厂模式 &#xff08;三&#xff09;总结与回顾 &#xff08;一&#xff09;工厂模式的特点 1、优势 ⼯⼚模式是⼀种创建型设计模式&a…

【大数据进阶第三阶段之Hue学习笔记】Hue的安装和使用

1、 Hue的安装 1.1 上传解压安装包 Hue的安装支持多种方式&#xff0c;包括rpm包的方式进行安装、tar.gz包的方式进行安装以及cloudera manager的方式来进行安装等&#xff0c;我们这里使用tar.gz包的方式来进行安装 Hue的压缩包的下载地址&#xff1a; http://archive.cloude…