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

2018-05-29 19:57:58

所以我最近开始使用Free Code Camp来学习网络开发，并且我已经在前端开发认证部分达到了我的第一个项目。

我只是想知道，“正确”的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。

关注点分离

在软件开发中，其中一个关键咒语是分离你的顾虑。

在编写网页时，您的担心是：

页面的结构

页面的样式

页面的功能方面

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

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

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

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

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

这是一个简单的解释，但我希望这能让你了解为什么'分离问题'是一个重要的遵循指导原则。

你接近你的评论：

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

一般来说，避免#1 。

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

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

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

如果你刚刚开始学习，那么坚持使用外部风格，并在适当的时候使用其他方法，或者你似乎别无选择。

使用外部样式表的基础知识有一个文件，命名为你想要的任何东西，但通常在你的样式styles.css main.css styles.css或main.css ：

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

在你的html的head部分中，你可以通过以下方式链接到它：

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

这样你可以按如下方式应用样式：

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

链接地址: http://www.djcxy.com/p/2513.html