分类 标签 存档 订阅 搜索

新手学习 HTML(一):开始上手前先了解适合的 IDE

364 浏览1 评论

Hello

我本人并不是做前端开发的程序员,做的工作跟编程几乎没有任何联系 .就是看到很多网站做得那么漂亮,出于好奇边想了解一下网站是怎么做出来的,于是便开始了解网站设计的前端知识。我目前依旧是一边自己了解前端知识一边分享一下我学习中的心得与问题。

工具——软件(HTML语言编辑器)

为了练习HTML我下载了很多个软件试用,也就是网上说的各类编辑软件——IDE(集成开发环境,Integrated Development Environment )。我用过Notepad++、Sublime 3、Webstorm、记事本、Dreamweaver等,目前我电脑里除了自带的记事本外一直保留Notepad++和Webstorm,Notepad++喜欢它的鼠标右键进行文件编辑但我不怎么用这个软件;主要用的就是Webstorm来对HTML进行编辑;sublime 3其实也不错,看个人喜好了。

用Webstorm主要看中的是它属于JetBrains旗下的产品,JetBrains的软件就好比Adobe出品的一样——都是精品,你在某宝上花点钱就能买到一年期的密匙,我不建议网上找破解版,都不太靠谱。另外,我觉得Webstorm有个地方不错,那就是当你编写完后会在右边自动出现几个浏览器,你选择你安装好的浏览器(我的是chrome)它就直接呈现你编辑的效果了。
Webstorm

此外,Webstorm还有HTML的速写插件——EmmetEmmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,而且作为一款插件能够大部分的代码编辑器,文章后面列出了支持的代码编辑器类型。
emmet in webstorm
我举一个简单的例子,正常情况下当你用Webstorm开始编写HTML的时候你得一个个的敲字母和符号,emmet则通过敲击一个或几个字母按下Tab键后直接出现你需要的大量的代码,例如:我们写HTML开头部分会是这样:

<!DOCTYPE html> 
<html lang="en">
<head>
<meta charset="UTF-8"> 
<title>HTML练习</title> 
</head> 
<body>
</html>

你得一个个的敲击字母和符号,而利用emmet则快速生成,请看下图,我直接在编辑器上打了一个符号“!”后按一下Tab键就自动生成了HTML的头部语言了,或者键入“html:5”按Tab也可以实现:
emmet
了解更多的emmet快捷键的使用可以网上搜,一大堆。不过前期初学者,就像我似的,不建议使用它,多打打代码记得牢固些,万一有一天遇到某个IDE不带emmet插件你还可以自己来完成!

评论  
1 评论
dublinlee • 2019-10-25
回复 删除

相信积累后必然会有收获 😄

推荐阅读