前端基础认识

最新推荐文章于 2024-08-25 18:02:18 发布

大白熊289

最新推荐文章于 2024-08-25 18:02:18 发布

阅读量69

点赞数 1

文章标签：前端 javascript html5

本文链接：https://blog.csdn.net/weixin_61415308/article/details/126050297

版权

本文介绍了前端开发从早期的简单网页到现在的多元化应用，强调了JavaScript作为前端的灵魂角色。提到了HTML、CSS和JS的基础及重要性，并指出学习前端要注意框架的使用和原生技术的掌握。此外，分享了Visual Studio Code的设置技巧，如关闭代码提示功能和创建HTML模板，以提高开发效率。

摘要由CSDN通过智能技术生成

前端的认识和学习前端注意事项

前端的认识

早期的网页：政府科研单位，军队，大学。
早期的网页只是有文字和图片，只是用于展示信息的；现在的网页可以打小游戏、看视频（哔哩哔哩）、看视频的同时还可以发弹幕等
1995年网景推出JavaScript，实现了客户端的计算任务。基于源型的动态解释器脚本。
html：给页面内容搭建框架，实现了分工明确；css：美化结构和内容；js：灵魂，包含（ECMAScript：提供核心语言功能；文档对象模型（DOM）：提供访问与操作网页内容的方法与接口；浏览器对象模型（BOM）：提供与浏览器交互的方法与接口。html5与css3
框架：提升开发效率，用来处理平常简单但是繁琐的事情，便于开发者节省时间，但是更新时间快，最重要的还是要注重原生代码与技术，真正的懂。
技术等级：初级工程师高级工程师技术专家资深技术员研究员
技术管理：项目组员项目组长项目主管项目经理技术总监
学习时间和代码练习时间比例是1：2
学习方法：听>练习>思考>寻找漏洞>回溯视频（知识点）>记录笔记(重点）>练习>试图讲解
高效的的提问方式：使用xxx技术实现了xxx效果的时候，遇到了问题xxx，问题表现为xxx 已排查xxx点，没有找到原因，配上相关代码和效果图。

使用Visua0 Studio Code

1.关闭代码智能提示功能：

打开首选项>设置>点开在settings.json中编辑或者Ctrl+Shift+p打开搜索框，直接输入settings.json 回车然后键入如下代码，保存即可：

控制键入时是否显示快速建议

     
      "editor.quickSuggestions": {
      "other": false,
      "comments": false,
      "strings": false
        },
      "editor.parameterHints": false,
      "editor.wordBasedSuggestions": false,
      "editor.snippetSuggestions": "none",
      "editor.suggestOnTriggerCharacters": false,
      "files.autoSave": "off"

html文件快速建成html模板

文件>首选项>配置用户代码片段
或者Ctrl+Shift+p 输入：html.code-snippets
这里的"prefix": "h", h是快捷键，这里的模板代码也可以根据自己的需求更改就好。


    "h5 sample": {
    "prefix": "h",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">\n",
      "<head>",
      "\t<meta charset=\"UTF-8\">",
      "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">",
      "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
      "\t<title>Document</title>",
      "\t<link rel=\"stylesheet\" href=\"$1\">",
      "\t<script src=\"$2\"></script>",
      "</head>\n",
      "<body>\n$3",
      "</body>\n",
      "</html>"
       ],
      "description": "The full sample code - html5."
     }