“开发一个静态 HTML 页面，我要价 12 万，有错吗

信息加速发展的互联网时代，越来越多的科技公司为了专注核心竞争力业务以及降低软件项目成本，开始将项目中的部分业务模块分发给第三方外包公司来完成。而这样是否就意味着大幅度地降低成本了？

事实告诉我们，并没有。

本文作者作为一名外包商，以自身的经历告诉我们本可以在3天之内完成了的一个报价仅为 1500 美元的静态 HTML 页面，是如何被大型企业硬是拖成了一个为期 7 周且需要耗费 18000 美元（约为人民币12万）项目的。

不久前，我作为承包商工作，经常从一个项目跳到另一个项目。有些是短期的，工作一周左右，可很快提交我的工作成果。也有的项目会持续几个月，这期间我会攒一些钱用以休息一段时间。

我更喜欢短期工作，因为这样的工作使我可以在单位时间内收取更高的费用。这样不仅我感觉是在为自己打工，而且我觉得我不需要太努力工作就能过上还算体面的生活了。我的最高费率仍然在合理的范围之内，而且我总是提供高质量的服务。这就是我和一家大公司定下这个项目之前我的工作状态。

这家公司联系我的时候显得很着急，经理告诉我他们现在就需要一个人来搞定这件事。需要一个不怎么需要公司培训就能马上上手，而且能交付最大性能的人。不管怎么说，这刚好是我的座右铭。这个项目正是我喜欢的工作类型。它内容简短，很快就能做好，而且报酬很高。

在谈判确定好合适的费率后，我收到了一封包含说明的电子邮件。他们给了我更多关于这个项目的背景。他们的开发人员在没有事先告知的情况下就离开了，并且从未跟任何其他人汇报过项目的进展。

我们需要您毫不分心地完成此项目。在合同期限内，您将只与我们合作，并及时交付成果。我们会对给您造成的麻烦进行补偿。

任务说明很简单：阅读这些需求然后估计完成这个项目需要多长时间。这是我职业生涯中遇到的一个那类比较容易的项目之一。这是一个HTML页面，包含一些简单的动画和几个嵌入的视频。我花了一个晚上研究需求并在脑中模拟实施。这些年来，我已经学会了在能确定收到报酬之前不为客户写任何代码。

我确定了这个项目充其量也就是一天的活儿。但为了保持谨慎，我上报了20个小时，总计1500美元。毕竟这只是一个HTML页面而已，我也只能收取这么多费用。他们让我到25英里外的卫星办公室去。在为他们工作的那三天里我必须天天开车去那儿。

第二天，我到了卫星办公室。在一个购物中心，然后通过一扇秘密的门进入了一个秘密的世界，一些工作人员在他们的小隔间里安静地工作着。接待员给我看了一个我将用它来工作的全新MacBook Pro，我必须从零开始设置环境。我的确更偏向于使用公司的笔记本电脑，因为他们经常要求承包商安装一些可疑的软件。（我可不想装到自己电脑上。）

我花了一天时间下载我的工具包，设置电子邮件、SSH密钥和请求服务的授权。换句话说，我什么都没做。这就是为什么我上报了20个小时，还没开始写代码呢，光前期设置就耗费了8个小时。

第二天，我准备开始真正地干活了。有了MacBook Pro，我用它发了一封电子邮件给经理。我告诉他我已经准备好工作了，正在等待上述的资源。那天，我在我柔和灯光下的工位上待着，玩着手指，直到太阳落山。

我再次计算了一下。根据我的估计，我还只剩4个小时的时间来完成这项工作，这对单个HTML页面来说也不是不可能。但不用说，第二天，我把这剩下的4个小时花在了吃公司赞助的午餐上，伙食很不错，而且我与其他员工玩得很开心。

当预计的20小时到期时，我确保向经理发送了另一封电子邮件，让他知道我确实人一直在公司，但我没有收到我需要的资源。当然，那封电子邮件被无视了。

接下来的星期一，我犹豫地开过了这25英里。令我惊讶的是，经理已经来到卫星办公室，并热情地问候了我。他是个三十来岁，很随和很不错的人。我很不解，他并不像当初要雇我的那时候那么着急了。我们进行了友好的交谈，没有提到任何工作。后来，我们去吃午餐，他付了钱。这是美好的一天。完全没工作。

好吧你可以说我很容易形成习惯，但如果你供我吃喝并每天呵护我，我会习惯这一切。这变成了一个例程。

我来上班，花一些时间在网上阅读以及看视频。我每天发一封电子邮件，所以他们知道我确实去了公司。

然后，我会去吃午饭并和碰见的有趣的人一起玩耍。在一天结束时，我站起来，伸个懒腰，打一个当之无愧的哈欠，然后开车回家。

我习惯了。事实上，我在期待这些。当我终于收到一封带有指向我需要的资源的链接的电子邮件时，我反而有点失望。我重新开始脚踏实地，变回自己工作时的严肃脸。但是，在花了几分钟查看Zip文件后，我才注意到它缺少了我需要的大部分内容。设计师给我发了一些Adobe Illustrator文件，我无法在MacBook上打开它。

我回复了电子邮件来解释我的疑虑，而且一并问了一些其他问题以节省时间。那时，我当初上报的20个小时时间早都已经过了。我现在真的想要完成这项工作了。

点击发送后不久，我收到了一封电子邮件。只有一句：“转发给Alex”，然后Alex得到了这封电子邮件的抄送。

Alex回答说他转发给了Steve。Steve回答说Michelle是设计师，她会了解得更多一些。

Michelle的自动回复称她正在度假，所有询问都应该直接告诉她的经理。

她的经理回复说“谁是Ibrahim？(我的名字)”我的经理回复说他很抱歉还没有向大家介绍我。

作为承包商，在人们注意到我在那里工作之前，我通常就已经完成我的工作并离开那家公司了。但这次，我收到了大量欢迎的电子邮件。这样的邮件持续了一段时间，而我被迫回复那些友好地过了头的邮件。有些人很想跟我本人见面。当我说我在加利福尼亚州，离得远着呢，他们有点失望。以及羡慕，他们说他们羡慕加州美好的天气。

他们很有礼貌地无视我的电子邮件，用抄送来转移我的问题，把我问过的任何事情归为垃圾邮件。我花了很多时间，像一位考古学家在深深的电子邮件之沟内挖掘，希望找到我问题的答案。

你可以想象每当我想起我唯一的任务是构建一个静态HTML页面时，我感觉到的冒名顶替综合症（心虚，怀疑自己的回报不是理所应得的）的程度之深。原本虚报了的20个小时的项目变成了为期7周的冒险，期间我享受免费午餐，每天开车50英里，并翻看电子邮件。

当我最终完成项目时，我在GitHub上将它发送给了团队。

在不久之后，我收到了邀请，整个团队会用Google Hangout开视频会议对我的代码进行Code Review。

我花了一个多月的时间来写一个静态HTML页面，而现在整个团队都要评价我的工作？

那个什么，我要为自己说句话，这个页面也包含一些JavaScript交互，是响应式的，还包括CSS动画......好吧我真的觉得自己像个来冒名顶替的。

当然，视频会议的时间又重新安排了几次。当它终于发生时，我和我的工作已经不是会议的主题了。他们都坐在纽约某个地方的同一个房间里，像一个紧密团结的团体一样聊了一会儿。事实上，他们所说的关于我做的项目的所有内容只有：

人1：嘿，有人在做这个赞助页面吗？
人2：是的，我认为已经完成了。
人1：太好了，我今晚合并吧。

那天晚上回家的时候，我意识到自己正面临另一个挑战。我在这家公司工作了7个星期，而我的原始报价为1,500美元。这相当于每年11,100美元或每周214美元。或者直接说，每小时5.35美元。

这几乎还不够我付油钱的。所以，我给他们发了一张发票，我按照原来的每小时费率给他们报了7个星期，总额达18,000美元。我当然感到羞耻，但我还能怎么办呢？

就像我预期的那样，我没有收到回复。如果所有大公司都有什么相同之处，那就是他们并不急于按时支付账单。这么简单的工作要价这么多，我觉得自己像一个骗子，但话又说回来了，我又不是来做慈善的。我每天开车50英里来做这项工作，如果工作没有完成，那不是因为我不想。这是因为他们回复太缓慢了。

接下来的一周我得到了回复。这是一封来自经理的冷邮件，他把我每天的工作日分成不同的时间段。然后他把我工作的那部分时间高亮了，每天标记一个小时的午休时间。最后他用我们商定的小时费率做了一些计算。

显然，我算错了。我错误估算了总数。调整后，他们欠我的总金额是21,000美元。

请确认重新调整后的小时数，以便财务可以给您写个支票。

我很快回复了确认。

原文：https://idiallo.com/blog/18000-dollars-static-web-page

作者简介：Ibrahim Diallo，具有多年开发经验的软件工程师。

本文为 CSDN 翻译

文本标记语言 (英语：Hypertext Markup Language，简称：HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。

HTML 到底是什么？

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。一对标签（ tags）可以为一段文字或者一张图片添加超链接，将文字设置为斜体，改变字号，等等。例如，键入下面一行内容：

学前端，关注艾编程

可以将这行文字封装成一个段落（paragraph）元素来使其在单独一行呈现：

<p>学前端，关注艾编程</p>

HTML 元素详解

让我们深入探索一下这个段落元素。

这个元素的主要部分有：

属性应该包含：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。

注：不包含 ASCII 空格（以及 " ' ``=<>` ）的简单属性值可以不使用引号，但是建议将所有属性值用引号括起来，这样的代码一致性更佳，更易于阅读。

嵌套元素

也可以将一个元素置于其他元素之中 —— 称作嵌套。要表明猫咪非常暴躁，可以将 “艾编程” 用 <strong> 元素包围，爆字将突出显示：

<p>学编程，关注<strong>艾编程</strong>:)</p>

必须保证元素嵌套次序正确：本例首先使用 <p>标签，然后是<strong>标签，因此要先结束<strong>标签，最后再结束</p>标签。以下这个示例就是一个错误的示范，这样是不对的：

<p>学编程，关注<strong>艾编程</p></strong>

元素必须正确地开始和结束，才能清楚地显示出正确的嵌套层次。否则浏览器就得自己猜测，虽然它会竭尽全力，但很大程度不会给你期望的结果。所以一定要避免！

空元素

不包含任何内容的元素称为空元素。比如 `` 元素：

<img src="images/icodingedulgo.png" alt="艾编程logo">

本元素包含两个属性，但是并没有 </img> 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。

HTML 文档详解

以上介绍了一些基本的 HTML 元素，但孤木不成林。现在来看看单个元素如何彼此协同构成一个完整的 HTML 页面。回顾文件处理小节中创建的 index.html 示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>入门学前端的博客，艾编程博客</title>
  </head>
  <body>
    <img src="images/icodingedulgo.png" alt="艾编程logo">
  </body>
</html>

这里有：

<!DOCTYPE html> — 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE 用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE 在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。
<html></html> — `` 元素。该元素包含整个页面的内容，也称作根元素。
<head></head> — `` 元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字keywords、页面描述、CSS 样式表和字符编码声明等。
<meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。
<title></title> — `` 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
<body></body> — `` 元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

图像

重温一下 `` 元素：

<img src="images/icodingedulogo.png" alt="艾编程logo">

像之前所讲，该元素通过包含图像文件路径的地址属性 src，可在所在位置嵌入图像。

该元素还包括一个替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示，不可见的原因可能是：

1、用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。

2、有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到：

alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。用 "测试图片" 来描述 Firefox 标志并不合适，修改成 "Firefox 标志：一只盘旋在地球上的火狐" 就好多了。

可以试着为图像编写一些更好的 alt 文本。

标记文本

本段包含了一些最常用的文本标记 HTML 元素。

标题（Heading）

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题， <H1> (en-US)–<h6> (en-US) ，一般最多用到 3-4 级标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

可以尝试在 `` 元素上面添加一个合适的标题。

注：可以发现 MDN 网站上第一级标题的主题是隐藏的。不要使用标题元素来加大、加粗字体，因为标题对于无障碍访问和搜索引擎优化等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。

段落（Paragraph）

如上文所讲，<P> 元素是用来指定段落的。通常用于指定常规的文本内容：

<p>这是一个段落</p>

试着添加一些文本（在设计网站的外观小节）到一个或几个段落中，并把它们放在你的 `` 元素下方。

列表（List）

Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为：

1、无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包围。

2、有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围。

列表的每个项目用一个列表项目（List Item）元素 <li> 包围。

比如，要将下面的段落片段改成一个列表：

<p>艾编程是一个综合性的web前端编程学习网站，
       包含了html、css、JavaScript等系列知识……</p>

可以这样更改标记：

<p>Mozilla 艾编程是一个综合性的web前端编程学习网站。包含了</p>

<ul>
  <li>html</li>
  <li>css</li>
  <li>JavaScript</li>
</ul>

<p>等系列知识……</p>

试着在示例页面中添加一个有序列表和无序列表。

链接

链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — <a> — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：

选择一些文本。比如 “艾编程前端”。
将文本包含在<a>元素内，就像这样：
<a>艾编程前端</a>
为此<a>元素添加一个href属性，就像这样：
<a href="">艾编程前端</a>
把属性的值设置为所需网址：
<a href="https://www.icodingedu.com/">艾编程前端</a>

如果网址开始部分省略了 https:// 或者 http://，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。

href 这个名字可能开始看起来有点令人费解，代表超文本引用（ hypertext reference）。

现在就为页面添加一个链接吧。

小结

如果你一直跟着这篇文章里的指导做的话，你应该完成了一个像下面这样的页面：

代码部分：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>艾编程前端</title>
  </head>
  <body>
    <h1>艾编程前端示例页面</h1>
    <img src="https://www.icodingedu.com/files/system/2019/09-25/22132557f330499313.png" alt="艾编程logo整体以盾型为外轮廓设计，以代码符号””为基础图形进行抽象画变形，中间的“/”符号用首字母“i”替代，同时也是谐音“爱”，象征着美好">

    <p>艾编程是一个综合性的web前端编程学习网站。包含了</p>

    <ul>
      <li>html</li>
      <li>css</li>
      <li>JavaScript </li>
    </ul>

    <p>等系列知识……</p>

    <p>为了让您更好的学好前端编程，请参阅 <a href="https://www.icodingedu.com/">艾编程</a></p>
  </body>
</html>

你学到了吗？如果有帮助记得关注收藏点赞哦！

页Web应用是当今网站开发技术的弄潮儿，很多传统网站都在或者已经转型为单页Web应用，新的单页Web应用网站（包括移动平台上的）也如雨后春笋般涌现在人们的面前，如Gmail、Evernote、Trello等。

什么是单页面应用程序

单页面应用应用（即Single-page App，以下简称SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。单页Web应用（single page web application，SPA），就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。

以前，浏览器会收到来自服务器的HTML。当用户访问另一个URL地址时，需要全页刷新，服务器也会发送全新HTML。这就是所谓的服务器端渲染。

但是，在现代SPA中，客户端渲染已经取代了服务器端渲染。浏览器会先从服务器上加载出最初图像，和包括框架、库和应用代码在内的脚本，以及整个应用所需的样式表。当用户访问其他页面时，页面将不会进行整体刷新，而是通过HTML5 History API对页面地址进行更新。以JSON形式呈现出来的新页面所需的新数据，将会通过向服务器发出的AJAX请求，由浏览器检索进行检索。接着，SPA会通过原先在页面中下载好的JavaScript，来对页面数据进行动态更新。

SPA的特点

速度：更好的用户体验，让用户在web app感受native app的速度和流畅，

MVC：经典MVC开发模式，前后端各负其责。

ajax：重前端，业务逻辑全部在本地操作，数据都需要通过AJAX同步、提交。

路由：在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。

SPA的开发流程

用循环的视角审视Web应用开发

框定一个一致的SPA图形用户界面（GUI）和模型

将SPA的原则带回服务器端

聚集于对合适的应用进行早期SPA开发

SPA的优点

1.应用针对用户操作给出的反应更加灵敏，不会由于页面整体刷新而出现闪退；

2.向服务器发送的HTTP请求减少，无需在每一页进行重复下载；

3.用户和服务器划分明确，无需修改服务器代码就可以轻松为新用户创建不同平台。另外，只要不违背API规则，还可以分别对用户和服务器的技术堆栈进行修改。

SPA的缺点

1.最开始的加载任务较重，包括框架和应用代码等；

2.需要对服务器进行额外的配置操作，让它将所有请求汇集到同一个进入点；

3.SPA依靠JavaScript来呈现内容，但并不是所有搜索引擎都能够在爬虫过程中执行JavaScript。这一点，无疑会对应用的搜索引擎优化带来负面影响。

SSL证书是HTTP明文协议升级HTTPS加密协议的重要渠道，是网络安全传输的加密到通道。关于更多SSL证书的资讯，请关注GDCA（数安时代）。GDCA致力于网络信息安全，已通过WebTrust 的国际认证，是全球可信任的证书签发机构。GDCA专业技术团队将根据用户具体情况为其提供最优的产品选择建议，并针对不同的应用或服务器要求提供专业对应的HTTPS解决方案。

文章转载：https://www.trustauth.cn/wiki/19993.html

在线咨询

上一篇：分享20个值得收藏的抖音短视频素材库
下一篇：html中如何写“返回顶部按钮”？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商