02-开发者工具

谁家好人学前端啊
164 阅读2分钟

开发者工具

  • 概念：又称devtools

  • 打开：

    • 直接F12开启
    • 或者鼠标右键->检查

  • 开发者工具使用：

    • elements：包含当前网页的结构代码，html代码

    • styles：表示当前网页的样式代码，css代码

    • console：代表控制台，可以查看网页的错误信息

    • sources：表示网页资源，在该模块中可以拿到当前网页的所有完整代码

    • network：这里为网页发送请求的地方

  • 使用方法：

    • 使用鼠标在element区域选中标签，在右侧style区域会显示当前选中标签的样式代码
    • 点击开发者工具左下角的小箭头，当小箭头为蓝色时可以在页面中选择任意区域查看对应结构和样式代码

网页三大核心技术

  • HTML：网页的骨架

  • CSS：给网页增添样式效果，美化网页（宽、高、颜色、动画效果…..）

  • Javascript：网页的脚本语言，增添网页动态效果

HTML

  • 概念：（hyper text mackup language）超文本标记性语言

    • 超文本：通过超链接，将不同空间的资源整合在一起，形成的一个网状结构。
    • 标记性语言：并不是编程语言，标记则为标签。<div>内容</div>

常见代码编辑器

  • txt文本：书写麻烦，每次需要更改后缀显示
  • hbuider：vue推荐的工具，一款比较小巧的开发工具，内置了部分插件，在开发时可以一边开发一边观看页面效果，比较耗内存。
  • webstorm：默认加载很多插件，比较消耗内存，收费软件
  • dreamwearve：可以拖拽模块直接生成代码，更新比较少，功能没有以前强大
  • vscode：微软发布的一款工具，提供了非常丰富的插件生态库，按需加载。

插件配置

  • Chinese
  • Auto Rename Tag：修改前面标签时将结束标签进行同步更改
  • HTML CSS Support:在html中支持css代码
  • Image preview：图片显示缩略图
  • IntelliSense for CSS class names in HTML：智能提示css类名
  • Live Server：将vscode作为服务器打开，可是实时更新显示效果
  • open in browser：使用默认浏览器打开
  • Stylelint：css代码编写时智能提示语法错误

网页编写流程

  1. 新建一个文件夹，拖入vscode中作为根目录打开
  2. 新建文件.html
  3. 使用!快速生成html基本结构模板
  4. 在<body>标签中书写html结构代码即可
  5. 鼠标右键，使用Live Server或者open in browser打开页面
avatar
文章
阅读
粉丝