前言
学习目标：能上手公司项目
掌握技能：
- HTML、CSS、JavaScript
- VUE+Element|| React+AntDesign
- 基本的webpack配置
- Git命令
- 安装Node
- 使用npm命令
- 配置内网穿透(natapp)
- 使用编辑器(VSCode、HBuilder)
学习方法：
- 看了就要敲
- 会了就要练
- 长期练习
- 多思考
- 一定不能三分钟热度！
持续学习... ...
前端开发简介
前端有一个切图仔的阶段（前端负责展示页面）
后来发生了浏览器大战，然后统一了开发规范（IE浏览器、Chrome浏览器、火狐浏览器、Opera浏览器）
再后面有了node（进入大前端时代，前后端都能开发了）
开源了框架（React、Vue、Angular... ...）,UI组件库（Element、AntDesign... ...）
程序员岗位及职责
产品经理：项目主导人；由上对接客户（老板）需求，整理出需求文档；由下负责开会与程序员开会讨论出方案的可实施性和交互逻辑。
后端：接口提供者；负责数据库的规划，给前端提供需要交互的数据。
UI设计师：页面提供者；负责整个项目的UI，给前端提供页面和交互逻辑。
前端：用代码编写页面，并与服务器交互数据。
测试：测试文档提供者，客户体验者；项目成品前都需要经过测试后才能上线，需要提供测试文档方便前后的自测。
学习网站
学习官网：MDN
程序员社区：掘金
程序员中文学习官网：印记中文
记笔记：语雀
讨论社区：stackoverflow
刷算法： leetcode
浏览器
编辑器
需要知道插件怎么提高自己的开发效率，下载适合自己的插件（如：高亮、自动整理格式... ...）
开始写HTML
HTML（Hyper Text Markup Language）: 超文本标记语言
HTML注释： <!-- 注释文本写在这里 -->
<!DOCTYPE html> <!-- 声明以下为html文档类型 -->
<html lang="en"> <!-- html文档在这个标签里面 -->
<head> <!-- 文档头部，网页配置 -->
<!-- meta标签给浏览器传递基本信息，例如：charset="UTF-8";UTF-8是包含全球的文字 -->
<meta charset="UTF-8">
<!-- 优化搜索（SEO） -->
<meta name="description" conteng="学习前端">
<meta name="keywords" conteng="html,css,javascript">
<title>Document</title> <!-- 网页标题 -->
</head>
<body> <!-- 主体部分 -->
</body>
</html>
文本标签
基本标签
区块标签：div
标题标签： h1~h6
文本标签：p、span
换行标签：br
语义标签
加粗： strong、b
斜体：em、i
列表标签
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
无序列表 有序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
转义字符
| 特殊字符 | 展示 | 转义 | 十进制 |
|---|---|---|---|
| < | < | 小于号 | < |
| > | 大于号 | > | |
| | 空格 |   | |
| © | © | 版权符号 | © |
图像标签
图像标签: <img arc="图片位置" />
相对路径：目标图片位置相对于现在文件的位置
| 特殊字符 | 展示 | 转义 | 十进制 |
|---|---|---|---|
| < | < | 小于号 | < |
超链接
超链接标签: <a>
基础CSS
基本属性
| 属性 | 功能 | 备注 |
|---|---|---|
| height | 高 | |
| width | 宽 | |
| background | 背景 |
盒模型属性
| 属性 | 功能 | 备注 |
|---|---|---|
| padding | 内边距 | |
| margin | 外边距 | |
| border | 边框 |
文字属性
| 属性 | 功能 | 备注 |
|---|---|---|
| font-size | 文字大小 | |
| font-weight | 文字粗细 | |
| font-style | 文字样式 |
布局属性
| 属性 | 功能 | 备注 |
|---|---|---|
| display | 改变标签显示类型 |
- display: flex | 属性 | 功能 | 备注 | | --- | --- | --- | | flex-direction | 定义标签方向 | | | justify-content | 横向展示方式 | | | align-items | 竖向展示方式 | |
基础JavaScript
- 所有的Javascript（以下简称JS）都在<script><\script>标签里面执行
第一个JS程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个JS程序</title>
<script type="text/javascript">
document.write("<sapn>你好 JS </sapn>");
</script>
</head>
<body></body>
</html>
数据类型
基本数据类型：String(字符串)、Number(数字)、Boolean(布尔)、Undefined(未定义)、Null(空)、Symbol(唯一值)、Bigint(大数值)
引用数据类型：Array(数组)、Object(对象)、Date(时间)、Function(函数)
系统内置的打印方法
- console.log(参数 ...):可以在浏览器控制台打印出参数
- alert(参数 ...): 可以弹出一个弹窗打印参数
变量
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第一个JS程序</title>
<script type="text/javascript">
var a = 1;
console.log(a);
</script>
</head>
<body></body>
</html>
