DAY1 前段语言串讲
01 前端语言的基本能力---三剑客：
HTML(hypertext markup language):构建框架结构---构建人的骨骼
- 控制内容的布局
- 为网页设计提供结构
- 任何网页的基石
基本语法：
#标签element：
#分类：
#1. 文档型：
<!DOCTYPE><head><body>
#2. 闭合型：
<p></p>## 闭合标签
<br><img><input>## 空标签
#3. 换行型：
<div>
<hi>,<h2>...<h6>## 块级标签
<span>
<a>## 行内标签
#4. H5新元素
## 语义化标签
<video>,<audio>,<embed>## 媒体标签
<input type="date">
<input type="color">## 表单标签
<canvas>,<progress>## 功能标签
ARIA:设计UI系统
HTML5
语义化标签：更好的维护网站结构
表单增强：
存储能力：
indexedDB：
PWA&
Audio
VIDIO
二进制
API
WEB WORKER
WEB SOCKET
Shadow dom
Web component:自定义标签
SVG(矢量)&CANVAS（点阵）
WEBGL&WEBGPU
WEBASSEMBLY
CSS(cascading style sheet):给页面添加样式----皮囊
- 给元素添加样式
- 针对不同的屏幕尺寸使网页具有响应性
- 是网页“外表和体验”的重要工具
如何查看文档：
左侧为分类：如颜色、 背景等
中间为详细属性
右侧解释每个单位的详细作用
Javascript：（灵魂）--增加交互体验----肌肉
- 增加交互
- 处理复杂函数和一些特性
- 改进函数的程序代码，可用性和保证效率
三个语言同等重要，缺一不可，结合成为一个系统
历史：1995-2017
特点：
特性：
普通
- 验证用户的输入
- 简单的客户计算
- 交互控制
- 独立于平台
- 处理数据和时间
- 生成 HTML 内容
- 检测用户的浏览器和操作系统
现在
- Let/Const
- ARROW函数
- 模板Litral
- 新的数组函数
- 默认参数
JS的基本语法：
数据类型7type：
- String
- Number
- Boolean
- Null
- Undefined
- Symbol
- object：array 、function
定义变量
Var（关键字） 变量名称 = （赋值）（操作符号：=+*）
注意：
- 变量要先赋值再使用，一次可以赋值多个变量
object：
var user {#keys of user object
mame: "aziz ali" # value
yearOfBirth：1988
caculateAge：function（）{
//some code to caculate Age
}
}
#function:
#先命名（参数1，参数2）
function someName(pa1,pa2){
//bunch of code as needed
var a = pa1 + ".."+ pa2
return a;#返回结果
}
#执行函数：直接用 命名（对应的参数）
someName（"",""）
如何在浏览器中运作：
协作：
生态趋势：
- CSS in HTML
- JavaScript in HTML
- HTML in JavaScript
4.CSS in JavaScript
web的风靡原因：
- 对用户友好
- 对开发者友好
- 领域成熟度
- 未来的方向
