这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

html

什么是html?

官话来讲：就是**超文本标记语言**，我们平常浏览的网页页面就是由html来编写的，它包括一系列的标签，并通过这些标签的配合使其组合成描述性文本，并且html极其好学，入门极其简单。

html的语义化

在编写html代码时，在开始时我们通常用很多div标签进行布局，不管是头部，底部还是中间的主题区域，这种在文章关键位置使用div的方式显然是不符合语义化的，于是html5的更新用时带来了语义化标签，现在编写头部可以使用header标签，编写底部可以使用footer标签，等等...这种每一种标签都有其符合的语义，这就是html的语义化。

css

首先要了解的: css的选择器权重

很多新手在开始写css代码时遇到最多的一个问题就是我的css样式为什么不起作用，当排除拼写错误等低级错误后，**css的选择器权重**是我们必须要关心的一个方面

• !important -> 无穷大
• 内联样式 -> 1000
• id选择器 -> 100
• 类，伪类，属性选择器 -> 10
• 标签，伪元素选择器 -> 1

如果两个属性发生了冲突，name选择器对应的数字相加，所得数字最大的那个选择器对应的属性才会起作用，数字较小的会被覆盖

flex布局

css中最重要的一个布局方式

项目的属性

• order属性: 数值越小，排的越靠前，默认为0，且可以为负数。
• align-self属性：设置当前项目的对齐方式。
• flex属性:（为flex-grow、flex-shrink、flex-basis的缩写,默认为0 1 auto)

flex: 0, 对应的是0 1 0%, 相当于不可扩大，可缩小

flex: 1, 对应的是1 1 0%, 相当于可扩大，可缩小

flex: auto, 对应的是1 1 auto, 相当于可扩大，可缩小