第 2 章 开始第一个项目

第 2 章 开始第一个项目

新葡京娱乐场:此次云南整顿旅游市场针对的是行业积弊,但诸多痛点、难点在市场之外。

访问网站时,浏览器与服务器之间会进行对话——所谓的服务器其实就是互联网上的另一台电脑。

浏览器:“你好!能给我cat-videos.html文件的内容吗?”

服务器:“当然,让我找找看……找到啦!”

浏览器:“它告诉我还需要另外一个叫styles.css的文件。”

服务器:“好,我再找找看……找到啦!”

浏览器:“好吧,这个文件又告诉我还需要一个文件,它叫animated-background.gif。”

服务器:“没问题,我再找找啊……找到啦!”

对话在一段时间内持续进行,有时会持续数千毫秒(如图2-1所示)。

{%}

图2-1 浏览器发出请求,服务器响应

浏览器的工作是向服务器发送请求,解释从服务器收到的HTML、CSS和JavaScript,再将结果呈现给用户。一个网站的用户体验与HTML、CSS和JavaScript都有莫大的关系。假若将网站比作生物,HTML就是骨骼与器官(结构),CSS是皮肤(可视层),而JavaScript则是其个性(行为举止)。

本章将使用基本的HTML搭建第一个项目Ottergram。下一章开始使用CSS,第4章则用其进一步提升体验。到第6章,再加入JavaScript。

2.1 搭建Ottergram

上一章为本书所有项目新建了目录,同时还给Ottergram项目新建了一个目录。启动Atom编辑器,点击File → Open(在Windows 上是File → Open Folder)打开ottergram文件夹。在对话框中,找到front-end-dev-book文件夹并选择ottergram。点击Open,告诉Atom使用该文件夹(如图2-2所示)。

{%}

图2-2 在Atom中打开项目文件夹

在Atom左侧面板中可以看到ottergram文件夹,这块面板用于在项目文件和文件夹之间切换。

接着,通过Atom在ottergram文件夹下新建一些文件和文件夹。按住Control键,右击左侧面板的ottergram,在弹出菜单中点击New File选项。然后会弹出输入新文件名的文本框,输入index.html并敲下回车键(如图2-3所示)。

{%}

图2-3 在Atom中新建文件

用Atom新建文件夹的过程也是一样。再次按住Control键,右击左侧面板的ottergram,这次在弹出菜单中点击New Folder选项,然后在弹框中输入stylesheets(如图2-4所示)。

{%}

图2-4 在Atom中新建文件夹

最后,在stylesheets文件夹中新建名为styles.css的文件:按住Control键,右击左侧面板中的stylesheets并选择New File,弹框中会自动填充stylesheets/,然后输入styles.css并敲下回车键(如图2-5所示)。

{%}

图2-5 在Atom中新建CSS文件

完成上述步骤之后,项目文件夹应该如图2-6所示。

图2-6 Ottergram项目初始结构

如何组织、命名文件和文件夹并无定则,不过Ottergram(和本书中其他项目一样)遵循众多前端开发者约定俗成的,在index.html中存放HTML代码。将HTML主文件命名为index.html的习惯可以追溯到Web发展早期,这项约定延续至今。

stylesheets文件夹正如其名,可以存放一个或多个Ottergram项目的样式信息(即Cascading Style Sheet,CSS,层叠样式表)文件。有时,开发者会根据文件在页面/站点中适用的部分来为其命名,如header.css、blog.css等。Ottergram是一个简单项目,只需要一个CSS文件,将其命名为styles.css以表明其全局的角色。

2.1.1 开始写HTML

是时候动笔写代码了。在Atom中打开index.html,添加一些基本的HTML。

首先输入html,Atom会给出自动补全提示,如图2-7所示。(若没有提示,请检查是否已按照第1章的指导安装了emmet插件。)

图2-7 Atom的自动补全选项

按下回车键,Atom会给出HTML元素基本框架(如图2-8所示)。

图2-8 自动补全功能创建的HTML

现在,光标在文档标题的起始标签<title>和闭合标签</title>之间。输入ottergram,给项目取一个名字;然后将光标移到<body>标签和</body>标签中间的空行,输入header并按下回车键,Atom会将header转换为<header>标签和</header>标签,中间有一行空行(如图2-9所示)。

{%}

图2-9 自动补全功能创建的header标签

接下来,输入h1并按下回车键——它同样会被转换成标签,但这次没有空行。再次输入ottergram,这是将显示在网页中的标题。

这样一来,文件应如下所示:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ottergram</title>
  </head>
  <body>
    <header>
      <h1>ottergram</h1>
    </header>
  </body>
</html>

Atom和emmet帮我们节省了不少打字的时间,生成了结构良好的HTML代码。

来看看代码。第一行的<!doctype html>定义了doctype(文档类型),告诉浏览器当前文档是用哪个版本的HTML编写的。doctype不同,浏览器渲染/绘制的页面可能也略有不同。在这里,doctype的意思是HTML5。

更早的HTML版本的doctype通常又长又复杂,不便于记忆,比如下面这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.wking-china.com/xpjylc/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这样一来,每次新建文档都得查一下doctype。

HTML5中的doctype变短了,看起来也更舒服。本书中的项目将全部使用这种doctype,你的项目也应该使用它。

doctype之后是包含headbody的一些基本HTML标记。

head中包含文档信息,以及浏览器如何处理文档的相关信息,比如说文档标题、页面使用的CSS/JavaScript文件、文档上次修改的时间等都包括在head中。

head中的<meta>标签为浏览器提供文档自身信息,如文档作者姓名、搜索引擎关键词等。Ottergram项目中的<meta>标签<meta charset="utf-8">指定文档由包含所有Unicode字符的UTF-8字符集进行编码。请在文档中使用该标签,以便多数浏览器能正确地解释代码,特别是在想获得更多国际流量的情况下。

body中包含所有代表页面内容的HTML代码:页面中出现的所有图片、链接、文本、按钮、视频等。

多数标签中还包含其他内容。看看刚加入的h1标题,其结构如图2-10 所示。

图2-10 简单HTML标签结构示意

HTML指的是“超文本标记语言”(Hypertext Markup Language)。标签就是用来“标记”内容的,并且还标明其用途(如标题、列表项、链接等)。

一组标签中的内容同样可以包含其他HTML。注意看,在上面的代码中,<header>包裹着<h1>标签。(还有<body>中包裹着<header>!

可供选择的标签有很多,超过140个。可以通过MDN的HTML element参考文档查看,地址是developer.mozilla.org/en-US/docs/Web/HTML/Element。参考文档按照用途(如文本内容、内容分节、多媒体等)对元素进行分组,每一种元素都附有简介。

2.1.2 链接到样式表

第3章将在样式表文件styles.css中编写样式规则。不过,还记得本章开头浏览器与服务器之间的对话吗?只有当浏览器被告知文件存在时,它才会向服务器请求该文件。所以你需要链接样式表,告诉浏览器去请求它。更新index.html中的head部分,加入styles.css文件的链接。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ottergram</title>
    <link rel="stylesheet" href="stylesheets/styles.css">
  </head>
  <body>
...

通过<link>标签,可以给HTML文档附加外部样式表。它有两个属性,向浏览器提供更多关于该标签用途的信息(如图2-11所示)。(HTML属性的顺序不重要。)

{%}

图2-11 带属性的标签结构

rel(即relationship)属性设置为"stylesheet",让浏览器知道链接的文档提供的是样式信息。href属性告诉浏览器向服务器请求stylesheets文件夹下的styles.css文件。注意这里的文件路径是相对于当前文档的。

往后看之前,记得先保存index.html。

2.1.3 添加内容

没有内容的网页,就像没有咖啡喝的日子。在header头部之后添加一个列表吧,列出该项目存在的理由。

接下来要添加一个无序列表,标签是<ul>。列表中包含5个<li>列表项,每一项中是<span>标签包裹的文本。

更新过的index.html如下所示。注意,本书中新加入的代码都会用粗体标出,需要删除的代码会用线条划去,原有代码以普通样式显示,以便读者更容易看到有变动的地方。

强烈建议充分使用Atom的自动补全和自动格式化功能。移动光标,输入ul,并按下回车键;然后输入li,并回车两次;接着输入span,并回车;输入一只水獭的名字,并以同样方式重复4次以创建另外4项。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ottergram</title>
    <link rel="stylesheet" href="stylesheets/styles.css">
  </head>
  <body>
    <header>
      <h1>ottergram</h1>
    </header>
    <ul>
      <li>
        <span>Barry</span>
      </li>
      <li>
        <span>Robin</span>
      </li>
      <li>
        <span>Maurice</span>
      </li>
      <li>
        <span>Lesley</span>
      </li>
      <li>
        <span>Barbara</span>
      </li>
    </ul>
  </body>
</html>

<li>标签中嵌套的<span>标签并无任何特殊意义,只是其他内容的普通容器,在Ottergram项目中使用它们是出于样式目的。随着本书的展开,你将会看到其他的容器元素。

再往下,根据水獭的名字添加图片。

2.1.4 添加图片

本书所有项目用到的资源都可以通过地址下载,其中包括从commons.wikimedia.org获取的5张水獭照片,由Michael L. Baied、Joe Robertson和Agunther等人拍摄,采用创作共用授权。

下载、解压资源,在ottergram-resources文件夹中找到img文件夹,将它复制到ottergram项目目录中。(这个zip文件中还包括其他资源,但目前只需要img文件夹。)

除标题之外,你还希望列表中包含可点击的缩略图。可以给ul下的每一项加上锚链接和图片标签,到时候我们会详细说明。(如果使用了自动补全功能,注意调整</a>标签的位置,使其紧跟在</span>之后。)

...
    <ul>
      <li>
        <a href="#">
          <img src="img/otter1.jpg" alt="Barry the Otter">
          <span>Barry</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="img/otter2.jpg" alt="Robin the Otter">
          <span>Robin</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="img/otter3.jpg" alt="Maurice the Otter">
          <span>Maurice</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="img/otter4.jpg" alt="Lesley the Otter">
          <span>Lesley</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img src="img/otter5.jpg" alt="Barbara the Otter">
          <span>Barbara</span>
        </a>
      </li>
    </ul>
...

如果代码缩进不是很整齐,可以借助此前安装的atom-beautify插件。点击Packages → Atom Beautify → Beautify,然后代码就会缩进并对齐。

来看看又新增了哪些东西。

<a>标签。锚标签使页面元素可点击,从而将用户带到另一个页面。它们通常被称为“链接”,但请注意,这和之前用到的<link>标签完全是两回事。

锚标签有一个名为href的属性,用于表明锚所指向的资源,其值通常是一个Web地址。但有时候你并不想去别的地方(这里就是如此),所以将“空”值#赋给href属性。这样一来,点击图片时页面就会滚动到顶部。稍后会实现点击缩略图后打开大图的效果。

我们在锚标签内部添加了<img>,即图片标签。它拥有src属性,值为之前添加的img目录中的文件名;还添加了描述性的alt属性,当无法加载图片时,alt属性会显示其所含文本。此外,读屏软件可以将alt文本作为图片描述告知视障用户。

与多数标签不同,<img>标签不会包裹其他元素,而是指向某个资源。当浏览器遇到<img>标签时,会在页面上绘制图片,这就是所谓的可替换元素;嵌入的文档和Java小程序也是可替换元素。

因为不包裹任何内容或元素,<img>标签不存在对应的闭合标签,故被称为自闭合标签(或标签)。有时你会发现<img src="otter.jpg" />这样的写法,即右尖括号之前多了一个斜杠。其实加不加斜杠只是个人偏好问题,对浏览器来说没有区别。本书使用不带斜杠的自闭合标签。

保存index.html,很快就能看到代码的结果啦!

2.2 浏览网页

要查看网页,就需要运行第1章安装的browser-sync工具。

打开命令行,切换工作目录至ottergram文件夹——想想在第1章中是如何使用cd命令加目标文件夹路径切换目录的。获取ottergram路径的一个便捷方法是按住Control键,右击Atom左侧面板的ottergram文件夹,选择Copy Full Path(如图2-12所示)。然后在命令行中输入cd,粘贴路径,按下回车。

图2-12 在Atom中复制ottergram文件夹的路径

你所输入的路径应该如下:

cd /Users/chrisaquino/Projects/front-end-dev-book/ottergram

切换完成之后,运行下面的命令,以便在Chrome上打开Ottergram。(为适应页面将命令分为两行,实际应当在一行中输入所有内容。)

browser-sync start --server --browser "Google Chrome"
                   --files "stylesheets/*.css, *.html"

若Chrome已经是默认浏览器,则可以去掉--browser "Google Chrome"这部分:

browser-sync start --server --files "stylesheets/*.css, *.html"

该命令以服务器模式启动browser-sync,它会在浏览器请求文件时发送响应(比如当创建index.html文件时)。

以上命令同时还告诉browser-sync,当HTML或CSS文件发生改动时,自动重新加载页面——这大大提高了开发效率。在browser-sync这一类工具出现之前,每次变动都需要手动刷新页面。

图2-13展示了在Mac上输入命令的结果。

{%}

图2-13 在Mac命令行终端中启动browser-sync

在Windows上也能看到相同输出(如图2-14所示)。

{%}

图2-14 在Windows命令行终端中启动browser-sync

在Chrome中成功加载Ottergram页面以后便可以看到页面中的ottergram标题、标签页中的ottergram以及一系列水獭图片和名字(如图2-15所示)。

图2-15 在浏览器中查看Ottergram

2.3 Chrome开发者工具

用Chrome内置的开发者工具(通常被称为DevTools)来调试样式和布局等再好不过了,通过开发者工具调试比在代码中试验高效很多。DevTools非常强大,是你前端开发之路上的忠实伙伴。

下一章开始才会用到开发者工具。现在先打开窗口,熟悉主要区域。

点击地址栏右侧的图标,选择More Tools → Developer Tools(如图2-16所示)。

{%}

图2-16 打开开发者工具

开发者工具默认在右侧显示。这时屏幕看起来应该如图2-17 所示。

{%}

图2-17 开发者工具的Elements面板

开发者工具展现了代码与其生成的页面元素之间的关系,通过它能检查单个元素的属性、样式,也能即时看到浏览器是如何解释代码的。这些关系对开发和调试都至关重要。

由图2-17可知,网页右侧的开发者工具显示的是Elements面板,该面板又可以分为两部分:左侧是DOM树图,代表着解释为DOM元素(Document Object Model,即文档对象模型,本书后面会介绍更多相关内容)的HTML;右侧是样式面板,展示应用于元素的视觉样式。

在工作时,将开发者工具放在屏幕右侧通常比较方便。若需要改变其位置,请点击右上角的按钮,在弹出菜单中有用于切换开发者工具位置的按钮(如图2-18所示)。

{%}

图2-18 切换开发者工具的位置

一切准备就绪,下一章开始添加样式。

2.4 延展阅读:CSS版本

CSS历史版本包括标准版本1、2和2.1。CSS2.1之后,因其规模不断增长,标准被分成多个部分。

CSS版本3并不存在。所谓的CSS3只是对一系列模块的概括性称呼,每个模块都有自己的版本号。

表2-1 CSS版本:真实与想象

版本号

发布年份

显著特性

1

1996

基本的字体属性(font-familyfont-style)、前景色与背景色、文本对齐、外边距、边框、内边距

2

1998

绝对定位、相对定位、固定定位;新增字体属性

2.1

2011

删除了一些很少有浏览器实现的特性

“3”

不定

一系列不同规范的集合,如媒体查询、新增选择器、半透明颜色、@font-face

2.5 延展阅读:favicon.ico

你注意过在经常访问的网页的地址栏左侧有一个小图标吗?有时候这些图标也出现在浏览器标签页中,如图2-19所示。

图2-19 bignerdranch.com的favicon.ico

这就是许多网站都有的favicon.ico图片文件,浏览器也会默认请求这种文件。因为Ottergram项目还没有添加它,所以你可能在开发者工具中会注意到如图2-20所示的错误信息。

{%}

图2-20 因缺少favicon.ico而报错

如果出现错误,请不用担心,这不会对项目产生影响。 favicon.ico添加起来很容易,这是我们遇到的第一个挑战。

2.6 中级挑战:添加favicon.ico

相比于错误信息,你肯定更乐于看到水獭。试着用一张水獭照片制作自己的favicon.ico文件吧。

搜索“favicon generator”可以找到一堆能帮你转换文件的网站。它们多半需要你上传图片,然后就可为你提供一个自己的favicon.ico。

选择并上传一张水獭照片吧。

将favicon.ico文件保存到index.html所在的文件夹。最后,刷新浏览器,浏览器标签页现在应该如图2-21所示。

图2-21 为项目添加favicon.ico之后

目录

  • 版权声明
  • 献词
  • 前言
  • 致谢
  • 第一部分 浏览器编程基础
  • 第 1 章 配置开发环境
  • 第 2 章 开始第一个项目
  • 第 3 章 样式
  • 第 4 章 flexbox响应式布局
  • 第 5 章 使用媒体查询完成自适应布局
  • 第 6 章 JavaScript事件处理
  • 第 7 章 使用CSS营造视觉效果
  • 第二部分 模块、对象及表单
  • 第 8 章 模块、对象和方法
  • 第 9 章 Bootstrap简介
  • 第 10 章 使用JavaScript处理表单
  • 第 11 章 从数据到DOM
  • 第 12 章 表单校验
  • 第 13 章 Ajax
  • 第 14 章 Deferred和Promise
  • 第三部分 实时数据传输
  • 第 15 章 Node.js入门
  • 第 16 章 使用WebSocket进行实时通信
  • 第 17 章 借助Babel使用ES6
  • 第 18 章 继续ES6探索之旅
  • 第四部分 应用架构
  • 第 19 章 初识MVC和Ember
  • 第 20 章 路由选择、路由表、模型
  • 第 21 章 模型和数据绑定
  • 第 22 章 数据——适配器、序列化器和变换器
  • 第 23 章 视图与模板
  • 第 24 章 控制器
  • 第 25 章 组件
  • 第 26 章 后记
合作: tt娱乐 赌球网 新葡京娱乐场