02 HTML文档结构与标签语法

531次阅读
没有评论

共计 1580 个字符,预计需要花费 4 分钟才能阅读完成。

引入

在上一篇我们介绍了 HTML 是一种超文本标记语言, 主要负责编辑文本结构和文本内容, 以便浏览器能正常显示, 浏览器的解析顺序自上而下, 下面对 HTML 的文档结构展开介绍

  • Pycharm 中输入 : html:5 + Tab 或者 ! + Tab
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

零. 标签类别

  • 块级标签 :块元素一般都从新行开始,它可以容纳内联元素和其他块元素, 常见块元素是段落标签 "p"、"div"、"form" 这个块元素比较特殊,它只能用来容纳其他块元素

一.\<!doctype html>

HTML5 的标准网页声明, 不是 html 标签, 支持 HTML5 标准的主流浏览器都可识别这个声明, 表示该网页采用 HTML5

\<!DOCTYPE> 声明位于文档中的最前面的位置,处于 \ 标签之前, 此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范

而 \<!DOCTYPE> 不是 HTML 标签, 它为浏览器提供一项信息 (声明), 即 HTML 是用什么版本编写的

二.\ 标签

主要作用告知浏览器这是一个 HTML 文档,该标签是除 \<!DOCTYPE> 外所有其他 HTML 元素的容器

在上面标签中添加了 lang="en", 这个属性, 定义该网页为英文页面, lang 是 language 的简写, 定义为中文页面可以写成 : lang="zh"

三.\ 标签

该标签是所有头部元素的标签, 其中头部元素必须包含文档标题标签 \, 可以包含 js 脚本 \<script> 以及 CSS 样式 \</p> <style>、\<meta> 信息等等 </p> </blockquote> <h2 id='pk-menu-5'> 四.\<title> 标签 </h2> <blockquote> <p> 该标签它可以用来给 html 文档添加一个标题 </p> <p> 它与 \<body> 中的 \</p> <h1> 标题不同, 它是定义浏览器工具栏中的标题, 也可以是提供页面被添加到收藏夹时的标题和显示在搜索引擎结果中的页面标题 </p> <p> 并且一个 \<html> 文档只能有一个 \<title> 标题 </p> </blockquote> <h2 id='pk-menu-6'> 五.\<meta> 标签 </h2> <blockquote> <p>\<meta> 元素可提供有关页面的元信息 (mata-information), 针对搜索引擎和更新频度的描述和关键词 </p> <p> 元数据不会显示在客户端, 但是会被浏览器解析 </p> </blockquote> <ul> <li>charset 属性 (页面编码)</li> </ul> <p><code>python<br /> <meta charset="UTF-8"> # 告诉浏览器是什么编码 </code></p> <ul> <li>http-equiv 属性 (刷新和跳转)</li> </ul> <p><code>python<br /> <meta http-equiv="refresh" content="3,http://www.baidu.com"> # 3 秒后跳转指定网页 <br /> <meta http-equiv="refresh" content="3"> # 3 秒后跳转当前所在的网页 </code></p> <ul> <li>name 属性 </li> </ul> <p><code>python<br /> <meta name="keywords" content="网上购物, 京东, 支付"> # 关键字, 便于搜索引擎查找分类以及 seo 优化 <br /> <meta name="description" content="这是一个网上购物平台"> # 描述 </code></p> <h2 id='pk-menu-7'> 六.\<body> 标签 </h2> <blockquote> <p> 该标签定义文档的主体, 称为内容主体标签, 一般网页内容均放入到该标签组中 </p> <p> 通常我们在浏览器中看到的内容体都是在该标签内的 </p> <p> 该标签元素包含文档的所有内容, 比如文本、超链接、图像、表格和列表等等 </p> </blockquote> <h2 id='pk-menu-8'> 七. 注释 </h2> <ul> <li> 单行注释 </li> </ul> <pre><code class="language-python"><!-- 单行注释 --> </code></pre> <ul> <li> 多行注释 </li> </ul> <pre><code class="language-python"><!-- 多行注释 1 多行注释 2 多行注释 3 --> </code></pre> <ul> <li> 使用注释标志开始和结束位置 </li> </ul> <pre><code class="language-python"><!-- 导航条开始 --> 导航条所有的 html 代码 <!-- 导航条结束 --> <!-- 左侧菜单栏开始 --> 左侧菜单栏的 HTMl 代码 <!-- 左侧菜单栏结束 --> </code></pre> <h2 id='pk-menu-9'> 八. 标签分类 </h2> <h3 id='pk-menu-10'>1. 双标签 </h3> <pre><code class="language-python"><h1>...</h1> <p>...</p> <a href="#">...</a> # 等等 </code></pre> <h3 id='pk-menu-11'>2. 单标签 (自闭合标签)</h3> <pre><code class="language-python"><img src="" alt=""> <br> # 等等 </code></pre> <h2 id='pk-menu-12'> 九.HTML 特殊字符符号 </h2> <h3 id='pk-menu-13'>1. 常用 </h3> <pre><code class="language-html">©版权 &copy; ®商标 &reg; 空格 &emsp; ¥ &yen; $ &#36 & &amp; > &gt; < &lt; </code></pre> <h3 id='pk-menu-14'>2. 更多 </h3> <p><a href="https://www.webhek.com/post/html-enerty-code.html" target="_blank" rel="nofollow">HTML 特殊字符符号大全 </a></p> </div> <div class="t-separator c-sub t-sm mt30">正文完</div> <div class="footer-info puock-text mt20"> <div class="mt20 tags"><a href="https://songhaixing.top/tag/web/" class="pk-badge pk-badge-sm mr5 mb10"><i class="fa-solid fa-tag"></i> web</a></div> <div class="p-flex-sbc mt20 t-sm"> <div> <span>发表至:</span><a class=" mr5" href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/web/"><i class="fa-regular fa-folder-open"></i> Web</a> <a class=" mr5" href="https://songhaixing.top/category/%e5%89%8d%e7%ab%af/"><i class="fa-regular fa-folder-open"></i> 前端</a> </div> <div> <span class="c-sub"><i class="fa-regular fa-clock"></i> 2023-06-16</span> </div> </div> </div> </div> <div class="mt15 post-action-panel"> <div class="post-action-content"> <div class="d-flex justify-content-center w-100 c-sub"> <div class="circle-button puock-bg text-center " id="post-like" data-id="514"> <i class="fa-regular fa-thumbs-up t-md"></i> <span class="t-sm"></span></div> <div class="circle-button puock-bg text-center pk-modal-toggle" title="海报" data-no-title data-no-padding data-once-load="true" data-url="https://songhaixing.top/wp-admin/admin-ajax.php?action=pk_poster&id=514" ><i class="fa-regular fa-images"></i></div> <div class="circle-button puock-bg text-center pk-modal-toggle" title="分享" data-once-load="true" data-url="https://songhaixing.top/wp-admin/admin-ajax.php?action=pk_ajax_dialog_post_share&id=514"> <i class="fa fa-share-from-square t-md"></i></div> <div class="ls"> <div class="circle-button puock-bg text-center post-menu-toggle post-menus-box"><i class="fa fa-bars t-md"></i></div> </div> </div> </div> </div> </div> <div class="p-block p-flex-sc"> <div class="mr-3 p-flex-sk-0"> <img class="md-avatar mt-1" src="https://songhaixing.top/wp-content/uploads/2024/02/cropped-企业微信截图_20240224101309-96x96.png" alt="shawn" title="shawn"> </div> <div class="puock-text t-md"> <div> <span class="font-weight-bold">版权声明:</span><span>本站原创文章,由</span> <a class="a-link" href="https://songhaixing.top/author/admin/">shawn </a>2023-06-16发表,共计1580字。 </div> <div class="mt-2"> <span class="font-weight-bold c-sub">转载说明:</span><span class="c-sub">除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。</span> </div> </div> </div> <!--内页中--> <div class="p-block pb-0"> <div class="row puock-text post-relevant"> <a href="https://songhaixing.top/13%20JS%E4%B9%8BJSON%E5%AF%B9%E8%B1%A1/" class="col-6 col-md-3 post-relevant-item ww"> <!-- --> <div style="background:url('https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=160&h=140&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/random/5.jpg')"> <div class="title">13 JS之JSON对象</div> </div> </a> <a href="https://songhaixing.top/08%20Vue%20%E7%BB%84%E4%BB%B6%E9%97%B4%E9%80%9A%E4%BF%A1/" class="col-6 col-md-3 post-relevant-item ww"> <!-- --> <div style="background:url('https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=160&h=140&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/1382.png')"> <div class="title">08 Vue 组件间通信</div> </div> </a> <a href="https://songhaixing.top/03%20hand%E4%B8%8Ebody%E5%86%85%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/" class="col-6 col-md-3 post-relevant-item ww"> <!-- --> <div style="background:url('https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=160&h=140&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/1414.png')"> <div class="title">03 hand与body内常用标签</div> </div> </a> <a href="https://songhaixing.top/08%20JS%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6/" class="col-6 col-md-3 post-relevant-item ww"> <!-- --> <div style="background:url('https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=160&h=140&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/1418.png')"> <div class="title">08 JS流程控制</div> </div> </a> </div> </div> <div class="p-block p-lf-15"> <div class="row text-center pd-links single-next-or-pre t-md "> <div class="col-6 p-border-r-1 p-0"> <a href="https://songhaixing.top/35%20JWT%20%E8%AE%A4%E8%AF%81/" rel="prev"><div class='abhl puock-text'><p class='t-line-1'>35 JWT 认证</p><span>上一篇</span></div></a> </div> <div class="col-6 p-0"> <a href="https://songhaixing.top/00%20%E5%89%8D%E7%AB%AF%E7%AE%80%E4%BB%8B/" rel="next"><div class='abhl puock-text'><p class='t-line-1'>00 前端简介</p><span>下一篇</span></div></a> </div> </div> </div> <!--评论上方--> <div class="p-block" id="comments"> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa-regular fa-comments mr-1"></i>评论(没有评论)</span> </div> <div class="mt20 clearfix" id="comment-form-box"> <form class="mt10" id="comment-form" method="post"> <div class="form-group"> <textarea placeholder="您必须要登录之后才可以进行评论" disabled id="comment" name="comment" class="form-control form-control-sm t-sm" rows="4"></textarea> </div> </form> </div> <div id="post-comments"> <div class="mt20 p-flex-s-right" > <ul class="pagination comment-ajax-load"> </ul> </div> </div> </div> </div> <div id="sidebar" class=" col-lg-4 d-none d-lg-block"> <div class="sidebar-main"> <div class="p-block"> <div class=""> <form class="global-search-form" action="https://songhaixing.top" method="get"> <div class="input-group"> <input type="text" name="s" class="form-control t-md" placeholder="搜你想搜"> </div> </form> </div> </div> <div class="widget-puock-author widget"> <div class="header" style="background-image: url('https://songhaixing.top/wp-content/uploads/2023/06/1024x768-998384-digital-digital-art-artwork-illustration-drawing.jpg')"> <img src='https://songhaixing.top/wp-content/uploads/2024/02/cropped-企业微信截图_20240224101309-96x96.png' class='avatar' alt="Shawn派大星" title="Shawn派大星"> </div> <div class="content t-md puock-text"> <div class="text-center p-2"> <div class="t-lg">Shawn派大星</div> <div class="mt10 t-sm">一支技术博客😁</div> </div> <div class="row mt10"> <div class="col-6 text-center"> <div class="c-sub t-sm">阅读量</div> <div>165716</div> </div> <div class="col-6 text-center"> <div class="c-sub t-sm">评论数</div> <div>16</div> </div> </div> </div> </div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>探言</span> </div> <div class="mt20"> <div class="widget-puock-hitokoto" data-api=""> <div class="t puock-text"> <div class="pk-skeleton _default"><div></div><div></div><div></div><div></div></div> </div> <div class="fb d-none">-「<span class="f"></span>」</div> </div> </div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>分类</span> </div> <div class="mt20"> <div class="row t-md"> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/midjourney/" class="puock-bg p-2 abhl d-inline-block w-100" title="⛵Midjourney">⛵Midjourney</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/ai/" class="puock-bg p-2 abhl d-inline-block w-100" title="AI">AI</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/django/" class="puock-bg p-2 abhl d-inline-block w-100" title="Django">Django</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/docker/" class="puock-bg p-2 abhl d-inline-block w-100" title="Docker">Docker</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/flask/" class="puock-bg p-2 abhl d-inline-block w-100" title="Flask">Flask</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/git/" class="puock-bg p-2 abhl d-inline-block w-100" title="Git">Git</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/go/" class="puock-bg p-2 abhl d-inline-block w-100" title="Go">Go</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/kafka/" class="puock-bg p-2 abhl d-inline-block w-100" title="Kafka">Kafka</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/linux/" class="puock-bg p-2 abhl d-inline-block w-100" title="Linux">Linux</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/luffy/" class="puock-bg p-2 abhl d-inline-block w-100" title="luffy">luffy</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/mysql/" class="puock-bg p-2 abhl d-inline-block w-100" title="MySQL">MySQL</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/python/" class="puock-bg p-2 abhl d-inline-block w-100" title="Python">Python</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/vue/" class="puock-bg p-2 abhl d-inline-block w-100" title="Vue">Vue</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/web/" class="puock-bg p-2 abhl d-inline-block w-100" title="Web">Web</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/wordpress/" class="puock-bg p-2 abhl d-inline-block w-100" title="Wordpress">Wordpress</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e5%89%8d%e7%ab%af/" class="puock-bg p-2 abhl d-inline-block w-100" title="前端">前端</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%89%80%e6%9c%89%e5%88%86%e7%b1%bb/" class="puock-bg p-2 abhl d-inline-block w-100" title="所有分类">所有分类</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e6%95%b0%e6%8d%ae%e5%ba%93/" class="puock-bg p-2 abhl d-inline-block w-100" title="数据库">数据库</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/uncategorized/" class="puock-bg p-2 abhl d-inline-block w-100" title="未分类">未分类</a> </div> <div class="col col-lg-6 text-center p-2"> <a href="https://songhaixing.top/category/%e8%ae%a1%e7%ae%97%e6%9c%ba%e5%9f%ba%e7%a1%80/" class="puock-bg p-2 abhl d-inline-block w-100" title="计算机基础">计算机基础</a> </div> </div></div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>随机文章</span> </div> <div class="mt20"> <div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="07 JS运算符介绍" href="https://songhaixing.top/07%20JS%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BB%8B%E7%BB%8D/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/random/3.jpg' class='' alt="07 JS运算符介绍"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="07 JS运算符介绍" href="https://songhaixing.top/07%20JS%E8%BF%90%E7%AE%97%E7%AC%A6%E4%BB%8B%E7%BB%8D/">07 JS运算符介绍</a></h2> <div class="description t-sm c-sub text-3line">一. 算数运算符 + : 加 - : 减 * : 乘 / : 除 % : 取余 ++ : 自增 -- : 自减...</div> </div> </div> </div><div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="🍁Vue 入门实战" href="https://songhaixing.top/vue-%e5%85%a5%e9%97%a8%e5%ae%9e%e6%88%98/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/uploads/2023/06/Vue-1024x582.jpg' class='' alt="🍁Vue 入门实战"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="🍁Vue 入门实战" href="https://songhaixing.top/vue-%e5%85%a5%e9%97%a8%e5%ae%9e%e6%88%98/">🍁Vue 入门实战</a></h2> <div class="description t-sm c-sub text-3line">Vue 🍁01 Vue 入门介绍 🍁02 Vue 基础介绍 🍁03 Vue 生命期钩子 🍁04 Vue 计算属...</div> </div> </div> </div><div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="03 Docker常用命令" href="https://songhaixing.top/03%20Docker%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/294.png' class='' alt="03 Docker常用命令"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="03 Docker常用命令" href="https://songhaixing.top/03%20Docker%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4/">03 Docker常用命令</a></h2> <div class="description t-sm c-sub text-3line">一. 帮助命令 docker version : 查看 Docker 版本信息 docker info : 查...</div> </div> </div> </div><div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="14 JS之RegExp对象(正则对象)" href="https://songhaixing.top/14%20JS%E4%B9%8BRegExp%E5%AF%B9%E8%B1%A1%28%E6%AD%A3%E5%88%99%E5%AF%B9%E8%B1%A1%29/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/random/3.jpg' class='' alt="14 JS之RegExp对象(正则对象)"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="14 JS之RegExp对象(正则对象)" href="https://songhaixing.top/14%20JS%E4%B9%8BRegExp%E5%AF%B9%E8%B1%A1%28%E6%AD%A3%E5%88%99%E5%AF%B9%E8%B1%A1%29/">14 JS之RegExp对象(正则对象)</a></h2> <div class="description t-sm c-sub text-3line">常用匹配模式 g (全局匹配, 找到所有匹配,而不是在第一个匹配后停止) i (忽略大小写) 注意 正则放到引...</div> </div> </div> </div><div class="mt10"> <div class="widget-common-media-post"> <a class="img ww" title="11 VMware workstations软件使用以及Linux系统安装" href="https://songhaixing.top/11-vmware-workstations%e8%bd%af%e4%bb%b6%e4%bd%bf%e7%94%a8%e4%bb%a5%e5%8f%8alinux%e7%b3%bb%e7%bb%9f%e5%ae%89%e8%a3%85/"><img src='https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/timthumb.php?w=120&h=80&a=c&zc=1&q=90&src=https://songhaixing01.oss-cn-hangzhou.aliyuncs.com/wordpress1/1489.png' class='' alt="11 VMware workstations软件使用以及Linux系统安装"/></a> <div class="info"> <h2 class="t-lg t-line-1"><a class="a-link t-w-400 t-md" title="11 VMware workstations软件使用以及Linux系统安装" href="https://songhaixing.top/11-vmware-workstations%e8%bd%af%e4%bb%b6%e4%bd%bf%e7%94%a8%e4%bb%a5%e5%8f%8alinux%e7%b3%bb%e7%bb%9f%e5%ae%89%e8%a3%85/">11 VMware workstations软件使用以及Linux系统安装</a></h2> <div class="description t-sm c-sub text-3line">一. 服务器配置 IP 地址相关命令 关闭防火墙 python # systemctl stop firewa...</div> </div> </div> </div></div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>标签云</span> </div> <div class="mt20"> <div class="widget-puock-tag-cloud"><a href='https://songhaixing.top/tag/ai%e7%a7%81%e6%9c%89%e7%9f%a5%e8%af%86%e5%ba%93/' class='badge d-none d-md-inline-block bg-success ahfff'>AI私有知识库</a><a href='https://songhaixing.top/tag/django/' class='badge d-none d-md-inline-block bg-warning ahfff'>django</a><a href='https://songhaixing.top/tag/docker/' class='badge d-none d-md-inline-block bg-info ahfff'>docker</a><a href='https://songhaixing.top/tag/drf/' class='badge d-none d-md-inline-block bg-success ahfff'>drf</a><a href='https://songhaixing.top/tag/flask/' class='badge d-none d-md-inline-block bg-secondary ahfff'>Flask</a><a href='https://songhaixing.top/tag/git/' class='badge d-none d-md-inline-block bg-secondary ahfff'>git</a><a href='https://songhaixing.top/tag/go/' class='badge d-none d-md-inline-block bg-danger ahfff'>go</a><a href='https://songhaixing.top/tag/kafka/' class='badge d-none d-md-inline-block bg-dark ahfff'>kafka</a><a href='https://songhaixing.top/tag/linux/' class='badge d-none d-md-inline-block bg-primary ahfff'>linux</a><a href='https://songhaixing.top/tag/mysql/' class='badge d-none d-md-inline-block bg-secondary ahfff'>mysql</a><a href='https://songhaixing.top/tag/python/' class='badge d-none d-md-inline-block bg-info ahfff'>python</a><a href='https://songhaixing.top/tag/vue/' class='badge d-none d-md-inline-block bg-success ahfff'>vue</a><a href='https://songhaixing.top/tag/web/' class='badge d-none d-md-inline-block bg-success ahfff'>web</a><a href='https://songhaixing.top/tag/wordpress/' class='badge d-none d-md-inline-block bg-warning ahfff'>wordpress</a><a href='https://songhaixing.top/tag/%e5%89%8d%e7%ab%af/' class='badge d-none d-md-inline-block bg-warning ahfff'>前端</a><a href='https://songhaixing.top/tag/%e5%89%8d%e7%ab%af%ef%bc%8cweb/' class='badge d-none d-md-inline-block bg-primary ahfff'>前端,web</a><a href='https://songhaixing.top/tag/%e6%95%b0%e6%8d%ae%e5%ba%93/' class='badge d-none d-md-inline-block bg-warning ahfff'>数据库</a><a href='https://songhaixing.top/tag/%e7%a5%9e%e9%80%9a%e6%95%b0%e6%8d%ae%e5%ba%93/' class='badge d-none d-md-inline-block bg-secondary ahfff'>神通数据库</a><a href='https://songhaixing.top/tag/%e8%99%9a%e6%8b%9f%e7%8e%af%e5%a2%83/' class='badge d-none d-md-inline-block bg-dark ahfff'>虚拟环境</a><a href='https://songhaixing.top/tag/%e8%ae%a1%e7%ae%97%e6%9c%ba%e5%9f%ba%e7%a1%80/' class='badge d-none d-md-inline-block bg-danger ahfff'>计算机基础</a></div></div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>最新评论</span> </div> <div class="mt20"> <div class="min-comments t-md"> <div class="comment t-md t-line-1"> <img src='https://cn.gravatar.com/avatar/3695a795f86ba0f96a5f57f2912f9a3b?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='min-avatar' alt="yanmkxx"> <a class="puock-link" href="https://songhaixing.top/python-%e5%9f%ba%e7%a1%80/#comment-27"> <span class="ta3 link-hover">yanmkxx</span></a> <span class="c-sub t-w-400">很牛,谢谢你写的文章</span> </div> <div class="comment t-md t-line-1"> <img src='https://cn.gravatar.com/avatar/3695a795f86ba0f96a5f57f2912f9a3b?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='min-avatar' alt="yanmkxx"> <a class="puock-link" href="https://songhaixing.top/01%20Docker%E7%AE%80%E4%BB%8B/#comment-26"> <span class="ta3 link-hover">yanmkxx</span></a> <span class="c-sub t-w-400"><img src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/smiley/cool.png" alt=":cool:" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <img src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/img/smiley/cool.png" alt=":cool:" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span> </div> <div class="comment t-md t-line-1"> <img src='https://cn.gravatar.com/avatar/3695a795f86ba0f96a5f57f2912f9a3b?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='min-avatar' alt="yanmkxx"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-25"> <span class="ta3 link-hover">yanmkxx</span></a> <span class="c-sub t-w-400">感谢大佬的文章,写的很好,</span> </div> <div class="comment t-md t-line-1"> <img src='https://cn.gravatar.com/avatar/610df4b5307599ff4fb02054cc2a77ec?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='min-avatar' alt="wszzss"> <a class="puock-link" href="https://songhaixing.top/%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5.html/#comment-24"> <span class="ta3 link-hover">wszzss</span></a> <span class="c-sub t-w-400">请帮我修改下链接:微生之最,前面帮我加个www</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/song1_avatar_1688219468-96x96.png' class='min-avatar' alt="song1"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-23"> <span class="ta3 link-hover">song1</span></a> <span class="c-sub t-w-400">搜索</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/puock_avatar_1688220022.png' class='min-avatar' alt="puock"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-15"> <span class="ta3 link-hover">puock</span></a> <span class="c-sub t-w-400">(❁´◡`❁)(❁´◡`❁)(❁´◡`❁)</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/zhaochong_avatar_1688219566-96x96.jpg' class='min-avatar' alt="zhaochong"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-10"> <span class="ta3 link-hover">zhaochong</span></a> <span class="c-sub t-w-400">😄</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/zhaochong_avatar_1688219566-96x96.jpg' class='min-avatar' alt="zhaochong"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-9"> <span class="ta3 link-hover">zhaochong</span></a> <span class="c-sub t-w-400">支持</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/xing1_avatar_1688219503-96x96.png' class='min-avatar' alt="xing1"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-8"> <span class="ta3 link-hover">xing1</span></a> <span class="c-sub t-w-400">😶‍🌫️</span> </div> <div class="comment t-md t-line-1"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/song1_avatar_1688219468-96x96.png' class='min-avatar' alt="song1"> <a class="puock-link" href="https://songhaixing.top/%f0%9f%97%a3%ef%b8%8f%e7%95%99%e8%a8%80%e6%9d%bf.html/#comment-7"> <span class="ta3 link-hover">song1</span></a> <span class="c-sub t-w-400">🫥</span> </div> </div> </div></div> <div class="pk-widget p-block "> <div> <span class="t-lg border-bottom border-primary puock-text pb-2"><i class="fa fa-chart-simple mr-1"></i>读者墙</span> </div> <div class="mt20"> <div class="row puock-text"> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/song1_avatar_1688219468-96x96.png' class='md-avatar' alt="song1"> <span class="t-sm">song1</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://cn.gravatar.com/avatar/3695a795f86ba0f96a5f57f2912f9a3b?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='md-avatar' alt="yanmkxx"> <span class="t-sm">yanmkxx</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/zhaochong_avatar_1688219566-96x96.jpg' class='md-avatar' alt="zhaochong"> <span class="t-sm">zhaochong</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://cn.gravatar.com/avatar/610df4b5307599ff4fb02054cc2a77ec?s=96&d=https%3A%2F%2Fsonghaixing.top%2Fwp-content%2Fuploads%2F2023%2F06%2Fcropped-%E9%B9%B0-150x150.png&r=g' class='md-avatar' alt="wszzss"> <span class="t-sm">wszzss</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/puock_avatar_1688220022.png' class='md-avatar' alt="puock"> <span class="t-sm">puock</span> </a> </div> </div> <div class="col col-12 col-lg-6 pl-0"> <div class="p-2 text-truncate text-nowrap"> <a href="javascript:void(0)" class="a-link" rel="nofollow"> <img src='https://songhaixing.top/wp-content/uploads/2023/07/xing1_avatar_1688219503-96x96.png' class='md-avatar' alt="xing1"> <span class="t-sm">xing1</span> </a> </div> </div> </div> </div></div> </div> </div> </div> <!--全局下方--> </div> <div id="post-menus" class="post-menus-box"> <div id="post-menu-state" class="post-menu-toggle" title="打开或关闭文章目录"> <i class="puock-text ta3 fa fa-bars"></i> </div> <div id="post-menu-content" class="animated slideInRight mini-scroll"> <div id="post-menu-head"> </div> <div id="post-menu-content-items"></div> </div> </div> <!--返回顶部和底部--> <div id="rb-float-actions"> <div data-to-area="#comments" class="p-block"><i class="fa-regular fa-comments puock-text"></i></div> <div data-to="top" class="p-block"><i class="fa fa-arrow-up puock-text"></i></div> <div data-to="bottom" class="p-block"><i class="fa fa-arrow-down puock-text"></i></div> </div> <footer id="footer"> <div class="container"> <div class="row row-cols-md-1"> <div class="col-md-6"> <div><span class="t-md pb-2 d-inline-block border-bottom border-primary"><i class="fa-regular fa-bell"></i> 关于我们</span> </div> <p class="mt20 t-md"><strong>本软件站分享互联网技术、工作难题、软件科技,希望大家一起交流</strong></p> </div> <div class="col-md-6"> <div><span class="t-md pb-2 d-inline-block border-bottom border-primary"><i class="fa-regular fa-copyright"></i> 版权说明</span> </div> <p class="mt20 t-md"><strong>本文使用</strong> <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" style="color: #00BFFF;">CC BY-SA 4.0</a> <strong>许可发布,转载请注明出处和署名 。</strong> </p> </div> </div> </div> <div class="mt20 text-center t-md"> <div class="info"> <p>Copyright © 2023 Shawn派大星 | 保留版权所有. <svg t="1688222487445" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2174" width="18" height="18"><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z" fill="#0649D0" p-id="2175"></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z" fill="#0649D0" p-id="2176"></path></svg>赣ICP备2023006278号</p> <span> <i class="fa-brands fa-wordpress"></i> Theme by <a target="_blank" class="c-sub" title="Puock v2.7.10" href="https://github.com/Licoy/wordpress-theme-puock">Puock</a> </span> </div> </div> </div> </div> </footer> </div> <div id="gt-validate-box"></div> <script data-instant>var puock_metas ={"home":"https:\/\/songhaixing.top","vd_comment":true,"vd_gt_id":"14a71faf5491db40e6d302531c6af73e","vd_type":"gt","use_post_menu":true,"is_single":true,"is_pjax":false,"main_lazy_img":false,"link_blank_open":false,"async_view_id":null,"mode_switch":true,"off_img_viewer":false,"off_code_highlighting":false};</script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/dist/js/libs.min.js?ver=2.7.10" id="puock-libs-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/libs/layer/layer.js?ver=2.7.10" id="puock-layer-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/libs/spark-md5.min.js?ver=2.7.10" id="puock-spark-md5-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/libs/html2canvas.min.js?ver=2.7.10" id="puock-html2canvas-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/libs/gt4.js?ver=2.7.10" id="puock-gt4-js"></script> <script type="text/javascript" data-no-instant src="https://songhaixing.top/wp-content/themes/wordpress-theme-puock-2.7.10/assets/dist/js/puock.min.js?ver=2.7.10" id="puock-js"></script> <script></script><style> div.info p, div.info span { display: inline; } div.info span { display: none; } </style> <!--给 WordPress 网站添加鼠标点击爆炸五颜六色特效--> <canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas> <script type="text/javascript" src="https://pan.ahap.cn/yanhua.js"></script> </body> </html>