前端学习中遇到的问题解答集锦

最新推荐文章于 2022-10-24 18:23:34 发布

樱木娜子

最新推荐文章于 2022-10-24 18:23:34 发布

阅读量1.6k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/A335715493/article/details/80575562

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文本编辑器

Sublime Text 3

Sublime Text 快速、轻量而且易于定制。拥有众多快捷键，多重选取功能和巨大的插件扩展系统，你可以创建完美的工作流。

但是，Sublime Text 的更新最近开始变慢，这让一些开发者感到担忧。许多开发者开始转向使用...

Atom

Atom 由 GitHub 提供，进军文本编辑器市场的时间相对较晚，其外观和使用与 Sublime Text 类似。二者均支持多重选取的功能，并且它们共享许多相同的快捷键。同样与 Sublime Text 极为相似， Atom 拥有丰富的包扩展系统，你可以随心所欲地定制你的编辑器。

Atom 和 Sublime Text 都非常受欢迎，你接触到的大多数 Web 开发者大多在使用这两种编辑器之一。

Visual Studio Code

VSCode是微软推出的一款轻量编辑器，采取了和VS相同的UI界面，搭配合适的插件可以优化前端开发的体验。

Emacs

Emacs 官方网站_(英) 或 Aquamacs_(英)（适用于 OS X）

Emacs 是始于 20 世纪 70 年代的开源文本编辑器。与 Vim 一样，它是最流行的 Linux 文本编辑器之一。

通常将 Emacs 描述为操作系统，因为即使是简洁安装，也会存在多个预期在文本编辑器内部不会包括的应用程序，例如新闻阅读程序、多个计算器、大量游戏、文件加密/解密以及以 Emacs Lisp_(英) 编写的插件的包管理器。

所有 Emacs 命令存在于同一命名空间，因此通过使用 C-x C-f （Ctrl - x、Ctrl - f）等一连串击键打开文件来区分命令并不罕见。由于其惊人的可定制性，在编辑器中具有最陡峭的学习曲线。你将十分希望对其进行定制：安装插件、尝试插件、测试冲突、取消安装具有冲突的插件并重复执行操作。

Vi/Vim

Vim 或 Vi IMproved 是 Unix Editor Wars 中的另一款文本编辑器。

只要是可以运行标准 C 语言的地方，就可以运行 Vim，并且通常位于多数 Linux 和包括 Mac OS X 在内的非 Windows 系统的基础安装中。同时还提供相当强大的教程_(英) 来教授使用方法。学后之后便可随时随地进行使用。

对于有经验的学生（其他人，即便你此时不了解也没问题）：当某些命令适用时，Vim 依赖于模式或范围。在命令模式下，用户可以围绕文件或执行命令。例如，在插入模式下，可以编辑文件。而在创建 HTML 文件时（且处于 HTML 模式），可以将 html:5 扩展为空 HTML 文件的样板文件。

我选择使用的是Atom Mac版

极客网中Atom教程 http://wiki.jikexueyuan.com/project/atom/basis.html

遇到的问题：

1.汉化包的使用

file - setting -install -atom-chs-menu(Packages)搜索包之后报错 Uncaught Error: Cannot find module 'cson'

解决方法：包换成simplified-chinses-menu 简体中文语言包

2.browser-plus

不用打开浏览器

3.atom插件介绍

Emmet插件的使用详解（HTML/CSS代码自动补全）

基本语法：

后代：>

缩写： nav>ul>li

2，兄弟：+

缩写： div+p+bq

3，上级：^

（1）缩写： div+div>p>span+em^bq

（2）缩写： div+div>p>span+em^^bq

4，分组：()

（1）缩写： div>(header>ul>li*2>a)+footer>p

（2）缩写： (div>dl>(dt+dd)*3)+footer>p

5，乘法：*

缩写： ul>li*5

6，自增符号：$

（1）缩写： ul>li.item$*5

（2）缩写： h$[title=item$]{Header $}*3

 
       
            < 
            h1  
            title 
            = 
            "item1" 
            >Header 1</ 
            h1 
            > 
           
 
            < 
            h2  
            title 
            = 
            "item2" 
            >Header 2</ 
            h2 
            > 
           
 
            < 
            h3  
            title 
            = 
            "item3" 
            >Header 3</ 
            h3 
            > 
           
 
     

（3）缩写： ul>li.item$$$*5

（4）缩写： ul>li.item$@-*5

（5）缩写： ul>li.item$@3*5

7，ID和类属性

（1）缩写： #header

（2）缩写： .title

（3）缩写： form#search.wide

（4）缩写： p.class1.class2.class3

 
       
            < 
            p  
            class 
            = 
            "class1 class2 class3" 
            ></ 
            p 
            > 
           
 
     

8，自定义属性

（1）缩写： p[title="Hello world"]

 
       
            < 
            p  
            title 
            = 
            "Hello world" 
            ></ 
            p 
            > 
           
 
     

（2）缩写： td[rowspan=2 colspan=3 title]

（3）缩写： [a='value1' b="value2"]

9，文本：{}

（1）缩写： a{Click me}

 
       
            < 
            a  
            href 
            = 
            "" 
            >Click me</ 
            a 
            > 
           
 
     

（2）缩写： p>{Click }+a{here}+{ to continue}

 
       
            < 
            p 
            >Click < 
            a  
            href 
            = 
            "" 
            >here</ 
            a 
            > to continue</ 
            p 
            > 
           
 
     

10，隐式标签

（1）缩写： .class

（2）缩写： em>.class

（3）缩写： ul>.class

（4）缩写： table>.row>.col

三、HTML标签语法

1，所有未知的缩写都会转换成标签

缩写： hangge

2，基本html标签

（1）缩写： !

 
       
            <!DOCTYPE html> 
           
 
            < 
            html  
            lang 
            = 
            "en" 
            > 
           
 
            < 
            head 
            > 
           
 
               
            < 
            meta  
            charset 
            = 
            "UTF-8" 
            > 
           
 
               
            < 
            meta  
            name 
            = 
            "viewport"  
            content 
            = 
            "width=device-width, initial-scale=1.0" 
            > 
           
 
               
            < 
            meta  
            http-equiv 
            = 
            "X-UA-Compatible"  
            content 
            = 
            "ie=edge" 
            > 
           
 
               
            < 
            title 
            >Document</ 
            title 
            > 
           
 
            </ 
            head 
            > 
           
 
            < 
            body 
            > 
           
 
                
           
 
            </ 
            body 
            > 
           
 
            </ 
            html 
            > 
           
 
     

（2）缩写： a

（3）缩写： a:link

1	`<` `a` `href` `=` `"http://"` `></` `a` `>`

（4）缩写： a:mail

（5）缩写： abbr

（6）缩写： acronym

（7）缩写： base

（8）缩写： basefont

 
            < 
            basefont  
            />

（9）缩写： br

（10）缩写： frame

（11）缩写： hr

（12）缩写： bdo

（13）缩写： bdo:r

（14）缩写： bdo:l

（15）缩写： col

（16）缩写： link

 
       
            < 
            link  
            rel 
            = 
            "stylesheet"  
            href 
            = 
            ""  
            /> 
           
 
     

（17）缩写： link:css

 
       
            < 
            link  
            rel 
            = 
            "stylesheet"  
            href 
            = 
            "style.css"  
            /> 
           
 
     

（18）缩写： link:print

 
       
            < 
            link  
            rel 
            = 
            "stylesheet"  
            href 
            = 
            "print.css"  
            media 
            = 
            "print"  
            /> 
           
 
     

（19）缩写： link:favicon

 
       
            < 
            link  
            rel 
            = 
            "shortcut icon"  
            type 
            = 
            "image/x-icon"  
            href 
            = 
            "favicon.ico"  
            /> 
           
 
     

（20）缩写： link:touch

 
       
            < 
            link  
            rel 
            = 
            "apple-touch-icon"  
            href 
            = 
            "favicon.png"  
            /> 
           
 
     

（21）缩写： link:rss

 
       
            < 
            link  
            rel 
            = 
            "alternate"  
            type 
            = 
            "application/rss+xml"  
            title 
            = 
            "RSS"  
            href 
            = 
            "rss.xml"  
            /> 
           
 
     

（22）缩写： link:atom

 
       
            < 
            link  
            rel 
            = 
            "alternate"  
            type 
            = 
            "application/atom+xml"  
            title 
            = 
            "Atom"  
            href 
            = 
            "atom.xml"  
            /> 
           
 
     

（23）缩写： meta

（24）缩写： meta:utf

 
       
            < 
            meta  
            http-equiv 
            = 
            "Content-Type"  
            content 
            = 
            "text/html;charset=UTF-8"  
            /> 
           
 
     

（25）缩写： meta:win

 
       
            < 
            meta  
            http-equiv 
            = 
            "Content-Type"  
            content 
            = 
            "text/html;charset=windows-1251"  
            /> 
           
 
     

（26）缩写： meta:vp

 
       
            < 
            meta  
            name 
            = 
            "viewport"  
            content 
            = 
            "width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"  
            /> 
           
 
     

（27）缩写： meta:compat

 
       
            < 
            meta  
            http-equiv 
            = 
            "X-UA-Compatible"  
            content 
            = 
            "IE=7"  
            /> 
           
 
     

（28）缩写： style

（29）缩写： script

（30）缩写： script:src

（31）缩写： img

（32）缩写： iframe

 
       
            < 
            iframe  
            src 
            = 
            ""  
            frameborder 
            = 
            "0" 
            ></ 
            iframe 
            > 
           
 
     

（33）缩写： embed

（34）缩写： object

（35）缩写： param

（36）缩写： map

（37）缩写： area

（38）缩写： area:d

（39）缩写： area:c

（40）缩写： area:r

（41）缩写： area:p

（42）缩写： form

（43）缩写： form:get

（44）缩写： form:post

（45）缩写： label

（46）缩写： input

（47）缩写： inp

（48）缩写： input:hidden

别名： input[type=hidden name]

（49）缩写： input:h

别名： input:hidden

（50）缩写： input:text, input:t

别名： inp

（50）缩写： input:search

别名： inp[type=search]

（51）缩写： input:email

别名： inp[type=email]

（52）缩写： input:url

别名： inp[type=url]

（53）缩写： input:password

别名： inp[type=password]

（54）缩写： input:p

别名： input:password

（55）缩写： input:datetime

别名： inp[type=datetime]

（56）缩写： input:date

别名： inp[type=date]

（57）缩写： input:datetime-local

别名： inp[type=datetime-local]

 
       
            < 
            input  
            type 
            = 
            "datetime-local"  
            name 
            = 
            ""  
            id 
            = 
            ""  
            /> 
           
 
     

（58）缩写： input:month

别名： inp[type=month]

（59）缩写： input:week

别名： inp[type=week]

（60）缩写： input:time

别名： inp[type=time]

（61）缩写： input:number

别名： inp[type=number]

（62）缩写： input:color

别名： inp[type=color]

（63）缩写： input:checkbox

别名： inp[type=checkbox]

（64）缩写： input:c

别名： input:checkbox

（65）缩写： input:radio

别名： inp[type=radio]

（66）缩写： input:r

别名： input:radio

（67）缩写： input:range

别名： inp[type=range]

（68）缩写： input:file

别名： inp[type=file]

（69）缩写： input:f

别名： input:file

（70）缩写： input:submit

（71）缩写： input:s

别名： input:submit

（72）缩写： input:image

（73）缩写： input:i

别名： input:image

（74）缩写： input:button

（75）缩写： input:b

别名： input:button

（76）缩写： isindex

（77）缩写： input:reset

别名： input:button[type=reset]

（78）缩写： select

（79）缩写： option

（80）缩写： textarea

（81）缩写： menu:context

别名： menu[type=context]>

（82）缩写： menu:c

别名： menu:context

（83）缩写： menu:toolbar

别名： menu[type=toolbar]>

（84）缩写： menu:t

别名： menu:toolbar

（85）缩写： video

（86）缩写： audio

（87）缩写： html:xml

1	`<` `html` `xmlns` `=` `"http://www.w3.org/1999/xhtml"` `></` `html` `>`

（88）缩写： keygen

（89）缩写： command

（90）缩写： bq

别名： blockquote

 
            < 
            blockquote 
            ></ 
            blockquote 
            >

（91）缩写： acr

别名： acronym

（92）缩写： fig

别名： figure

（93）缩写： figc

别名： figcaption

 
            < 
            figcaption 
            ></ 
            figcaption 
            >

（94）缩写： ifr

别名： iframe

 
       
            < 
            iframe  
            src 
            = 
            ""  
            frameborder 
            = 
            "0" 
            ></ 
            iframe 
            > 
           
 
     

（95）缩写： emb

别名： embed

（96）缩写： obj

别名： object

（97）缩写： src

别名： source

（98）缩写： cap

别名： caption

 
            < 
            caption 
            ></ 
            caption 
            >

（99）缩写： colg

别名： colgroup

 
            < 
            colgroup 
            ></ 
            colgroup 
            >

（100）缩写： fst, fset

别名： fieldset

 
            < 
            fieldset 
            ></ 
            fieldset 
            >

（101）缩写： btn

别名： button

（102）缩写： btn:b

别名：button[type=button]

（103）缩写： btn:r

别名：button[type=reset]

（104）缩写： btn:s

别名：button[type=submit]

四、CSS语法

更多的语法缩写（比如 CSS、 XSL），可以查看官方的API文档： http://docs.emmet.io/cheat-sheet/

樱木娜子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习中遇到的问题解答集锦

文本编辑器Sublime Text 3Sublime Text 快速、轻量而且易于定制。拥有众多快捷键，多重选取功能和巨大的插件扩展系统，你可以创建完美的工作流。但是，Sublime Text 的更新最近开始变慢，这让一些开发者感到担忧。许多开发者开始转向使用...AtomAtom 由 GitHub 提供，进军文本编辑器市场的时间相对较晚，其外观和使用与 Sublime Text 类似。二者均支...
复制链接

扫一扫