(二)编辑器的使用

最新推荐文章于 2024-10-05 16:51:11 发布

cdxsc2015

最新推荐文章于 2024-10-05 16:51:11 发布

阅读量129

点赞数

分类专栏： 0基础学前端文章标签： html

本文链接：https://blog.csdn.net/cdxsc2015/article/details/119202630

版权

0基础学前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

编辑器的使用

1.常用编辑器：sublime webstorm HBuilder vscode
2.vscode推荐使用
3.vscode常用插件
（1）使用Ctrl+shift+x打开扩展
（2）Chinese (Simplified) Language Pack for Visual Studio Code 使用中文界面
（3）Auto Rename Tag 修改html标签自动帮助我们完成尾部闭合标签的同步修改
（4）open in browser 右键设置在默认浏览器中打开网页 (快捷键alt+b)
（5）需要重启vscode

常用快捷键

1.标签名+tab快速生成标签
2.标签名*n +tabl快速生成n个该标签
3.h$*6 +tab快速生成h1-h6标签
4.ctrl+shif+d 复制光标所在行、复制所选内容
5.ctrl+shif+k 或者 ctrl+x 删除光标所在行、所选内容
6.ctrl+shit+上箭头将光标所在行上移一行
7.ctrl+shit+下箭头将光标所在行下移一行
8.按住鼠标滚轮拖动同时选中多个光标同时操作
9.ctrl+滚轮调整现实字号大小
10.ctrl+z 无限后退一步
11.ctrl+shift+z 无限还原一步
12.ctrl+enter 在任意位置

快速生成骨架

1.ctrl+n 新建文件
2.ctrl+s 保存为一个html文件
3.!+tab 快速生成骨架

骨架解析

1.骨架组成 html head title body 标签组成

title标签作用
（1）让页面拥有一个属于自己的标题
（2）可以作为搜索引擎抓取时的关键字，提高SEO搜索引擎优化
（3）内部的内容回显示在搜索结果的标题部分
（4）作为浏览器收藏夹默认的网页标题

<!-- DTD文档定义类型 告知浏览器加载网页时按照什么版本来解析 -->
<!DOCTYPE html>  
<!-- 表示所有的标签元素内容的语言都是英语 -->
<html lang="en">
    <!-- 网页头部 -->
<head>
    <!-- 定义了当前网页所使用的字符编码  需要与编辑器的字符集一致 -->
    <meta charset="UTF-8">
    <!-- 视口，以后补充 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页的标题 -->
    <title>Document</title>
</head>
<!-- 网页主体 -->
<body>
    
</body>
</html>