1.6 浏览器(browser)

浏览器本质上是一个网页文档阅读器

HTML 文档

网页 本质上就是 HTML 文档,和.doc等其他文档一样,只是文档格式不同。 .doc文档需要用微软Word打开,而网页要用浏览器打开。 浏览器即可以打开离线保存在你的计算机上的HTML页面,也可以在线向服务器发送请求获取网页文档并显示。 HTML文档使用跨平台的文本格式,带有.html.htm文件后缀。

如果你的系统文件后缀默认是隐藏的,那么请修改系统选项设置使得文件后缀可见。

浏览器和Word一样都是需要安装和升级的本地应用程序,用来打开(解析并渲染)特定格式的文档,不同的是浏览器只能阅读网页不能创建或编辑,而Word既可以阅读doc文档也可以编辑。 如果要创建和编辑HTML文档,则需要使用文本编辑器。文档编辑器打开的是HTML源码。

HTML 源码

HTML代码看起来是下面这样:

<p>Hello World</p>

这个代码是用文本编辑器写的。你可以看到标签符号 <p> 以及 </p> 用来表示这是一段 文本(paragraph)

当用浏览器打开这个文档时,这些标签符号将不会被显示而是会被解释

Hello World

当浏览器读取到标签 <p></p> 的时候,由于浏览器内置实现了HTML技术标准,所以能正确理解该标签的含义,从而把Hello World 解释成一段 文本并显示。

总之,HTML文档可以通过两种方式打开:

  • 文档编辑器,可以用来 编辑 源代码;
  • 浏览器,可以用来 解释 源代码并显示解释后的网页内容。

常用浏览器

每个电脑和手机都自带有一个默认的浏览器。

最常用的浏览器包括:

  • Chrome Chrome
  • Firefox Firefox
  • Internet Explorer Internet Explorer
  • Opera Opera
  • Safari Safari

当然还包括一些衍生版本,如国内基于Chrome或IE内核的360/百度/QQ浏览器等。我们强烈推荐使用Chrome,对HTML5标准支持最好,性能最佳且能调试移动网页应用。 IE系列是支持新标准最滞后的,尤其是IE9之前的版本,很多CSS3的特性均不支持。除非特殊说明,本书用例对浏览器的一般性要求是Chrome最佳,FF和IE9+。 另外需要说明的是,这些浏览器都有移动版本,移动版本是对标准版本的简化,所以部分特性并不支持,针对移动版本的开发,需要在设备上做兼容性测试。

常用开发工具

最常用的Web开发工具包括:

  • Notepad++ Notepad++
  • Sublime Text Sublime Text
  • WebStorm JetBrains公司的WebStorm
  • DreamWeaver Adobe公司的DreamWeaver

NotePad++和Sublime Text都是开源免费跨平台的轻量级文本编辑器,
WebStorm和Dreaweaver都是需要商业授权的IDE(集成开发环境),WebStorm具有很好的JS智能语法提示功能。
Dreamweaver是所见即所得傻瓜式开发工具。
当然熟悉后台的工程师也可以使用类似NetBeans、Eclipse(或Apatan Studio)这样的IDE来统一管理编辑HTML文档以及和后台程序(PHP/JAVA/RUBY)集成调试,这里不做介绍。

从知识学习的角度来讲,我们推荐使用简单的文本编辑器(如Sublime Text 2或3),不推荐傻瓜式IDE。

此外对于一些简单的HTML代码测试和实验,可以使用我们的在线编辑器,本教程里很多用例都将结合使用在线编辑器来演示和讲解。

Sublime Text有很好的插件机制,可以通过安装插件来扩展编辑器的功能,比如常用的Emmet插件(下载后放到ST的Packages目录下,然后重启即可生效), 让开发者用类似样式选择器的简写代码来快速生成完整的代码。比如输入html:5然后按tab键,将自动生成一个html5页面模板,提高了编码效率,减少重复劳动。我们强烈建议安装该插件,详细的安装方法和使用说明请参考如下链接: Sublime Text Emmet插件使用和配置