青训营前端基础-笔记1前端基础串讲笔记，第一次做笔记，上传的md文件可能有点问题，图片位置错了，可是字节的md编辑器好像

01_前端语言的基本能力

HTML
- 构建一个网页最基本的框架
- 控制网页的内容布局
- 为网页设计提供框架
CSS（语法较为简单，但内容超多）
- 使网页显示丰满
- 给网页的元素变得风格化
- 主要解决的就是网页的”观感“问题
- 学会上MDN_Website查找
JavaScript（最具有灵魂的语言）
- 提高网页的可交互性
- 解决复杂的功能和特性
- 用更加编程性的方法增强网页功能性

Browser

HTTP---->构建DOM树---->计算CSS树---->排版---->渲染合成---->绘制网页---->最终得以呈现

而其中的DOM树，就是一个HTML的基本框架；

CSS树，就是给HTML基本框架上色，使其更加丰满；

JavaScript便在绘制网页时，给各个标签 tag 赋予功能，完善浏览器的人机交互部分功能。

02_前端语言的协作配合

CSS in HTML

inline CSS

<p style="color: blue;">This is a paragraph.</p>

Internal CSS

<head>
	<style type = text/css>
		bode {background-color: blue;}
		p {color: yellow;}
	</style>
</head>

External CSS

<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

JavaScript in HTML
- in (会增加运行负载)
- in (较为常用)
HTML in JavaScript

主要用于通过JS对HTML做出动态修改

JSX
CSS in JavaScript

主要用于通过JS修改网页Style

CSS Module

JSS

03_你所不知的HTML

HTML并非图灵完备，它只是一门标记语言

graph LR
A[HTML]-->B[文档型]
A-->C[闭合型]
A-->D[换行型]
A-->E[H5新元素]
B-->F[&lt!DOCTYPE>]
B-->G[&lthead>]
B-->H[&ltbody>]
C-->I[闭合标签]
C-->J[空标签]
I-->K[&ltp><p>]
J-->L[&ltbr>]
J-->M[&ltimg>]
J-->N[&ltinput>]
D-->O[块级标签]
D-->P[行内标签]
O-->Q[div]
O-->R[&lthn>]
P-->S[&ltspan>]
P-->T[&lta>]
E-->U[语义化标签]
E-->V[媒体标签]
E-->W[表单标签]
E-->X[功能标签]
V-->Y[&ltvideo>]
V-->Z[&ltaudio>]
V-->A1[&ltembed>]
W-->A2[&ltinput type data>]
W-->A3[&ltinput type color>]
X-->A4[&ltcanvas>]
X-->A5[&ltprogress>]

image-20230726162258162转存失败，建议直接上传图片文件

HTML结构

Head标签中有什么

head标签中的内容用于描述网页的[额外]信息
主要给浏览器或者搜索引擎用
其中较为重要的是meta元素

定义基本元数据信息

定义页面的编码方式
<meta charset="UTF-8">

定义可视区域——viewpoint，其宽度设定为设备宽度（html5的要求）
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">

http-equiv 表示执行一个命令，设置HTTP的content-type
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

页面的描述信息，供搜索引擎抓取与显示
<meta name="description" content="1111">

定义css样式，可以通过style标签或link的方式引入。

直接定义css样式
<style>
  .title {
    font-size: 20px;
    color: red;
}
</style>
使用外部定义的 css
<link rel="stylesheet" href="./day3.css">

定义JavaScript内容，可以通过script或link的方式引入。
- 强调一点：这种定义不常用
- head中定义的JavaScript将会在页面加载前执行，会阻塞页面加载
- 所以往往将JavaScript定义在body中
定义title标签，也称html文档的标签。