欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vscode与chrome配置

程序员文章站 2022-03-06 13:39:45
...

搭配环境:

1 下载vscode和chrome

2 装配vscode中的插件

  1. chinese 中文简体
  2. Debugger for Chrome 代码调试器
  3. Auto Rename Tag 自动命名成对的HTML/XML标记
  4. Auto Close Tag 自动添加HTML XML关闭标记
  5. Auto Complete Tag 扩展包添加关闭标记全部重命名
  6. HTML CSS Support css的支持HTML文档
  7. HTML Snippets 完整HTML标记包含片段
  8. javaScriptES6code snippets 语法字符中的javaScript 代码片段
  9. Live Server 本地服务器与实时重新加载
  10. Markdown Preview Enhanced 增强移植到vscode
  11. markdownlint 样式检查
  12. Matarial lcon Theme 文件图标
  13. One Dark pro 标志性主题
  14. prettier-Code formatter 使用更漂亮的代码

3. 装配chrome中的插件

  1. AdBlocker-Adblock plus 拦截广告
  2. CHarset 用于谷歌浏览器进行编码
  3. Tampermonkey 用于破解某些网页的vip
  4. Vue.js devtools 开发者工具
  5. iGG谷歌访问助手
  6. 划词翻译
  7. 简悦-simpRead
  8. lnfinlty 新标签页
  9. page Ruler Redux 尺子专门测量网页大小
  10. Just Color Picker 取色器

标签:

  1. 页面上看到的内容就是元素
  2. 元素是由标签描述,标签根据元素类型分:单标签和双标签,每一个元素的特征由属性来描述,描述的属性写到起始标签中
  3. 元素是由标签和属性共同进行描述的
  1. //从大到小 除了设置文档标题之外,还可以用来划分页面结构
  2. # 标题标签
  3. ## 标题标签
  4. ### 标题标签
  5. #### 标题标签
  6. ##### 标题标签
  7. ###### 标题标签
  8. //段落的插入
  9. <P>段落标签</p>
  10. //js的script标签
  11. <script>const SITE = ""php中文网</script>
  12. //链接标签
  13. //href是跳转的地方,target是当前页面的跳转方式,_self是在当前页面跳转,_blank是在新的窗口打开新的页面
  14. <a href="https://www.php.cn/" target="_self">php中文网</a>
  15. <a href="https://www.php.cn/" target="_blank">php中文网</a>
  16. //内联框架
  17. //在指定的窗口打开 target中内联框架的name值
  18. <a href="https://www.baidu.com/" target="baidu">打开小度</a>
  19. //src是框架页面跳转的地址,srcdoc设置框架页面文字描述,width表示宽度,height表示高度
  20. <iframe srcdoc="<em>点击上面的:小度</em>" name="baidu" width="400"></iframe>

//锚点的使用,可以在当前页面任意跳转

  1. <a href="#footer">跳转到底部</a>
  2. //创建锚点
  3. //div是通用的容器标签,内部可以放任何类型的元素
  4. <div id="footer" style="margin-top: 1000px">俺是底部</div>
  5. <a href="#">回到顶部</a>

图片标签

  1. <img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="web前端开发" width="200" />
  2. //img是图片标签名称,alt是当图片显示不出来的时候才显示,图片设置大小只需要设置一个,宽或高,另一个会自动缩比

总结:所有标签元素都通过body来显示