这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
《理解CSS》
CSS（Cascading Style Sheets,层叠样式表):
用来定义页面元素的样式；实际上对于上节课《前端与HTML》已经有过一定的介绍，所谓HTML比喻成是一个房子，而CSS是粉刷与装修房子的工具，让房子有着更丰富的样式；
如图所示，所谓的定义页面元素的样式：对HTML元素的字体、大小、动画进行设置；
CSS的基础代码结构
CSS的基础代码组成：三部分组成，属性间用分号隔开
选择器：用于选中页面元素，对页面的元素样式进行设置
属性：选择元素设置的特征
属性值：用于设定具体属性的值
CSS使用方法
外链：使用CSS的基础代码，以link的形式导入到元素中；
嵌入：生成新的元素，嵌入到代码中，书写元素；
内联：HTML所有的元素都具有属性style，在元素的属性内部定义需要的样式；
推荐用第一种方法：外链，目的是为了使内容和样式代码相分离，方便维护；
CSS的工作原理
HTML解析成DOM树后，CSS为其的每一个节点的属性进行设置，从而获取渲染树
接下来对CSS的代码组成一一拆分：
选择器 ：用于选中内容中的元素，以便对其进行渲染；
选中内容元素的方式：1、类名、标签名或id(用于选中某个特定的元素,id唯一); 2、属性名;3、按照DOM树的位置;
通配选择器（加*）：选中所有元素
id选择器：选定特定某个唯一id元素
类选择器：同一类型的标签设置样式
属性选择器：对某个属性的标签设置样式，可以以特定条件的属性
其中"href^=‘#’" 意思的该属性值的开头为'#'则选中;而"href$=‘#’"则后缀为#为选中
DOM树：将HTML代码的元素分层出不同节点，使其以树状的形式呈现；
内部的节点称为DOM节点
HTML的语法
注：部分值内部的属性值直接写出，而非Key = value的形式
HTML的列表
- 无序列表 ul(unordered list)
- 有序列表 ol(ordered list)
- 定义列表（以key:value形式）dl(difination list)
HTML的超链接：可以链接网站、图片、视频、音频
<a href="www.baidu.com" target="_blank">something</a>
control 使用浏览器默认的控件
HTML用户输入：input
用户自选框
文本标签
<blockqupte>
<cite>
# 强调： strong（表示事件重要）、em(表示语气)
<strong>
<em>
HTML的内容布局
# header 内部放置的是用户看不见的配置信息
# main 页面的主体内容
# aside 属于内容但是次要的信息
# foot 参考信息、版权信息
HTML语义化
所谓的语义：HTML的元素、属性、属性值都有其自己的意义，开发者遵循一定的标记语言规则将元素组合在一起
为什么要语言化？
多人多场景都需要你提供语义化的代码
谨记：HTML传达内容而非样式
怎么做到语义化？
推荐：mdm文档，w3c上的html5的规范
