；5. 最佳实践包括使用语义化标签、保持代码整洁、提供图片alt属性、使用小写标签名、外联CSS和JS文件、添加注释并定期验证HTML代码。
HTML文件的基本结构可以说是一个约定俗成的骨架，它包含了声明文档类型、定义HTML内容的根元素，以及分别用于存放页面元信息和实际可见内容的两个主要区域。创建一个简单的HTML页面，本质上就是按照这个骨架，填入你想要展示的文本、图片或链接。
解决方案
一个HTML文件，或者说一个网页，最基础的模样通常是这样的：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML页面</title>
</head>
<body>
<h1>欢迎来到我的简单网页！</h1>
<p>这是一个段落。很高兴你看到了这里。</p>
<a href="https://www.example.com">点击这里访问一个示例网站</a>
</body>
</html>我们来拆解一下：
lang="zh-CN"属性告诉浏览器和搜索引擎这个页面的主要语言是中文（简体），这对于辅助技术和搜索排名都有好处。我的第一个HTML页面: 这是显示在浏览器标签页或窗口标题栏上的文本。它对SEO（搜索引擎优化）也很重要。
欢迎来到我的简单网页！
h1到h6六个级别的标题，h1是最重要的。这是一个段落。很高兴你看到了这里。
点击这里访问一个示例网站: 这是一个超链接，href属性指定了链接的目标地址。
要创建一个这样的页面，你只需要：
- 打开一个文本编辑器（比如记事本、VS Code、Sublime Text等）。
- 将上面的代码复制粘贴进去。
- 将文件保存为
.html或.htm后缀（例如：my_first_page.html）。 - 双击保存的文件，它就会在你的默认浏览器中打开了。
HTML文档中的Head和Body标签有何区别？
理解
在</code>），这个标题会出现在浏览器标签页上，而不是页面内容里。还有字符编码（<code><meta charset="UTF-8"></code>），它告诉浏览器如何正确解析页面上的文本，避免出现乱码。此外，CSS样式表（<code><link rel="stylesheet" href="style.css"></code>）和JavaScript脚本（<code><script src="script.js"></script></code>）的引用也通常放在<code><head></code>里，它们决定了页面的外观和交互功能。甚至，你还可以放一些SEO相关的描述（<code><meta name="description" content="..."></code>）和关键词，这些都是给搜索引擎看的，帮助它们更好地索引你的页面。</p><p>而<code><body></code>标签则完全不同，它承载着所有用户在浏览器中能直接看到和交互的内容。从最基本的文本段落（<code><p></code>），到各种标题（<code><h1></code>到<code><h6></code>），再到图片（<code><img></code>）、链接（<code><a></code>）、列表（<code><ul></code>、<code><ol></code>）、表格（<code><table></code>）以及各种表单元素（<code><input></code>、<code><button></code>），乃至更复杂的布局容器（<code><div></code>、<code><span></code>），所有这些构成了网页的视觉和功能主体。当你访问一个网站时，屏幕上呈现的一切，都是由<code><body></code>里的内容渲染出来的。所以，如果说<code><head></code>是幕后英雄，那<code><body></code>就是舞台上的主角。</p><p>我见过不少初学者，刚开始写HTML时会把CSS或者JS代码直接写在<code><body></code>里，虽然浏览器多数时候也能解析，但这并不是最佳实践。分离关注点，把样式和脚本的引用放在<code><head></code>里，内容放在<code><body></code>里，能让代码更清晰、更易于维护，也更符合Web标准。</p><h2>创建HTML页面时常用的基本标签有哪些？</h2><p>在构建一个HTML页面时，除了我们刚才提到的骨架标签，还有一系列“积木”般的标签，它们构成了页面的基本内容和结构。掌握这些常用标签，你就能搭建出绝大多数的静态网页。</p><ul><li><p><strong>文本内容标签：</strong></p><ul><li><code><h1></code>到<code><h6></code>：标题标签。<code><h1></code>代表最高级别标题，重要性依次递减到<code><h6></code>。选择合适的标题级别不仅关乎视觉呈现，对搜索引擎理解页面结构也至关重要。</li><li><code><p></code>：段落标签。用于包裹普通的文本段落。这是最常用的文本标签，我个人写文章时，几乎每个自然段都会用<code><p></code>包起来。</li><li><code><a></code>：锚点（链接）标签。用于创建超链接，通过<code>href</code>属性指定链接目标。比如<code><a href="https://www.google.com">Google</a></code>。它也是实现页面跳转和导航的核心。</li><li><code><strong></code>和<code><em></code>：强调标签。<code><strong></code>表示内容的重要性或严重性，通常显示为粗体；<code><em></code>表示内容的强调，通常显示为斜体。它们比简单的<code><b></code>和<code><i></code>更具语义化。</li><li><code><br></code>：换行标签。一个空标签，用于在文本中强制换行。</li><li><code><hr></code>：水平线标签。一个空标签，用于在文档中插入一条水平分隔线。</li></ul></li><li><p><strong>媒体标签：</strong></p><ul><li><code><img></code>：图片标签。用于在页面中嵌入图片，通过<code>src</code>属性指定图片路径，<code>alt</code>属性提供图片的替代文本（对SEO和无障碍访问很重要）。比如<code><img src="image.jpg" alt="描述图片内容"></code>。</li><li><code><video></code>和<code><audio></code>：视频和音频标签。用于嵌入多媒体内容。它们提供了比旧的Flash插件更原生的支持，也更灵活。</li></ul></li><li><p><strong>列表标签：</strong></p><ul><li><code><ul></code>：无序列表。列表项通常用圆点标记。</li><li><code><ol></code>：有序列表。列表项通常用数字或字母标记。</li><li><code><li></code>：列表项。无论是无序列表还是有序列表，每个具体条目都用<code><li></code>包裹。</li></ul></li><li><p><strong>容器标签：</strong></p><ul><li><code><div></code>：块级通用容器。它本身没有任何语义，主要用于组合其他HTML元素，以便通过CSS进行样式设置或通过JavaScript进行操作。在没有更具体语义的标签可用时，<code><div></code>是万能的。</li><li><code><span></code>：行内通用容器。与<code><div></code>类似，但它是行内元素，通常用于对文本中的一小部分进行样式或操作。</li></ul></li></ul><p>这些标签是构建任何网页的基础。当你开始思考一个页面的布局时，通常会先用这些标签把内容和结构搭建起来，然后再通过CSS来美化它。</p><h2>在编写HTML代码时有哪些常见的错误和最佳实践？</h2><p>编写HTML代码，就像搭积木，看似简单，但要搭得稳固、高效，还是有一些门道。我这些年写代码，也踩过不少坑，总结了一些常见的错误和我觉得特别实用的最佳实践。</p><p><strong>常见的错误：</strong></p><ol><li><strong>忘记闭合标签或错误嵌套：</strong> 这是初学者最常犯的错误。比如写了<code><p></code>却忘了<code></p></code>，或者<code><p><span></p></span></code>这种交叉嵌套。虽然浏览器有时会“聪明”地帮你纠正，但这种不规范会导致不可预测的渲染问题，尤其是在复杂的布局中。调试起来会让人抓狂。</li><li><strong>不使用<code><!DOCTYPE html></code>：</strong> 前面提过，这会导致浏览器进入“怪异模式”，影响CSS的渲染效果，让你的页面在不同浏览器上表现不一致。</li><li><strong>不设置字符编码：</strong> 忘记<code><meta charset="UTF-8"></code>，或者设置了错误的编码，会导致页面出现乱码，特别是当页面包含非英文字符时。</li><li><strong>图片路径错误：</strong> <code><img></code>标签的<code>src</code>属性如果指向了错误的图片地址，图片就无法显示，只会显示一个破碎的图标。这通常是相对路径和绝对路径混淆，或者文件名拼写错误造成的。</li><li><strong>滥用<code><div></code>：</strong> 虽然<code><div></code>是万能容器，但过度使用它而忽略了HTML5提供的语义化标签（如<code><header></code>, <code><nav></code>, <code><main></code>, <code><article></code>, <code><section></code>, <code><footer></code>等），会让你的代码结构不清晰，不利于SEO和可访问性。</li><li><strong>直接在HTML中写大量行内样式或脚本：</strong> 比如<code><p style="color:red;"></code>或<code><button onclick="alert('Hello!')"></code>。这会让HTML文件变得臃肿、难以维护。样式和脚本应该尽可能地分离到独立的CSS和JS文件中。</li></ol><p><strong>最佳实践：</strong></p><ol><li><strong>语义化HTML：</strong> 这是我个人非常推崇的一点。尽可能使用具有实际意义的HTML5标签，而不是一堆无意义的<code><div></code>。例如，用<code><nav></code>表示导航链接，用<code><article></code>表示独立的文章内容，用<code><aside></code>表示侧边栏。这不仅让代码更易读，对搜索引擎优化（SEO）和屏幕阅读器等辅助技术也非常友好。</li><li><strong>保持代码整洁和可读性：</strong> 使用一致的缩进（比如2个空格或4个空格），合理地组织标签，让代码结构一目了然。这对于团队协作和未来的维护至关重要。</li><li><strong>为图片提供<code>alt</code>属性：</strong> 任何<code><img></code>标签都应该包含<code>alt</code>属性，提供图片的文字描述。这不仅在图片无法加载时提供替代信息，对视障用户和搜索引擎也很有帮助。</li><li><strong>使用小写标签名和属性名：</strong> 虽然HTML不区分大小写，但使用小写是普遍的约定和最佳实践，可以提高代码的一致性和可读性。</li><li><strong>外部化CSS和JavaScript：</strong> 将CSS样式规则放在<code>.css</code>文件中，JavaScript代码放在<code>.js</code>文件中，并通过<code><link></code>和<code><script></code>标签引用。这有助于浏览器缓存这些文件，提高页面加载速度，也让HTML代码更纯粹、更易于管理。</li><li><strong>注释代码：</strong> 对于复杂的HTML结构或不明显的部分，添加注释（<code><!-- 这是一个注释 --></code>）可以帮助你和未来的开发者理解代码的意图。</li><li><strong>验证你的HTML：</strong> 使用W3C的HTML验证器（validator.w3.org）定期检查你的HTML代码是否符合标准。这能帮助你发现潜在的错误和不规范之处，确保代码的健壮性。</li></ol><p>遵循这些实践，你的HTML代码会更健壮、更易于维护，也更能适应未来的发展。</p><p>今天关于《HTML页面基本结构及创建方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！</p> </div>
<div class="labsList">
</div>
<div class="cateBox">
<div class="cateItem">
<a href="/article/281729.html" title="CSS处理JSON数据技巧分享" class="img_box">
<img src="/uploads/20250812/1754958143689a893f0a083.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="CSS处理JSON数据技巧分享">CSS处理JSON数据技巧分享 </a>
<dl>
<dt class="lineOverflow"><a href="/article/281729.html" title="CSS处理JSON数据技巧分享" class="aBlack">上一篇<i></i></a></dt>
<dd class="lineTwoOverflow">CSS处理JSON数据技巧分享</dd>
</dl>
</div>
<div class="cateItem">
<a href="/article/281731.html" title="HTML换行怎么实现？br和CSS哪个更优？" class="img_box">
<img src="/uploads/20250812/1754958263689a89b7040be.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="HTML换行怎么实现？br和CSS哪个更优？">
</a>
<dl>
<dt class="lineOverflow"><a href="/article/281731.html" class="aBlack" title="HTML换行怎么实现？br和CSS哪个更优？">下一篇<i></i></a></dt>
<dd class="lineTwoOverflow">HTML换行怎么实现？br和CSS哪个更优？</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="leftContBox pt0">
<div class="pdl20">
<div class="contTit">
<a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
<div class="tit">最新文章</div>
</div>
</div>
<ul class="newArticleList">
<li>
<div class="contBox">
<a href="/article/281946.html" class="img_box" title="HTML5是什么？有哪些新特性？">
<img src="/uploads/20250812/1754968349689ab11d84549.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML5是什么？有哪些新特性？">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 3分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281946.html" class="aBlack" target="_blank" title="HTML5是什么？有哪些新特性？">HTML5是什么？有哪些新特性？</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>312浏览</span>
<span class="collectBtn user_collection" data-id="281946" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281943.html" class="img_box" title="JS数组扁平化5种实用方法">
<img src="/uploads/20250812/1754968165689ab0655d074.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS数组扁平化5种实用方法">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 6分钟前 |
<a href="javascript:;" class="aLightGray" title="递归">递归</a>
<a href="javascript:;" class="aLightGray" title="迭代">迭代</a>
<a href="javascript:;" class="aLightGray" title="栈溢出">栈溢出</a>
<a href="javascript:;" class="aLightGray" title="数组扁平化">数组扁平化</a>
<a href="javascript:;" class="aLightGray" title="Array.prototype.flat()">Array.prototype.flat()</a>
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281943.html" class="aBlack" target="_blank" title="JS数组扁平化5种实用方法">JS数组扁平化5种实用方法</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>434浏览</span>
<span class="collectBtn user_collection" data-id="281943" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281942.html" class="img_box" title="HTML检测电池电量百分比需要结合JavaScript和BatteryAPI。虽然HTML本身无法直接获取电池信息，但可以通过JavaScript调用浏览器提供的BatteryAPI来实现。示例代码：<!DOCTYPEhtml><html><head><title>电池电量检测</title></head><body&g">
<img src="/uploads/20250812/1754968170689ab06a4bad1.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML检测电池电量百分比需要结合JavaScript和BatteryAPI。虽然HTML本身无法直接获取电池信息，但可以通过JavaScript调用浏览器提供的BatteryAPI来实现。示例代码：<!DOCTYPEhtml><html><head><title>电池电量检测</title></head><body&g">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 6分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281942.html" class="aBlack" target="_blank" title="HTML检测电池电量百分比需要结合JavaScript和BatteryAPI。虽然HTML本身无法直接获取电池信息，但可以通过JavaScript调用浏览器提供的BatteryAPI来实现。示例代码：<!DOCTYPEhtml><html><head><title>电池电量检测</title></head><body&g">HTML检测电池电量百分比需要结合JavaScript和BatteryAPI。虽然HTML本身无法直接获取电池信息，但可以通过JavaScript调用浏览器提供的BatteryAPI来实现。示例代码：<!DOCTYPEhtml><html><head><title>电池电量检测</title></head><body&g</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>136浏览</span>
<span class="collectBtn user_collection" data-id="281942" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281940.html" class="img_box" title="JS组件化开发实战指南">
<img src="/uploads/20250812/1754968047689aafef934a0.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS组件化开发实战指南">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 8分钟前 |
<a href="javascript:;" class="aLightGray" title="框架">框架</a>
<a href="javascript:;" class="aLightGray" title="组件">组件</a>
<a href="javascript:;" class="aLightGray" title="通信">通信</a>
<a href="javascript:;" class="aLightGray" title="复用性">复用性</a>
<a href="javascript:;" class="aLightGray" title="JS组件化">JS组件化</a>
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281940.html" class="aBlack" target="_blank" title="JS组件化开发实战指南">JS组件化开发实战指南</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>247浏览</span>
<span class="collectBtn user_collection" data-id="281940" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281939.html" class="img_box" title="HTML结构解析与运行方法详解">
<img src="/uploads/20250812/1754967989689aafb5cfa0b.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML结构解析与运行方法详解">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 9分钟前 |
<a href="javascript:;" class="aLightGray" title="浏览器">浏览器</a>
<a href="javascript:;" class="aLightGray" title="开发者工具">开发者工具</a>
<a href="javascript:;" class="aLightGray" title="基本结构">基本结构</a>
<a href="javascript:;" class="aLightGray" title="HTML文档">HTML文档</a>
<a href="javascript:;" class="aLightGray" title="运行方法">运行方法</a>
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281939.html" class="aBlack" target="_blank" title="HTML结构解析与运行方法详解">HTML结构解析与运行方法详解</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>172浏览</span>
<span class="collectBtn user_collection" data-id="281939" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281937.html" class="img_box" title="Promise链错误处理技巧详解">
<img src="/uploads/20250812/1754967931689aaf7bc49fa.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="Promise链错误处理技巧详解">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 10分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281937.html" class="aBlack" target="_blank" title="Promise链错误处理技巧详解">Promise链错误处理技巧详解</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>173浏览</span>
<span class="collectBtn user_collection" data-id="281937" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281935.html" class="img_box" title="CSS平滑滚动设置方法详解">
<img src="/uploads/20250812/1754967747689aaec347f00.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS平滑滚动设置方法详解">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 13分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281935.html" class="aBlack" target="_blank" title="CSS平滑滚动设置方法详解">CSS平滑滚动设置方法详解</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>374浏览</span>
<span class="collectBtn user_collection" data-id="281935" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281934.html" class="img_box" title="Vue.js搭建博客系统教程详解">
<img src="/uploads/20250812/1754967684689aae841a886.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Vue.js搭建博客系统教程详解">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 14分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281934.html" class="aBlack" target="_blank" title="Vue.js搭建博客系统教程详解">Vue.js搭建博客系统教程详解</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>378浏览</span>
<span class="collectBtn user_collection" data-id="281934" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281931.html" class="img_box" title="CSS数据地图热点交互实现方法">
<img src="/uploads/20250812/1754967629689aae4dd6ea9.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS数据地图热点交互实现方法">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 15分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281931.html" class="aBlack" target="_blank" title="CSS数据地图热点交互实现方法">CSS数据地图热点交互实现方法</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>408浏览</span>
<span class="collectBtn user_collection" data-id="281931" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281928.html" class="img_box" title="HTML选项卡切换实现方法详解">
<img src="/uploads/20250812/1754967452689aad9cd09c4.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML选项卡切换实现方法详解">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 18分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281928.html" class="aBlack" target="_blank" title="HTML选项卡切换实现方法详解">HTML选项卡切换实现方法详解</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>288浏览</span>
<span class="collectBtn user_collection" data-id="281928" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281926.html" class="img_box" title="JS中new操作符如何创建对象实例">
<img src="/uploads/20250812/1754967273689aace9936a8.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS中new操作符如何创建对象实例">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 21分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281926.html" class="aBlack" target="_blank" title="JS中new操作符如何创建对象实例">JS中new操作符如何创建对象实例</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>197浏览</span>
<span class="collectBtn user_collection" data-id="281926" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
<li>
<div class="contBox">
<a href="/article/281923.html" class="img_box" title="ES6padStart用法与字符串格式化技巧">
<img src="/uploads/20250812/1754967207689aaca7a96dd.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="ES6padStart用法与字符串格式化技巧">
</a>
<dl>
<dd class="cont1">
<span>
<a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
<a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
| 22分钟前 |
</span>
</dd>
<dt class="lineOverflow">
<a href="/article/281923.html" class="aBlack" target="_blank" title="ES6padStart用法与字符串格式化技巧">ES6padStart用法与字符串格式化技巧</a>
</dt>
<dd class="cont2">
<span><i class="view"></i>386浏览</span>
<span class="collectBtn user_collection" data-id="281923" data-type="article" title="收藏"><i class="collect"></i>收藏</span>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
<div class="mainRight">
<!-- 右侧广告位banner -->
<div class="rightContBox" style="margin-top: 0px;">
<div class="rightTit">
<a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
<div class="tit lineOverflow">课程推荐</div>
</div>
<ul class="lessonRecomRList">
<li>
<a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式">
<img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt>
<dd class="cont1 lineTwoOverflow">
设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd>
<dd class="cont2">542次学习</dd>
</dl>
</li>
<li>
<a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程">
<img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt>
<dd class="cont1 lineTwoOverflow">
本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd>
<dd class="cont2">511次学习</dd>
</dl>
</li>
<li>
<a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信">
<img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt>
<dd class="cont1 lineTwoOverflow">
如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd>
<dd class="cont2">498次学习</dd>
</dl>
</li>
<li>
<a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战">
<img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt>
<dd class="cont1 lineTwoOverflow">
在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd>
<dd class="cont2">487次学习</dd>
</dl>
</li>
<li>
<a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局">
<img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt>
<dd class="cont1 lineTwoOverflow">
本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd>
<dd class="cont2">484次学习</dd>
</dl>
</li>
</ul>
</div>
<div class="rightContBox">
<div class="rightTit">
<a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
<div class="tit lineOverflow">AI推荐</div>
</div>
<ul class="lessonRecomRList">
<li>
<a href="/ai/13035.html" target="_blank" title="千音漫语：智能声音创作助手，AI配音、音视频翻译一站搞定！" class="img_box">
<img src="/uploads/20250723/1753258213688098e5ef34b.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="千音漫语：智能声音创作助手，AI配音、音视频翻译一站搞定！" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13035.html" class="aBlack" target="_blank" title="千音漫语">千音漫语</a></dt>
<dd class="cont1 lineTwoOverflow">
千音漫语，北京熠声科技倾力打造的智能声音创作助手，提供AI配音、音视频翻译、语音识别、声音克隆等强大功能，助力有声书制作、视频创作、教育培训等领域，官网：https://qianyin123.com </dd>
<dd class="cont2">151次使用</dd>
</dl>
</li>
<li>
<a href="/ai/13034.html" target="_blank" title="MiniWork：智能高效AI工具平台，一站式工作学习效率解决方案" class="img_box">
<img src="/uploads/20250716/17526246026876edda8c2a4.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MiniWork：智能高效AI工具平台，一站式工作学习效率解决方案" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13034.html" class="aBlack" target="_blank" title="MiniWork">MiniWork</a></dt>
<dd class="cont1 lineTwoOverflow">
MiniWork是一款智能高效的AI工具平台，专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具，提供精准智能解决方案，让复杂工作简单高效。 </dd>
<dd class="cont2">143次使用</dd>
</dl>
</li>
<li>
<a href="/ai/13033.html" target="_blank" title="NoCode (nocode.cn)：零代码构建应用、网站、管理系统，降低开发门槛" class="img_box">
<img src="https://s0.wp.com/mshots/v1/nocode.cn?w=383&h=328" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="NoCode (nocode.cn)：零代码构建应用、网站、管理系统，降低开发门槛" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13033.html" class="aBlack" target="_blank" title="NoCode">NoCode</a></dt>
<dd class="cont1 lineTwoOverflow">
NoCode (nocode.cn)是领先的无代码开发平台，通过拖放、AI对话等简单操作，助您快速创建各类应用、网站与管理系统。无需编程知识，轻松实现个人生活、商业经营、企业管理多场景需求，大幅降低开发门槛，高效低成本。 </dd>
<dd class="cont2">158次使用</dd>
</dl>
</li>
<li>
<a href="/ai/13032.html" target="_blank" title="达医智影：阿里巴巴达摩院医疗AI影像早筛平台，CT一扫多筛癌症急慢病" class="img_box">
<img src="/uploads/20250716/1752631805687709fd1f103.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="达医智影：阿里巴巴达摩院医疗AI影像早筛平台，CT一扫多筛癌症急慢病" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13032.html" class="aBlack" target="_blank" title="达医智影">达医智影</a></dt>
<dd class="cont1 lineTwoOverflow">
达医智影，阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”，仅一次CT扫描即可高效识别多种癌症、急症及慢病，为疾病早期发现提供智能、精准的AI影像早筛解决方案。 </dd>
<dd class="cont2">153次使用</dd>
</dl>
</li>
<li>
<a href="/ai/13031.html" target="_blank" title="智慧芽Eureka：更懂技术创新的AI Agent平台，助力研发效率飞跃" class="img_box">
<img src="https://s0.wp.com/mshots/v1/eureka.zhihuiya.com?w=383&h=328" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="智慧芽Eureka：更懂技术创新的AI Agent平台，助力研发效率飞跃" style="object-fit:cover;width:100%;height:100%;">
</a>
<dl>
<dt class="lineTwoOverflow"><a href="/ai/13031.html" class="aBlack" target="_blank" title="智慧芽Eureka">智慧芽Eureka</a></dt>
<dd class="cont1 lineTwoOverflow">
智慧芽Eureka，专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景，通过专家级AI Agent精准执行任务，智能化工作流解放70%生产力，让您专注核心创新。 </dd>
<dd class="cont2">160次使用</dd>
</dl>
</li>
</ul>
</div>
<!-- 相关文章 -->
<div class="rightContBox">
<div class="rightTit">
<a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a>
<div class="tit lineOverflow">相关文章</div>
</div>
<ul class="aboutArticleRList">
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt>
<dd>
<span class="left">2023-11-03</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt>
<dd>
<span class="left">2023-11-21</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt>
<dd>
<span class="left">2024-01-11</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt>
<dd>
<span class="left">2024-01-13</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt class="lineTwoOverflow"><a href="/article/91359.html" class="aBlack" title="UI设计中为何选择绝对定位的智慧之道">UI设计中为何选择绝对定位的智慧之道</a></dt>
<dd>
<span class="left">2024-02-03</span>
<span class="right">501浏览</span>
</dd>
</dl>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<div class="footerIn">
<div class="footLeft">
<div class="linkBox">
<a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a>
<a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a>
<a href="#" class="aBlack" title="意见反馈">意见反馈</a>
<a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a>
<a href="/send.html" class="aBlack" title="广告合作">内容提交</a>
</div>
<div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div>
<div class="shareBox">
<span><i class="qq"></i>技术交流群</span>
</div>
<div class="copyRight">
Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a>
</div>
</div>
<div class="footRight">
<ul class="encodeList">
<li>
<div class="encodeImg">
<img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网">
</div>
<div class="tit">关注公众号</div>
<div class="tip">Golang学习网</div>
</li>
<div class="clear"></div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<!-- 微信登录弹窗 -->
<style>
.popupBg .n-error{
color: red;
}
</style>
<div class="popupBg">
<div class="loginBoxBox">
<div class="imgbg">
<img src="/assets/images/leftlogo.jpg" alt="">
</div>
<!-- 微信登录 -->
<div class="loginInfo encodeLogin" style="display: none;">
<div class="closeIcon" onclick="$('.popupBg').hide();"></div>
<div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();">
<div class="tip">密码登录在这里</div>
</div>
<div class="encodeInfo">
<div class="tit"><i></i> 微信扫码登录或注册</div>
<div class="encodeImg">
<span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>
<!-- <div class="refreshBox">
<p>二维码失效</p>
<button type="button" class="create_wxqrcode">刷新1111</button>
</div> -->
</div>
<div class="tip">打开微信扫一扫，快速登录/注册</div>
</div>
<div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div>
</div>
<!-- 密码登录 -->
<div class="loginInfo passwordLogin">
<div class="closeIcon" onclick="$('.popupBg').hide();"></div>
<div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();">
<div class="tip">微信登录更方便</div>
</div>
<div class="passwordInfo">
<ul class="logintabs selfTabMenu">
<li class="selfTabItem loginFormLi curr">密码登录</li>
<li class="selfTabItem registerFormBox ">注册账号</li>
</ul>
<div class="selfTabContBox">
<div class="selfTabCont loginFormBox" style="display: block;">
<form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login">
<input type="hidden" name="url" value="//www.17golang.com/article/281730.html"/>
<input type="hidden" name="__token__" value="5d15b7ba65caed514fcd8e5be8f287fb" /> <div class="form-group" style="height:70px;">
<input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off">
</div>
<div class="form-group" style="height:70px;">
<input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off">
</div>
<div class="codeBox" style="height:70px;">
<div class="form-group" style="height:70px; width:205px; float: left;">
<input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" />
</div>
<span class="input-group-btn" style="padding:0;border:none;">
<img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/>
</span>
</div>
<div class="other">
<a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a>
</div>
<div class="loginBtn mt25">
<button type="submit">登录</button>
</div>
</form>
</div>
<div class="selfTabCont registerFormBox" style="display: none;">
<form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register">
<input type="hidden" name="invite_user_id" value="0"/>
<input type="hidden" name="url" value="//www.17golang.com/article/281730.html"/>
<input type="hidden" name="__token__" value="5d15b7ba65caed514fcd8e5be8f287fb" /> <div class="form-group" style="height:70px;">
<input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱">
</div>
<div class="form-group" style="height:70px;">
<input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符">
</div>
<div class="form-group" style="height:70px;">
<input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符">
</div>
<div class="codeBox" style="height:70px;">
<div class="form-group" style="height:70px; width:205px; float: left;">
<input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" />
</div>
<span class="input-group-btn" style="padding:0;border:none;">
<img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/>
</span>
</div>
<div class="loginBtn">
<button type="submit">注册</button>
</div>
</form>
</div>
</div>
</div>
<div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div>
</div>
<!-- 重置密码 -->
<div class="loginInfo passwordForget">
<div class="closeIcon" onclick="$('.popupBg').hide();"></div>
<div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div>
<div class="passwordInfo">
<ul class="logintabs selfTabMenu">
<li class="selfTabItem">重置密码</li>
</ul>
<div class="selfTabContBox">
<div class="selfTabCont">
<form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate">
<div style="height:70px;">
<input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true">
</div>
<div class="codeBox" style="height:70px;">
<div class="form-group" style="height:70px; width:205px; float: left;">
<input type="text" name="captcha" class="form-control" placeholder="验证码" />
</div>
<span class="input-group-btn" style="padding:0;border:none;">
<a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px;
position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a>
</span>
</div>
<input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码">
<div class="loginBtn mt25">
<button type="submit">重置密码</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script>
</body>
</html>
