精华内容
下载资源
问答
  • 更改webstorm 新建html文件!+tab生成的模板只有TDK中的T的问题问题描述实现步骤 问题描述 webstorm新建html生成的模板中只有 title 没有description、Keywords 有很多时候我们是需要这两个东西的 下面我就来说一下...

    更改webstorm 新建html文件!+tab生成的模板只有TDK中的T的问题

    问题描述

    webstorm新建html生成的模板中只有 title 没有description、Keywords
    有很多时候我们是需要这两个东西的
    下面我就来说一下怎么修改webstorm !+tab生成的模板吧

    实现步骤

    以下为webstorm 2019.2版本的设置其他版本也是大同小异
    1.打开webstorm。
    2.打开webstorm的设置快捷键为ctrl+alt+s,有些人会出现快捷键冲突问题从而导致快捷键无效或者其他效果(此处说的快捷键冲突不一定是webstorm自身的快捷键,也可能是电脑上的一些其他软件)
    如果快捷键失败的话就按下面这个找
    File >> Settings
    在这里插入图片描述
    3.打开设置后找下面这个路径
    Editor >> Live Templates >> Zen HTML
    这个下面就是webstorm自带的已经帮我们定义好的模板

    在这里插入图片描述
    4.修改!+tab生成的模板代码
    单机!这一项
    图中1的位置为abbreviation为缩写词的意思
    图中2的位置为描述(非必填)
    图中3的位置是模板的代码(我们把description、Keywords加上即可)
    图中4的位置的意思是输入完缩写后点击的tab按键会自动生成图中3中的代码
    我们直接修改图中3位置的代码即可可以参考我的也可自行修改

    <!doctype html>
    <html lang="$ENV_LOCALE$">
    <head>
    <meta charset="$CHARSET$">
                 <meta name="viewport" content="width=$WIDTH$, user-scalable=$SCALABLE$, initial-scale=$INITIAL_SCALE$, maximum-scale=$MAX_SCALE$, minimum-scale=$MIN_SCALE$">
                             <meta http-equiv="X-UA-Compatible" content="ie=$IE$">
                             <meta name="description" content="">
                             <meta name="Keywords" content="">
                 <title>$TITLE$</title>
    </head>
    <body>
      $END$
    </body>
    </html>
    

    在这里插入图片描述
    5.修改完以后点击Apply 再点击OK
    然后就可以开始使用了
    在这里插入图片描述

    另外还可以新建一些别的自定义的模板
    在这里插入图片描述
    同样的道理
    在这里插入图片描述
    在此处需要注意的是下图中的位置
    一定要勾选对应的否则不起效果的
    在这里插入图片描述
    另外此处也要勾选否则同样无效果
    在这里插入图片描述
    其他css、javascript同样道理就不一一演示了。

    展开全文
  • 第一种情况是你的端口号错误。...永远记住一点webstorm这款软件只能打开以文件夹为基础的文件(俗话说:必须有路径),就比如说你就只想单纯打开一个html文件,那么请将这个html文件放在一个文件夹里。这样webstorm..
    1. 第一种情况是你的端口号错误。你可以到设置里面找到调试器(第四个可以展开的按钮里面),找到端口号,把端口号改成8080(默认),再勾选旁边的按钮(可以接受外部链接)。

    2. 你的文件命名方式不对,最好的文件名中不能有不可识别的符号和汉字。

    3. 你的文件在桌面上,没有在文件夹里。可以新建一个文件夹,把文件放在里面。

    永远记住一点webstorm这款软件只能打开以文件夹为基础的文件(俗话说:必须有路径),就比如说你就只想单纯打开一个html文件,那么请将这个html文件放在一个文件夹里。这样webstorm就会自动识别路径,就可以找到文件了。

    展开全文
  • 我们一个项目中会有很多的文件,每个文件中也会有很多的层级关系,有时候新建一个文件的时候,一不下心就会出错,位置出错我们可以移动更换位置,名称命名错误,我们可以重命名,在这里教大家使用webstorm的时候如何...

    在开发的过程中,我们一个项目中会有很多的文件,每个文件中也会有很多的层级关系,有时候新建一个文件的时候,一不下心就会出错,位置出错我们可以移动更换位置,名称命名错误,我们可以重命名,在这里教大家使用webstorm的时候如何重命名文件?

    1、首先打开我们的项目,这里我为了演示如何重命名,新建了一个小项目,如下图所示:

    78ae4277517d95113a3c4fa38015d97b.png

    2、我们双击左侧导航的index.html,打开该文章,然后鼠标点击左侧的index.html,呈现选中状态,如下图所示:

    83e97c28b125882a43f41db8ed1b83a0.png

    3、然后我们找到工具栏,正数第六个,Refactor,点击Refactor下的Rename,如下图所示:

    276b8035b919e7b20efe6126084d7205.png

    4、直接在输入框内填写正确的文件名称即可,我这里修改为book.html,下面两个单选框的意思是所有引用到这个文件的地方都要更改,或注释中也都要更改,如下图所示:

    5adb2be1625322e3cad1eb532298ed96.png

    5、然后我们点击Refactor重构即可,等待重构完成,页面上已经显示更改过来了,如下图所示:

    1dc1658f6ead3499548122146691669f.png

    6、还有一个也是特别简便的方法,我们直接在想要更改的文件上右击,如下图所示:

    ac7edcf4a2b389288780557f2c4c9bf0.png

    7、同样我们选择Refactor 下的Rename,然后再把名字更改成index.html,然后确定,如下图所示:

    d450e045f707109e9f9915b03afc01d9.png

    8、我们再回到页面中来看,如下图所示的那样,名称已经更改过来:

    d0da0371daaf28981ba25a5ef63e21e3.png

    9、本文提到的两种方法大家自己选择,个人习惯是直接在页面中右键更改,当然了适合自己的才是最好的。

    展开全文
  • 今天遇到一个问题,我在桌面上新建了一个 HTML 类型的文件,然后在 WebStorm 上打开该文件,浏览器一直提示 404 Not Found

    一:问题描述

    今天遇到一个问题,我在桌面上新建了一个 HTML 类型的文件,
    在这里插入图片描述
    然后在 WebStorm 上打开该文件,浏览器一直提示 404 Not Found,如下图所示
    在这里插入图片描述
    但是通过 Sublime 打开就不会出现这个情况,然后在网上查了一下造成这种情况的原因,找到了答案

    二:解决方案

    第一步:

    把 HTML 文件拖到任意一个文件夹,或拖到新建的文件夹,这里我在桌面直接新建一个文件夹。如下图所示
    在这里插入图片描述
    请注意,当前文件夹只有一个 html 类型的文件。

    第二步:

    启动 WebStorm,点击 "文件’>>打开文件夹,找到你保存 HTML的文件夹,并选中。

    注意:不是选中 HTML 文件,不是选中 HTML 文件,不是选中 HTML 文件。

    如下图所示
    在这里插入图片描述
    此时你再通过浏览器打开 HTML 文件,就可以正常显示了。

    然后我们再回头看看存放 HTML 的文件夹的状态,如下图所示
    在这里插入图片描述

    三:原因分析

    一句话:WebStorm 这款编辑器只能打开以 文件夹 为基础的文件。

    所以当 HTML 文件直接放在桌面或者不在一个文件夹的时候,此时通过 WebStorm 打开就会出现 404 Not Found 的情况。

    四:其它解决方案

    针对该问题,我自己的是通过上述方案解决了,不过在网上也有其它的解决方案,我没试过,但把它写到这里,希望可以帮到你们。

    备用方案一:
    可能是你的端口号错误,可以到设置里面找到调试器,然后找到端口号,把端口号改成8080,再勾选旁边的按钮(能接受外部链接),截图如下
    在这里插入图片描述
    备用方案二:

    HTML 文件的命名方式不对,最好的文件名中不能有不可识别的符号和汉字。

    解决方案二、解决方案三 仅供参考。


    结束语

    如果这篇博客有幸帮到了您,欢迎点击下方链接,和更多志同道合的伙伴一起交流,一起进步。

    Web开发者俱乐部

    展开全文
  • webstorm怎样新建html页面?HTML页面基本格式介绍 1. webstorm怎样新建html页面? 1.我们首先在自己电脑里面新建一个文件夹,用来存放HTML项目 2.接下来就可以打开我们的webstorm 3.新建项目,...
  • 我们一个项目中会有很多的文件,每个文件中也会有很多的层级关系,有时候新建一个文件的时候,一不下心就会出错,位置出错我们可以移动更换位置,名称命名错误,我们可以重命名,在这里教大家使用webstorm的时候如何...
  • 我在使用webstorm时,发现文件的默认编码是GBK 然后我找到了点击此处可以修改这个文件的编码,但是以后新建文件和项目默认生成的文件还是GBK, 设置项目文件的默认编码可以在 File----Settings-----editer---...
  • Idea(WebStorm)自定义文件代码模板

    千次阅读 2018-01-28 14:46:36
    Idea支持新建文件时自定义文件内容模板。 参考链接: https://www.jetbrains.com/help/idea/creating-and-editing-file-templates.html 比如新建js文件自定义文件说明文档: 模板可以插入很多变量,上述...
  • webstorm支持识别/新建.vue文件

    千次阅读 2018-11-08 21:23:47
    https://www.cnblogs.com/learnings/p/6285998.html
  • Webstorm不能识别名为index.html的...新建其他名字的html文件都能正确识别,改个名字也能识别。试了很多方法,加了"*.ejs"文件后缀也无效。 最后看到这个方法: 把index.html 用“-”去掉就可以了。 ...
  • 在使用WebStorm进行Web开发时,新建HTML文件后,WebStorm会根据默认模板在该HTML文件中填充以下内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>&...
  • 在使用WebStorm进行Web开发时,新建HTML文件后,WebStorm会根据默认模板在该HTML文件中填充以下内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-...
  • webstorm 调试js

    2018-05-16 16:32:00
    打开webstorm新建项目 新建test.html并添加js文件 Edit Configurations--->defaults-->javascript debug-->browser-->选择chrome 运行test.html 参考:https://b...
  • WebStorm初学习

    2018-08-02 17:34:49
    2⃣️站点文件夹右键新建HTML文件,名为“index” 2.Mac下的WebStorm修改Code大小:WebStorm--Preferences--Editor--General--Font--Size 3.WebStorm里面不需要保存。 4.shortcut作为快捷导航名称。 ....
  • 在写一个网页时,用list-style-image属性设置列表图标时,相对路径设置没有问题,在浏览器调试时却没有显示所需效果,样式表加载正常,属性也正常j加载,但无法找到图片文件,始终没找到问题原因。于是试着用...
  • 第一次打开是什么项目都没有,所以需要新建项目: Location为新建项目位置,...建好文件后就新建文件,把你想建的文件放在里面,比如我现在建一个放Css的文件: 接下来就是你想创建其他类型文件(如:.html等):...
  • webStorm 2018 编写第一个html

    千次阅读 2019-03-27 20:08:03
    第一次打开是什么项目都没有,所以需要新建项目: Location为新建项目位置,左侧可以...建好文件后就新建文件,把你想建的文件放在里面,比如我现在建一个放Css的文件: 接下来就是你想创建其他类型文件(...
  • webstorm vscode 常用设置

    2019-06-17 23:09:00
    webstorm常用的设置及操作图解 VS Code 新建vue文件初始化模板 VSCode新建vue文件自定义模板 转载于:https://www.cnblogs.com/lhuser/p/11042788.html
  • Gogs+webStorm

    2021-04-01 13:43:05
    Webstorm上传工程至gogs: gogs上新建仓库 cmd-cd 项目目录 git add README.md(一般工程最外层的任意文件都可) git commit -m “first commit” git remote add origin ...
  • 工程和界面—Webstorm入门指南 Webstorm中的工程

    万次阅读 多人点赞 2016-09-11 23:45:15
    1.新建工程 “Quick Start”界面新建工程: ... 弹出如下界面: ...“Location”指向想要创建的工程目录(如果该...“Project Type”为工程类型,应该理解为工程模版更合适,默认为空项目,Webstorm支持html5、bootstra
  • Webstorm基本操作

    2020-05-26 23:43:22
    webstorm快捷键 1.TAB 自动补全 ...1.是超文本标记语言(HyperText Mark-up Language ),用来设计网页的标记语言,用该语言编写的文件,以 .html或 .htm为后缀,由浏览器解释执行,不区分大小写,建
  • 1.新建工程 “Quick Start”界面新建工程: ...gt; “New Project”。 弹出如下界面: ...“Location”指向想要创建...“Project Type”为工程类型,应该理解为工程模版更合适,默认为空项目,Webstorm支持html5、boots...
  • webstorm和sublime的不同之处

    千次阅读 2018-02-07 10:11:06
     1、可以直接在软件左边的项目下新建html文件。  2、在浏览器打开不用右键-->在浏览器中打开,Webstorm 内置谷歌、IE、火狐、Opera、Safari五大浏览器,直接把鼠标往上移一下,五大浏览器就显示出来了,就可以选择...
  • 新建HTML文件和Less文件 新建Less文件的方法 创建新文件 选择Less File 创建后: 3 . 编写HTML代码和Less代码 使用Less中文网的快速入门中的例子 Less文件: 代码: @base: #f938ab; ...
  • 1)打开WebStorm,直接新建下面样式的HTML文件: <html> <head> <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script> <script src="sketch.js"></script...
  • webstorm搭建node服务器

    2016-10-14 20:29:00
    前言,搭建服务器,必须有node.js环境(吐槽:本来就是用node搭建的(⊙o⊙)…) 下载node.js 网址 ... 先新建项目: 这里选择Node.js ,并改个名字,create即可。...(html文件是在public的...
  • 花了很多时间,真的是弄的自己很懵,趁现在整理一下,方便以后查看...首先是一个工具,给我们写代码的,可以直接新建一个project,然后新建文件html、css、js等文件,然后写代码,然后运行。 运行html、css、js程...

空空如也

空空如也

1 2 3 4
收藏数 72
精华内容 28
热门标签
关键字:

webstorm新建html文件