这是我参与「第四届青训营 」笔记创作活动的的第1天 。通过笔记来复盘一下这两天内学习到的知识。

一、前端与HTML

1.什么是前端？

1.1前端有三个特点:

• 解决gui人机交互问题
• 跨终端
• web技术栈

1.2前端主要技术栈:

• html
• css
• JavaScript

1.3前端应关注：

• 美观，安全，功能，兼容，体验，性能，无障碍

2.什么是html？

2.1html简介

HTML is the markup language we use to structure content that we consume on the Web.

HTML是用于构造我们在Web上消费的内容的标记语言。

简单来说html是hyper text markup language （超文本标记语言）超文本不止包括文本，还包括图片，链接等

2.2html结构

HTML结构大体上分为head和body两大部分，其余在细分

• 代码段

• Dom树

这也可以将html的结构看得一目了然。

2.3网页内容划分

• 常见网页内容划分

3.如何做一个好前端？

3.1前端应注重语义化（传达内容而不是样式）

语义化即开发者合理正确地使用语义化的标签来创建页面结构

语义化的好处：

• 利于代码阅读，
• 提高可维护性，
• 优化搜索引擎，
• 提升无障碍性，
• 利于读屏软件阅读，
• 响应国家适老性政策。

二、CSS

1.什么是CSS？

CSS称为层叠样式文档 它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位等。 在传统的web网页设计里，使用CSS能让单调的HTML网页更富有表现力。css 层叠样式文档 （用来定义页面元素样式）

2.css如何工作？

• css有三种使用方式：外联，内联，嵌入 代码实例如下

• css工作示意图如下
• 选择器

通过选择器可以找出相应的修改样式的元素

有不同选择器： 通配选择器， 标签选择器， id选择器， 伪类选择器等以及可以进行不同组合选择

• 选择器特异度

当运用多个css进行修饰时，但只能采用一种，谁的优先级更高？ 由选择器特异度来决定 每一种选择器都有自己的权重，依次是 行内样式> ID选择器 > 类、属性、伪类> 元素、伪元素选择器；有些属性会继承父亲计算值，除非显式继承一个值 （代码如下）

• 颜色

RGB色彩模式是工业界的一种颜色标准，是通过对红（R）、绿(G)、蓝(B)三个颜色强度的表示

HSL 分别表示色相，饱和度，亮度

Alpha表透明度，1为不透明，小于1透明

• 字体

font-famly最后要有一个字体族（防止浏览器无法识别）

行高就是文字上下之间的距离

可用css对对齐方式，文字间距，首行缩进，文字修饰等进行修改

3.什么是布局？

3.1 布局介绍

简单来说布局就是确定内容大小和位置的算法（根据容器，兄弟节点，元素和内容等信息来计算） 相关技术：

• 常规流
• 浮动
• 绝对定位

影响布局的属性有：width，height，padding，margin，border等

• 盒子不同属性也影响布局（可用display属性修改），如下

• 开发中常用flex和grid布局，如下

• position属性

大致分为两种：相对（relative）和绝对（absolute），特点如下

大部分情况下，采用子绝父相，即子盒子采用绝对定位，父盒子采用相对定位。

三、个人总结

• 反思

之前好高骛远自学小程序，在html和css基础都不了解的情况下半途而废了，现在学习了在之后明白了很多，也知道了基础的重要性。

• 总结

这两天学习到的知识一定程度上提高了我对前端的认识，也明白了前端的路途长远，即使只是简单的html和css也有学不完的知识，但我不会放弃，一个优秀的程序员一定有积极学习的欲望和坚持不懈的毅力，向未来的课程奋进吧！