前端语义化标签及实例

常用的语义化标签的以下几种:
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.hqwc.cn/news/517680.html

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

相关文章

npm install 报错gyp ERR! configure error

在windows系统上下载gitee Vue项目源码后&#xff0c;执行npm install安装项目依赖时&#xff0c;报错内容如下&#xff1a; 首先参考该篇作者文章&#xff0c;gyp ERR! configure error-CSDN博客文章浏览阅读1.2w次。npm install 错误 | gyp ERR! configure error分析原因&…

会议活动如何高效地执行?邀请媒体到场报道的注意点

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 会议活动高效执行要点与媒体邀请注意事项 一、会议活动高效执行要点&#xff1a; 明确目标&#xff1a;确立清晰、具体的会议目的和预期成果。 详细规划&#xff1a;制定详尽的活动流程…

关于DC/DC电源模块的工作温度问题

关于DC/DC电源模块的工作温度问题 BOSHIDA DC/DC电源模块是一种将直流电源转换为其他电压或电流级别的设备。它通常由输入端、输出端、电感、开关管等部件组成。工作温度是影响电源模块性能和可靠性的一个重要参数。一个合适的工作温度范围可以保证模块的正常工作&#xff0c…

1:2.5万、1:5万、1:10万军用地形图图式

当我们决定要开发水经微图&#xff08;简称“微图”&#xff09;Web版的态势标绘后&#xff0c;在前期调研阶段&#xff0c;无意中检索到一份军用地形图图式标准。 军用地形图图式 本标准规定了1:25 000、1:50 000、1:100 000军用地形图所表示的地物、地貌符号的图形、大小和…

学习Java的第二天

如何使用文本文档在cmd里打印出HelloWorld 1、创建一个文本文档&#xff0c;并命名为HelloWorld&#xff0c;将后缀改为java&#xff08;需要自己去把后缀打开显示出来&#xff09; 2、打开编辑 也可以双击打开 3、在里面写出以下代码 上面红框里为你要打印的语句&#xff0c;…

力扣hot100:239.滑动窗口最大值(优先队列/单调队列)

本题是一个经典的单调队列题。不过用优先队列也能解决。 一、优先队列 在使用优先队列时&#xff0c;我们会遇到这样的问题&#xff1a;如何将一个目标数从优先队列中弹出&#xff1f;如果使用stl这是办不到的&#xff0c;虽然可以自行实现这样的功能。但是我们可以这样思考&am…

Linux的时间操作

文章目录 常见的Linux时间操作命令和方法&#xff1a;**查看系统时间****修改系统时间****同步硬件时钟与系统时钟****时区设置** Linux下关于时间操作的具体实例&#xff1a;在Linux系统中进行时间操作时&#xff0c;需要注意以下几个问题&#xff1a; 常见的Linux时间操作命令…

CorelDRAW2024专业级图形设计矢量图形设计软件

CorelDRAW2024是一款功能强大的矢量图形设计软件&#xff0c;适用于专业级图形设计作品的设计师和创作者。它提供了智能对象、布局、插图和模板等功能&#xff0c;可以帮助用户快速创建高质量的设计作品。 这款软件的用户界面直观且易于使用&#xff0c;允许用户快速访问和管理…

django学习记录07——订单案例(复选框+ajax请求)

1.订单的数据表 1.1 数据表结构 1.2 数据表的创建 models.py class Order(models.Model):"""订单号"""oid models.CharField(max_length64, verbose_name"订单号")title models.CharField(max_length64, verbose_name"名称&…

企微hook源码

企微hook源码已经在QQ群内开源。速度进群下载&#xff0c;避免和谐。 QQ群&#xff1a;649480745

武装你的BurpSuite听着反方向的钟让打点更加轻而易举

分块传输-Chunked coding converter github&#xff1a;https://github.com/c0ny1/chunked-coding-converter 使用方法 我们上传一句话木马&#xff0c;使用burp进行抓包 发现有安全狗防火墙&#xff0c;这时插件Chunked coding converter起到作用了 点击右键进行分块上传 …

Conda快速安装的解决方法(Mamba安装)

如果你的Conda安装了&#xff0c;你可能会发现一个问题&#xff0c;就是使用Conda install 安装某个软件时&#xff0c;会特别慢&#xff0c;这时候呢&#xff1f;你会上网去搜&#xff0c;然后大家解决的方法呢。一是告诉你镜像可以下载快一点&#xff0c;二是&#xff0c;Mam…