HTML和CSS | 青训营笔记

HTML和CSS | 青训营笔记

前言：这是我参与【第四届青训营】笔记创作活动的第一天。记录青训营第一天所学的知识，记录的内容主要分为两部分。第一部分是有些忘记的但是很重要的基础知识，第二部分是一些新的深入的拓展的知识。

第一部分

1.HTML是什么？

HyperText Markup Language

2.html语法

• 标签和属性不区分大小写，推荐小写
• 空标签可以不闭合
• 属性值推荐用双引号包裹
• 某些属性值可以忽略，比如required，readonly

3.标签

• ol有序列表
• ul无序列表
• dl属性值表述 定义列表
• a 链接 href（target属性）
• 多媒体元素：img audio video
• 引用标签：blockquote长引用 （cite来源于） cite短引用 q短引用（具体的内容）

4. 内容整体划分

• header
• nav

---

• main
• article aside
• article

---

• footer

5.html的语义化

• html中的元素，属性以及属性值都拥有某些含义
• 开发者应该遵循语义来编写html

6. 如何做到语义化？

• 了解每个标签的属性和含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

7.在页面中使用css

外链 嵌入 内联

第二部分

1.css是如何工作的？

2.调试CSS

• 右键点击页面，选择【检查】
• 使用快捷键 ctrl+shift+I

3.初始值

• css中，每个属性都有一个初始值
• background-color的初始值是transparent
• margin-left的初始值为0
• 可以使用initial关键字显式重置为初始值
• background-color：initial

4.布局是什么？

1. 确定内容的大小和位置的算法
2. 根据元素、容器、兄弟节点和内容等信息来计算

5.布局相关技术

• 常规流：行级，块级，表格布局，FlexBox，Grid布局
• 浮动
• 定位

6.FlexBox是什么？

1. 一种新的排版上下文
2. 它可以控制子级盒子的：

• 摆放的流向
• 摆放顺序
• 盒子的宽度和高度
• 水平和垂直方向的对齐
• 是否允许拆行

flex 布局的基本概念

7.display:grid

• display:grid 使元素生成一个块级的Grid容器
• 使用grid-template相关属性将容器划分为网格
• 设置每一个子项占哪些行列

网格