小白总结:前端HTML基础知识点(1)——元素总结

展现在用户面前的WEB页面，内容无非就是文字、图片、视频、音频这四大方面。而这些内容要呈现在用户眼前，最最基础的一种互联网语言，就是HTML（HyperText Markup Language）标记语言。所有千变万化、眼花缭乱、酷炫精彩的内容，都离不开HTML标签的汗马功劳。下面小白就总结一下自学后的一些基础的HTML知识点。

HTML中的标签元素一般分为三大类，它们分别是：块级元素、行内元素、行内块级元素。下面总结一下这几类元素的特点及应用。

01 块级元素

特点：

① 独占一行、从上到下排列

② 可直接控制宽度、高度及盒子模型的CSS属性（width 、height、padding 等属性值）

③ 在不单独设置宽度的情况下，块级元素的宽度（width属性）继承父元素

④ 在不单独设置高度的情况下，块级元素的高度（height属性）靠自己的基因（它本身内容的高度）

块级元素从我的理解来说，就是一个大框框，用来框住其它元素不要乱跑乱窜的，只能在一定范围内活动。所以，它通常会用来进来大的结构搭建。

常用的块级元素：

02 行内元素

特点：

① 元素与元素之间会自动排列成一行，遇到空间不够自动换行

② 默认高度和宽度（width、height）属性与它们的内容有关，无内容那么它本身也就是虚无。

③ 行内元素不支持padding、margin的上下调动（它们就是紧挨着不离不弃、除非用外部手部强制拆散它们）

行内元素一般用来修饰点缀内容而用，语义化比较强，用来加强代码的可读性。

常用的行内元素：

03 行内块元素

特点：

从这个名字就可以看出来，它是一个结合体，块级元素和行内元素的结合体。它具备二者共有的一些特点，使用非常频繁。

① 元素具有块级元素的属性（width、height等属性），可以对其直接控制

② 虽然有宽和高，但是他并不会霸道地独占一行，它具有行内元素的“亲情属性”，会自动排列挨在一起。

③ 行内块元素支持padding、margin的上下调动

欢迎大佬提点指正