后端工程师学前端（一）：HTML

2008 年 10 月 28 日

为了让自己的技能不再那么单一，我决定先后学习前端和iOS开发。此前我的前端技能是零散的、不成体系的，我会系统的将学习历程
记录成系列博客：后端工程师学前端。
这一篇是阅读《HTML&CSS设计与构建网站》之后的笔记，借助这一篇文章，可以系统的学习HTML知识。

HTML的基本结构

正如Word文档，编辑的时候会有标题、一级标题、二级标题等等，HTML也有类似的概念用以表示不同的结构。下面是一个基本的HTML代码：

    
    这是一级标题
    这里是第一各段落，里面有各种各样的文字。
    这里是二级标题
    然后这里是第二个段落。
    这是另一个二级标题
    这是第三个段落。

其展示效果如下：

上述代码中，例如
,
这样的，用尖括号括起来的叫做元素，每个元素有一个起始标签和结束标签，其中
是起始标签，
是结束标签。
一个HTML的基本结构是：


    
        Title of the document
    

    
        The content of the document......

其中第一行的
是声明我们使用的是 HTML 5
，这是最新的HTML标准。然后是由
和
组成的元素，
里面一般有
,
两部分组成。一般我们用
来存储我们肉眼看到的的页面的内容，例如第一个截图中的各种内容，
而用
来存储各种关于页面的信息，例如 </code><br /> 是这个页面在浏览器上显示的标题， <code></code><br /> 标签可以告诉浏览器一些关于<br /> 当前页面的信息等等。 </p> <h2>标签</h2> <p>一般来说，标签都是成对出现的，例如 <code></code><br /> 和 <code></code><br /> ，前者告诉浏览器，元素开始，后者告诉浏览器，元素结束。每个元素<br /> 都有一些专属属性，用于展示特效，属性是在标签后面，用 <code>xxx="yyy"</code><br /> 的形式，例如： </p> <pre><p lang="en">hello world</p></pre> <p>其中的 <code>lang="en"</code><br /> 就是属性。正如K-V， <code>lang</code><br /> 就是 K, <code>lang</code><br /> 就是V，一般V都会用引号包含起来。只有少量属性是所有元素都共有的，<br /> 例如 <code>lang</code><br /> ，绝大多数属性都是元素特有的，用于描述该元素的一些属性。 </p> <h2>标题和段落</h2> <p>一共有6个级别的标题，从 <code>h1</code><br /> 到 <code>h6</code><br /> ，他们在外观上的区别是大小不一，例如如下代码： </p> <pre><h1>这是h1</h1> <h2>这是h2</h2> <h3>这是h3</h3> <h4>这是h4</h4> <h5>这是h5</h5> <h6>这是h6</h6></pre> <p> 其展示效果是：</p> <h2>这是h1</h2> <h2>这是h2</h2> <h3>这是h3</h3> <h4>这是h4</h4> <h4>这是h5</h4> <h4>这是h6</h4> <p>而段落则使用 <code></p> <p></code><br /> 标签， <code>p</code><br /> 是 <code>paragraph</code><br /> 的缩写，即段落。默认情况下，浏览器会为每个 <code></p> <p></code><br /> 标签另起一行并且与后续段落保持<br /> 一定的距离，因为 <code></p> <p></code><br /> 是块级元素，块级元素就会另起一行，与之相对的叫做内联元素，我们会在后面讲到。<br /> 其余的修饰文本的标签有：</p> <ul> <li> <code><b></code><br /> 字体为粗体 </li> <li> <code><i></code><br /> 字体为斜体 </li> <li> <code><sup></code><br /> 上标 </li> <li> <code><sub></code><br /> 下标 </li> <li> <code><br /></code><br /> 换行 </li> <li> <code></p> <hr /></code><br /> 水平线 </li> <li> <code><strong></code><br /> 加粗 </li> <li> <code><em></code><br /> 强调 </li> <li> <code></code><br /> 和 <code><q></code><br /> 都是引用，不过后者不常用 </li> <li> <code><ins></code><br /> 插入，一般显示为带下划线 </li> <li> <code><del></code><br /> 删除，一般显示为删除线 </li> </ul> <p>下面的代码结合了上述标签：</p> <pre> 这是一个段落这里是引用，一般会有缩进表示这是第二个段落，<b>这里是粗体</b>，<i>这里是斜体</i>，这里有个<sup>上标</sup>，这里有个<sub>下标</sub>，这里需要换<br />一行，这里有个水平线<hr />，<strong>这里字体加粗</strong>，<em>这里被强调</em>， <ins>这是插入，下面应该有下划线</ins>，<del>这里应该有删除线</del> </pre> <p> 我们看看效果：</p> <p> <img src="https://jiajunhuang.com/articles/img/html_tags_and_properties.png"></p> <h2>列表</h2> <p>列表分三种，一种是有序列表，一种是无序列表，一种是自定义列表。有序列表的标签是 <code></p> <ol></code><br /> ，即 <code>ordered list</code><br /> ，无序列表的标签是 <code></p> <ul></code><br /> 即 <code>unordered list</code><br /> ，它们的子元素都是 <code></p> <li></code><br /> 。有序列表中，每个子元素的前面会有数字表示序号，而无序列表的前面一般是<br /> 一个黑点。列表可以嵌套。例如如下代码： </p> <pre> <ul> <li>1</li> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <li>2</li> <li>3</li> <li>4</li> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ol> </ul> </pre> <p> 效果是：</p> <p> <img src="https://jiajunhuang.com/articles/img/html_list.png"><br /> 自定义列表不常用，忽略之。</p> <h2>超链接</h2> <p>链接的标签是 <code><a></code><br /> ，目标地址是一个叫做 <code>href</code><br /> 的属性，例如： </p> <pre><a href="https://jiajunhuang.com">我的博客</a></pre> <p>其中， <code>我的博客</code><br /> 会由浏览器渲染出来，一般默认的特效是蓝色字体，而 <code>href="https://jiajunhuang.com"</code><br /> 则是属性，即目标地址是 <code>https://jiajunhuang.com</code><br /> 。 <code>href</code><br /> 的值可以<br /> 有两种形式，一种是类似 <code>https://jiajunhuang.com</code><br /> 这样的，叫做绝对URL，一般我们表示<br /> 其它网站的资源的时候就用这种，另外一种是 <code>/aboutme</code><br /> 这样的，这是相对URL，也就是说，<br /> 我们要访问的目标地址是当前所访问网站的 <code>/aboutme</code><br /> 这个资源。 </p> <p>如果 <code>href</code><br /> 里的值是 <code>mailto:<a href="/cdn-cgi/l/email-protection">[email protected]</a></code><br /> ，那么点击这个超链接之后，就会唤起邮件客户端，<br /> 如果想要在新的窗口中打开链接，那么应该写上一个属性，KV为 <code>target="_blank"</code><br /> 。<br /> 还有一种形式，例如 <code>href="#top"</code><br /> ，点击之后，浏览器会把我们定位到元素id为 <code>top</code><br /> 的地方，<br /> 也就是说，如果某个元素有这么一对KV： <code>id="top"</code><br /> ，那么就是它了。<br /> 注意，id必须在整个页面中都是唯一的</p> <h2>图像</h2> <p>我们使用 <code><img></code><br /> 标签来表示图像，它有这么几个常见的属性： </p> <ul> <li> <code>src</code><br /> ：值是图像的地址，同样可以是绝对URL或相对URL </li> <li> <code>alt</code><br /> ：值是对图像的文字说明，一般图像无法加载时就会显示它 </li> <li> <code>title</code><br /> ：当鼠标放在图像上面时，就会展示出来 </li> <li> <code>height</code><br /> 和 <code>width</code><br /> ：表示图片的高度和宽度 </li> </ul> <h2>表格</h2> <p>表格的标签是 <code></p> <table></code><br /> ，一般我们称用于表示表格信息的第一列或者第一行为表头，我们使用 <code></p> <th></code><br /> 来表示表头， <code></p> <tr></code><br /> 是行， <code></p> <td></code><br /> 是表格中的数据。例如： </p> <p> <code></p> <th></code><br /> 有个属性， <code>scope="col|row"</code><br /> 表示它作用于行还是列 </p> <pre> <table> <tr> <th></th> <th scope="col">第一列</th> <th scope="col">第二列</th> </tr> <tr> <th scope="row">第一行</th> <td>数据一</td> <td>数据二</td> <tr> </tr> <th scope="row">第二行</th> <td>数据三</td> <td>数据四</td> </tr> </table> </pre> <p> 其效果是：</p> <p> <img src="https://jiajunhuang.com/articles/img/html_table.png"></p> <p> <code></p> <td></code><br /> 标签可以使用 <code>colspan</code><br /> 或者 <code>rowspan</code><br /> 来表示跨行或者跨列，即把多个单元格合并成一个。 </p> <h2>表单</h2> <p>表单就是 <code>form</code><br /> ，后端工程师一定不陌生，表单的标签是 <code></p> <form></code><br /> ， <code></p> <form></code><br /> 有几个属性， <code>action</code><br /> 表示提交表单时所请求的URL， <code>method</code><br /> 表示提交表单时所使用的方法，可以是 <code>GET</code><br /> 或者 <code>POST</code><br /> 。<br /> 表单里最重要的标签是 <code></code><br /> ， <code></code><br /> 的属性 <code>name</code><br /> 表示表单中KV值的K， <code>value</code><br /> 则是V。 <code></code><br /> 还有一个属性， <code>type</code><br /> ，它的不同的值代表着不同的类型： </p> <pre>type="text" type="password" type="radio" type="checkbox" type="file" type="submit" type="image" type="hidden" type="date" type="email" type="url" type="search" </pre> <p>表单中还有 <code><textarea></code><br /> 是多行文本框。 <code><label></code><br /> 是标签，用于描述输入框， <code></p> <fieldset></code><br /> 用于组合表单元素。 <code></code><br /> 下拉框，如果加了 <code>multiple</code><br /> 属性，则为多选框。 <code><button></code><br /> 是按钮。 </p> <h2>其它标签</h2> <ul> <li> HTML 5的文档类型声明是 <code></code> </li> <li> HTML中的注释是 <code></code> </li> <li> <code>id</code><br /> 是用来表示全局唯一身份的属性 </li> <li> <code>class</code><br /> 是表示多个元素所有的共同属性 </li> <li> 块级元素在显示时总是会另起一行，包括： <code></p> <h1></code><br /> – <code></p> <h6></code><br /> , <code></code><br /> , <code></p> <ul></code><br /> , <code></p> <ol></code><br /> 等 </li> <li> 内联元素在显示时总是与相邻元素在同一行内，包括： <code><a></code><br /> , <code><b></code><br /> , <code><em></code><br /> , <code><img></code><br /> 等 </li> <li> <code></p> <div></code><br /> 用于将多个块级元素组合在一起 </li> <li> <code><span></code><br /> 用于将多个内联元素组合在一起 </li> </ul> <h2>总结</h2> <p>这一篇中我们系统的学习了一下HTML 5的标签。接下来我们要熟悉CSS 3。 </p></div>  <div class="tags"></div>  </div>  <div class="related-posts"><div class="postauthor-top"><h3>Related Posts</h3></div> <article class="post excerpt "> <a href="https://www.go2live.cn/nocate/homura%ef%bc%9a%e5%9f%ba%e4%ba%8e-wine-%e7%9a%84-bsd-%e6%b8%b8%e6%88%8f%e5%90%af%e5%8a%a8%e5%99%a8-linux-%e4%b8%ad%e5%9b%bd.html" title="Homura：基于 WINE 的 BSD 游戏启动器 | Linux 中国" id="featured-thumbnail"> <header> <h4 class="title front-view-title">Homura：基于 WINE 的 BSD 游戏启动器 | Linux 中国</h4> </header> </a> </article> <article class="post excerpt "> <a href="https://www.go2live.cn/nocate/%e5%a6%82%e4%bd%953%e5%a4%a9%e8%af%bb%e5%ae%8c%e5%b9%b6%e5%a4%8d%e7%8e%b0%e4%b8%80%e7%af%87%e7%bb%8f%e5%85%b8%e8%ae%ba%e6%96%87%ef%bc%9f.html" title="如何3天读完并复现一篇经典论文？" id="featured-thumbnail"> <header> <h4 class="title front-view-title">如何3天读完并复现一篇经典论文？</h4> </header> </a> </article> <article class="post excerpt last"> <a href="https://www.go2live.cn/nocate/%e5%88%a9%e7%94%a8-python-%e7%88%ac%e5%8f%96%e7%bd%91%e7%ab%99%e7%9a%84%e6%96%b0%e6%89%8b%e6%8c%87%e5%8d%97.html" title="利用 Python 爬取网站的新手指南" id="featured-thumbnail"> <header> <h4 class="title front-view-title">利用 Python 爬取网站的新手指南</h4> </header> </a> </article> </div>   <div class="postauthor"> <h4>About The Author</h4> <img alt='' src='https://secure.gravatar.com/avatar/3ad193fb04cf7a9dabbb0140522a0178?s=85&d=monsterid&r=g' srcset='https://secure.gravatar.com/avatar/3ad193fb04cf7a9dabbb0140522a0178?s=170&d=monsterid&r=g 2x' class='avatar avatar-85 photo' height='85' width='85' /> <h5>stack</h5> <p></p> </div>   </div> </div> </article>   <aside class="sidebar c-4-12"> <div id="sidebars" class="sidebar"> <div class="sidebar_list"> <div id="search-2" class="widget widget_search"><form method="get" id="searchform" class="search-form" action="https://www.go2live.cn" _lpchecked="1"> <fieldset> <input type="text" name="s" id="s" value="Search this site..." onblur="if (this.value == '') {this.value = 'Search this site...';}" onfocus="if (this.value == 'Search this site...') {this.value = '';}" > <input type="submit" value="Search" /> </fieldset> </form> </div><div id="linkcat-115" class="widget widget_links"><h3 class="widget-title"><span>友情链接</span></h3> <ul class='xoxo blogroll'> <li><a href="http://mooc.guokr.com/course/" target="_blank">mooc学院-综合学习</a></li> <li><a href="http://www.guanyuwu.com" rel="acquaintance sweetheart" target="_blank">创意手工分享</a></li> <li><a href="http://www.tuijiankan.com/" rel="friend" target="_blank">向阳博客</a></li> <li><a href="http://blog.devtang.com/" target="_blank">唐巧的技术博客-研发</a></li> <li><a href="http://www.liaoxuefeng.com/" target="_blank">廖雪峰官方网站-研发</a></li> <li><a href="http://weappdev.com/" target="_blank">微信小程序开发论坛</a></li> <li><a href="https://guanyuwu.taobao.com">直男送礼好去处</a></li> <li><a href="http://coolshell.cn/">酷壳-研发</a></li> <li><a href="http://www.ruanyifeng.com/blog/" target="_blank">阮一峰博客-研发-前端</a></li> <li><a href="http://www.laruence.com/" target="_blank">鸟哥博客-php专家</a></li> <li><a href="http://gongfuxiang.com/" target="_blank">龚福祥的博客-研发</a></li> </ul> </div> <div id="pages-10" class="widget widget_pages"><h3 class="widget-title"><span>页面</span></h3> <ul> <li class="page_item page-item-86"><a href="https://www.go2live.cn/it%e4%bc%81%e4%b8%9a">互联网it企业一览</a></li> <li class="page_item page-item-135484"><a href="https://www.go2live.cn/%e5%85%b3%e4%ba%8e">关于</a></li> <li class="page_item page-item-396503 page_item_has_children"><a href="https://www.go2live.cn/%e5%8f%82%e8%80%83%e6%89%8b%e5%86%8c">参考手册</a> <ul class='children'> <li class="page_item page-item-346526"><a href="https://www.go2live.cn/%e5%8f%82%e8%80%83%e6%89%8b%e5%86%8c/go%e6%8a%80%e6%9c%af%e9%80%89%e5%9e%8b">go技术选型</a></li> <li class="page_item page-item-346528 page_item_has_children"><a href="https://www.go2live.cn/%e5%8f%82%e8%80%83%e6%89%8b%e5%86%8c/go%e8%af%ad%e8%a8%80%e5%8f%82%e8%80%83">go语言参考</a> <ul class='children'> <li class="page_item page-item-392240"><a href="https://www.go2live.cn/%e5%8f%82%e8%80%83%e6%89%8b%e5%86%8c/go%e8%af%ad%e8%a8%80%e5%8f%82%e8%80%83/%e6%8e%a8%e8%8d%90%e4%b9%a6%e7%9b%ae">推荐书目</a></li> </ul> </li> <li class="page_item page-item-396501"><a href="https://www.go2live.cn/%e5%8f%82%e8%80%83%e6%89%8b%e5%86%8c/ssh%e4%bd%bf%e7%94%a8%e4%bb%8b%e7%bb%8d">ssh使用介绍</a></li> </ul> </li> <li class="page_item page-item-4972"><a href="https://www.go2live.cn/%e6%bc%94%e9%81%93%e5%85%ac%e4%bc%97%e5%8f%b7%e8%ae%a2%e9%98%85%e8%af%b4%e6%98%8e">演道公众号订阅说明</a></li> <li class="page_item page-item-72"><a href="https://www.go2live.cn/%e8%8b%b1%e6%96%87%e5%9c%b0%e5%9d%80%e5%86%99%e6%b3%95">英文地址写法</a></li> </ul> </div><div id="calendar-5" class="widget widget_calendar"><div id="calendar_wrap" class="calendar_wrap"><table id="wp-calendar"> <caption>2025年六月</caption> <thead> <tr> <th scope="col" title="星期一">M</th> <th scope="col" title="星期二">T</th> <th scope="col" title="星期三">W</th> <th scope="col" title="星期四">T</th> <th scope="col" title="星期五">F</th> <th scope="col" title="星期六">S</th> <th scope="col" title="星期日">S</th> </tr> </thead> <tfoot> <tr> <td colspan="3" id="prev"><a href="https://www.go2live.cn/2022/01">« Jan</a></td> <td class="pad"> </td> <td colspan="3" id="next" class="pad"> </td> </tr> </tfoot> <tbody> <tr> <td colspan="6" class="pad"> </td><td>1</td> </tr> <tr> <td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td> </tr> <tr> <td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td> </tr> <tr> <td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td> </tr> <tr> <td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td id="today">28</td><td>29</td> </tr> <tr> <td>30</td> <td class="pad" colspan="6"> </td> </tr> </tbody> </table></div></div><div id="categories-3" class="widget widget_categories"><h3 class="widget-title"><span>分类目录</span></h3> <ul> <li class="cat-item cat-item-16"><a href="https://www.go2live.cn/category/program/android" title="android的四种启动模式，与五大布局，五种存储模式，四大组件::::::演道网Andriod专栏提供Andriod基础概念，具体代码演示，方便大家深入理解和运用Android。大部分代码可以直接使用。">Android</a> </li> <li class="cat-item cat-item-269"><a href="https://www.go2live.cn/category/program/go" title="go,golang,go编程语言,golang编程, go web, go 分布式, go 并发">go</a> </li> <li class="cat-item cat-item-4"><a href="https://www.go2live.cn/category/program/ios" title="iOS开发入门和提高::::::演道网IOS专栏提供一线IOS研发人员在工作学习过程中的经验总结。让大家少走弯路。">iOS</a> </li> <li class="cat-item cat-item-80"><a href="https://www.go2live.cn/category/program/java" title="java入门与提高::::::演道网java专栏提供一线java研发人员在学习工作中的经验，减少大家走的弯路，大量源码可以直接使用。">java</a> </li> <li class="cat-item cat-item-6"><a href="https://www.go2live.cn/category/basic/linux" >linux学习</a> </li> <li class="cat-item cat-item-79"><a href="https://www.go2live.cn/category/program/php" title="php入门与提高::::::演道网php专栏提供一线php研发人员在学习工作中的经验，减少大家走的弯路，大量源码可以直接使用。">php</a> </li> <li class="cat-item cat-item-81"><a href="https://www.go2live.cn/category/program/python" title="python入门与提高::::::演道网python专栏提供一线python研发人员在学习工作中的经验，减少大家走的弯路，大量源码可以直接使用。">python</a> </li> <li class="cat-item cat-item-82"><a href="https://www.go2live.cn/category/practice/shell" >shell</a> </li> <li class="cat-item cat-item-105"><a href="https://www.go2live.cn/category/prd/design" >UI设计</a> </li> <li class="cat-item cat-item-11"><a href="https://www.go2live.cn/category/dev/web" >web</a> </li> <li class="cat-item cat-item-22"><a href="https://www.go2live.cn/category/dev" title="w3cschool,HTML,CSS,PHP,DOM,JavaScript,jQuery,XML,AJAX,ASP.NET,W3C,MySQL,SQL,jquery mobile,bootstrap,Python,jquery easyui,jquery ui,angularjs::::演道网的w3cschool,HTML,CSS,PHP,DOM,JavaScript,jQuery,XML,AJAX,ASP.NET,W3C,MySQL,SQL,jquery mobile,bootstrap,Python,jquery easyui,jquery ui,angularjs等技术都在这里。">产品研发</a> </li> <li class="cat-item cat-item-73"><a href="https://www.go2live.cn/category/prd" title="互联网产品、设计、运营案例分析，方法论指导::::::演道网互联网产品设计专栏提供网上优秀的产品运营设计相关的知识和文章。">产品设计</a> </li> <li class="cat-item cat-item-104"><a href="https://www.go2live.cn/category/prd/product" >产品需求</a> </li> <li class="cat-item cat-item-23"><a href="https://www.go2live.cn/category/dev/%e5%85%b6%e5%ae%83" >其它</a> </li> <li class="cat-item cat-item-277"><a href="https://www.go2live.cn/category/reference" >参考手册</a> </li> <li class="cat-item cat-item-276"><a href="https://www.go2live.cn/category/%e5%bf%83%e7%81%b5%e5%b0%8f%e6%86%a9" title="心灵小憩">心灵小憩</a> </li> <li class="cat-item cat-item-84"><a href="https://www.go2live.cn/category/dev/db" title="数据库入门与提高::::::演道网数据库专栏提供一线数据库研发人员在学习工作中的经验，减少大家走的弯路，大量源码可以直接使用。">数据库</a> </li> <li class="cat-item cat-item-1"><a href="https://www.go2live.cn/category/nocate" >未分类</a> </li> <li class="cat-item cat-item-3"><a href="https://www.go2live.cn/category/life" >生活随感</a> </li> <li class="cat-item cat-item-266"><a href="https://www.go2live.cn/category/basic/algorithm" >算法</a> </li> <li class="cat-item cat-item-75"><a href="https://www.go2live.cn/category/grow" >观念更新</a> </li> <li class="cat-item cat-item-270"><a href="https://www.go2live.cn/category/practice/keng" >踩坑</a> </li> <li class="cat-item cat-item-83"><a href="https://www.go2live.cn/category/practice/devops" >运维</a> </li> <li class="cat-item cat-item-106"><a href="https://www.go2live.cn/category/prd/market" >运营推广</a> </li> </ul> </div><div id="tag_cloud-12" class="widget widget_tag_cloud"><h3 class="widget-title"><span>标签</span></h3><div class="tagcloud"><a href="https://www.go2live.cn/tag/android" class="tag-cloud-link tag-link-39 tag-link-position-1" style="font-size: 18.980392156863pt;" aria-label="Android (47 items)">Android</a> <a href="https://www.go2live.cn/tag/android%e5%bc%80%e5%8f%91%e6%8a%80%e6%9c%af%e5%91%a8%e6%8a%a5" class="tag-cloud-link tag-link-258 tag-link-position-2" style="font-size: 14.862745098039pt;" aria-label="Android开发技术周报 (16 items)">Android开发技术周报</a> <a href="https://www.go2live.cn/tag/angularjs" class="tag-cloud-link tag-link-119 tag-link-position-3" style="font-size: 12.300653594771pt;" aria-label="AngularJS (8 items)">AngularJS</a> <a href="https://www.go2live.cn/tag/django" class="tag-cloud-link tag-link-134 tag-link-position-4" style="font-size: 16.052287581699pt;" aria-label="django (22 items)">django</a> <a href="https://www.go2live.cn/tag/flask" class="tag-cloud-link tag-link-259 tag-link-position-5" style="font-size: 8pt;" aria-label="flask (2 items)">flask</a> <a href="https://www.go2live.cn/tag/http" class="tag-cloud-link tag-link-45 tag-link-position-6" style="font-size: 17.516339869281pt;" aria-label="http (32 items)">http</a> <a href="https://www.go2live.cn/tag/jquery" class="tag-cloud-link tag-link-121 tag-link-position-7" style="font-size: 10.013071895425pt;" aria-label="jQuery (4 items)">jQuery</a> <a href="https://www.go2live.cn/tag/nginx" class="tag-cloud-link tag-link-77 tag-link-position-8" style="font-size: 11.843137254902pt;" aria-label="nginx (7 items)">nginx</a> <a href="https://www.go2live.cn/tag/nodejs" class="tag-cloud-link tag-link-120 tag-link-position-9" style="font-size: 13.490196078431pt;" aria-label="NodeJS (11 items)">NodeJS</a> <a href="https://www.go2live.cn/tag/securecrt" class="tag-cloud-link tag-link-103 tag-link-position-10" style="font-size: 19.895424836601pt;" aria-label="securecrt (59 items)">securecrt</a> <a href="https://www.go2live.cn/tag/shell" class="tag-cloud-link tag-link-71 tag-link-position-11" style="font-size: 18.522875816993pt;" aria-label="shell (42 items)">shell</a> <a href="https://www.go2live.cn/tag/view" class="tag-cloud-link tag-link-29 tag-link-position-12" style="font-size: 12.758169934641pt;" aria-label="View (9 items)">View</a> <a href="https://www.go2live.cn/tag/vim" class="tag-cloud-link tag-link-61 tag-link-position-13" style="font-size: 18.248366013072pt;" aria-label="vim (39 items)">vim</a> <a href="https://www.go2live.cn/tag/wordpress%e4%bc%98%e5%8c%96" class="tag-cloud-link tag-link-109 tag-link-position-14" style="font-size: 10.745098039216pt;" aria-label="wordpress优化 (5 items)">wordpress优化</a> <a href="https://www.go2live.cn/tag/%e4%bb%a3%e7%a0%81%e7%a4%ba%e8%8c%83" class="tag-cloud-link tag-link-43 tag-link-position-15" style="font-size: 17.241830065359pt;" aria-label="代码示范 (30 items)">代码示范</a> <a href="https://www.go2live.cn/tag/%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91" class="tag-cloud-link tag-link-118 tag-link-position-16" style="font-size: 15.503267973856pt;" aria-label="前端开发 (19 items)">前端开发</a> <a href="https://www.go2live.cn/tag/%e5%8e%9f%e5%88%9b" class="tag-cloud-link tag-link-12 tag-link-position-17" style="font-size: 21.542483660131pt;" aria-label="原创 (91 items)">原创</a> <a href="https://www.go2live.cn/tag/%e5%9f%ba%e7%a1%80%e6%a6%82%e5%bf%b5" class="tag-cloud-link tag-link-30 tag-link-position-18" style="font-size: 16.235294117647pt;" aria-label="基础概念 (23 items)">基础概念</a> <a href="https://www.go2live.cn/tag/%e5%a4%9a%e7%ba%bf%e7%a8%8b" class="tag-cloud-link tag-link-49 tag-link-position-19" style="font-size: 10.013071895425pt;" aria-label="多线程 (4 items)">多线程</a> <a href="https://www.go2live.cn/tag/%e5%ad%a6%e4%bc%9a%e6%8f%90%e9%97%ae" class="tag-cloud-link tag-link-129 tag-link-position-20" style="font-size: 15.137254901961pt;" aria-label="学会提问 (17 items)">学会提问</a> <a href="https://www.go2live.cn/tag/%e5%b7%a5%e5%85%b7" class="tag-cloud-link tag-link-28 tag-link-position-21" style="font-size: 9.0980392156863pt;" aria-label="工具 (3 items)">工具</a> <a href="https://www.go2live.cn/tag/%e5%b7%a5%e5%85%b7%e5%ad%a6%e4%b9%a0" class="tag-cloud-link tag-link-17 tag-link-position-22" style="font-size: 10.745098039216pt;" aria-label="工具学习 (5 items)">工具学习</a> <a href="https://www.go2live.cn/tag/%e5%b7%a5%e7%a8%8b%e5%b8%88%e6%97%a5%e5%b8%b8" class="tag-cloud-link tag-link-218 tag-link-position-23" style="font-size: 18.614379084967pt;" aria-label="工程师日常 (43 items)">工程师日常</a> <a href="https://www.go2live.cn/tag/%e5%bc%80%e5%8f%91%e8%80%85%e5%a4%b4%e6%9d%a1" class="tag-cloud-link tag-link-170 tag-link-position-24" style="font-size: 22pt;" aria-label="开发者头条 (102 items)">开发者头条</a> <a href="https://www.go2live.cn/tag/%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f" class="tag-cloud-link tag-link-116 tag-link-position-25" style="font-size: 14.588235294118pt;" aria-label="微信小程序 (15 items)">微信小程序</a> <a href="https://www.go2live.cn/tag/%e5%be%ae%e4%bf%a1%e5%ba%94%e7%94%a8%e5%8f%b7" class="tag-cloud-link tag-link-117 tag-link-position-26" style="font-size: 14.40522875817pt;" aria-label="微信应用号 (14 items)">微信应用号</a> <a href="https://www.go2live.cn/tag/%e5%bf%83%e6%99%ba" class="tag-cloud-link tag-link-35 tag-link-position-27" style="font-size: 12.758169934641pt;" aria-label="心智 (9 items)">心智</a> <a href="https://www.go2live.cn/tag/%e6%8a%80%e6%9c%af%e6%9e%b6%e6%9e%84" class="tag-cloud-link tag-link-127 tag-link-position-28" style="font-size: 16.967320261438pt;" aria-label="技术架构 (28 items)">技术架构</a> <a href="https://www.go2live.cn/tag/%e6%8e%a8%e8%8d%90" class="tag-cloud-link tag-link-32 tag-link-position-29" style="font-size: 8pt;" aria-label="推荐 (2 items)">推荐</a> <a href="https://www.go2live.cn/tag/%e6%95%88%e7%8e%87" class="tag-cloud-link tag-link-37 tag-link-position-30" style="font-size: 11.385620915033pt;" aria-label="效率 (6 items)">效率</a> <a href="https://www.go2live.cn/tag/%e6%a0%b8%e5%bf%83%e6%a6%82%e5%bf%b5" class="tag-cloud-link tag-link-34 tag-link-position-31" style="font-size: 10.013071895425pt;" aria-label="核心概念 (4 items)">核心概念</a> <a href="https://www.go2live.cn/tag/%e6%ba%90%e7%a0%81%e5%88%86%e6%9e%90" class="tag-cloud-link tag-link-33 tag-link-position-32" style="font-size: 10.745098039216pt;" aria-label="源码分析 (5 items)">源码分析</a> <a href="https://www.go2live.cn/tag/%e7%9f%a5%e8%af%86%e6%80%bb%e7%bb%93" class="tag-cloud-link tag-link-97 tag-link-position-33" style="font-size: 9.0980392156863pt;" aria-label="知识总结 (3 items)">知识总结</a> <a href="https://www.go2live.cn/tag/%e7%a0%81%e5%86%9c%e5%91%a8%e5%88%8a" class="tag-cloud-link tag-link-257 tag-link-position-34" style="font-size: 15.320261437908pt;" aria-label="码农周刊 (18 items)">码农周刊</a> <a href="https://www.go2live.cn/tag/%e7%a7%af%e7%b4%af" class="tag-cloud-link tag-link-25 tag-link-position-35" style="font-size: 10.745098039216pt;" aria-label="积累 (5 items)">积累</a> <a href="https://www.go2live.cn/tag/%e7%ae%97%e6%b3%95" class="tag-cloud-link tag-link-69 tag-link-position-36" style="font-size: 13.124183006536pt;" aria-label="算法 (10 items)">算法</a> <a href="https://www.go2live.cn/tag/%e7%ba%bf%e7%a8%8b" class="tag-cloud-link tag-link-51 tag-link-position-37" style="font-size: 16.692810457516pt;" aria-label="线程 (26 items)">线程</a> <a href="https://www.go2live.cn/tag/%e7%bf%bb%e8%af%91" class="tag-cloud-link tag-link-31 tag-link-position-38" style="font-size: 9.0980392156863pt;" aria-label="翻译 (3 items)">翻译</a> <a href="https://www.go2live.cn/tag/%e8%a7%82%e7%82%b9" class="tag-cloud-link tag-link-59 tag-link-position-39" style="font-size: 9.0980392156863pt;" aria-label="观点 (3 items)">观点</a> <a href="https://www.go2live.cn/tag/%e8%ae%a8%e8%ae%ba" class="tag-cloud-link tag-link-46 tag-link-position-40" style="font-size: 14.130718954248pt;" aria-label="讨论 (13 items)">讨论</a> <a href="https://www.go2live.cn/tag/%e8%af%bb%e4%b9%a6%e7%ac%94%e8%ae%b0" class="tag-cloud-link tag-link-36 tag-link-position-41" style="font-size: 12.300653594771pt;" aria-label="读书笔记 (8 items)">读书笔记</a> <a href="https://www.go2live.cn/tag/%e8%bd%ac%e8%bd%bd" class="tag-cloud-link tag-link-14 tag-link-position-42" style="font-size: 14.588235294118pt;" aria-label="转载 (15 items)">转载</a> <a href="https://www.go2live.cn/tag/%e8%bf%90%e7%bb%b4" class="tag-cloud-link tag-link-18 tag-link-position-43" style="font-size: 11.843137254902pt;" aria-label="运维 (7 items)">运维</a> <a href="https://www.go2live.cn/tag/%e9%9d%a2%e8%af%95" class="tag-cloud-link tag-link-38 tag-link-position-44" style="font-size: 18.980392156863pt;" aria-label="面试 (47 items)">面试</a> <a href="https://www.go2live.cn/tag/%e9%b8%a1%e6%b1%a4%e6%96%87" class="tag-cloud-link tag-link-94 tag-link-position-45" style="font-size: 10.013071895425pt;" aria-label="鸡汤文 (4 items)">鸡汤文</a></div> </div><div id="recent-comments-4" class="widget widget_recent_comments"><h3 class="widget-title"><span>近期评论</span></h3><ul id="recentcomments"><li class="recentcomments"><span class="comment-author-link"><a href='https://personalloans2.com/' rel='external nofollow' class='url'>Spotloan</a></span>发表在《<a href="https://www.go2live.cn/basic/linux/linux-useradd%e5%91%bd%e4%bb%a4%e6%b7%bb%e5%8a%a0%e6%96%b0%e7%94%a8%e6%88%b7%e5%9b%be%e6%96%87%e8%af%a6%e8%a7%a3-%e6%bc%94%e9%81%93%e7%bd%91.html/comment-page-7#comment-100220">Linux useradd命令添加新用户图文详解-演道网</a>》</li><li class="recentcomments"><span class="comment-author-link"><a href='https://paydayloans3.com/' rel='external nofollow' class='url'>Speedycash</a></span>发表在《<a href="https://www.go2live.cn/basic/linux/linux-useradd%e5%91%bd%e4%bb%a4%e6%b7%bb%e5%8a%a0%e6%96%b0%e7%94%a8%e6%88%b7%e5%9b%be%e6%96%87%e8%af%a6%e8%a7%a3-%e6%bc%94%e9%81%93%e7%bd%91.html/comment-page-7#comment-100219">Linux useradd命令添加新用户图文详解-演道网</a>》</li><li class="recentcomments"><span class="comment-author-link"><a href='http://viagra200.com/' rel='external nofollow' class='url'>JudyDak</a></span>发表在《<a href="https://www.go2live.cn/basic/linux/linux-useradd%e5%91%bd%e4%bb%a4%e6%b7%bb%e5%8a%a0%e6%96%b0%e7%94%a8%e6%88%b7%e5%9b%be%e6%96%87%e8%af%a6%e8%a7%a3-%e6%bc%94%e9%81%93%e7%bd%91.html/comment-page-7#comment-100218">Linux useradd命令添加新用户图文详解-演道网</a>》</li><li class="recentcomments"><span class="comment-author-link"><a href='https://nolvadex10.com/' rel='external nofollow' class='url'>SamDak</a></span>发表在《<a href="https://www.go2live.cn/basic/linux/linux-useradd%e5%91%bd%e4%bb%a4%e6%b7%bb%e5%8a%a0%e6%96%b0%e7%94%a8%e6%88%b7%e5%9b%be%e6%96%87%e8%af%a6%e8%a7%a3-%e6%bc%94%e9%81%93%e7%bd%91.html/comment-page-7#comment-100217">Linux useradd命令添加新用户图文详解-演道网</a>》</li><li class="recentcomments"><span class="comment-author-link"><a href='http://hydrochlorothiazide125.com/' rel='external nofollow' class='url'>AlanDak</a></span>发表在《<a href="https://www.go2live.cn/basic/linux/linux-useradd%e5%91%bd%e4%bb%a4%e6%b7%bb%e5%8a%a0%e6%96%b0%e7%94%a8%e6%88%b7%e5%9b%be%e6%96%87%e8%af%a6%e8%a7%a3-%e6%bc%94%e9%81%93%e7%bd%91.html/comment-page-7#comment-100216">Linux useradd命令添加新用户图文详解-演道网</a>》</li></ul></div> </div> </div> </aside>  </div> </div> <footer id="site-footer" role="contentinfo">  <div class="copyrights"> <div class="container"> <div class="row" id="copyright-note"> <span> © 2025 演道网 <span class="footer-info-right"> <a href="https://beian.miit.gov.cn/" target="_blank"> 京ICP备16029834号-1 </a> </span> <div class="top"> <a href="#top" class="toplink">Back to Top ↑</a> </div> </div> </div> </div>  </footer> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Emojify.js/js/emojify.min.js?ver=9.9.9'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/ClipBoard/clipboard.min.js?ver=2.0.1'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Prism.js/components/prism-core.min.js?ver=1.15.0'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Prism.js/plugins/autoloader/prism-autoloader.min.js?ver=1.15.0'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Prism.js/plugins/toolbar/prism-toolbar.min.js?ver=1.15.0'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Prism.js/plugins/show-language/prism-show-language.min.js?ver=1.15.0'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Prism.js/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js?ver=1.15.0'></script> <script type='text/javascript' src='https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Turndown/turndown.js?ver=5.0.1'></script> <script type='text/javascript' src='https://www.go2live.cn/wp-content/themes/feather-magazine/js/customscripts.js?ver=4.9.8'></script> <script type='text/javascript' src='https://www.go2live.cn/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=default&ver=1.3.10'></script> <script type="text/javascript"> window.onload = function () { emojify.setConfig({ img_dir: "https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Emojify.js/images/basic",//前端emoji资源地址 blacklist: { 'ids': [], 'classes': ['no-emojify'], 'elements': ['^script$', '^textarea$', '^pre$', '^code$'] } }); emojify.run(); } </script> <script type="text/javascript"> Prism.plugins.autoloader.languages_path = "https://cdn.jsdelivr.net/wp/wp-editormd/tags/9.9.9/assets/Prism.js/components/"; </script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7c0353d5197094ff9721e67666d9b6b4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body> </html>