我如何知道正确的HTML代码看起来像什么

因此，我最近开始使用Free Code Camp来学习Web开发，并且已经在前端开发认证部分中达到了我的第一个项目。我如何知道正确的HTML代码看起来像什么

我只是想知道，什么是“正确的”HTML/CSS/jQuery的样子？

到目前为止，该网站一直教我的方式，它向我展示了多种方式通过HTML，CSS和jQuery实现诸如颜色，字体，按钮，属性，元素等所有好东西。

但是有没有一个首选的地方放东西？

例如，假设我想让一个段落的字体颜色为蓝色。难道我：

1）在HTML

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

2）在CSS

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

3）在jQuery中

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

谁能给我一个明确的答复，或者是什么社区决定是“可取的”，HTML，CSS和jQuery应该是什么？还是仅仅基于独特的用例场景？例如，如果您想要将所有h2更改为字体等宽字体，请在CSS中执行此操作，但是如果您特别想要定位标题，请在要更改的h2的开始元素中执行此操作。

还是有一些更具体的东西，比如“屏幕上出现的文字用HTML表示，影响外观的东西用CSS表示，jQuery用于动作和东西。”

顺便说一句，我在这之前的段落中提供的示例是基于迄今为止我了解的HTML，CSS和jQuery。

2017-01-19 Archie

据我所知，HTML编码有很多样式，没有共同的概念。没有什么像Python的PEP8 HTML/CSS/JS。 – Barmar

非常一般的问题，但一个细节：在你的CSS例子中，颜色代码需要得到一个前导的“＃”字符，比如“font-color：＃00F;”。 – Johannes

@Johannes实际上是不正确的。有许多预定义的颜色可以通过关键字使用，例如“红色”，“蓝色”，“绿色”等。http://www.w3schools.com/colors/colors_names.asp –

在软件开发中，其中一个关键咒语是分开您的疑虑。

当编写一个网页，你的担心是：

结构风格的结构由您的HTML定义。 HTML应该只定义页面上的元素，并以语义的方式进行。正文包含部分，部分包含标题，段落和表格。表单包含输入等。

样式由您的CSS定义。在这里你描述了什么样的事情。标题很大，以蓝色为中心。一段是小字体，衬线字体，深灰色。与文章相关的图片是正确的。

该页面的功能方面是用JavaScript（也许还有其他一些技术）定义的。在这里你描述当你点击一个按钮时发生了什么，或者将一个元素从一个地方拖到另一个地方。

保持这些关注点不同意味着您可以更改一个而不必更改其他（在某种程度上）。如果要更改所有段落的样式，请更改p标记和中提琴的CSS，所有段落样式都会更改。想象一下，如果你在HTML中为每个段落定义了风格，那么每个元素都是分开的！如果你想全部改变它们，那真是一场噩梦。

同样，如果您希望每当有人悬停在链接上时，都会在工具提示中显示链接页面的摘要，您可以在JavaScript中执行此操作。您编写单个事件处理程序，并分配给每个链接。然后，当你想稍后修改它时，它是一个单独的事件处理程序，并且您可以为每个链接进行更改。

这是一个简单的解释，但我希望能让您对“为什么分离问题”是一个重要的指导原则有所了解。

你正在接近你的评论：

或者是有一些像“出现在屏幕上进去HTML，影响美观走在CSS的东西的话更加具体，和jQuery是采取行动和东西。”

2017-01-19 01:55:30 Matt

谢谢，这正是我所寻找的答案的类型，是目的的一个分支，或者是你所说的问题。非常感谢：D – Archie

一般来说，应避免#1。

#2是好的，但你想看看外部样式表。这是当你有一个单独的文件，其中包含.css扩展名，包含所有样式。

#3在您使用javascript或您的示例jQuery中使用。你不必像你的例子那样应用CSS，但有时它是唯一的选择。

现在，为了解决您的语言，没有“正确”的方式来做这些事情。有最佳做法，但也有一些情况下每个都是适当的。

如果你刚刚开始学习，坚持外部stylesshets和适当时使用其他方法，或者你似乎没有其他选择。

使用外部样式表的基础是有一个文件，命名为任何你想要的，但通常styles.css或main.css与你的风格里：

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

而在你的HTML head部分您通过链接到它：

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

这样，你可以应用样式如下：

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

2017-01-19 01:47:27

回答