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

1、前端与HTML

MDN 上的 HTML 参考，包含每个标签和属性的详细说明
- developer.mozilla.org/en-US/docs/…
最新版的 W3C HTML5 规范
- html.spec.whatwg.org/multipage/

1.1、什么是前端工程师？

使用web技术栈解决多端图形用户界面交互问题的工程师

1.2、前端技术栈

HTML(内容) CSS(样式) JavaScript(行为)

1.3、前端应该关注哪些方面？

美观、功能、安全、兼容、性能、无障碍、体验...

1.4、HTML是什么？

HTML(HyperText Markup Language)，超文本标记语言。

超文本指不只包含文本，还有图片、标题、链接、表格等内容。

标记指的是标签语法例如：

<img src="photo.jpg" />

1.5、DOM树

DOM： DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

1.6、语义化

1.6.1、什么是语义化？

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言

1.6.2、为什么需要语义化？

增加代码的可读性和可维护性
使浏览器更好地展示画面
有利于SEO（搜索引擎优化）
提升无障碍性（给盲人读页面内容）

1.6.3、如何做到语义化？

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

2、走进前端技术栈-CSS

W3C CSS 相关的规范
- www.w3.org/TR/?tag=css
CSS 相关文章
- web.dev/learn/css/

2.1、什么是CSS?

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

2.2、在页面中使用CSS

外链(推荐)

<link rel="stylesheet" href="/assets/style.css">

嵌入

<style>
    li {
       margin: 0;
       list-style: none;
    }
</style>

内联(不推荐)

<p style="margin:1em 0">Example Content</p>

2.3、CSS是如何工作的？

2.4、选择器

2.4.1、什么是选择器？

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名和id
- 按照属性
- 按照DOM树中的位置

2.4.2、选择器种类

!important
内联样式
ID选择器
类/伪类选择器
元素选择器
通配符选择器

！如果不同选择器选中同一个元素该怎么处理？

答：根据选择器的特异性（权重）进行判断，高的覆盖低的

2.4.3、选择器权重

例如：

html:
<artical>
    <p id="text" class="example">Examplr Content</p>
</artical>

css:
artical .example {
    color: skyblue;
}

#text {
    color: red;
}

最终的颜色是red，因为id选择器的权重高

2.4.4、选择器组合

2.5、颜色

RGB/RGBA
- R：红色通道
- G：绿色通道
- B：蓝色通道
- A：透明度通道

R、G、B的值都是0-255，A的值为0-1，例如：rgba(255, 255, 255, 1)表示白色，又可以表示为#ffffff。这种表示方法最常用，但是不够直观

HSL
- H：色相，取值范围0-360
- S：饱和度，取值范围0-100%
- L：亮度，取值范围0-100%

例如：hsl(18, 90%, 80%)

HTML和CSS | 青训营笔记