Web前端开发简单讲解完整版

1、Yan.ju,1,2,1,开发工具,Html,Css,javaScript,2,三要素,Notepad,Sublime Text,2,2,2020/3/25,1,Sublime Text 2,前言,作为一个前端，有一款好的开发利器是必不可少的,editplus,notepad,都是不错的工具，体积轻巧，启动迅速,dw,太浮肿了）。最近，又有,一款新的,编辑器诞生，席卷前端界，惹得无数喜爱，不少前端,er,纷纷抛弃用了数年的“伙,伴”，投入了她的怀抱,Sublime,Text2,Sublime,Text2,是一款跨平台的编辑,器，再也不用为换平台而找不到合适的、熟悉的编辑器担忧了。目前，还是,b

2、eta,版中，不过功能已经很强大了，更新也很快，目,前最新是,bulid2181,ST2,不是,免费的，但可以永久免费使用，只是在保存的时候，偶尔会弹出要你购买注册的,对话框，仅此而已,3,2020/3/25,官网地址,http:/,功能,Sublime Text2,是一款具有代码高亮、语法提示、自动完成且反应快速,的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制,界面,从上到下：标题栏、菜单栏,tab,控制栏、编辑区、状态栏,从做到右：分别是边栏、编辑区,MiniMap,菜单栏,各种命令，各种设置,Tab,栏,很多编辑器都有的，如果文件编辑过未保存，右上角有个小圆点提示保存，如果未保存关

3、,了也不用害怕,ST2,很贴心，会帮我们自动保存,编辑区,这是我们主要的工作区域,ST2,支持代码自动缩进，代码折叠功能,介绍几个常见的功能,自动完成：自动完成的快捷键是,Tab,如果在,html,文件中，输入,cl,按下,tab,即可自动补全为,class,多列编辑：按住,ctrl,点击鼠标，会出现多个闪烁的光标，这时可同时修改多处,4,2020/3/25,5,2020/3/25,或者按住鼠标中键拖拽,代码注释功能,ctrl,ctrl+shift,分别未行注,释和块注释，再按一下就能去掉注释,ST2,能,够自动识别是,html,css,还是,js,文件，给出不同,类型的注释,行操作,ctrl

4、+alt,ctrl+alt,向上或者向下交,换两行,ctrl+enter,光标后插入空行,ctrl+d,选择相似，可以参考后面的快捷键列表,右键功能,6,2020/3/25,前,3,个，大家都知道，第,4,个,show unsaved changes,显示未保存的修改，红色减,号表示删去的内容，绿色加号表示新增的内容,7,2020/3/25,Open Containing Folder，打开包含此文件的文件夹，这个很方便找到相关的文件,Copy File Path,复制文件路径，方便我们复制路径到浏览器中查看,Auto-Format Tags on Selection,格式化选中的文档，方便我

5、们更清晰的查看代码结构,虽然,ST2,有自动缩进功能，但是当我们粘贴进一段没有格式化过的代码，就需要这个能了,这个功能要安装了,Tag,这个插件才会出现,人性化设计,ST2,虽然还是,beta,版中，但是有很多设计细节还是值得称赞的，比如点击一,个标签或者括弧，会在起始处显示下划点线，方便看清代码结果，每一层嵌套代码间都有,竖线，起到视觉辅助的作用,8,2020/3/25,9,2020/3/25,Sublime text2,在,bulid2181,后，对【设置】进行了合并，现在,只有两个选项，分别是系统设置和快捷键设置,一般我们修改设置的话，最好复制出来在,user,里修改，以免以后,升级,d

6、efault,被覆盖掉,Settings,在此文件里，可以修改很多东西，比如主题，字体,字号，是否显示行号、自动缩进、自动完成。很多都默认选中了,我另外修改了两个地方,98,行显示缩略图边框,101,行光标当前行高亮显示,有助于我们快速找到光标位置,Key Bindings,快捷键设置,ST2,的快捷键很多，改的时候注意不要覆盖了。因为快捷,键众多，所以有下面这种组合快捷键，先按下,ctrl+k,松开,k,再按下,j,就可以展开全部,代码了,三、设置,10,2020/3/25,Ctrl+L,选择整行（按住,继续选择下行,Ctrl+KK,从光标处删除至行尾,Ctrl+Shift+K,删除整行,C

7、trl+Shift+D,复制光标所在整行，插入在该行之前,Ctrl+J,合并行（已选择需要合并的多行时,Ctrl+KU,改为大写,Ctrl+KL,改为小写,Ctrl+D,选词,按住,继续选择下个相同的字符串,Ctrl+M,光标移动至括号内开始或结束的位置,Ctrl+Shift+M,选择括号内的内容（按住,继续选择父括号,Ctrl,注释整行（如已选择内容，同,Ctrl+Shift,/”效果,Ctrl+Shift,注释已选择内容,Ctrl+Z,撤销,Ctrl+Y,恢复撤销,Ctrl+M,光标跳至对应的括号,扩展主要快捷键列表,11,2020/3/25,Alt,闭合当前标签,Ctrl+Shift+A

8、,选择光标位置父标签对儿,Ctrl+Shift,折叠代码,Ctrl+Shift,展开代码,Ctrl+KT,折叠属性,Ctrl+K0,展开所有,Ctrl+U,软撤销,Ctrl+T,词互换,Tab,缩进,自动完成,Shift+Tab,去除缩进,Ctrl+Shift,与上行互换,Ctrl+Shift,与下行互换,Ctrl+K,Backspace,从光标处删除至行首,Ctrl+Enter,光标后插入行,Ctrl+Shift+Enter,光标前插入行,Ctrl+F2,设置书签,F2,下一个书签,Shift+F2,上一个书签,扩展主要快捷键列表,12,2020/3/25,ST2,是支持插件扩展的，首先，我

9、们需要安装,Package Contro,ctrl,调出命令行工具，输入,import,urllib2,os;pf=Package Control.sublime,package;ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp,else,None;open(os.path.join(ipp,pf),wb).write(urllib2.urlopen(http:/,replace( , ).read(,回车即可,点击PreferencesPackage Control，显示以下弹窗,

10、四、扩展,n Disable Package,禁用插件,n enable Package,启用插件,n Install Package,安装插件,n List Package,查看已安装插件列表,n Remove Package,移除插件,n Upgrade Package,升级插件,13,2020/3/25,插件推荐,14,2020/3/25,ZenCoding,前端必备，快速开发,HTML/CSS,输入,div.wrapperdiv.header+div.main+div.footer,按下,Tab,立刻变成,或者按下,ctrl+alt+enter,激发,zencoding,控制台，可看到

11、整,个动态的过程,15,2020/3/25,JsFormat,格式化,js,代码，这个插件很有,用，我们有时在网上,看到某些效果，想查,看是怎么实现的，但,是代码被压缩过，很,难阅读，不用怕，用,ST2,打开，按下,ctrl+alt+5,这是我,设置的快捷键），即,可让代码还原,16,2020/3/25,Tag,格式化标签，让乱七八糟的代码,瞬间整齐清晰,BracketHighlighter,括弧高亮显示,Clipboard History,剪切板历史，可,以保存多个复制信息，按下,ctrl+alt+v,可以选择历史剪切板,17,2020/3/25,Goto-CSS-Declaration,跳

12、转到,css,文件该,class,的声明处，方便修,改查看，如图下所示，注意对应的,css,文件要同时打开才行,GotoRecent,打开最近的文件，系统有这个功能,但只能看最近,8,个，有点不爽，按,ctrl+e,选择,即可,SCSS,支持,scss,的语法高亮，里面附带了好多,CSS Snippet,无论现用或者改造成，都可节省,不少时间,还有很多插件,jquery,语法提示,jsHint,等等,18,2020/3/25,总而言之,Sublime Text2,是一款不错的代码编,写工具，有好看的,ui,人性化的细节设计，全面的功,能和扩展机制，如果你还没用过，请试一下，不会让,你失望的。如

13、果说有什么,缺点的话,ST2,目前对,ANSI,GBK,的汉字显示不正常，（使用,utf8,编码就没问题,package control,里有一个,gbk,插件,五、结语,19,2020/3/25,Html,即超文本标记语言或超文本链接标示语言。结构包括,头部,head,主体,body,两大部分，其中头部描,述浏览器所需的信息，而主体则包含所要说明的具体,内容,Css,层叠样式表，是一组格式设置规则，用于控制,web,页,面的外观。通过使用,css,样式设置页面的格式，可将页,面的内容与表现形式分离，使,html,文档代码更加简练,缩短浏览器加载时间,20,2020/3/25,Html,格式,

14、script type=ext/javascript src=js/jquery,1.10.2.min.js,21,2020/3/25,Html,语法规则,元素必须被正确地嵌套,元素必须被关闭（如,非空标签必须使,用结束标签,br,元素必须小写（标签名和属性对大小写敏感,属性值必须加引号,table,width=“100%”）把所有,和,特殊符号,用编码表示，如,用,gt,表示,用,lt,表示,22,2020/3/25,浏览器兼容问题,IETester:http:/www.my,,需要已上线,https:/,us/index.html,1,测试地址,

15、23,2020/3/25,2,css,hack,火狐和,IE,能识别,important,div,background:blue;/*firefox,蓝色,background:green,important;/*IE7,绿色,_ background:orange;/*IE6,橘色,background:black0;/*IE8,黑色,background:red90;/*IE9,红色,body:nth-of-type(1) background:blue;/*Chrome,Safari,蓝色,浏览器兼容问题,24,2020/3/25,25,2020/3/25,meta http,equiv=“x,ua,compatible,content,ie,7” / 使,ie8,ie9,使用,ie7,模式显,示,除,IE,外都可识别,endif,所有的,IE,可识别,endif,-if lt,IE 6 IE6,和,IE6