前端语义化标签及实例

常用的语义化标签的以下几种:
header、nav、article、section、aside、footer、abbr、dfn、address、del、ins、pre、meter、progress

<header> 定义文章的页眉信息
<header><h1>我的网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于</a></li><li><a href="#">服务</a></li><li><a href="#">联系我们</a></li></ul></nav>
</header>

<nav> 定义页面中的各种导航
<nav><ul><li><a href="#">主页</a></li><li><a href="#">产品</a></li><li><a href="#">服务</a></li><li><a href="#">支持</a></li><li><a href="#">联系我们</a></li></ul>
</nav>

<article> 表示文档、页面的内容
<article><h2>文章标题</h2><p>这是一段关于某个主题的文章内容。</p>
</article>

<section> 对文章内容进行分块
<section><h3>章节一</h3><p>这是章节一的内容。</p>
</section>
<section><h3>章节二</h3><p>这是章节二的内容。</p>
</section>

<aside> 定义当前页面或当前文章的附属信息
<article><h2>主要文章内容</h2><p>这是一篇关于某个主题的文章。</p><aside><p>相关链接:</p><ul><li><a href="#">相关文章1</a></li><li><a href="#">相关文章2</a></li></ul></aside>
</article>

<footer> 定义脚注部分
<footer><p>版权所有 &copy; 2023 我的网站</p><p>联系方式:电话:123-456-7890,邮箱:[contact@example.com](mailto:contact@example.com)</p>
</footer>

<abbr> 定义缩写
<p>我在学习<abbr title="HyperText Markup Language">HTML</abbr>。</p>

<dfn> 定义术语元素
<p>根据<dfn>CSS</dfn>(Cascading Style Sheets)的定义,它是一种样式表语言。</p>

<address> 定义作者、相关人士或组织的联系信息
<address><p>公司地址:XX市XX区XX路XX号</p><p>电话:123-456-7890</p><p>邮箱:<a href="mailto:contact@example.com">contact@example.com</a></p>
</address>

<del> 定义移除的内容
<p>原价<del>$100</del>,现价$80!</p>

<ins> 定义添加的内容
<p>新添加的信息:<ins>这个产品已经过质量检测。</ins></p>

<pre> 定义预格式化的文本
<pre>
第一行文本
第二行文本    (这里会保留空格和换行)
第三行文本
</pre>

<meter> 定义度量衡
<p>我的技能水平:<meter value="80" min="0" max="100">80%</meter></p>

<progress> 定义运行中的任务进度
<progress value="22" max="100">22%</progress>
<p>任务完成度:22%</p>

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

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

相关文章

windows 字符编码

LPSTR char* LPCSTR const char* LPWSTR wchar_t* LPCWSTR const wchar_t* LPTSTR TCHAR* LPCTSTR const TCHAR*STD_OUTPUT_HANDLE 标准输出句柄 STD_INTPUT_HANDLE 标准输入句柄 STD_ERROR_HANDLE 标准错误句柄 windows 使用的是utf-16 linux 使用的是utf-8 wch…

4. 使用zap替换gin框架默认的日志并配置日志切割

文章目录 一、gin默认的中间件二、基于zap的中间件三、在gin项目中使用zap 本文将介绍在基于gin框架开发的项目中如何配置并使用zap来接收gin框架默认的日志以及如何配置日志切割。 我们在基于gin框架开发项目时通常都会选择使用专业的日志库来记录项目中的日志&#xff0c;go…

leancloud云存储如何接入App Inventor 2?

提问&#xff1a;leancloud如何应用到App Inventor 2&#xff1f; LeanCloud 能够高效存取海量级 JSON 对象、二进制文件、地理位置等数据。其内置的行级 ACL 权限控制&#xff0c;以及通用的用户及角色管理体系&#xff0c;可以快速实现安全而灵活的数据访问。 根据官方文档&a…

如何通过考核提高酒店人员工作积极性

近年来&#xff0c;随着旅游行业的快速发展&#xff0c;也带动了酒店业的兴盛。酒店的经营效益不仅受益于旅游业&#xff0c;同时也受制于旅游行业。由于旅游业存在明显的季节性差异&#xff0c;旅游旺季客流量多、淡季客流量少&#xff0c;造成人员忙闲不均的问题。酒店行业也…

Android岗面试12家大厂成功跳槽,万字长文

都说程序员是一个青春饭&#xff0c;而我也不知不觉进入行业七年多了&#xff0c;自己也马上要进入而立之年了。都说30岁是每个程序员必会经历的一道坎&#xff0c;而自己也快到要面对这个坎了&#xff0c;我时常会想我能不能跨个这道坎。 于是请教了一些年过30还发展很好的前辈…

【Python】2. 基础语法(1)

常量和表达式 我们可以把 Python 当成一个计算器, 来进行一些算术运算. 注意: print 是一个 Python 内置的 函数, 这个稍后详细介绍. 可以使用 - * / ( ) 等运算符进行算术运算. 先算乘除, 后算加减. 运算符和数字之间, 可以没有空格, 也可以有多个空格. 但是一般习惯上写一…

2024/3/5打卡最长上升子序列**----线性DP,贪心,单调栈

目录 题目&#xff1a; DP分析&#xff1a; 代码&#xff1a; 3.6更新 贪心 第一个思考方式 先上代码&#xff1a; 解析&#xff1a; 贪心 第二个思考方式 &#xff08;与上面的思路差不多&#xff0c;但是换了个角度&#xff09; 思路&#xff1a; 代码&#xff1a; …

freeRTOS day1

总结keil5下载代码和编译代码需要注意的事项 选择合适的微控制器型号&#xff1a;确保你选择的控制器型号与你的项目中实际使用的硬件相匹配。 配置项目设置&#xff1a;正确设置目标芯片的时钟频率、内存大小等参数&#xff0c;以确保编译出的代码能够在硬件上正常运行。 添…

数据结构->链表分类与oj(题),带你提升代码好感

✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;橘橙黄又青-CSDN博客 1.&#x1f34e;链表的分类 前面我们学过顺序表&#xff0c;顺序表问题&#xff1a; …

大唐杯学习笔记:Day5

1.1 小区搜索 搜索流程 PLMN选择 自动模式&#xff1a;UE根据NAS的请求或自主地向NAS报告可用的PLMN 手动模式&#xff1a;通过手动选择一个可用的VPLMN获取正常服务 频点选择 5G NR中,3GPP主要指定了两个频率范围,一个是6GHZ以下,另一个是毫米波,分别称之为FR1和FR2。 N…

AIOps实践中常见的挑战:故障根因与可观测性数据的割裂

运维的挑战与责任 在数字化时代&#xff0c;运维团队面临的挑战前所未有。他们不仅要确保系统的高可用性和高性能&#xff0c;还要快速响应并解决故障&#xff0c;以减少对业务的影响。在这种背景下&#xff0c;运维团队急需工具和技术&#xff0c;能够帮助他们提高效率&#…

一文解释python中的实例方法,类方法和静态方法作用和区别是啥?该如何使用

我们都知道 &#xff0c;python类中有三种常见的方法 &#xff0c;分别是实例方法 &#xff0c;类方法和静态方法 。那么这几个方法到底有什么作用 &#xff1f; 它们之间有什么区别 &#xff1f;该如何使用 &#xff1f; 带着这些问题 &#xff0c;下面我们就来了解下这三种方…

1688商品详情数据采集,工程数据采集丨店铺数据采集丨商品详情数据采集

1688是中国的一个大型B2B电子商务平台&#xff0c;主要用于批发和采购各种商品。对于需要从1688上获取商品详情数据、工程数据或店铺数据的用户来说&#xff0c;可以采用以下几种常见的方法&#xff1a; 官方API接口&#xff1a;如果1688提供了官方的API接口&#xff0c;那么可…

【高效开发工具系列】vimdiff简介与使用

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

米哈游排名首超腾讯,登顶榜首 !!!

米哈游排名首超腾讯&#xff0c;登顶榜首 &#xff01;&#xff01;&#xff01; 大家好&#xff0c;我是銘&#xff0c;全栈开发程序员。 近日&#xff0c;第三方机构 data.ai 公布 2023 年中国游戏厂商及应用出海收入 30 强。 其中米哈游超越腾讯&#xff0c;首次登顶年度…

Selenum八种常用定位(案例解析)

Selenium是一个备受推崇的工具。它有着丰富的功能&#xff0c;让我们能够与网页互动&#xff0c;执行各种任务&#xff0c;能为测试工程师和开发人员提供了很大的便利。 要充分利用Selenium&#xff0c;就需要了解如何正确定位网页上的元素。 接下来我将带大家共同探讨Seleni…

多模态入门

VIT处理图像 CNN VS Transformer 多模态BLIP模型 网络结构 视觉编码器: 就是 ViT 的架构。将输入图像分割成一个个的 Patch 并将它们编码为一系列 Image Embedding,并使用额外的 [CLS] token 来表示全局的图像特征。视觉编码器不采用之前的基于目标检测器的形式,因为 ViLT 和…

推荐书籍《低代码平台开发实践:基于React》—— 提升开发效率,构建优质应用

写在前面 随着数字化转型的深入&#xff0c;企业对应用开发效率和灵活性的要求不断提高。低代码平台作为新兴的软件开发方式&#xff0c;通过可视化界面和预构建组件&#xff0c;极大简化了应用开发流程&#xff0c;降低了技术门槛。基于React的低代码平台以其组件化、响应式和…

Kube-Prometheus 监控Istio

推荐 Istio 多集群监控使用 Prometheus&#xff0c;其主要原因是基于 Prometheus 的分层联邦&#xff08;Hierarchical Federation&#xff09;。 通过 Istio 部署到每个集群中的 Prometheus 实例作为初始收集器&#xff0c;然后将数据聚合到网格层次的 Prometheus 实例上。 网…

3.6作业

作业要求&#xff1a;数据库操作的增、删、改 程序代码&#xff1a; #include<myhead.h> int main(int argc, const char *argv[]) {//定义数据库句柄指针sqlite3 * ppDb NULL;//打开数据库&#xff0c;如果数据库不存在&#xff0c;则创建数据库//将数据库句柄由参数…