写在coding之前🐒
编写一个网页时，我们需要的作案工具有
1.一个浏览器 🌐
浏览器大家应该都有吧，不过用就要用最好的嘛。
这里建议大家下载使用chrome浏览器或者firefox浏览器（也就是火狐）、新版edge浏览器。这些浏览器都好找的，链接点不了的话直接百度上搜一下就能找到。（注意在官网下载，不要下了个什么鲁大师什么的）
2.一个代码编辑器💻——Visual Studio Code（简称vscode）
目前用于前端开发的代码编辑器有很多，不过我们这里推荐Visual Studio Code（简称vscode），因为目前大多数视频教程和博客是以这种代码编辑器为主来进行教学，选择这种编译器会比较容易跟着作案。
还有个软件是Webstorm，这是一个JavaScript 和 TypeScript IDE。这里简单的介绍一下两个软件的一些特点：
- vscode可以用于写多种编程语言，如果想要有好的体验，需要下载相应插件，内存占用小。（免费）
- webstorm功能更强大代码提示更丰富，但是占用内存CPU比较大，是专门用于前端开发的一个IDE。
综上，建议初学者用vscode，如果有js基础比较好的同学可以考虑选择用WebStorm（js是前端开发所需要的一门语言，在后续的课程中我们会学到😁
考虑到绝大部分同学都是初学者，因此我们以VSCode的演示为主，实在想用WebStorm的可以在各大网站搜一下下载和安装的教程 (*WebStorm下载地址*）
vscode 是我们前端常用的代码编辑器，切记不要下载成VS （那个紫色的东西），VS和VSCode是完全不同的俩东西。
下载点这个官网链接
点进去之后是这个页面， 选择你电脑对应的版本
安装过程中我们不要犹豫，全部打勾后直接下一步
需要加汉化的同学可以看下面链接，不过其实汉不汉化都差不多，因为常用的就那几个😂
- 打开软件之后，点击左侧扩展
2 在搜索框中输入chinese
在搜索结果中点击第一条结果后面的"Install"
安装完成后重启vscode即可
小作业
年轻人，逃不掉的😝
LV+无穷:大家在学习过程中碰到什么问题，可以先去问问AI，如果实在解决不了，提问时请截图
可以熟悉一下截屏快捷键
LV0（必做）
开始肯定要先自学一波HTML和CSS，自学网站有，哔哩哔哩，慕课网，还有菜鸟教程、W3C等等。其中视频比较推荐B站的pink老师，讲的非常全面系统。
对前端有个基础的了解了之后，你有没有什么相关的疑问想询问学长学姐呢，或者向学长学姐展示一下自己的学习进度吧，笔记和自己写的小demo之类的东西都可以哟~
LV1（选做）
现在的你应该已经掌握了一些HTML标签和CSS样式了，尝试编写一个如下图的网页吧！😆
文字和图片内容不做硬性要求，用你喜欢的就好~
样例的内容不要在意嗷😅，主要还是练习LV0中学到的知识
LV2 （选做）
这个呢这里做下小结：
主要就是用了水平居中，文字的垂直居中，以及简单的浮动样式
注意：最大的蓝色方块是水平竖直都居中
LV3（选做）
前面的作业都写完的童鞋，可以去尝试仿写一下百度的首页，界面如下图所示就可以。这里不要求实现其中的具体功能，只要模仿界面的样子。（当然要是你能写也可以写😉
作业大致就这么多，不过毕竟是预习作业，大家可以尽力去尝试一下lv1 lv2 lv3，不过都是选做，看大家自己的安排，有时间的话尽量多做吧。
你们可能会碰到的一点问题😫
关于代码运行
预习的差不多的同学可以看一下这个demo，关于运行代码，还有一些快捷键和插件
代码准备
打开我们的vscode，首先你应该会看到这个界面，点击画框的图标，进入我们的工作区
然后新建一个文件夹，命名为demo1，在文件下新建一个文件叫index.html
取名任意，最好使用英文
点开新建好的文件，切换到英文输入法,打出英文感叹号后按 tab键
可能有的同学上面的方法执行了没有出现html文件模板
可以尝试下面的这种方法哦（可能是你的vscode没有升级~）
然后就会出现以下的html模板了😁
写一点代码
好，暂时我们的demo就写到这里了
运行代码
代码是写完了，那怎么才可以看看效果呢
让我们打开vscode里自带的插件市场
打开后在输入框里输入Live Server，下载该插件，我这里是已经安好了，大家安的时候直接点安装/install就行
回到我们的文件目录，右键点击我们写好的index.html文件，然后点击Open with Live Server
然后就可以在我们的浏览器上就可以看到啦😆
其他的各种问题
- 大家可以学习如何独立解决问题以及提问的技巧👇 https://blog.csdn.net/qq_23091073/article/details/142133006?
- 为啥我图片显示不了啊。
---先去了解相对路径和绝对路径，然后请务必检查自己是不是把路径打错了。
- 为啥我这个方块显示不了啊
-----按照往年的经验，大多数情况都是引入css文件的那条语句里面有地方拼写错了，请务必检查，仔细对照自己的代码是不是哪里和网上看到的不一样。
- 提问请截图，拍照提问的问题看的眼睛比较累，体恤一下你们的学长学姐喽。
- lv2其实也很简单，只需要你去了解一下浮动这个概念再花时间琢磨琢磨就能搞定。
- 进阶还是希望大家尽可能地去做，从中你们也会进步很多哒🤭
- 了解内联css和外联css以及内嵌css的区别。
- 当你写下一段新代码想在网页里康康效果的时候 ，记得在VSCode里Ctrl + S 保存文件之后再去刷新网页。
补充
添加一些 vscode 需要用到的东西
快捷键
- Ctrl+D 下一个匹配的也被选中
- Ctrl+C Ctrl+V 如果不选中，默认复制或剪切一整行
- Ctrl+F 单个文件内查找
- Ctrl+H 单个文件内替换
- Ctrl+Shift+F 全局查找
- Ctrl+Shift+H 全局替换
- Ctrl+Shift+K 删除行
- Shift+Alt+F 代码格式化 (不一定所有语言支持，有些可能要插件，在linux系统中是 ctrl+shift+i)
- Ctrl+鼠标指向 跳转到定义处
- Ctrl+/ 注释/取消注释
- ctrl+~ 控制台终端显示与隐藏
- ctrl+z 代码回退到上一步
- ctrl+y or Ctrl+Shift+Z 代码回退到下一步 (注意：在WebStorm中 ctrl+y是删除行 ctrl+shift+z是回退到下一步)
- ctrl+enter 向下重开一行
- ctrl+shift+enter 向上重开一行
更多请看 vscode 官方快捷键
插件
一些有助于编写代码的插件，大家可以直接在上面截图提到的插件市场里面去下载这些插件哦~
这里提供一个视频链接，帮助大家安装插件
- open in browser 把编辑的HTML文件等用浏览器打开
- Code Runner 无需配置的运行当前文件， 快捷键 Ctrl+Alt+N
- IntelliSense for CSS class names in HTML 扫描工作区的 css 文件，提供代码提示
- Path Intellisense 文件地址提示
- Visual Studio IntelliCode - Preview 通过使用习惯，自动标星代码提示
- Auto Rename Tag 对 html 和 xml 进行，自动对应标签修改
- Chinese （Simplified） Language Pack for Visual Studio Code 中文插件
- Stylelint
CSS / SCSS / Less 语法检查
开发者社区和论坛
- CSDN
- 稀土掘金
- Stack Overflow
- Github