Web开发是一个非常依赖经验的领域，但它对初学者并不友好。
当知识脱离应用场景后，它会变得模糊、空洞，但知识本身如果满足“抓大放小”的“80-20法则”，就会提高学习效率。是关键。
本节解释HTML 和CSS 之间的关系。内容选自书籍《HTML 5与CSS 3核心技法（全彩）》。本书主旨清晰，说明简洁，并提供在线效果演示，非常适合初学者入门。
1 HTML是骨架
很难想象一个人整夜坐在桌子前，对着切菜板，边哭边笑，敲击几下切菜板，是什么感觉。事实上，这就是我们在猫眼中的样子。然而，我们面对的是一块发光的“菜板”。但为什么这个“板”如此吸引人呢？您所说的“在线”到底是什么意思？
询问信息。
我们关注的是看不见、摸不着，但却真实存在的“信息”。不管“1+1=2”出现得多么松散，都不影响它所传达的完整信息，而且这个信息的内部逻辑是正确的，对吧？ HTML用于保存核心内容信息。
因此，在CSS 和JavaScript 出现之前，就有了HTML。这是不可避免的。如果你不能有效地传达你的核心信息，那么所有的花里胡哨都是毫无意义的。
除了解决传达核心信息的需要之外，HTML 还解决了结构化信息的重要问题。
想象一篇这样的文章：
后视图
我说：“爸爸，我们走吧。”爸爸向车外望去，说：“我去买点橘子，你就待在这儿，别乱动。”站台围栏外有一些橘子。卖家正在那边等待顾客。当你到达那个平台时，你必须穿过铁轨，跳下来，然后爬回来。我的父亲很胖，所以他走路去那里比较困难。我试图走，但他拒绝，所以我不得不让他走。只见他头戴黑布帽子，身穿大黑布马褂，身穿深蓝色布棉袍。但要穿过铁轨，爬上另一边的站台，对他来说并不容易。他双手抱住它，把腿抬起来，肥胖的身体微微向左倾斜，以显示他的努力。
评论
王华华或许，世界各地的父亲衰老的外表都有一些共同的特征。
李玄丹先生，我们不想承认他老了。
刘贝贝想吃橘子……
此时，上面的信息基本上是非结构化的。编辑状态将是最终的显示效果。
HTML 很有用。请参阅下面的代码。
代码
文章
h1 后视图/h1
p
我说：“爸爸，我们走吧。”爸爸向车外望去，说道：“我去给你买点橙子，你就呆在那里，别走动。”站台围栏外有一些橘子。卖家正在那边等待顾客。当你到达那个平台时，你必须穿过铁轨，跳下来，然后爬回来。我的父亲很胖，所以他走路去那里比较困难。我试图走，但他拒绝，所以我不得不让他走。只见他头戴黑布帽子，身穿大黑布马褂，身穿深蓝色布棉袍。但要穿过铁轨，爬上另一边的站台，对他来说并不容易。他双手抱住它，把腿抬起来，肥胖的身体微微向左倾斜，以显示他的努力。
/p
/文章
部分ID='评论列表'
div class='标题'评论/div
div 类='评论'
Strong class='用户名'Oukaka/strong
span class='content' 也许世界上所有的父亲在年老的外表/跨度上都有一些共同的特征
/div
divclass='评论'
Strong class='用户名'李栓丹/strong
span class='content' 我们不想承认他老了/span
/div
div 类='评论'
Strong class='用户名'刘贝贝/strong
span class='content'我想吃橙子./span
/div
/部分
感到困惑没关系。稍后我们将详细解释每个部分。总之，这个内容感觉比较繁琐。但麻烦是有代价的，重要的是这些信息具有结构。这意味着计算机遵循结构规则，并且可以更轻松地呈现它以供阅读（或交互）。
下面是浏览器直接渲染的结果，没有添加任何装饰内容。
影响
这是一个纯HTML显示效果，没有任何装饰。显然，这仍然比纯文本状态更具可读性。但是，请记住HTML 本身没有样式。字体大小和粗细的变化是浏览器默认样式的函数，与HTML 无关。这就是重要的事情。这意味着您可以根据此结构设计自己的页面效果。请参阅下面的示例。
代码
风格
body { font-family: '微软雅黑', sans serif }
#评论列表{ 背景： #f0f0f0 内边距： 1 像素顶部边距： 25 像素；
#评论列表.comment { margin-top: 10px; margin-bottom: 10px;
#评论列表.title {
颜色： #777；字体大小： 1.1rem；
边框底部： 1px实心#ccc；
}
/风格
文章
h1 后视图/h1
p
我说：“爸爸，我们走吧。”爸爸向车外望去，说道：“我去给你买点橙子，你就呆在那里，别走动。”站台围栏外有一些橘子。卖家正在那边等待顾客。当你到达那个平台时，你必须穿过铁轨，跳下来，然后爬回来。我的父亲很胖，所以他走路去那里比较困难。我试图走，但他拒绝，所以我不得不让他走。只见他头戴黑布帽子，身穿大黑布马褂，身穿深蓝色布棉袍。但要穿过铁轨，爬上另一边的站台，对他来说并不容易。他双手抱住它，把腿抬起来，肥胖的身体微微向左倾斜，以显示他的努力。
/p
/文章
部分ID='评论列表'
div class='标题'评论/div
div 类='评论'
Strong class='用户名'Oukaka/strong
span class='content' 也许世界上所有的父亲在年老的外表/跨度上都有一些共同的特征
/div
div 类='评论'
Strong class='用户名'李栓丹/strong
span class='content' 我们不想承认他老了/span
/div
div 类='评论'
Strong class='用户名'刘贝贝/strong
span class='content'我想吃橙子./span
/div
/部分
影响
这只是一个示例。您可以轻松更改页面的样式，以在用户体验中产生差异（差距）。 CSS“总是在变化”，因为它灵活而强大，而HTML“容易”，因为它简洁、整洁。结构的力量！
CSS是一个皮肤
充满活力的生态并不满足于现状。一旦人们习惯了方便地查看重要信息，他们就会找到改善浏览体验的方法。例如，您可以以多栏形式显示博客，以在视觉上区分不同的部分，或者更改字体颜色以突出显示重要信息。
第一种方法是准备一些特定于样式的特殊标签。关于布局，如果没有特殊标签，直接使用表格布局。以下状态没有样式（您不需要理解以下代码）：
代码
h1 title/h1p 从前，有一座山，那山上有一座寺庙./p
影响
这是当前的页面结构。
如果希望标题居中，则需要添加元素居中。请参阅下面的示例。
代码
centerh1title/h1/centerp从前，有一座山，山里有一座寺庙./pEffect
当前页面结构如下。
标题居中的目标固然达到了，但是有一个很大的问题。如果您改变主意并且不希望其居中，则需要再次删除中心元素。对于简单的页面来说这当然是可以实现的，但是对于复杂的页面来说，这种方法的工作量就变成了一场噩梦，因为所有的东西都必须改变地方，比如对齐方式、颜色、背景颜色，或者大的布局，它就会看起来像这样。结构即可完成。这种方式最大的问题就是太难以维护了。许多不必要的结构必须修改以适应特定的风格。基本上，一旦你创建了一些东西，你就不需要改变它。又是这样。
这个问题亟待解决，而且解决方案必须符合现有规则。现有的HTML 语法和结构是什么？但HTML 已经有了结构，为什么不利用它呢？
以前面例子中的文章页面为例，如果你想改变标题，是不是可以先统一选择所有标题，然后指定你想要的样式规则呢？
所有h1 元素都会监听
居中。
字体颜色为黑色。
如果您想增加所有段落的字体大小，请执行以下操作：
所有p 元素都听
字体大小150%。
这个方法当然是非常有效的。同时，这个规则与HTML语法无关，相当于另一种语言。这样，结构和风格不再相互影响；结构成为结构，风格成为风格，它们是分离的。如果要更改样式，根本不必使用任何HTML，只需更改样式文件即可，更易于管理和维护。这是CSS，但语法更简洁。
以下是更改标题位置的示例。
h1 { /* 所有h1 元素监听*/
text-align: center; /* 居中对齐*/
}
批量选择和处理大大提高了开发效率并降低了维护成本。
（就这样）
推荐书籍
《HTML 5与CSS 3核心技法（全彩）》
严肃的表情
本书能够为自学的Web开发初学者建立HTML和CSS的核心知识框架，同时通过丰富的示例让初学者学习变得轻松有趣。
任何想要进入前端开发的人都可以将本书作为学习的起点。参与前端开发的人可以将本书作为快速参考手册。
版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。