Notepad++ 编写html代码快捷键切换到浏览器查看

古城微笑少年丶 2023-10-03 23:56 7阅读 0赞

## 一、设置Notepad++ 快速启动浏览器并且运行html ##

### 1.找到Notepad++的安装路径，找到Notepad++ 的shortcuts.xml文件。 ###

![95c500c6a7fe1c4a5d84861c87832363.png][]

### 2.如图所示，用记事本打开【千万不要用Notepad++打开】。打开之后可以看到里面的代码。以启动连接 chrome浏览器为例，选择对应的chrome 代码并且复制，可以关闭文件。这是配置文件不要修改。 ###

![23ea62a7a763fe71029ad4319117e1a6.png][]

![ca0faaac469ac0bcc4280c2a469e1202.png][]

### 3.打开Notepad++ → 运行 → 将复制的代码【chrome"$(FULL\_CURRENT\_PATH)"】 修改成 ###

【chrome "$(FULL\_CURRENT\_PATH)"】("改成")并且输入。点击 "保存"，进入下一步。

注：若要启动连接IE浏览器，则将

【iexplore "$(FULL\_CURRENT\_PATH)"】修改成【iexplore "$(FULL\_CURRENT\_PATH)"】("改成")

![ff014f842314fabbccf9ba30fa622e7b.png][]

### 4.保存启动运行chrome浏览器的设置。看图设置快捷键，看自己喜好，如何设置均可。 ###

![32238b23e8cd132bf66df1fbea531991.png][]

### 5.打开Notepad++，新建一个后缀名为.html的文件，将下述代码写入到新建的html文件中，并保存该文件 ###

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Hello world</title>
    </head>
    <body>
    
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    
    </body>
    </html>

### 6.快捷键 或者 运行 → 用浏览器打开html文件 ###

![a2eeb2c7aefa104e4d2c0c9b184a683e.png][]

![f60de9c3694e15b9454d9c1fd375bdbd.png][]

## 二、设置Notepad++ 关于html的代码提示、辅助 ##

点击"设置"→"首选项"→"自动完成"→进入右边设置。

![51ae1e350c89067689092ea94f5ae973.png][]

[95c500c6a7fe1c4a5d84861c87832363.png]: https://img-blog.csdnimg.cn/img_convert/95c500c6a7fe1c4a5d84861c87832363.png
[23ea62a7a763fe71029ad4319117e1a6.png]: https://img-blog.csdnimg.cn/img_convert/23ea62a7a763fe71029ad4319117e1a6.png
[ca0faaac469ac0bcc4280c2a469e1202.png]: https://img-blog.csdnimg.cn/img_convert/ca0faaac469ac0bcc4280c2a469e1202.png
[ff014f842314fabbccf9ba30fa622e7b.png]: https://img-blog.csdnimg.cn/img_convert/ff014f842314fabbccf9ba30fa622e7b.png
[32238b23e8cd132bf66df1fbea531991.png]: https://img-blog.csdnimg.cn/img_convert/32238b23e8cd132bf66df1fbea531991.png
[a2eeb2c7aefa104e4d2c0c9b184a683e.png]: https://img-blog.csdnimg.cn/img_convert/a2eeb2c7aefa104e4d2c0c9b184a683e.png
[f60de9c3694e15b9454d9c1fd375bdbd.png]: https://img-blog.csdnimg.cn/img_convert/f60de9c3694e15b9454d9c1fd375bdbd.png
[51ae1e350c89067689092ea94f5ae973.png]: https://img-blog.csdnimg.cn/img_convert/51ae1e350c89067689092ea94f5ae973.png