三大件区别

HTML超文本标记语言（英语：HyperText Markup Language，简称：HTML）

CSS层叠样式表（英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、级联 样式表、串接样式表、阶层式样式表）

img

对于这个网页

  • 若只有HTML

img

  • 若加上了CSS

img

img

可以说HTML就是页面的骨架，CSS是皮肤，JS就是能让其互动

cd56e9d81730f5e40b37dd7f26642465.fd9f78ff6a7b98b9198c84acbf7b975f

HTML

HTML可以说是一个个嵌套的小盒子，就像下图这样一层一层嵌套下去。

image-20241101010811404

举个基础的代码例子

image-20241101010854274

1
2
3
<html>
    ...
</html>

嵌套了

1
2
3
4
5
6
<head>
    ...
</head>
<body>
    ...
</body>

而head和body内部又嵌套了一些元素

image-20241101011236637

基础HTML标签

image-20241101011538967

image-20241101011930852

image-20241101011942577

HTML属性

有些标签会携带属性，如下图

image-20241101011704261

实例标签有:

  • <a>
    • image-20241101011740438
    • image-20241101011753892
  • <img>
    • image-20241101011816421

<img>是自闭标签，而且照片的位置若为本地文件，则为相对位置

image-20241101011856504

div & span

CSS

若HTML看做骨架，那么CSS就是衣服

CSS规则

image-20241101012123819