HTML入门知识

2023-11-22 23:50:38

从今天开始学习html啦，以下是我在菜鸟教程的学习笔记。

声明为 HTML5 文档

元素是 HTML 页面的根元素

元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。

</span> 元素描述了文档的标题（显示搜索引擎页面的标题）</p></li></ul> <ul><li><p><span class="kdocs-bold"><body></span> 元素包含了可见的页面内容</p></li></ul> <ul><li><p><span class="kdocs-bold"><h1></span> 元素定义一个大标题 h1-h6</p></li></ul> <ul><li><p><span class="kdocs-bold"><p></span> 元素定义一个段落</p></li></ul> <ul><li><p><span class="kdocs-bold"><span></span>span标签用来组合文档中的行内元素</p></li></ul> <ul><li><p><span class="kdocs-bold"><a href="{{a}}</p>" target="_blank">https://www.baidu.com/">{{a}}</a></p><p></p></li></ul> <ul><li><p><span class="kdocs-bold"><img></span>HTML图像例：<img src="/images/logo.png" width="258" height="39" /></p></li></ul> <ul><li><p><span class="kdocs-bold"><br></span>换行，例：<h1>{{ msg }}</h1><br></p></li></ul> <ul><li><p><span class="kdocs-bold"><hr></span> 标签在 HTML 页面中创建水平线。无结束标签</p></li></ul> <ul><li><p>注释：</p></li></ul> <p>*<span class="kdocs-bold"><template></span>：不带任何自身属性，不影响布局的标签</p> <p>大小写问题：标签写法要用小写字母（有些版本对大小写可认为相同，而xhtml中强制使用小写）</p> <p></p> <h3><span class="kdocs-bold">文本格式化：</span></h3> <ul><li><p>加粗：<b></b></p></li></ul> <ul><li><p>斜体：<i></i></p></li></ul> <ul><li><p>上标：<sub></sub></p></li></ul> <ul><li><p>下标：<sup></sup></p></li></ul> <p></p> <h3><span class="kdocs-bold">链接：</span></h3> <ul><li><p>文字链接：<a href="{{b}}" target="_blank">https://zhidao.baidu.com/">{{b}}</a></p></li></ul> <ul><li><p>图片链接：</p></li></ul> <p> <a href="" target="_blank">https://www.baidu.com/"></p> <p> <img src="./assets/音符.png" width="100" height="100"></a></p> <ul><li><p>在当前页面链接到指定位置：在跳转处插入ID（书签）</p></li></ul> <p> <p><a href="#c" >{{ p }}</a></p>：单击变量p的内容即可定位到变量c的内容处</p> <p> <h2><a id="c">{{ c }}</a></h2></p> <p></p> <h3><span class="kdocs-bold">字体样式：</span></h3> <ul><li><p>font-weight：字体，</p></li></ul> <ul><li><p>color：颜色，background：背景颜色，</p></li></ul> <ul><li><p>font-size：字体大小,</p></li></ul> <ul><li><p>text-align：文本对齐方式</p></li></ul> <p>例：标题h1样式</p> <p><style scoped></p> <p>h1 {</p> <p> font-weight: normal;</p> <p> color: #42b983;</p> <p> background-color: aqua;</p> <p>}</p> <p></style></p> <p></p> <h3><span class="kdocs-bold">图像：</span></h3> <ul><li><p>图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，需要使用源属性（src）。源属性的值是图像的 URL 地址，即存储图像的位置。</p></li></ul> <ul><li><p><img src="<span class="kdocs-italic">url</span>" alt="<span class="kdocs-italic">some_text</span>"></p></li></ul> <p>alt属性：用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。</p> <p></p> <h2>Html标签</h2> <ol start="1"><li><p><a>：超链接</p></li></ol> <ol start="2"><li><p><b>：粗体文字</p></li></ol> <ol start="3"><li><p><base> ：为页面上的所有链接规定默认地址或默认目标。</p></li></ol> <pre class="language-plaintext"><code>//必须在head内 <head> <base href="http://www.w3school.com.cn/i/" /> <base target="_blank" /> </head></code></pre> <h5><span class="kdocs-bold">必需的属性</span></h5> <table class="kdocs-table" border="1"><tbody><tr class="kdocs-tableRow"><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">属性</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">值</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">描述</span></span></p></td></tr><tr class="kdocs-tableRow"><td class="kdocs-tableCell"><p><span class="kdocs-fontSize">href</span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-italic">URL</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize">规定页面中所有相对链接的基准 URL。</span></p></td></tr></tbody></table> <h5><span class="kdocs-bold">可选的属性</span></h5> <table class="kdocs-table" border="1"><tbody><tr class="kdocs-tableRow"><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">属性</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">值</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">描述</span></span></p></td></tr><tr class="kdocs-tableRow"><td class="kdocs-tableCell"><p><span class="kdocs-fontSize">target</span></p></td><td class="kdocs-tableCell"> <ul><li><p><span class="kdocs-fontSize">_blank</span></p></li></ul> <ul><li><p><span class="kdocs-fontSize">_parent</span></p></li></ul> <ul><li><p><span class="kdocs-fontSize">_self</span></p></li></ul> <ul><li><p><span class="kdocs-fontSize">_top</span></p></li></ul> <ul><li><p><span class="kdocs-fontSize"><span class="kdocs-italic">framename</span></span></p></li></ul></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize">在何处打开页面中所有的链接。</span></p></td></tr></tbody></table> <p></p> <p>4. <i> ：显示斜体文本效果</p> <p>5. <li> 标签定义列表项目。</p> <p> <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中</p> <p>6.</p> <p><link> 标签定义文档与外部资源的关系。</p> <p><link> 标签最常见的用途是链接样式表。</p> <pre class="language-plaintext"><code>//必须在head内 <head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head></code></pre> <p>7.<u> 标签为文本添加下划线：</p> <pre class="language-plaintext"><code><p>如果文本不是超链接，就不要<u>对其使用下划线</u>。</p></code></pre> <p>8.<label>标签</p> <ul><li><p><label> 标签为 input 元素定义标注（标记）。</p></li></ul> <ul><li><p>label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。</p></li></ul> <p>可实现：在标签中添加图片，不用勾选复选框，直接点击图片也可以勾选</p> <h4>属性</h4> <table class="kdocs-table" border="1"><tbody><tr class="kdocs-tableRow"><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">属性</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">值</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-bold">描述</span></span></p></td></tr><tr class="kdocs-tableRow"><td class="kdocs-tableCell"><p><span class="kdocs-fontSize">for</span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-italic">id</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize">规定 label 绑定到哪个表单元素。</span></p></td></tr><tr class="kdocs-tableRow"><td class="kdocs-tableCell"><p><span class="kdocs-fontSize">form</span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize"><span class="kdocs-italic">formid</span></span></p></td><td class="kdocs-tableCell"><p><span class="kdocs-fontSize">规定 label 字段所属的一个或多个表单。</span></p></td></tr></tbody></table> <p></p> <h3>css盒子模型</h3> <p>margin：外边距</p> <p>border：边框</p> <p>padding：内边距</p> <p>content：内容</p> <p></p> <p>盒子真正的高度为：内容高度（height）+上下填充（padding）+上下边距（margin）+上下边框（border）</p> <h3>布局样式</h3> <ol start="1"><li><p><span class="kdocs-bold">常规布局：</span>基于垂直的块（block）和基于水平的内联（inline）</p></li></ol> <ul><li><p>优：适用于页面</p></li></ul> <ul><li><p>缺：它们对于大型或复杂的应用程序布局来说缺乏灵活性（特别是在改变方向，调整大小，拉伸，收缩等方面）</p></li></ul> <ol start="2"><li><p><span class="kdocs-bold">弹性布局：</span>flex,提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。</p></li></ol> <h4><span class="kdocs-bold">弹性布局（display:flex;）</span></h4> <ul><li><p>Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（<span class="kdocs-bold">主要是为了适应所有类型的显示设备和屏幕尺寸</span>）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。</p></li></ul> <ul><li><p>设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。</p></li></ul> <ul><li><p>适合小规模布局</p></li></ul> <h5>flex: 1即为flex-grow:1，</h5> <p>经常用作自适应布局，将父容器的display: flex，侧边栏大小固定后，将内容区flex: 1，内容区则会自动等分占满剩余空间。</p> <p></p> <ol start="1"><li><h4><ul><li>flex-direction:主轴方向</li></ul></h4> </li></ol> <ol start="2"><li><h4><ul><li>justify-content：子元素的水平对齐方式</li></ul></h4> </li></ol> <ul><li><p>space-between 是两端对齐。</p></li></ul> <p>使每个矩形子元素(flex项)之间的间隔是相等的，但两端的矩形子元素(flex项)不会和容器之间产生间隔。</p> <ul><li><p>space-around 则会在每个矩形子元素(flex项)的两边产生一个相同大小的间隔</p></li></ul> <p>两端的矩形子元素(flex项)和容器之间的间隔大小正好是两个矩形子元素(flex项)之间间隔大小的一半（每个矩形子元素产生的间隔不会重叠，所以间隔变成两倍）。</p> <ol start="3"><li><h4><ul><li>align-item（单根轴线、单行单列）：子元素的垂直对齐方式</li></ul></h4> </li></ol> <ol start="4"><li><h4><ul><li>align-content（多根轴线、多行多列）：~</li></ul></h4> </li></ol> </p> <p><br /><pre><code style="font-size:16px;">本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。如若内容造成侵权/违法违规/事实不符，请点击<a href="https://shimo.im/forms/N2A1gvJRpPh7K9qD/fill" target="_blank" rel="nofollow">【内容举报】</a>进行投诉反馈！</code></pre></p>  <link href="https://qiniu.techgrow.cn/readmore/dist/readmore.css" type="text/css" rel="stylesheet"> <script src="https://qiniu.techgrow.cn/readmore/dist/readmore.js" type="text/javascript"></script> <script> var regex = /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i var isMobile = navigator.userAgent.match(regex); if (!isMobile) { try { var plugin = new ReadmorePlugin(); plugin.init({ id: "readmore-container", blogId: "55721-7689706765131-406", name: "财经早读", keyword: "666", qrcode: "https://www.imspm.com/assets/img/caijingzaodu.jpg", type: "website", height: "auto", expires: "7", interval: "60", random: "1" }) } catch (e) { console.warn("readmore plugin occurred error: " + e.name + " | " + e.message); } } </script> </div>    <div class="article-donate"> <a href="javascript:" class="btn btn-primary btn-like btn-lg social-share-icon icon-heart addbookbark" data-type="archives" data-aid="691312" data-action="/addons/cms/ajax/collection.html">收藏</a> </div>  <div class="entry-meta"> <ul>  <li>标签：<a href="/dev.html" class="tag" rel="tag" target="_blank">技术</a></li>  </ul> <ul class="article-prevnext">  <li> <span>上一篇 ></span> <a href="/dev/691310.html" target="_blank">python实验-小黑屋（伪)</a> </li> <li> <span>下一篇 ></span> <a href="/dev/691313.html" target="_blank">PTA数组7-14转换日期的表示形式 (5.16)</a> </li>  </ul> </div> <div class="related-article"> <div class="row" style="margin: 0 -15px;">  <div class="col-xs-12"> <h3 style="font-size: 1.1em;">相关文章</h5> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747938.html" target="_blank">Duilib中list控件支持ctrl和shif多行选中的实现</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747937.html" target="_blank">[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747936.html" target="_blank">win10系统微软输入法于eclipse ctrl+shif+f冲突间接处理办法</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747935.html" target="_blank">Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747934.html" target="_blank">读LDD3，内存映射与DMA--PAGE_SHIF…</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747933.html" target="_blank">VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747932.html" target="_blank">更换iBus五笔的左与右Shif</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747931.html" target="_blank">sublime ctrl+shif+f 没用解决办法</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747930.html" target="_blank">idea 对 ctrl + z 的撤销是 ctrl + shif + z</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747929.html" target="_blank">计算机最早的设计师应用于,计算机应用基础选择题doc.doc</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747928.html" target="_blank">win10自带截图神器：Win+Shift+S</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747927.html" target="_blank">Python基础之文件目录操作</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747926.html" target="_blank">python简述目录_Python基础之文件目录操作(示例代码)</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747925.html" target="_blank">tp5 如何做数据采集</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747924.html" target="_blank">任务2-7(服务器字体+阿里巴巴矢量库)</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747923.html" target="_blank">html标签（1)：h1~h6,p,br,pre,hr</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747922.html" target="_blank">TI 电量计介绍与芯片选型指南</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747921.html" target="_blank">几款TI电源芯片简介</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747920.html" target="_blank">TI DSP芯片C2000系列读取FLASH数据</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747919.html" target="_blank">德州仪器(Ti)平台嵌入式开发基础</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747918.html" target="_blank">TI三相电机智能栅极驱动芯片特点分类</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747917.html" target="_blank">省选模拟（12.08） T3 圈圈圈圈圈圈圈圈</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747916.html" target="_blank">Hadoop生态圈技术栈（上）</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747915.html" target="_blank">大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747914.html" target="_blank">小猿圈之Linux下Mysql 操作命令</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747913.html" target="_blank">大数据Hadoop生态圈常用面试题</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747912.html" target="_blank">大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747911.html" target="_blank">备战Noip2018模拟赛11（B组）T3 Monogatari 物语</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747910.html" target="_blank">【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747909.html" target="_blank">NYOJ 78 圈水池</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747908.html" target="_blank">递归问题跑道汽车绕圈问题 Python实现</a></p> </div> <div class="col-xs-12"> <p style="margin-top: 17px;margin-bottom: 8.5px;"><a href="/dev/747907.html" target="_blank">Hadoop生态圈（三）：MapReduce</a></p> </div>  </div> </div> <div class="clearfix"></div> </div> </div> </main> <aside class="col-xs-12 col-md-4">    <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">内容推荐</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753475.html" title="大厂出品！保姆级教程帮你掌握「用户体验要素」" target="_blank">大厂出品！保姆级教程帮你掌握「用户体验要素」</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753348.html" title="大厂实战案例！设计师如何助力京东快递业务增长？" target="_blank">大厂实战案例！设计师如何助力京东快递业务增长？</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/753116.html" title="总监干货！5个常见的UI设计规范创建误区" target="_blank">总监干货！5个常见的UI设计规范创建误区</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/kaifagongju/752540.html" title="数据库管理利器——Navicat Premium v17.0.4学习版(Windows+MacOS+Linux)" target="_blank">数据库管理利器——Navicat Premium v17.0.4学习版(Windows+MacOS+Linux)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/750353.html" title="进阶必学！快速掌握10种国际主流设计模型" target="_blank">进阶必学！快速掌握10种国际主流设计模型</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/750352.html" title="春节期间，10个大厂的产品细节走心设计" target="_blank">春节期间，10个大厂的产品细节走心设计</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a class="link-dark" href="/jiaohutiyan/747940.html" title="如何帮助用户度过新人期？来看雪球APP的实战总结！" target="_blank">如何帮助用户度过新人期？来看雪球APP的实战总结！</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a class="link-dark" href="/ruanjianzixun/42357.html" title="Sketch 95.3最新版下载 (Sketch矢量绘图应用软件)" target="_blank">Sketch 95.3最新版下载 (Sketch矢量绘图应用软件)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a class="link-dark" href="/ruanjianzixun/42356.html" title="Axure RP 9 最新正式版安装软件与汉化语言包下载(2023年3月30日更新)" target="_blank">Axure RP 9 最新正式版安装软件与汉化语言包下载(2023年3月30日更新)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a class="link-dark" href="/chanpinsheji/42343.html" title="嘘！SaaS产品的差异化设计细节，一般人我不告诉他" target="_blank">嘘！SaaS产品的差异化设计细节，一般人我不告诉他</a> </div> </div> </div> </div>  <div class="panel panel-blockimg"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6421005227861480" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6421005227861480" data-ad-slot="1989994359" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="panel panel-default lasest-update">  <div class="panel-heading"> <h3 class="panel-title">最新更新</h3> </div> <div class="panel-body"> <ul class="list-unstyled"> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758173.html" title="3分钟绘制流程图！这个AI+绘图工具的神仙组合，学完老板直呼内行" target="_blank">3分钟绘制流程图！这个AI+绘图工具的神仙组合，学完老板直呼内行</a> </li> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758172.html" title="商业潜规则：打败你的不是AI，而是人性" target="_blank">商业潜规则：打败你的不是AI，而是人性</a> </li> <li> <span><a href="/chanpinsheji.html" target="_blank">[产品设计]</a></span> <a class="link-dark" href="/chanpinsheji/758171.html" title="DeepSeek+智能派单系统的实践分享" target="_blank">DeepSeek+智能派单系统的实践分享</a> </li> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758170.html" title="一文读懂本年实际损益借(贷)方发生额" target="_blank">一文读懂本年实际损益借(贷)方发生额</a> </li> <li> <span><a href="/chuangyexueyuan.html" target="_blank">[创业学院]</a></span> <a class="link-dark" href="/chuangyexueyuan/758169.html" title="大客户 vs 中小企业：需求竟天差地别？以企业培训数字化为例" target="_blank">大客户 vs 中小企业：需求竟天差地别？以企业培训数字化为例</a> </li> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758168.html" title="不要将员工的“猴子”背到自己身上：职场管理中的权责划分" target="_blank">不要将员工的“猴子”背到自己身上：职场管理中的权责划分</a> </li> <li> <span><a href="/chanpinjingli.html" target="_blank">[产品经理]</a></span> <a class="link-dark" href="/chanpinjingli/758167.html" title="人工智能的三层架构：从应用层到基础服务层，解密智能革命" target="_blank">人工智能的三层架构：从应用层到基础服务层，解密智能革命</a> </li> <li> <span><a href="/chanpinsheji.html" target="_blank">[产品设计]</a></span> <a class="link-dark" href="/chanpinsheji/758166.html" title="一文讲清楚iOS的SKAN4.0" target="_blank">一文讲清楚iOS的SKAN4.0</a> </li> </ul> </div>  </div>  <div class="panel panel-default hot-tags"> <div class="panel-heading"> <h3 class="panel-title">热门标签</h3> </div> <div class="panel-body"> <div class="tags"> <a href="/channel/数量.html" class="tag" target="_blank"> <span>数量</span></a> <a href="/channel/AI技术趋势.html" class="tag" target="_blank"> <span>AI技术趋势</span></a> <a href="/channel/用户角色.html" class="tag" target="_blank"> <span>用户角色</span></a> <a href="/channel/心智游移.html" class="tag" target="_blank"> <span>心智游移</span></a> <a href="/channel/自然生态系统.html" class="tag" target="_blank"> <span>自然生态系统</span></a> <a href="/channel/会员权益.html" class="tag" target="_blank"> <span>会员权益</span></a> <a href="/channel/AirDrop.html" class="tag" target="_blank"> <span>AirDrop</span></a> <a href="/channel/hashmap.html" class="tag" target="_blank"> <span>hashmap</span></a> <a href="/channel/小龙虾.html" class="tag" target="_blank"> <span>小龙虾</span></a> <a href="/channel/焦虑.html" class="tag" target="_blank"> <span>焦虑</span></a> <a href="/channel/危机处理.html" class="tag" target="_blank"> <span>危机处理</span></a> <a href="/channel/发展.html" class="tag" target="_blank"> <span>发展</span></a> <a href="/channel/微信群折叠.html" class="tag" target="_blank"> <span>微信群折叠</span></a> <a href="/channel/toast.html" class="tag" target="_blank"> <span>toast</span></a> <a href="/channel/测评新算法.html" class="tag" target="_blank"> <span>测评新算法</span></a> <a href="/channel/改版.html" class="tag" target="_blank"> <span>改版</span></a> <a href="/channel/wireshark.html" class="tag" target="_blank"> <span>wireshark</span></a> <a href="/channel/投放方式.html" class="tag" target="_blank"> <span>投放方式</span></a> <a href="/channel/音频播放动效.html" class="tag" target="_blank"> <span>音频播放动效</span></a> <a href="/channel/timer.html" class="tag" target="_blank"> <span>timer</span></a> <a href="/channel/女性商业.html" class="tag" target="_blank"> <span>女性商业</span></a> <a href="/channel/古典自媒体.html" class="tag" target="_blank"> <span>古典自媒体</span></a> <a href="/channel/海外博主.html" class="tag" target="_blank"> <span>海外博主</span></a> <a href="/channel/repeater.html" class="tag" target="_blank"> <span>repeater</span></a> <a href="/channel/转账.html" class="tag" target="_blank"> <span>转账</span></a> <a href="/channel/万能钥匙.html" class="tag" target="_blank"> <span>万能钥匙</span></a> <a href="/channel/秋招.html" class="tag" target="_blank"> <span>秋招</span></a> <a href="/channel/快服务.html" class="tag" target="_blank"> <span>快服务</span></a> <a href="/channel/个人演讲.html" class="tag" target="_blank"> <span>个人演讲</span></a> <a href="/channel/客户共识.html" class="tag" target="_blank"> <span>客户共识</span></a> </div> </div> </div>  </aside> </div> </div> </main> <footer> <div id="footer"> <div class="container"> <div class="row footer-inner"> <div class="col-xs-12"> <div class="footer-logo pull-left mr-4"> <a href="/"><i class="fa fa-bookmark"></i></a> </div> <div class="pull-left"> Copyright © 2025 All rights reserved. 超级产品经理 <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">浙ICP备14026978号-4</a> <ul class="list-unstyled list-inline mt-2"> <li><a href="/p/aboutus.html" target="_blank">关于网站</a></li> <li><a href="/contactus.html" rel="nofollow" target="_blank">联系我们</a></li> </ul> </div> </div> </div> </div> </div> </footer> <div id="floatbtn">  <a class="hover" href="/index/cms.archives/post.html" target="_blank"> <i class="iconfont icon-pencil"></i> <em>立即<br>投稿</em> </a> <div class="floatbtn-item floatbtn-share"> <i class="iconfont icon-share"></i> <div class="floatbtn-wrapper" style="height:50px;top:0"> <div class="social-share" data-initialized="true" data-mode="prepend"> <a href="#" class="social-share-icon icon-weibo" target="_blank"></a> <a href="#" class="social-share-icon icon-qq" target="_blank"></a> <a href="#" class="social-share-icon icon-qzone" target="_blank"></a> <a href="#" class="social-share-icon icon-wechat"></a> </div> </div> </div> <a href="javascript:;"> <i class="iconfont icon-qrcode"></i> <div class="floatbtn-wrapper"> <div class="qrcode"><img src="https://www.imspm.com/assets/img/gongzhonghao.jpg"></div> <p>微信公众账号</p> <p>微信扫一扫加关注</p> </div> </a> <a id="back-to-top" class="hover" href="javascript:;"> <i class="iconfont icon-backtotop"></i> <em>返回<br>顶部</em> </a>  </div> <script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/bootstrap/dist/js/bootstrap.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/fastadmin-layer/dist/layer.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/libs/art-template/dist/template-native.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/jquery.autocomplete.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/swiper.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/share.min.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/cms.js?v=1.0.10"></script> <script type="text/javascript" src="/assets/addons/cms/js/common.js?v=1.0.10"></script> </body> </html>