适合新手练手的web前端项目：个适合初学者的
适合新手练手的web前端项目：个适合初学者的你最近上过推特吗？如果您仔细观察，您会发现 H1 标签被用作徽标，而不是标题。这并不少见。但是，如果您正在构建单页应用程序或博客，则应为标题保存 H1 标记。H1 应该用来描述你的页面。当您在单个页面上包含多个 H1 标签时，整体搜索引擎分数将受到影响。W3C 规范建议开发人员每页只使用一个 H1 标签。<!DOCTYPE html>那么如果您的 HTML 代码中没有 DOCTYPE 会发生什么？浏览器将在 Quirks 模式下运行。它将 HTML 代码视为 90 年代后期编写的一段。结果，旧浏览器中的错误将开始出现。当然，浏览器会尽力解析 HTML 文档。但是，并非代码中的所有元素都会准确显示。Quirks Mode 是某些浏览器用来保持向后兼容性的一种方法。它有助于打开以旧标准编写的网页。在标准模式下，代码需要符合 W3C 和 IETF 标准。随着 HTML5 的推出，一切
作为 Web 开发人员，有很多东西要学。首先，您需要了解 HTML、CSS 和 JavaScript 的语法，以及这些基本 Web 语言如何协同工作。
然而，最重要的是，您需要学习如何编写好代码：如何像专业人士一样使用 Web 技术来创建高效、可维护和可扩展的应用程序和网站。
在这篇文章中，我将分享 30 个在您编写网页或 Web 应用程序时的最佳实践技巧。
DOCTYPE 是浏览器寻找的前几个参数之一。根据定义，它告诉浏览器 HTML 文档的版本。如果使用任何其他标记语言，则 DOCTYPE 将指定它。因此，浏览器使用 DOCTYPE 来了解需要如何解释整个文档。
那么如果您的 HTML 代码中没有 DOCTYPE 会发生什么？浏览器将在 Quirks 模式下运行。它将 HTML 代码视为 90 年代后期编写的一段。结果，旧浏览器中的错误将开始出现。当然，浏览器会尽力解析 HTML 文档。但是，并非代码中的所有元素都会准确显示。
Quirks Mode 是某些浏览器用来保持向后兼容性的一种方法。它有助于打开以旧标准编写的网页。在标准模式下，代码需要符合 W3C 和 IETF 标准。
随着 HTML5 的推出，一切都变得简单多了。<html>您只需要在标记之前添加以下行。
<!DOCTYPE html>
2.一个页面只有一个H1标签你最近上过推特吗？如果您仔细观察，您会发现 H1 标签被用作徽标，而不是标题。这并不少见。但是，如果您正在构建单页应用程序或博客，则应为标题保存 H1 标记。H1 应该用来描述你的页面。当您在单个页面上包含多个 H1 标签时，整体搜索引擎分数将受到影响。W3C 规范建议开发人员每页只使用一个 H1 标签。
3. 图片需要alt属性很容易忘记在标签中使用alt属性。image但是，alt属性在验证和可访问性中起着至关重要的作用。根据定义，alt标签为页面上的图像提供替代文本。如果图像未加载，alt将显示文本。如果您不在alt图像中使用标签，搜索引擎分数将受到影响。结果，您的页面将获得较低的排名。不仅如此，你的页面对于那些有屏幕阅读器的人来说也不太容易访问。
<!-- BAD APPROACH -->
<IMG SRC="cornImage.jpg" />
<!-- GOOD APPROACH -->
<img src="cornImage.jpg" alt="A corn field I visited." />
4. 验证你的 HTML验证 HTML 将有助于找出错误编写的代码和缺陷。网络上有几个验证器可以提供帮助。 W3C 提供了最广泛使用的 HTML 验证器之一。
5. 使用语义元素HTML 语义元素用于创建具有结构的网页。组装网页时，最好使用语义元素，而不是将所有内容组织成<div>s。例如，避免使用<div>来构建页眉和页脚。<header>相反，请使用语义元素<footer>。语义元素有助于显示网页的<header>开头。另一方面，这<footer>是一个显示导航链接和版权内容的地方。
<!-- BAD APPROACH -->
<div id="header">
<a href="home.html">Home</a>
</div>
<div id="footer">
<a href="copyright.html">Home</a>
</div>
<!-- GOOD APPROACH -->
<header>
<a href="home.html">Home</a>
</header>
<footer>
<a href="copyright.html">Home</a>
</footer>
其他语义标签包括<article>和<nav>。
6. 始终使用描述性元标记元标签由两个属性组成：描述性元属性和关键字元属性。搜索引擎使用此标签来了解页面内容并将搜索者与他们正在寻找的内容联系起来。搜索引擎蜘蛛从元标记中获取有关网页的大量有意义的信息。
描述性元属性用于概括网页的内容和目的。它必须简洁且相关。切勿使用重复的短语向描述性元属性发送垃圾邮件。现代搜索引擎足够聪明，可以识别这个技巧。
<meta name="description" content="30 best practices for web development" />
关键字元属性是最能描述页面的关键字的集合。它可用于对网页进行分类。
<meta name="keywords" content="code html web development" />
7.关闭所有标签HTML 是一种非常宽容的语言。即使存在语法错误，浏览器也能够呈现页面。然而，这些错误——例如，没有关闭你的标签——会使你的浏览器在 Quirks 模式下运行。这意味着您的内容可能不会按照您期望的方式呈现。
未封闭的标签是不好的编码习惯。根据 W3C 规范，所有标签都必须关闭。
<!-- BAD APPROACH -->
<li>Some text here.
<li>Some new text here.
<li>You get the idea.
<!-- GOOD APPROACH -->
<ul>
<li>Some text here. </li>
<li>Some new text here. </li>
<li>You get the idea. </li>
</ul>
8. 单独的 IE 修复构建适用于所有浏览器的网页非常重要。但最难开发的浏览器之一是 Internet Explorer。如果您在使用 IE 时遇到问题，那么您需要构建带有足够注释的模块化代码。
例如，在下面的代码中，只需修改.css文件以适应 IE 版本。
<!-- IE 7 Fixes -->
<!--[if IE 7]> <link rel="stylesheet" href="css/ie-7.css" media="all"> <![endif]-->
<!-- IE 6 Fixes -->
<!--[if IE 6]> <link rel="stylesheet" href="css/ie-6.css" media="all"> <script type="text/javascript" src="js/hello-min.js"></script> <script type="text/javascript"> hello.fix('#logo'); </script> <![endif]-->
将 IE 兼容性修复程序与您的其余代码混合使用是自找麻烦。您的代码将更难维护和理解。
9. 避免过多评论这不是您在开发过程中经常听到的建议！
与其他语言不同，HTML 是不言自明的。如果您使用正确的语义元素和命名约定，则无需添加太多注释。如果您被迫输入许多注释，您应该重新访问您的代码。
10. 小写标记和缩进最后，在 HTML 中你应该坚持使用小写字符。在这里，我们不是在处理代码标准化。相反，我们的主要关注点是代码可读性，这意味着更好的可维护性和可读性。除了小写标记外，代码还必须缩进良好。
<!--BAD APPROACH-->
<DIV>
<IMG SRC="./home.jpg" alt="home"/>
<A HREF="#" TITLE="ABOUT">about</A>
<P>30 Best HTML Practice!</P>
</DIV>
<!--GOOD APPROACH-->
<div id="home">
<img src="./home.jpg" alt="home" />
<a href="#" title="About">About</a>
<p>30 Best HTML Practice!</p>
</div>
十大 CSS 最佳实践1.避免导入许多样式表听说过关键的渲染路径吗？从服务器向浏览器发送响应的那一刻，浏览器开始绘制页面。它总是有要构建的 DOM。但是，如果您的代码加载了许多导入的 CSS 文件，则构建页面所需的总时间会增加。这是因为浏览器为 HTML 页面中的 CSS 构建了 CSSOM（CSS 对象模型）。在页面的 CSSOM 构建完成之前，浏览器不会渲染页面。这就是为什么 CSS 被视为渲染阻塞资源的原因。
这里有一个简单的例子来演示在一段简单的 HTML 代码中导入 CSS 的效果，它显示了一些文本和一个图像。如您所见，整个页面仅用了大约 40 毫秒即可显示出来。即使使用图像，显示页面所需的时间也更少。这是因为在进行第一次绘画时，图像不被视为关键资源。请记住，关键的渲染路径都是关于 HTML、CSS 和 JavaScript 的。即使我们必须尽可能快地显示图像，它们也不会阻止初始渲染。
现在，让我们将 CSS 添加到这段代码中。
如您所见，正在触发一个额外的请求。尽管加载 HTML 文件所需的时间减少了，但处理和显示页面的总时间增加了近十倍。纯 HTML 不涉及太多的获取和解析。但是对于 CSS 文件，首先必须获取 HTML，然后必须获取 CSS 文件，然后必须构建 CSSOM（如上所示）。HTML DOM 和 CSS CSSOM 都必须构建。这绝对是一个耗时的过程。
2.避免内联样式这是所有开发人员的黄金法则。尽量避免使用内联样式。时不时地引入内联样式是非常诱人的。但是，尽管它看起来无害，但它是一个很差的关注点分离，并且在您的编码实践中将被视为错误。
/* BAD APPROACH */
<p style="color: red;">I'm going to make this text red so that it really stands out and makes people take notice! </p>
/* GOOD APPROACH */
#someElement > p {
color: red;
}
3. 对关键元素使用内联 CSS我们刚刚读到必须避免使用内联样式。现在，让我们了解内联 CSS 何时真正必不可少。始终将浏览器完成第一次绘制所需的 CSS 放在顶部。这告诉浏览器快速呈现页面需要什么。因此内联关键 CSS 有助于浏览器尽快完成 DOM 和 CSSOM 渲染。
关键 CSS 被定义为当用户首次登陆页面时页面所需的最小样式集合。
4. 使用 CSS 预处理器CSS 预处理器是用许多实用程序和工具构建的，用于模块化、避免重复和组织 CSS。三种常用的 CSS 预处理器是 LESS、Sass 和 Stylus。这些 CSS 预处理器的最大优点是没有引入新的样式设置方式。相反，您将获得具有更多功能和更具表现力的语法的基本 CSS。
5. 坚持 CSS 方法论为您的项目选择正确的 CSS 方法将有助于维护和扩展。我可以推荐三种 CSS 方法：BEM、ITCSS 和 OOCSS。
BEM也称为块、元素、修改器方法。
- 块代表具有自己含义的独立实体或组件。
- 元素不是一个独立的组件，而是块的一个子实体。
- 修饰符用于表示标志、状态和元素的外观。
.block { }
.block--element { }
.block--modifier { }
ITCSS是倒三角形 CSS，其中文件是根据特定性组织的。随着您在三角形中深入，您将变得更加具体。
OOCSS是面向对象的 CSS，您将视图和结构分开。
/* Instead of */
.container {
width: 50px;
height: 50px;
padding: 5px;
border: 2px solid #FFF;
box-shadow: 1px 2px 5px #FFF;
border-radius: 2px;
}
/* Do */
.container {
width: 50px;
height: 50px;
padding: 5px;
}
.border_style {
border: 2px solid #FFF;
box-shadow: 1px 2px 5px #FFF;
border-radius: 2px;
}
6.使用media如果您的页面必须同时在 Web 和移动设备上加载，您应该使用媒体查询。此外，从移动优先的 CSS 开始是明智的。这被广泛称为渐进增强。
/* Mobile-first media query for media above 600px*/
@media (min-width: 600px) {
/* your CSS rules */
}
/* Non mobile-first media query for smaller screens */
@media (max-width: 600px) {
/* your CSS rules */
}
7.压缩CSS压缩 CSS 可以去除空格，甚至注释。这减少了包的整体大小，并减少了浏览器完成第一次绘制所花费的时间。有一些有趣的 CSS 压缩工具。以下是三个开始：
- CSS 优化器
- CSS 压缩器
- 干净的 CSS
你听说过 CSS 的特殊性吗？如果您被迫使用!important，则您的 CSS 顺序或层次结构存在严重问题。你可能会玩内联样式。或者，您可以使用选择器变得非常具体。或者您可能会覆盖第三方库中的样式。如果是这种情况，您应该了解更多关于 CSS 的特殊性，甚至尝试摆脱第三方库。
特异性是浏览器用来识别元素的正确 CSS 属性的一种技术。最终结果取决于在代码中为选择器创建的规则。
9. 当心沉重的 CSS 属性现代浏览器肯定很快。但是，如果您的网站很复杂，即使是城里最快的浏览器也需要一些时间。广泛使用的昂贵 CSS 属性是filter、border-radius和box-shadow. 事实上，如果您执行动画并不断更改这些值，则相对昂贵width。height为什么？每次更改这些值时，浏览器都需要重新计算布局并重新绘制。视图中的每个嵌套子项都会受到这些重新计算的影响。这就是为什么在使用这些昂贵的属性时应该小心。
10. 使用速记最后但同样重要的是，使用速记。常用的属性，如边框、填充、边距和背景具有速记属性。使用速记可以让您以更简洁的方式设置 HTML 标记样式。
根据定义，CSS 速记是 CSS 属性的集合。您将能够同时在一行上设置和更新多个相关属性的值。
10 大 JavaScript 最佳实践1. 正确放置script标签大多数时候，开发人员将他们的脚本放在整个文档的末尾。从技术上讲，脚本标签必须存在于头部。将其置于底部的一个主要原因是延迟下载和执行。浏览器总是逐行读取和解释文档。当它在头部看到一个脚本时，在获取并解析脚本之前，不会渲染 DOM。对于大型 JavaScript 文件，这可能是一个很长的延迟。因此，移动到底部是有道理的。但是有更好的加载脚本的方法：
预加载这在文件很重要并且渲染应该等到文件加载后使用。浏览器将下载资源，并在资源可用时执行。
<link rel="preload" href="main.js" as="script">
延迟加载当您使用defer时，将在 HTML 呈现发生时下载 JavaScript 资源。但是，这不会在脚本下载后立即发生。相反，它等待 HTML 文件完全呈现。
<script src="main.js" defer></script>
异步加载当您使用 时async，您将允许浏览器在下载 JavaScript 资源时执行其他操作。
<script src="main.js" async></script>
2.没有内联脚本内联脚本会使您的代码看起来很糟糕。但这不是真正的问题。问题是内联脚本会增加 HTML 代码的整体大小。试试看：内联你的 JavaScript。你会看到代码的大小增加了。内联脚本也永远不能被缓存。这样，您的网页将失去缓存的整个概念。当外部脚本被缓存时，第二次加载页面变得更快。通过添加内联脚本，您永远无法利用大多数现代浏览器中的此功能。
因此，将您的 CSS 保存在专用的 CSS 文件中，将您的 JavaScript 保存在专用的脚本文件中。
3. 缩小脚本发布网站时，您需要缩小脚本以减小整体文件大小。如果你查看任何 npm 包，你会遇到两个版本。一是完整的源代码。另一个版本以.min.js 结尾——缩小版。这个版本不会有任何注释、分号，甚至是空格。所有函数和变量名称都将替换为较短的名称。这是一个简单的例子，可以帮助你理解缩小的 JavaScript。
//What you Write
function displayPost(name){
console.log("You are reading " name);
}
displayPost("30 HTML Best Practices");
//What happens in minification
function displayPost(n){console.log("You are reading" n)}displayPost("30 HTML Best Practices");
4.避免浏览器奇思妙想你有为特定浏览器编写的习惯吗？如果是，这种做法需要改变。为特定浏览器编写代码总有一天会适得其反。代码很快就会过时且难以维护。在网络上四处走动，您会遇到许多停止与较新的浏览器版本一起工作的脚本。为某些浏览器构建页面所投入的精力和时间将付诸东流。因此，根据 Web 标准开发页面并跨浏览器对其进行测试。永远不要依赖单一平台。
5. JavaScript 的 B 计划许多用户在他们的浏览器中关闭了 JavaScript。例如，您是否知道 NoScript Firefox 扩展在撰写本文时有 3100 万次下载？除了故意禁用之外，许多用户由于外部环境而无法加载 JavaScript。这些用户无法控制公司强制执行的代理服务器、糟糕的互联网访问，甚至是严苛的防火墙等因素。在这种情况下，您需要有一个计划 B。
不要忘记包含一个<noscript>部分。在本节中，提供一条消息，当 JavaScript 未启用时用户将看到该消息。
<noscript>We are facing Script issues. Kindly enable JavaScript</noscript>
6. 考虑可访问性可访问性永远不会局限于 CSS。在几种情况下，JavaScript 会破坏可访问性。在设计页面时，请确保为工作使用正确的元素。此外，内容必须以文本形式提供给用户。在您无法控制标记的情况下，请使用 WAI-ARIA 来支持支持非语义 JavaScript 的小部件。并在您的脚本中启用键盘控件。这将有助于非鼠标用户。
WAI-ARIA 是一项技术规范，可帮助开发人员创建易于访问的网页。
7. 不显眼的脚本这是一个有趣的话题。开发人员应始终牢记突兀的脚本。这意味着应该使用更新和更好的功能来增强现有脚本。但是，不应从头开始构建整个脚本。尽管听起来令人困惑，但不重新发明轮子是一种明智的编码实践。页面的基本元素必须在有和没有脚本的情况下运行。插入式脚本的好例子是：
- 使用客户端验证构建网站。您还记得我们强调对 HTML 进行持续验证的那一点吗？如果用户在表单中输入了错误的数据，您不能等待服务器响应。相反，客户端验证就足够了。
- 利用 HTML5 的特性。这包括使用自定义控件，如<video>.
这可能是不言而喻的。但有时我们会错过浏览器中现代开发人员工具提供的惊人功能。无论您是调试脚本还是修复布局问题，浏览器开发人员工具都可以提供大量信息。此外，使用新的基于 Chromium 的浏览器，调试源代码变得非常简单和有趣。
9. 确保广泛的浏览器支持浏览器在过去几年中发生了翻天覆地的变化。但这并不意味着您只为较新的解决方案构建解决方案。HTML、CSS 和 JavaScript 中的新功能可能并非在所有浏览器中都可用。因此，您需要在使用框架的最新版本之前测试兼容性。
例如，如果您打算托管一个可供使用旧浏览器的人使用的页面，请考虑使用 polyfill。较旧的浏览器不支持许多新方法，例如Array.includes Promise.allSettled等。无论如何，了解现代浏览器中通常可用的功能可能会有所帮助。Can I Use网站是一个很好的资源，可以帮助您确定某个功能是否足够广泛地可用在您的应用程序中。
10. 框架最后！最后但同样重要的是，您需要掌握 JavaScript 概念。业界有许多鼓舞人心的框架，但如果不了解 JavaScript，所有这些框架都将毫无意义。学习 JavaScript 将增加您充分利用每个框架的机会。因此，在学习使用原生 JavaScript 和 CSS 编码之前，不要在框架上浪费时间！
