这是我参与「第五届青训营 」伴学笔记创作活动的第 一 天
今日课程重点
1. 前端概述 2. HTML介绍 3. HTML语义化 4. CSS简介 5. CSS-选择器 6. CSS-布局
1. 前端概述
前端技术栈
前端关注内容
前端的边界
开发环境
2. HTML介绍
HyperText Markup Language
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
DOM树
将HTML文档以树状结构直观地体现出来
HTML语法
更多HTML详细标签 使用规范
MDN的HTML参考：具体HTML标签及属性说明
developer.mozilla.org/en-US/docs/…
W3C HTML5 规范
html.spec.whatwg.org/multipage/
3. HTML语义化
4. CSS简介
Cascsading Style Sheets
CSS的使用
外链式/嵌入式/内联式
CSS工作流程
CSS样式
常用样式：
颜色rgb/HSL，font-size, line-height, text-align, spacing, text-indent, text-decoration, white-space, font-family
font-family使用建议：
- 字体列表最后加上通用字体族
- 英文字体放在中文字体前
学习了解更多CSS样式及规范
5. CSS-选择器
选择器种类：
- 通配选择器
* {
color: red;
}
- id选择器
#one {
color: gold;
}
- 类选择器
.box {
color: green;
}
- 标签选择器
div {
color: blue;
}
- 属性选择器
[checked] {
color: orange;
}
- 伪类选择器
a:hover {
color: purple;
}
选择器权重优先级
继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值
CSS求值过程
6. CSS-布局
盒子模型
宽度高度均指内容 content-box
宽度高度包括边框和padding border-box
常规流
Flex布局
grid布局
如何选取网格：
给每一条横线和竖线按1234顺序标号，根据标号范围划定所选网格
float浮动
由于flex，grid的出现，如今float的使用更多的是回归本质：图文环绕，无需太关注其他用法(清除浮动等)
position定位
注意绝对定位的元素相对于谁来进行偏移
- 祖先元素中没有定位-默认相对于浏览器偏移
- 祖先元素中有定位-相对于最近的有定位祖先元素偏移
