HTML (骨架)

Source: Dev.to

HTML：人体骨骼（நம்ம உடம்பின் எலும்புக்கூடு）

结构决定一切（அமைப்புதான் எல்லாம்）

在我们的人体里，肌肉（Muscles）、皮肤（Skin）、血液等都要依赖先有的骨骼（Skeleton）。
脑袋（Skull）所在的地方才会有大脑。
手臂的骨骼所在的地方才会有手。

网站也是同理：

• Header 应该放在哪里？
• Footer 应该放在哪里？
• 主内容（Main Content）应该放在哪里？

决定这些位置的“骨骼”就是 HTML。

HTML 标签如同身体部位（உறுப்புகளும் டேக்-களும்）

（大脑）

这相当于人的头部。它不直接呈现给用户，但所有网站必需的关键信息（Settings）都藏在这里。

（躯干）

这相当于人的身体。网站上所有可见的内容（按钮、图片、文字）都放在这里。

（面部）

这相当于你的脸。向外界展示你的身份的关键“标题”（Heading）。

（脚）

这相当于人的脚。网站的最底部区域会放在这里。

只有 HTML 会怎样？

想象一下，一个人只有骨骼而没有其他组织会怎样？会很可怕！

• 看起来一点也不美观（没有 CSS）。
• 也无法交互、思考（没有 JavaScript）。

但是，没有骨骼（HTML）的人是站不起来的。同理，没有 HTML 的网站也无法存在！

示例

<!-- Head (Heading) -->
<h2>I am the Face (Heading)</h2>

<!-- Torso (Content) -->
<h2>This is my Chest</h2>
<p>I am the skin and muscles (Content)</p>

<!-- Arms -->
<ul>
  <li>Left Hand</li>
  <li>Right Hand</li>
</ul>

<!-- Feet (Footer) -->
<footer>Standing on my Feet (Footer)</footer>

说明

“仔细看看这段代码！就像人体各部位有明确的结构，HTML 也是如此工作。”

完整的“人”

• 头部 – 正如头部对人类的重要性，网站的头部就是它的面孔，里面放置重要的标题。
• 身体 – 类似于人体的躯干，网站的主要信息（Messages）都放在这里。
• 手臂 – 像人体两侧的手臂，网站侧边的链接或按钮可以放在这里。
• 脚 – 支撑人体站立的脚，网站底部的版权信息等放在这里。

结论

“所以，HTML 并不是给网站注入生命的东西，而是为网站提供形状（Shape）的骨架。只要骨架（HTML）完整，就可以在上面使用 CSS 来美化外观！”