我怎么知道正确的 HTML 代码是什么样的

Question

So I've recently started using Free Code Camp to learn web development, and I've reached my first project in the Front-End Development Certification portion.

I was just wondering, what does "correct" HTML/CSS/jQuery look like?

So far the way the site has been teaching me, it's shown me multiple ways to implement things like colors, fonts, buttons, properties, elements, all that good stuff through HTML, CSS, and jQuery.

But is there a preferred place to put things?

For example, lets say I want to make a paragraph font-color blue. Do I:

1) In HTML

<p class="text-primary">Hello World</p>

2) In CSS

<style>
   .font-blue {
      font-color: 00F;
   }
</style>

3) In jQuery

<script>
   $(document).ready(function() {
      $(#h2numb3).css("color", "red");
   });
</script>

Can anyone give me a definite answer, or what the community has decided is "preferable", for what should be in HTML, CSS, and jQuery? Or is it all just based on unique use case scenarios? Like for example, if you want to change all h2 to font monospace, do it in CSS, but if you specifically want to target a header, do it in the start element of the h2 you want to change?

Or is there something more concrete like "words that appear on the screen go in HTML, things that affect appearance go in CSS, and jQuery is for actions and stuff."

Btw, the examples I've put in the paragraph before this are what I based off of what I've learned so far of HTML, CSS, and jQuery.

Answer 1

Separation of concerns

One of the key mantras in software development is to separate your concerns.

When writing a web page, your concerns are:

• the structure of the page
• the style of the page
• the functional aspects of the page

The structure is defined by your HTML. The HTML should only define the elements on the page, and do it in a semantic way. The body contains sections, the sections contain headings and paragraphs and forms. The forms contain inputs, etc.

The style is defined by your CSS. Here you describe what things look like. A heading is large, blue and centered. A paragraph is small print, serif font, dark grey. The image that relates to the article is floated right.

The functional aspects of the page are defined with JavaScript (and perhaps some other technologies). Here you describe what happens when you click a button, or drag an element from one place to another.

Keeping these concerns separate means you can change one without having to change the others (to some extent). If you want to change the style of all of the paragraphs, you alter the CSS for the p tag and voila, all the paragraph styles are changed. Imagine if you defined the style of each paragraph in the HTML, separately for each element! What a nightmare if you want to change them all.

Similarly, if you want to make it so that whenever someone hovers over a link, you show a summary of the linked page in a tooltip, you would do this in JavaScript. You write a single event handler, and assign to every link. Then, when you want to modify it later, it's a single event handler, and you change it for every link.

This is a simplified explanation, but I hope that gives you some insight into why 'separation of concerns' is an important guideline to follow.

You're getting close with your comment:

Or is there something more concrete like "words that appear on the screen go in HTML, things that affect appearance go in CSS, and jQuery is for actions and stuff."

Answer 2

Generally speaking, avoid #1 .

#2 is ok, but you want to look into external stylesheets. That's when you have a separate file with .css extension that contains all of your styles.

#3 is used when you are working with javascript or in your example jQuery. You don't have to apply css like in your example but sometimes it's the only choice.

Now, to address your language, there is no "correct" way to do these things. There are best practices but there are also cases where each one is appropriate.

If you're just starting to learn, stick to external stylesshets and use the other methods when appropriate or you seem to have no other choice.

The basics of using an external stylesheet is having a file, named whatever you want but commonly styles.css or main.css with your styles inside:

.font-blue {
    font-color: 00F;
}

And in head portion of your html you link to it via:

<link rel="stylesheet" href="/css/main.css">

That way you can apply the style as follows:

<p class="font-blue"></p>