放下Javascript：先学习HTML和CSS

A growing trend in front end development is the idea that you can dive right in to Javascript and succeed. Honestly, for better or worse you probably can. But you’re just building on top of a fragile foundation that will come back to bite you.

前端开发中的一种日益增长的趋势是您可以直接使用Javascript并获得成功的想法。 老实说，无论好坏，您都可以。 但是，您只是建立在脆弱的基础之上，而基础又会再次咬住您。

为什么需要HTML或CSS？ (Why do I need HTML or CSS?)

The UI frameworks that we know today like React and Vue build on top of the basic building blocks of a webpage: HTML and CSS. Though these UI frameworks supercharge these basics through some cool tools and Javascript, what you’re building is fundamentally the same thing as the Space Jam website from 1996.

今天我们知道的UI框架(如React和Vue)建立在网页的基本构建块之上：HTML和CSS。 尽管这些UI框架通过一些很酷的工具和Javascript强化了这些基础知识，但是您所构建的内容与1996年的Space Jam网站基本上是相同的。

But I get it, writing HTML and CSS manually is dated right?

但我明白了，手动编写HTML和CSS是否正确？

了解您的工具在做什么 (Understand what your tools are doing)

Having at least a basic understanding of what’s going on under the hood will help you immensely as you develop and debug your applications.

至少对幕后情况有一个基本的了解，将在您开发和调试应用程序时极大地帮助您。

You might have run into a few odd things in the browser, such as why does HTML transform code there? Using the following as an example:

您可能在浏览器中遇到了一些奇怪的事情，例如，为什么HTML会在那里转换代码？ 以以下为例：

<style>
p {
  color: purple;
}
</style>
<h1>My Cool Page</h1>
<p>
  Some cool stuff
  <div>Is this still cool?</div>
</p>

When you load this up in Chrome, you’ll notice some changes…

当您将其加载到Chrome中时，您会注意到一些变化…

Why isn’t all of my paragraph cool and purple?

为什么我的所有段落都不都是紫色的？

Well, turns out your browser is helpful and automatically fixes your code. A paragraph tag (<p>) can not contain another block level element, so Chrome and other browsers will adjust your HTML on the fly to make it valid. HTML is very lenient this way! But this is a common bug that stumps developers old and new who just aren't familiar with how HTML works.

好吧，事实证明您的浏览器很有帮助，并且会自动修复您的代码。 段落标记( <p> ) 不能包含另一个块级元素 ，因此Chrome和其他浏览器会即时调整您HTML以使其生效。 HTML非常宽大！ 但是，这是一个常见的错误，使不熟悉HTML原理的新老开发人员难堪。

学习CSS的魔力 (Learn the magic of CSS)

CSS can do a whole heck of a lot these days. It’s so much more than setting a few colors, but gives you the ability to provide consistent UI patterns throughout your application.

如今，CSS可以做很多事情。 它不仅可以设置几种颜色，还可以在整个应用程序中提供一致的UI模式。

Don’t be afraid of it! If you started in Javascript, you might be tempted to do everything there, but you’ll quickly find managing all of the real power of CSS within your JS is a pain, and frankly, unnecessary unless you’re Facebook.

不要害怕！ 如果您是从Java语言开始的，那么您可能会想在那里做所有的事情，但是您会很快发现管理JS中CSS的所有真正功能是很痛苦的，而且坦率地说， 除非您是Facebook ， 否则就没有必要了 。

What can you do? Build the Alien movie title scene with pure CSS. Grab some hover effects for your buttons. Or just animate anything!

你能做什么？ 使用纯CSS构建外星人电影标题场景 。 为按钮获取一些悬停效果 。 或者只是为任何东西设置动画 ！

A favorite of mine is creating a fancy Facebook-like loading animation class that will apply an animated gradient background to anything you add it to:

我最喜欢的是创建一个类似于Facebook的精美加载动画类，该动画类会将动画渐变背景应用于您添加到其中的任何内容：

.loading {
  background: linear-gradient(90deg, #eff1f1 30%, #f7f8f8 50%, #eff1f1 70%);
  background-size: 400%;
  animation: loading 1.2s ease-in-out infinite;
}

@keyframes loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

Crack open a codepen and try it yourself!

破解一个密码笔并自己尝试！

使您的搜索结果相关 (Make your search results relevant)

Search engines do their best to figure out how the content you write is relevant to users searching for it. But how you write your HTML makes a difference with helping them determine that value. A common mistake I see is using Heading elements incorrectly or simply not using them at all.

搜索引擎会尽力找出您编写的内容与搜索用户的相关性。 但是，如何编写HTML有助于帮助他们确定该价值。 我看到的一个常见错误是标题元素使用不正确或根本不使用它们。

<h1>All</h1>
<h1>My</h1>
<h1>Content</h1>
<h1>Is</h1>
<h1>Important</h1>

Consider the outline of this blog post:

考虑一下此博客文章的概述：

- Put Down the Javascript - Learn HTML & CSS
  - Why do I need HTML or CSS?
  - Understand what Your tools are doing
  - Learn the magic of CSS
...

“Learn the magic of CSS” is not the key takeaway from the page, so I wouldn’t want to feature that as the most important. The title of the post however, “Put Down the Javascript — Learn HTML & CSS”, reflects the overall story, making it the most important, so I would want to make it #1.

“学习CSS的魔力”不是该页面的重点，所以我不想将其作为最重要的内容。 但是，该帖子的标题为“放下Javascript-学习HTML和CSS”，它反映了整个故事，使其成为最重要的故事，因此，我想使其成为第一。

So with my HTML, I would want to make it look something more like:

因此，对于我HTML，我想使其看起来更像：

<h1>Put Down the Javascript - Learn HTML & CSS</h1>
<h2>Why do I need HTML or CSS?</h2>
<h2>Understand what Your tools are doing</h2>
<h2>Put Down the JS - Learn HTML & CSS/h2>

This lets Google, Bing, and all the other search engines know exactly what should be the most important part of the page and help identify the general hierarchy.

这样一来，Google，Bing和所有其他搜索引擎就可以确切地知道页面中最重要的部分，并有助于识别总体层次结构。

通过包容性发展来驱动可访问性 (Drive accessibility by inclusive development)

By not coding responsibly, we automatically exclude people from accessing the site we work so hard to build. Often these people care about what’s getting built just as much if not more than you and I do.

通过不负责任地编码，我们会自动将人们排除在无法如此努力地工作的站点之外。 通常，这些人关心的是与您和我一样多甚至更多的东西。

By doing a little homework the first time and spending an extra second thinking about what we’re writing, we can be inclusive to all friends visiting our sites.

通过第一次做一些功课，然后再花些时间思考我们在写什么，我们可以使所有访问我们网站的朋友都包容。

Take a simple navigation list commonly seen in most websites today. You might be tempted to write out a few div s because they work right?

以一个简单的导航列表为例，该列表在当今大多数网站中都很常见。 您可能会想写出一些div因为它们工作正常吗？

<div className="nav">
  <div><a href="#">Link 1</a></div>
  <div><a href="#">Link 2</a></div>
  <div><a href="#">Link 3</a></div>
</div>

The issue is, they’re not as easy for screen readers to pick up on. To fix this, you /technically/ can write even less HTML ( div is 3 characters, ul and li are 2 🙄).

问题是，屏幕阅读器不容易安装它们。 为了解决这个问题，您/技术上/可以编写更少HTML( div是3个字符， ul和li是2🙄)。

<ul className="nav">
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Taking it a step further, if this is your navigation menu, wrap it in an HTML 5 navigation element (<nav>) and users will now be able to directly access the menu.

如果这是您的导航菜单，请更进一步，将其包装在HTML 5导航元素 ( <nav> )中， 用户现在可以直接访问菜单 。

Check out The A11y Project for more good tips on accessibility.

请查看A11y项目 ，以获取有关可访问性的更多提示。

简化您的代码，包含本机功能 (Simplify your code, embrace native functionality)

You would be surprised how much functionality exists natively in modern browsers, with more browser support than you probably need (sorry to those of you who still support IE9).

您会惊讶于现代浏览器中本机存在多少功能，而其浏览器支持超出了您可能需要的(抱歉，仍然支持IE9的人)。

With some basic HTML, you can build a text input that has searchable, autocomplete-like text in a dropdown:

使用一些基本HTML，您可以构建一个文本输入，该文本输入的下拉菜单中包含可搜索的，类似自动完成的文本：

<label>My Favorite Color</label>
<input type="text" name="color" list="colors">
<datalist id="colors">
  <option value="Magenta">
  <option value="Purple">
  <option value="Ultraviolet">
</datalist>

Taking advantage of CSS pseudo selectors, we can dynamically style a checkbox-type element depending on if it’s checked:

利用CSS伪选择器，我们可以根据是否选中复选框来动态设置复选框类型的元素的样式：

<style>
.is-checked {
    display: none;
}

#my-checkbox:checked + span .is-checked {
    display: inline;
}

#my-checkbox:checked + span .not-checked {
    display: none;
}
</style>

<label for="my-checkbox">
  <input id="my-checkbox" type="checkbox" />
  <span>
    <span class="not-checked">Not Checked</span>
    <span class="is-checked">Checked</span>
    </span>
</label>

这是您的手艺，请注意 (This is Your Craft, Pay Attention to It)

I’d wager the majority of the people reading this are doing so because they care about their code and are super passionate about what they do. Just like any other craft that came before development, practicing and focusing on the fundamentals will strengthen your ability as a developer. Bonus, you’ll be getting an easy win by helping be more inclusive with your work and getting more people to your application!

我打赌大多数阅读此书的人都是这样做的，因为他们关心自己的代码，并对所做的事情充满热情。 与开发之前的其他任何技术一样，练习和专注于基础知识将增强您作为开发人员的能力。 奖励，通过帮助您的工作更具包容性并吸引更多人加入您的应用程序，您将轻松获胜！

• 🐦 Follow Me On Twitter

  Twitter在Twitter上关注我

• 📽️ Subscribe To My Youtube

  Subscribe️订阅我的YouTube

• ✉️ Sign Up For My Newsletter

  ✉️注册我的时事通讯

Originally published at https://www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css

最初发布于https://www.colbyfayock.com/2019/08/put-down-the-javascript-learn-html-css

翻译自: https://www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/