指根据内容的结构化(内容语义化), 选择合适的标签(代码语义化)。
通俗来讲就是用正确的标签做正确的事情。
</code>: 页面主体内容</li><li><code><hn></code>: <code>h1~h6</code>, 分级标题, <code><h1></code> 与 <code><title></code> 协调有利于搜索引擎优化</li><li><code><ul></code>: 无序列表</li><li><code><li></code>: 有序列表</li><li><code><header></code>: 页面头部, 通常包括网站标志、主导航、全站链接、搜索框</li><li><code><nav></code>: 标记导航, 仅对页面中重要的链接群使用</li><li><code><main></code>: 页面主要内容, 一个页面只能使用一次</li><li><code><article></code>: 定义外部的内容, 其中的内容独立于文档的其余部分</li><li><code><section></code>: 定义文档中的节(<code>section</code>、区段), 比如章节、页眉、页脚或文档中的其他部分</li><li><code><aside></code>: 定义其所处内容之外的内容, 如侧栏、文章的一组链接、广告、友情链接、相关产品列表等</li><li><code><footer></code>: 页脚, 只有当父级是 <code>body</code> 时, 才是整个页面的页脚</li><li><code><small></code>: 呈现小号字体效果, 指定细则, 输入免责声明、注解、署名、版权</li><li><code><strong></code>: 和 <code>em</code> 标签一样, 用于强调文本, 但它强调的程度更强一些</li><li><code><em></code>: 将其中的文本表示为强调的内容, 表现为斜体</li><li><code><mark></code>: 使用黄色突出显示部分文本</li><li><code><figure></code>: 规定独立的流内容(图像、图表、照片、代码等等)(默认有 <code>40px</code> 左右 <code>margin</code>)</li><li><code><figcaption></code>: 定义 <code>figure</code> 元素的标题, 应该被置于 <code>figure</code> 元素的第一个或最后一个子元素的位置</li><li><code><cite></code>:
<ul><li>可以作为下面两种引用标签的属性, 指明来源的 <code>url</code></li><li>也可以作为单独的标签使用, 标明文档中的对参考文献的引用</li></ul> </li><li><code><blockquoto></code>: 定义块引用, 块引用拥有它们自己的空间</li><li><code><q></code>: 短的引述(跨浏览器问题, 尽量避免使用)</li><li><code><time></code>:
<ul><li>其中的 <code>datetime</code> 属性遵循特定格式, 如果忽略此属性, 文本内容必须是合法的日期或者时间格式</li><li>在浏览器中不显示</li></ul> </li><li><code><abbr></code>: 简称或缩写</li><li><code><dfn></code>: 定义术语元素, 与定义必须紧挨着, 可以在描述列表 <code>dl</code> 元素中使用</li><li><code><address></code>: 作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)
<ul><li>浏览器默认呈倾斜字体</li><li>当某个地址与文章作者无关, 应该使用 <code>p</code> 而不是 <code>address</code></li><li>不能包含和联系信息无关的任何信息</li></ul> </li><li><code><del></code>: 移除的内容</li><li><code><ins></code>: 添加的内容</li><li><code><code></code>: 标记代码
<ul><li>一行时可以直接使用, 多行时需要配合 <code><pre></code> 将其包裹, 使浏览器识别大量缩进和空白字符</li><li><code><pre><code></code></pre></code></li></ul> </li><li><code><var></code>: 标记表示变量的名称</li><li><code><meter></code>: 定义已知范围或分数值内的标量测量, (<code>Internet Explorer</code> 不支持 <code>meter</code> 标签)</li><li><code><progress></code>: 定义运行中的进度(进程)</li></ul>
</div>
</div>
</li>
<li class="list-group-item ul-li">
<b>相关阅读:</b><br>
<nobr>
<a href="/Article/Index/1052781">C++opencv 色彩空间转换和保存</a> <br />
<a href="/Article/Index/1307114">Python中对象可变的（mutable）和不可变的（immutable）介绍</a> <br />
<a href="/Article/Index/838962">halcon二维码识别简单案例</a> <br />
<a href="/Article/Index/1525962">实现upt下客户端用tftp文件传输协议编写客户端发送下载文件</a> <br />
<a href="/Article/Index/616473">那些年你啃过的ConcurrentHashMap</a> <br />
<a href="/Article/Index/799223">Linux上文本处理三剑客之sed</a> <br />
<a href="/Article/Index/730896">Redis(九) - Redis之分布式锁</a> <br />
<a href="/Article/Index/1324520">Unity InputSystem 参考</a> <br />
<a href="/Article/Index/1331764">ACM MM 2023 | 基于去中心化表征的人体姿态估计方法</a> <br />
<a href="/Article/Index/1127556">关于瑞萨R7 的CANFD切换为经典CAN</a> <br />
</nobr>
</li>
<li class="list-group-item from-a mb-2">
原文地址：https://blog.csdn.net/m0_51180924/article/details/126568592
</li>
</ul>
</div>
<div class="col-lg-4 col-sm-12">
<ul class="list-group" style="word-break:break-all;">
<li class="list-group-item ul-li-bg" aria-current="true">
最新文章
</li>
<li class="list-group-item ul-li">
<nobr>
<a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br />
<a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br />
<a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br />
<a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br />
<a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br />
<a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a> <br />
<a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br />
<a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br />
<a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br />
<a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br />
</nobr>
</li>
</ul>
<ul class="list-group pt-2" style="word-break:break-all;">
<li class="list-group-item ul-li-bg" aria-current="true">
热门文章
</li>
<li class="list-group-item ul-li">
<nobr>
<a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a> <br />
<a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a> <br />
<a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a> <br />
<a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a> <br />
<a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a> <br />
<a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a> <br />
<a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a> <br />
<a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a> <br />
<a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br />
<a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a> <br />
</nobr>
</li>
</ul>
</div>
</div>
</div>
<!-- 主体 -->
<!--body结束-->
<!--这里是footer模板-->
<!--footer-->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-muted center foot-height">
Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>
<a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a>
</div>
<div style="width:300px;margin:0 auto; padding:0px 5px;">
<a href="/regex.html">正则表达式工具</a>
<a href="/cron.html">cron表达式工具</a>
<a href="/pwdcreator.html">密码生成工具</a>
</div>
<div style="width:300px;margin:0 auto; padding:5px 0;">
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a>
</div>
</div>
</div>
</div>
</nav>
<!--footer-->
<!--footer模板结束-->
<script src="/js/plugins/jquery/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<!--这里是scripts模板-->
<!--scripts模板结束-->
</body>
</html>