#### 1.编辑器（sublimetext） ``` 1.代码高亮 2.错误提示 3.格式化 4.自动完成 ..... 下载网址：http://www.sublimetext.com/ 新建的HTML文件扩展名：必须是 .html 绝对不要使用 WPS word 文本来写代码，属于副文本，有隐藏的字符，不能在浏览器运行 不建议使用记事本编写代码，可以运行但，功能太弱 IDE ： 集成开发环境 工具：Xcode、 Visual STUDIO 、WebStorm. ``` #### 2.第一个html文件 [sublimetext 操作指南](https://www.cnblogs.com/figure9/p/sublime-text-complete-guide.html) [sublimetext 快速创建](https://blog.csdn.net/txl199106/article/details/37071995) [Sublime Text 使用手册](https://www.w3cschool.cn/sublimetext/) #### 3.浏览器 浏览器五花八门，有人太短，我只是用谷歌浏览器，好用的调试工具，迭代快，积极拥抱新技术，一次时间体会技术带来的快感； 谷歌浏览器 + sublimetext 编辑器，前端开发的完整开发环境 #### 4.常用浏览器介绍 ##### 浏览器介绍 ``` 不同于其他语言的开发，前端开发并不需要一个专门的编译器来编译自己的代码，你只需要将你的网页在浏览器上打开， 浏览器就可以自动编译你的代码了。这确实是一件十分酷的事，因为这意味着你无需额外安装任何软件，只要在编辑器 中写下你的代码并保存，然后双击你的 html 文件就可以自动启用默认浏览器打开你的网页。 虽然所有的浏览器基本上都能编译你的网页，但不同的浏览器能够兼容的 HTML / CSS / JavaScript 特性也不尽相同， 对网页的渲染方式也有一些小差异。这意味着在开发过程中，我们需要在不同浏览器中对网页的兼容性进行测试。 当然，现在我们暂时不需要做这些工作，这里我们只是简单介绍下浏览器，让你有个大概的了解。 ``` ##### Chrome ``` 目前全球占比最大的浏览器。支持全平台，不仅界面简洁，插件丰富， 还提供了强大的开发者工具让开发效率得到巨大的提高。 你可以从Chrome官网下载，若无法访问官网，可使用 腾讯电脑管家 或者其他软件管理工具下载。 如果你的默认浏览器还不是Chrome，可以参考：怎样把谷歌浏览器设置为默认浏览器。 注：如果你还没有安装或设置为默认，那么赶紧搞起吧，这样就可以更好的体验我们后面的课程了。 ``` ##### IE / Edge ``` Windows 系统默认的浏览器，有 IE6-11，总共6个版本（尤其是 6-8 这三个版本，因为过于古老所 以功能方面非常落后，幸好正在慢慢退出历史舞台），不过从 Windows 10 系统起就换成 Edge 版本了。 从前的很长一段时间 IE 浏览器都处在绝对的领先地位，后来由于新技术的不断发展而 IE 浏览器版本迭代太慢， 所以慢慢就被抛弃了。 ``` ##### Firefox ``` 经典的浏览器，也是众多开发者的选择。支持全平台，有丰富而强大的插件，也提供了很不错的开发者工具供开发者们使用。 还有一个非常好用的开发文档：Mozilla Developer Network（简称 MDN）（后面的课程会经常用到这个开发文档） 同样你可以从官网下载，或使用其他软件管理工具下载。 虽然这款浏览器也比较好用，但是一直处于不温不火的状态，以前是 IE 压制，现在是 Chrome 天下，所以它的地位非常尴尬， 但是这并不影响它也是一款非常优秀的浏览器。 其他浏览器 其他浏览器包括 Safari、QQ 浏览器、360浏览器、搜狗浏览器等。 首先 Safari 是 macOS 或 iOS 的默认浏览器，并不支持其他平台，所以并不推荐为前端开发首先，而且其跟 Chrome 都是基于 Webkit 内核的，所以有很多相似点。 而国产的一些浏览器一般都是套了个壳的双核浏览器（浏览器内核介绍），如 QQ 浏览器，360浏览器、搜狗浏览器， 猎豹浏览器等，一般只用来测试兼容性（因为你的用户在用这些浏览器）。 ``` #### 5.路径指南 ##### 认识路径 ``` 首先，你以前肯定接触过路径，如你电脑中的某个文件 E:\娱乐\音乐\蓝莲花.mp3，或者你在网上看到的某个图片 https://8.url.cn/edu/download/images/s-3-bg.86430f50.jpg，这些都是路径。 而我们在前面学习的<a>元素和<img>元素，说到的链接地址（href属性）和图片地址（src属性）， 这两个属性的值也是路径，如下： <a href="http://imweb.io" target="_blank"> <img src="imweb-logo.png" alt="IMWeb 学院"> </a> ``` ##### 路径介绍 ``` 简单来说，路径就是指向资源的存放位置，资源可以是各种文件，图片，视频等。这跟实际生活中我们 经常以地址来描述一个位置一样。 ``` ##### 路径分为绝对路径和相对路径。 ``` 绝对路径：以站点根目录为参考基础的路径。 相对路径：由文件本身所在的路径引起的跟其它文件（或文件夹）的路径关系。 以我们现实生活中地址为例来说，如果我们要描述腾讯大厦的位置就可以说“中国广东省深圳市南山区 高新科技园中区一路腾讯大厦”，也可以说万利达大厦旁边的大厦。前者就是绝对地址，后者就是一个相对地址。 现在如果要在img.html文件中引入一个图片（img-style.png）和一个样式文件（style.css）： 如果以相对路径来引入的话，我们可以写成： 图片：../../img/img-style.png 样式：style.css或./style.css ``` ##### 在使用相对路径时，我们用符号“./”来表示当前目录，用符号“../”来表示当前目录的父目录。 ``` 现在我们解释下上面的相对路径： img.html在exercises目录，那么它的父目录就是p2，父目录的父目录就是Front-end目录， 于是先通过../../两个父目录找到Front-end目录，而img-style.png在img目录，img目录在Front-end目录中， 于是img-style.png相对于img.html的相对路径就是../../img/img-style.png 而style.css和img.html在同一个目录，所以可以直接使用style.css或./style.css来表示 如果以绝对路径来引入的话，我们可以写成： 图片：/img/img-style.png 样式：/p2/exercises/style.css 在使用绝对路径时，我们使用"/" 代表根目录，Front-end站点目录内部所有文件都可以使用“/”表示根目录Front-end。 但是如果是其他站点要访问该目录时，则需要加上我们的域名地址，以图片为例， 其绝对地址为：http://coding.imweb.io/img/img-style.png。 如果以本地文件与网络文件为区分的话，我们的路径还可以分为本地路径及网络路径。 如第一个本地路径，你电脑里面的文件我是打开不了，我电脑里面的文件同样你也打开不了，所以如果我们要互相 都可以访问的话，那就只好上传到网上了，这样大家都可以访问。 注：本地路径方面，如在磁盘里面访问，Windows 约定使用反斜线 (\) 作为路径中的分隔符，如"E:\娱乐\音乐\蓝莲花.mp3"； 而UNIX系统使用正斜线（/），如“/ users / marvin / music /蓝莲花.mp3”。 ```