Title
2023-11-08 14:03:31
今天早上在群里看到胖哥说他习惯了4点半睡觉10点半起床，我才知道原来像我这么懒的人还有这么勤奋的人，以我的习惯，无论如何也睡不着，我宁可第二天睡懒觉，今天很特殊，我尝试了下4点半睡觉，结果10点半醒来，而且毫无睡意，所以我只能无聊的翻微博，看微信。今天很特殊，是难得的好天气，阳光明媚，还有一丝微风，在这种好天气里，我的心却格外失落，那种失落感会让我很消极，这种消极情绪延续了几个月，我发现这种消极情绪会让我变成另外一个人，好在我意识到这点，至少说明我还有得救。
我开始做前端，是因为我是一个木匠，后来转行成为一名会计，每天盯着电脑我很烦，我想去做点自己喜欢做的事，我开始做前端，也是抱着随便玩玩的心态，当时只会jQuery，看了几十篇博客，做出了自己第一个网站，虽然网站很垃圾，但是我从中找到了自信，后来在网上认识很多朋友，也学到了很多东西，现在我在做一名全栈工程师，我感觉很幸运，我的起点很低，但是我努力提升自己，我并没有觉得自己比别人优秀，但是我会比别人付出多一些，我相信只要我努力，我就会成功。
今天我看到胖哥的一篇文章，里面写到很多前端基础，我想起我刚开始做前端的时候，也是各种百度，各种问，我现在能做一名全栈工程师，也是不断学习，不断总结的结果，所以今天就来说说前端基础，以便让大家少走弯路。
JavaScript
JavaScript是一种解释型语言，其特点是面向对象，支持面向对象编程，是一个动态的语言，其特点是运行效率高，执行速度快，是一种单线程语言，其特点是容易实现多线程编程，是一种弱类型语言，其特点是不需要声明变量类型，并且变量类型可以随时改变。
JavaScript基础语法
- 变量声明：var name = value;
- 常量声明：const name = value;
- 数组声明：var arr = [1, 2, 3];
- 对象声明：var obj = {name: 'John', age: 30};
- 函数声明：function name(param1, param2) { ... }
JavaScript DOM操作
- getElementById(id)：根据ID获取元素
- getElementsByTagName(name)：根据标签名获取元素
- createElement(name)：创建元素
- appendChild(element)：添加元素
- removeChild(element)：删除元素
JavaScript事件处理
- onclick：点击事件
- onload：加载事件
- onchange：改变事件
- onkeydown：按键按下事件
- onkeyup：按键弹起事件
JavaScript AJAX
- XMLHttpRequest对象：用于与服务器进行异步通信
- open(method, url)：打开请求
- send(data)：发送请求
- onreadystatechange：当请求状态改变时触发事件
JavaScript 正则表达式
- 创建正则表达式：var re = new RegExp(pattern);
- 测试正则表达式：re.test(string);
- 匹配正则表达式：re.exec(string);
JavaScript 常见错误
- 类型错误：试图访问不存在的属性或方法
- 引用错误：试图访问未声明的变量
- 范围错误：试图在函数外部访问函数内部的变量
- 语法错误：代码中存在语法错误
HTML
HTML是超文本标记语言，其特点是易于理解，上手简单，是一种性语言，其特点是通过标签文档结构，是一种静态语言，其特点是不会改变文档内容，是一种客户端语言，其特点是在浏览器中运行。
HTML基础语法
- 文档结构：Content
-
- 段落：
Paragraph
- 段落：
- 列表：
- Item 1
- Item 2
- 超链接：Link
- 表格：
Head 1 Head 2 Data 1 Data 2
HTML 语义化标签
- header：头部
- nav：导航
- section：章节
- article：文章
- aside：侧栏
- footer：页脚
HTML 表单元素
- input：文本输入框
- textarea：文本区域
- select：下拉列表
- checkbox：复选框
- radio：单选框
- button：按钮
HTML 常用属性
- id：元素ID
- class：元素类名
- style：元素样式
- src：图像或脚本地址
- href：超链接地址
- alt：图像替代文本
- title：元素标题
HTML 常见错误
- 标签不闭合：
Paragraph
- 标签嵌套错误：
Paragraph
- 属性值未加引号：Link
- 元素使用不当：使用
标签创建布局
CSS
CSS是层叠样式表，其特点是易于控制，风格统一，是一种表现性语言，其特点是通过样式描述文档外观，是一种动态语言，其特点是可以动态改变文档外观，是一种客户端语言，其特点是在浏览器中运行。
CSS基础语法
- 选择器：选择元素
- 属性：设置元素样式
- 值：属性值
CSS 常用选择器
- 元素选择器：p { ... }
- 类选择器：.class { ... }
- ID选择器：#id { ... }
- 后代选择器：p a { ... }
- 子代选择器：p > a { ... }
- 相邻兄弟选择器：p + a { ... }
CSS 常用属性
- color：文本颜色
- background-color：背景颜色
- font-size：字体大小
- font-family：字体
- width：宽度
- height：高度
CSS 布局
- 浮动：float
- 定位：position
- 绝对定位：absolute
- 相对定位：relative
- flexbox：弹性布局
CSS 常用错误
- 样式冲突：多个样式应用到同一个元素
- 选择器错误：选择器未正确选择元素
- 属性值错误：属性值不符合规范
- 单位缺失：属性值未添加单位
总结
前端基础是前端开发的基础，掌握好前端基础，可以让你在前端开发道路上走得更远。
希望这篇文章对你有帮助，如果你有任何问题，请随时留言。
