网络版报告一之web基础

web开发基础：创建你的第一个网址。初步学习 HTML，CSS, JavaScript 的基础内容。

在这一块，我不生产代码，我只是代码的搬运工。

Web 入门模块是一套介绍 Web 开发实践的系列文章。你会收集资源并编写代码来构建一个简单的网页，然后将其发布，以便全世界都能看到。

创建一个专业的网站需要大量的工作，因此如果你是 Web 开发的新手，我们会鼓励你从小事做起。虽然你无法立刻再建一个 Facebook，但是做一个简单的网站并不难，我们将由此开始。

你的网站会是什么样子？

你的网站会是什么样子？讨论的是你编写代码之前不得不为你的网站准备的计划和设计工作，包括“网站提供哪些信息？”、“用哪些字体和颜色？”、“网站是做什么的？”。

第一步：计划

做任何事情之前，都要先有一些想法。你的网站到底是做什么的？一个网站基本上可以做任何事情，但对于你的第一个网站来说，最好简单一些。我们将从创建一个简单的网页开始，它包含一个标题、一张图片和几个段落。

首先，请考虑以下问题：

1. 网站的主题是什么？你喜欢狗、上海、还是吃豆人？
2. 基于所选主题要展示哪些信息？写下标题和几段文字，再找个你想在页面上展示的图像。
3. 用简单且高级的话来说，你的网站会是什么样子？背景颜色是什么？哪种字体合适：正式的、卡通的、粗体还是瘦体？

**备注：**复杂的网站需要更详细的指引，深入到颜色、字体、页面上元素的间距、适当的书写风格等等以及其他细节。这有时被称为设计指南、设计系统或品牌手册，可以在 Firefox Photon 设计系统中找到一个示例。

绘制草图

接下来，拿起笔和纸，大致勾勒出你所希望的网站样子。对于第一个简单的网站，虽然要绘制的东西不多，但你现在应该养成这样做的习惯。画草图很有用——并且你不需要有梵高的手法！

**备注：**即使在实际的复杂网站中，设计团队通常也是从粗略的草图开始设计的，再使用图形编辑器或 Web 技术建立数字模拟图。

Web 团队通常包含一名平面设计师和一名用户体验（UX）设计师。平面设计师把网站的视觉效果放在一起。用户体验设计师则以一种稍加抽象的方式解决用户体验及网站交互方面的问题。

选定素材

文本 ：内容主体。

主体颜色：挑选心仪的颜色

图像

挑选插入的图像，请注意，网络上的大多数图片，包括谷歌图片中的图片，都是有版权的。为了降低侵权的可能性，可以使用谷歌的许可证过滤器。点击工具按钮，然后点击下面出现的使用权限选项。你应该选择知识共享许可这个选项（Creative Commons licenses，简称 CC 协议）。

带有这种协议的图片，就像是作者公开声明的：“大家可以免费拿去用，但请遵守我的规则（比如必须署名，或者只能非商业使用）。”

字体

网页字体和图片一样，是受版权保护的。你不能在自己的网站（比如你的 GWAS 报告或 Hexo 博客）上随便使用微软雅黑、思源黑体等常见字体，否则会有侵权风险。

目前业界主要有三种方式在网页上使用字体，结合你的项目情况，建议如下：

1. 使用 Google Fonts（谷歌字体 - 最推荐）

这是目前最主流的方案。Google 提供了大量免费可商用的开源字体。

• 优点：免费、种类极多、加载速度快（全球 CDN 加速）。
• 怎么用：去 fonts.google.com 选好字体，复制一段 <link> 代码贴到你的 HTML 头部，然后在 CSS 里写 font-family: '字体名', sans-serif; 即可。

⚠️ 特别注意（GDPR）：如果你用的是 Google Fonts 在线链接，Google 服务器会记录访问者的 IP 地址。如果你的网站用户主要在欧洲，这可能违反欧盟的 GDPR（数据隐私保护）规定。

2. 下载并自托管 (Self-hosting)

如果你下载了字体文件（.ttf 或 .woff），把它们放到你的 src/fonts/ 目录下，然后通过 CSS 引入。（除非是免费字体，不然这样做涉及侵权，需要授权；而且我看字体文件挺大的，十几MB）

3. 使用“安全 Web 字体” (Safe Web Fonts)

安全web 字体官网：https://web.mit.edu/jmorzins/www/fonts.html

这是最省事、零风险的方案。这些是操作系统自带的基础字体，无需下载，所有浏览器都能直接显示。

• 常见字体：
  • 无衬线 (Sans-serif)：Arial, Helvetica, Roboto, Open Sans (现代网页最常用)
  • 衬线 (Serif)：Times New Roman, Georgia
  • 等宽 (Monospace)：Courier New, monospace

但是问题是，全是英文字体，没有中文字体。

中文字体

方案 1：开源免费商用字体（最推荐）

这些字体明确声明可免费商用，遵循 SIL OFL 或类似开源协议：

字体	许可证	说明
思源黑体（Source Han Sans / Noto Sans CJK）	SIL OFL 1.1	Google+Adobe 出品，最成熟
思源宋体（Source Han Serif / Noto Serif CJK）	SIL OFL 1.1	Google+Adobe 出品，宋体版
阿里巴巴普惠体	官方声明免费商用	阿里的品牌字体
站酷系列（站酷黑体、快乐体等）	个人免费，商用需署名	知名度高，设计感强
MiSans（小米字体）	全球免费商用	小米系统字体，需注明使用
霞鹜文楷	SIL OFL 1.1	开源，文艺感强

首选思源系列，因为它完全开源，而且持续更新。

方案 2：系统预装字体

windows 自带的字体包括：宋体（SimSun）、黑体（SimHei）、仿宋（FangSong）、楷体（KaiTi）、微软雅黑（Microsoft YaHei）。

结论：不能免费商用，存在版权风险。

虽然这些字体随 Windows 系统免费提供，但它们的数字字体文件（.ttf/.ttc）是有版权归属的，不能随意用于商业设计。（就是不授权下载字体文件，但是网页 CSS 写 font-family: "Microsoft YaHei"，让访客浏览器调他本机字体渲染（不提取字体文件）这种不算 ）

你可以用这些字体在你的电脑上写文档、做PPT、打印报告。但不能把字体文件拿出来，用于平面设计、Logo设计、网站嵌入等商业场景。

⚠️ 重要提醒：微软雅黑绝对不能用在商业设计中。

如何判断字体商用和侵权

感觉商用的标准其实不是靠这个挣钱了，而是向外传播。

下面分情况讨论

一、公司网页用下载的字体文件（@font-face）= ⚠️ 有侵权风险

/* ❌ 把从 Windows 拷出来的 msyh.ttf 放服务器上 */
@font-face {
  font-family: "MyYaHei";
  src: url("fonts/msyh.ttf");
}

• 这属于把字体文件复制、托管、通过网络传播（嵌入式使用），微软 EULA 和方正授权都不允许。
• 即使是公司官网，用未获授权的收费字体（微软雅黑/方正/汉仪等）做 @font-face → 构成字体软件著作权侵权。

✅ 合法做法：只用已购买 Web 授权（或明确免费商用如思源黑体、阿里巴巴普惠体）的字体文件做 @font-face。

---

二、公司网页只用 font-family: "Microsoft YaHei" = ✅ 不侵权

/* ✅ 只让浏览器调用访客本机已安装的字体 */
body {
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

• 网页不复制、不分发音体文件，只是指令"优先用用户系统里的这个字体"。
• 字体由用户本机 Windows 授权覆盖，网站不承担字体复制/传播行为 → 不侵权。

⚠️ 局限：Mac / Linux 用户没装微软雅黑会 fallback 到其他字体（这是显示问题，不是法律问题）。

---

三、把字体变成图片 / 商用印刷品向客户传播 = ❌ 需授权（微软雅黑/SImSun/SimHei 都算）

场景	微软雅黑/中易宋体/中易黑体
PS/AI 用该字体 → 导出 JPG/PNG 做公司 Banner、公众号头图	❌ 需方正/中易商用授权
印在产品包装、宣传册、名片、户外广告、展会物料上	❌ 需商用授权
Logo 设计取该字形注册商标	❌ 需授权
网页 CSS font-family 调用系统字体渲染正文	✅ 不侵权
内部 Word 写文档自己看 / 家庭打印	✅ 不侵权

"向客户传播"在这里指对外商业宣传/展示/销售用途，不只是收钱才算商用。

---

四、快速判断口诀 ✅

• 放字体文件上服务器（@font-face）→ 要授权，否则侵权
• CSS font-family 调系统字体 → 不侵权
• PS/AI 用受限字体做图/印刷对外商用 → 要买商用授权，否则侵权
• 做商用项目 → 设计图用思源黑体 / 阿里巴巴普惠体等明确免费商用字体最安全

如果你们公司要做商业网站+宣传物料，我可以帮你列一份可免费商用中文字体清单 + 对应 font-family 写法，设计图和网页都能放心用。🎯

HTML 基础：创建内容

HTML是什么

HTML（HyperText Markup Language，超文本标记语言）是一种用于定义网页结构的描述语言。

HTML 存在于扩展名为 .html 的文本文件中，这种文件被称为 HTML 文档，或简称文档。在我们之前谈论网页的地方，一个 HTML 文档包含了网页的内容并指定了其结构。

你将遇到的最常见的 HTML 文件是 index.html，它通常用于包含网站主页的内容。同样常见的是看到带有各自 index.html 的子文件夹，因此一个网站可以在不同的位置有多个索引文件。

HTML 文档是包含多个元素的文本文档。每个元素都用一对开始和结束标签包裹。每个标签以尖括号（<>）开始和结束。也有一部分标签中不需要包含文本，这些标签称为空标签，如 <img>。

你可以使用属性来扩展 HTML 标签。属性用来提供一些附加信息，这些信息可能会影响浏览器对元素的解析：

**备注：**HTML 中的标签不区分大小写。这意味着它们可以用大写或小写书写。例如，<title> 标签可以写成 <title>、<TITLE>、<Title>、<TiTlE> 等，并且都能正常工作。但是，为了保持一致性和可读性，最佳实践是所有标签都用小写书写。

举例如下，考虑下面这行文本：

My cat is very grumpy

如果我们想让这段文本独立成段，我们可以用段落（<p>）元素来包裹它：

<p>My cat is very grumpy</p>

创建你的第一个HTML文档

让我们看看各个元素是如何组合成 HTML 页面的。在本节中，你将创建一个基本的 HTML 文件，并了解它的构成。

1. 在你的 web-projects 文件夹内，创建一个名为 first-website 的新文件夹。
2. 在 first-website 文件夹中，创建一个名为 index.html 的新文件，并将以下代码按原样插入文件中：

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

这里有：

• <!doctype html>——文档类型。这是必不可少的开头。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，这个元素用来关联 HTML 编写规范，以供自动查错等功能所用。而在当今，它作用有限，可以说仅用于保证文档正常读取。现在知道这些就足够了。
• <html></html>—— <html>元素。该元素包含整个页面的所有内容，有时候也称作根元素。它还包含 lang 属性，设置页面的主要语种。
• <head></head>——<head>元素。该元素作为想在 HTML 页面中包含但不想向用户显示的内容的容器。包括想在搜索结果中显示的关键字（用以描述内容的词汇或短语）和页面描述、用于设置页面样式的 CSS、字符集声明等等。
• <meta charset="utf-8">——该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。
• <meta name="viewport" content="width=device-width">—— 视口元素可以确保页面以视口宽度进行渲染，避免移动端浏览器以比视口更宽的宽度渲染内容，导致内容缩小。(说人话是确保在手机端能够自动适配屏幕大小)
• <title></title>——<title>元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。
• <body></body>——<body>元素。该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。此时我们只有一个 <img> 元素，但接下来我们将添加更多的内容。

嵌入图像

让我们将注意力集中在 <img>元素上：

<img src="" alt="My test image" />

这段代码通过 src（source, 源）属性将图片嵌入页面，该属性包含我们要嵌入的图片文件路径。

该元素还包括一个 alt（alternative，替代）属性。在alt 属性中，是图像的描述内容，用于当图像不能被用户看见时显示。不可见的原因可能是路径错误，。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到：

编写的替代文本应为读者提供足够的信息，使其能够充分理解图像所传达的内容。在此示例中，当前文本“My test image”并不理想，因为它未能描述图像的具体信息。对于 Firefox 徽标而言，更佳的替代方案应为：“The Firefox logo: a flaming fox surrounding the Earth.”。

备注：诸如 <img> 之类的元素既无内容也无闭合标签，因此被称为空元素。有时会在单标签末尾添加尾随斜杠（<img />），但此写法并非强制要求。

两种写法都可以，但是 AI 推荐使用没有斜杠的版本，符合 HTML5 主流规范

<img src="" alt="My test image" >

现在我们来让图像显示出来。

1. 在 first-website 文件夹内创建名为 images 的新文件夹，并将前例中选定的图片放入该文件夹。
2. 在 <img> 标签的 src 属性值中输入图片路径。该图片位于名为 images 的文件夹内，该文件夹与 index.html 文件位于同一目录下，因此路径应为 images/ 加上图片文件名。例如，若图片名为 firefox-icon.png，则 src 属性应为：src="images/firefox-icon.png"。
3. 将 alt 属性的值——My test image——替换为更准确描述图片的文本。
4. 在 web 浏览器中打开 index.html 文件。此时应能看到图片显示。若未显示，请对照示例代码检查 <img> 元素：确保语法正确（如引号位置），并确认图片文件名无误。

若图片过大导致无法完整显示，请不必担心。我们将在下篇文章中解决此问题。

标记文本

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

标题

标题（Heading）元素可用于指定内容的标题或子标题。就像一本书的书名、每章的大标题、小标题，等。HTML 文档也是一样。HTML 包括六个级别的标题，从 <h1> 到 <h6>，一般最多用到 3-4 级标题。

<!-- 4 个级别的标题 -->
<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

**备注：**在 HTML 中，<!-- 和 --> 之间的任何内容都是 HTML 注释。浏览器在渲染代码时，会忽略掉注释。换句话说，注释在页面上不可见——仅停留在代码中。HTML 注释是添加代码或逻辑说明的一种方式，这些说明可能对共同开发该代码的其他人有所帮助，也可能在你六个月后重返项目却记不清当初所为时派上用场。

在 HTML 页面中，将页面标题添加到 <img> 元素的正上方，并用 <h1> ... </h1> 标签包裹。保存文件后在浏览器中查看效果。

段落

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

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

将上一篇文章中提取的示例文本添加到一个或几个段落中，并把它们放在你的<img> 元素下方。保存后在浏览器中查看页面效果。

列表

web 上有大量内容属于列表形式，HTML 为此提供了专用元素。列表标记至少包含两个元素。最常见的列表类型是序列表和无序列表：

1. 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包装。
2. 有序列表（Ordered List）中项目的顺序很重要，就像菜谱中的烹调指南。用一个 <ol> 元素包装。

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

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

<p>
  At Mozilla, we're a global community of technologists, thinkers, and builders
  working together…
</p>

可以这样更改标记：

<p>At Mozilla, we're a global community of</p>

<ul>
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together…</p>

尝试在示例页面中添加有序或无序列表，并在浏览器中查看结果。

链接

链接非常重要——它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素——<a>——“a”是“anchor”（锚）的缩写。

示例如下，这里 href属性 是Hypertext Reference（超文本引用） 的缩写（“超文本（Hypertext）”就是带链接的文本。），值为所需的网址；元素内为显示的内容。

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">
  Mozilla Manifesto
</a>

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

总结

按照文章指导，我的 HTML 文档如下

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <h1> Introduce html </h1>
    
    <!-- 1. 图片路径要确保正确 -->
    <img src="images/1.png" alt="introduce html" />
    
    <!-- 2. 把 <p> 转义成 &lt;p&gt; -->
    <p> 如上文所讲，`&lt;p&gt;` 元素是用来指定段落的。通常用于指定常规的文本内容：</p>
    
    <!-- 3. 同样，把 <img> 转义 -->
    <p> 将上一篇文章中提取的示例文本添加到一个或几个段落中，并把它们放在你的 `&lt;img&gt;` 元素下方。保存后在浏览器中查看页面效果。</p>
    
    <!-- 无序列表 -->
    <p>At Mozilla, we're a global community of</p>

    <Ol>
      <li>technologists</li>
      <li>thinkers</li>
      <li>builders</li>
    </Ol>

    <p>working together…</p>
    <!-- 链接 -->
    <a href="https://www.mozilla.org/zh-CN/about/manifesto/">
      Mozilla Manifesto
    </a>
  </body>
</html>

显示的网页如下

CSS 基础

CSS（层叠样式表）是为 web 内容添加样式的代码。CSS 基础将介绍 CSS 入门知识。我们会解答像这样的问题：怎样将文本设置为红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？

什么是 CSS?

和 HTML 类似，CSS 不是编程语言。它也不是标记语言，而是一门样式表语言。CSS 用于选择性地为 HTML 元素添加样式。例如，下列的 CSS 代码选择了所有的段落文本，并将它们设置为红色。

p {
  color: red;
}

让我们来试一试！使用文本编辑器，在新文件中粘贴上面的三行 CSS 代码。在 css 文件夹中将文件保存为 style.css。

为了使代码发挥作用，我们仍需要将上面的 CSS 应用到 HTML 文档中。否则，这些样式不会改变 HTML 的外观。（如果你没有完成前几节的实践，请复习处理文件和 HTML 基础。）

打开 index.html 文件，在文档头部（也就是<head> 和 </head> 标签之间）粘贴这行代码（这行代码的作用是：把 CSS 样式文件“链接”到 HTML 页面，href 是超文本引用，rel 是 Relationship 的缩写，表示这个外部资源和当前网页是什么关系，stylesheet表示是一个样式表）。

<link href="css/style.css" rel="stylesheet" />

保存 index.html 文件，并用浏览器打开。如果段落文本变红，那么祝贺你！CSS 样式已经生效了。

CSS 规则集详解

让我们来剖析一下红色段落文字的 CSS 代码，了解它是如何工作的：

整个结构称为规则集（规则集通常简称为规则），注意各个部分的名称：

• 选择器（Selector)

  HTML 元素名位于规则集的开头。它定义了需要添加样式的元素（本例中就是 <p> 元素）。要给不同的元素添加样式，只需要更改选择器。

• 声明（Declaration）

  它是一条单独的规则（如 color: red;）。用来指定为元素的哪个属性添加样式。

• 属性（Properties）

  它是为 HTML 元素添加样式的方式（本例中 color 就是 <p> 元素的属性）。在 CSS 中，你可以选择要在规则中影响的属性。

• 属性值（Property value）

  位于属性的右边，冒号后面即属性值。它从指定属性的可选值中选择一个值（例如，我们除了 red 之外还有很多属性值可以用于 color）。

注意其他重要的语法：

• 除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
• 在每个声明里要用冒号（:）将属性与属性值分隔开。
• 在每个规则集里要用分号（;）将各个声明分隔开。

如果要在规则集中同时修改多个属性，只需要将它们用分号隔开，就像这样：

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

选择多个元素

也可以选择多个元素并为它们添加单个规则集，多个选择器之间用逗号分隔。例如：

p,
li,
h1 {
  color: red;
}

不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择所有指定类型的元素。但是选择操作可以更加具体。下面是一些更常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定类型的 HTML 元素	p 选择 <p>
ID 选择器	具有特定 ID 的元素。单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID，就像身份证号	#my-id 选择 <p id="my-id"> 或 <a id="my-id">
类选择器	具有特定类的元素。单一页面中，一个类可以有多个实例	.my-class 选择 <p class="my-class"> 和 <a class="my-class">
属性选择器	拥有特定属性的元素	img[src] 选择 <img src="myimage.png"> 但不是 <img>
伪类选择器	特定状态下的特定元素（比如鼠标指针悬停在链接上时）	a:hover 选择仅在鼠标指针悬停在链接上时的 <a> 元素

选择器的种类远不止这些，更多信息请参阅 MDN 的选择器指南。

字体与文本

在探索了一些 CSS 基础后，让我们在 style.css 中添加更多的规则和信息，从而让示例更美观。

1. 第一步，找到之前谷歌字体保存的字体的地址。在 index.html 文档头部（ <head> 和 </head> 之间的任意位置）添加 <link>元素。代码如下：

   <link
        href="https://fonts.googleapis.com/css?family=Open+Sans"
        rel="stylesheet" />

   这段代码将你的页面链接到一个样式表，该样式表将 Open Sans 字体家族与你的网页一起加载。

2. 接下来，删除 style.css 文件中已有的规则。虽然测试是成功的，但是红字看起来并不太舒服。

3. 添加下列几行代码（如下文所示），用你在谷歌字体中选择的 font-family 替换 font-family。font-family 属性是指为文本设置的字体。这个规则为整个页面定义了全局的基础字体和基础字号。由于 <html> 是整个页面的父元素，它里面的所有元素都继承相同的 font-size 和 font-family。

   html {
     font-size: 10px; /* px 表示“像素（pixel）”: 基础字号为 10 像素 */
     font-family:
       "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */
   }

   **备注：**CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释。浏览器在渲染代码时会忽略注释。CSS 注释是一种让你写下关于你的代码或逻辑的有用注解的方式。

4. 接下来为 HTML 主体内的元素（h1、<li> 和 <p>）设置字号。我们也将标题居中显示。最后，扩充下方的第二个规则集，为正文设置行高和字间距，从而提高页面的可读性。

   h1 {
     font-size: 60px;
     text-align: center;
   }
   
   p,
   li {
     font-size: 16px;
     line-height: 2;
     letter-spacing: 1px;
   }

可以随时调整这些 px 值来获得满意的结果，以下是大体效果：

下面是是我改成思源宋体后的效果

CSS: 一切皆盒子

编写 CSS 时你会发现，所有的一切都与盒子相关——设置尺寸、颜色、位置，等等。页面上大部分 HTML 元素都可以被看作若干堆叠的盒子。

CSS 布局主要是基于盒子模型。每个在页面上占用空间的盒子都有类似的属性：

• padding（内边距）：是指内容周围的空间。在下面的例子中，它是段落文本周围的空间。
• border（边框）：是紧接着内边距的实线。
• margin（外边距）：是围绕元素边框外侧的空间。

这里还使用了：

• width：元素的宽度。
• background-color：元素内容和内边距底下的颜色。
• color：元素内容（通常是文本）的颜色。
• text-shadow：为元素内的文本设置阴影。
• display：设置元素的显示模式（继续阅读文章以了解更多细节）。

开始在页面中添加更多 CSS 吧！大胆将这些新规则都添加到 style.css 的底部，而不要纠结改变属性值会带来什么结果。

更改页面颜色

html {
  background-color: #00539f;
}

这条规则为整个页面设置了背景颜色。

文档体样式

body {
  width: 600px;
  margin: 0 auto;
  background-color: #ff9500;
  padding: 0 20px 20px 20px;
  border: 5px solid black;
}

这里有几条 <body>元素的声明，我们来逐条查看：

• width: 600px; 强制文档体永远保持 600 像素宽。

• margin: 0 auto; 当你在 margin 或 padding 这样的属性上设置两个值时，第一个值影响元素的上下方向（在这个例子中设置为 0）；第二个值影响左右方向。（这里，auto 是一个特殊的值，它将可用的水平空间平均分配给左边和右边）。如margin 语法中所记载的那样，你也可以使用一个、两个、三个或四个值。

  • 当只指定一个值时，该值会统一应用到全部四个边的外边距上。
  • 指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
  • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
  • 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

• background-color: #FF9500; 如前文所述，指定元素的背景颜色。我们给 body 用了一种略微偏红的橘色以与深蓝色的 <html> 元素形成反差，你也可以尝试其他颜色。

• padding: 0 20px 20px 20px; 我们给内边距设置了四个值，目的是给内容四周留出一点空间。这一次我们不设置 body 上方的内边距，设置右边、下方、左边的内边距为 20 像素。值以上、右、下、左的顺序排列。与 margin 一样，你也可以像padding 语法中所记载的那样，使用一个、两个、三个或四个值，规则同外边距。

• border: 5px solid black; 这是为边框的宽度、样式和颜色设置的值。在本例中，是 body 四周的一个 5 像素宽的纯黑色实线边框。

定位页面主标题并添加样式

h1 {
  margin: 0;
  padding: 20px 0;
  color: #00539f;
  text-shadow: 3px 3px 1px black;
}

你可能已经注意到，在正文的顶部有一个难看的间隙。这是因为浏览器对 <h1> 元素（以及其他元素）应用了默认样式。这可能看起来是个坏主意，但其目的是为没有样式的页面提供基本的可读性。为了消除这种间隙，我们设置 margin: 0; 覆盖浏览器的默认样式。

接下来，我们将标题的上下内边距设置为 20 像素。

之后，我们将标题文本的背景颜色设置为和 HTML 的背景颜色一样的颜色。

最后，text-shadow 对元素的文本内容施加阴影。它的四个值是：

• 第一个像素值设置阴影与文本的水平偏移量：阴影水平方向移动的距离（译者注：向右为正值）。
• 第二个像素值设置阴影与文本的垂直偏移量：阴影垂直方向移动的距离（译者注：向下为正值）。
• 第三个像素值设置阴影的模糊半径。值越大产生的阴影越模糊。
• 第四个值设置阴影的基色。

试着用不同的值进行试验，看看它是如何改变外观的。

图像居中

img {
  display: block;
  margin: 0 auto;
}

最后，我们把图像居中让页面更美观一些。可以复用 body 的 margin: 0 auto，但有一些差异，需要额外的设置来使 CSS 发挥作用。

<body> 元素是块级元素，意味着它占据页面上的空间。页面上的其他元素会尊重为块级元素设置的外边距。而图片是行级元素，所以为了使图像有外边距，我们必须使用 display: block 给予其块级行为。

**备注：**上面的做法假定所选图片小于 body 的宽度（600 像素）。超过 600 像素的图片会溢出 body 并占据页面的其他位置。要解决这个问题，可以：1）使用图片编辑器减小图片宽度；2）用 CSS 限制图片大小，将 <img> 元素 width属性的值设置为小于 600 像素的值。

**备注：**如果你暂时不能理解 display: block、块级元素和行级元素之间的差别也没关系；随着你对 CSS 学习的深入，你将明白这个问题。

总结

最终我得到下面的页面，图片宽度超过了 600 像素

修改 CSS 表的图像设定

img {
  display: block;
  margin: 0 auto;
  max-width: 100%; /* 图片的最大宽度就是它父容器的 100%，但不能超过它自己原本的大小 */
  height: auto; /* 这一行非常重要！保持长宽比例，防止图片变形 */
}

此时显示效果如下

JavaScript 基础

JavaScript 是一门为网站添加交互性的编程语言。交互性体现在游戏、点击按钮或输入表单时的响应行为；动态的样式；动画，等等。本文将帮助你入门 JavaScript，并进一步加深你对 JavaScript 所能实现的功能的理解。

JavaScript 到底是什么

JavaScript 是一门为网站添加交互性的强有力的编程语言。由布兰登·艾克发明。

JavaScript 是一门多功能的、新手友好的编程语言。随着经验的积累，你将能够创建游戏、2D 和 3D 图形动画、全面的数据库驱动应用程序，等等。

JavaScript 本身相对简洁，但非常灵活。开发者在核心 JavaScript 语言的基础上编写了各种工具，让你能以最小的努力解锁大量的功能。这些工具包括：

• Web 浏览器内置的应用程序编程接口（API），提供了丰富的功能，例如：动态创建 HTML 和设置 CSS 样式；从用户的摄像头采集和处理视频流、生成 3D 图形和音频样本。
• 允许开发者将来自其他内容提供商（如 Disqus、Facebook）的功能整合到自己的网站中的第三方 API。
• 能够应用于 HTML 加速网站和应用程序开发的第三方框架和库。

作为一篇 JavaScript 的简要介绍，阐述核心 JavaScript 和上述的工具之间的区别超出了本文的范围。你可以在 MDN 的 JavaScript 学习区，以及 MDN 的其余部分了解更多信息。

接下来将介绍核心语言的一些方面，并提供体验一些浏览器 API 特性的机会。祝你玩得开心！

“Hello World!”示例

JavaScript 是最流行的现代 Web 技术之一。随着 JavaScript 技能的增长，你的网站在功能和创新力上将达到一个新的维度。

然而，熟练掌握 JavaScript 比熟练掌握 HTML 和 CSS 要更有挑战。你必须从简单的开始，然后逐步前进。首先，来看看如何在页面中添加 JavaScript 完成 Hello world! 示例

1. 打开测试站点的目录，创建一个名为 js 的新目录。然后在 js 目录中创建一个名为 main.js 的新文件，并保存。

2. 打开 index.html 文件，在结束标签 </body> 前添加下列代码（也就是基本放在最后面）：

   <script src="js/main.js"></script>

3. 与 CSS 的 `` 元素的功能类似，它将 JavaScript 引入以作用于 HTML（以及 CSS 和页面上的任何其他内容）。

4. 将下列代码添加到 scripts/main.js 文件：

   js复制

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";

5. 确认保存了 HTML 和 JavaScript 文件。然后在浏览器中打开 index.html。你应该看到类似的内容：

备注：上面将 <script> 元素放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序进行读取。

如果 JavaScript 先加载，并期望操纵还未加载的 HTML，可能会出现问题。将 JavaScript 放在 HTML 页面的底部附近是一种解决方案。想要了解更多的替代方案，参见脚本加载策略。

发生了什么

使用 JavaScript 把标题文本改成了 Hello world!*。用 querySelector() 函数获取标题的引用，然后把它储存在 myHeading 变量中。这与 CSS 选择器的用法非常相像。若要对某个元素进行操作，首先得选择它。

接着，把 myHeading 变量的textContent属性（表示标题内容）的值设置为 Hello world!。

JavaScript 速成课程

为了让你更好地理解 JavaScript 的运行机制，我们会解释一些语言的核心特性。值得注意的是，这些特性是所有编程语言的共性。如果掌握了这些基础知识，你也可以开始用其他语言写代码。

变量

变量是存储值的容器。要声明变量，先输入let关键字，然后输入变量名：

let myVariable;

行尾的分号表示语句结束。仅当你需要在单行内分隔多条语句时，分号才是必须的。然而，一些人认为每条语句末尾加分号是最佳实践。

JavaScript 对大小写敏感。这意味着 myVariable 和 myvariable 是不同的。如果代码中有问题，检查一下大小写！

声明变量后，你可以给它赋值：

myVariable = "鲍勃";

你也可以在同一行执行声明和赋值操作：

let myVariable = "鲍勃";

你可以通过变量名获取值：

myVariable;

给变量赋值后，你可以修改变量的值：

let myVariable = "鲍勃";
myVariable = "斯蒂夫";

注意变量可以存储不同数据类型的值：

变量	解释	示例
字符串	字符串就是文本序列。用单引号或双引号括起来的值就是字符串。	let myVariable = '鲍勃'; 或者 let myVariable = "鲍勃";
数字	数字周围没有引号。	let myVariable = 10;
布尔	真/假值。单词 true/false 是不需要引号的特殊关键字。	let myVariable = true;
数组	让你在单一引用中存储多个值的结构。	let myVariable = [1,'鲍勃','斯蒂夫',10]; 像这样引用数组成员：myVariable[0]、myVariable[1]，等等。
对象	可以是任何内容。JavaScript 里的一切都是对象，对象能在变量中存储。这一点要牢记于心。	let myVariable = document.querySelector('h1'); 上面的示例都是。

那么变量有什么用呢？编程时变量无处不在。如果值不能修改，那么就无法做任何动态的工作，比如个性化的问候，或是改变图片库中展示的图片。

注释

注释是和代码一起的文本片段。浏览器会忽略注释。类似于 CSS，JavaScript 中可以添加注释。

/*
这里的所有内容都是注释。
*/

如果注释只有一行，将注释放在两个斜杠之后也是个选择，就像这样：

// 这是注释。

运算符

在下列表格中，介绍了一些最简单的运算符以及一些对应的示例，可以在 JavaScript 控制台中尝试这些示例。

运算符	解释	符号	示例
加	将两个数字相加或拼接两个字符串。	+	6 + 9;'Hello ' + 'world!';
减、乘、除	这些运算符的作用与基础算术一致。	-、*、/	9 - 3;8 * 2; //乘法在 JS 中是一个星号9 / 3;
赋值	你已经见过了：为变量赋值。	=	let myVariable = '鲍勃';
严格相等	测试两个值是否相等以及是否是相同的数据类型，并返回一个 true/false（布尔）结果。	===	let myVariable = 3;myVariable === 4;
非、不等于	返回和先前逻辑上相反的值。非将 true 变为 false，等等。当它和相等运算符一起使用时，否定运算符测试两个值是否不相等。	!、!==	对于“非”，基本表达式是 true，但结果返回的是 false，因为我们否定了这个值：let myVariable = 3;!(myVariable === 3);“不等于”用不同的语法得出了基本上一样的结果。这里测试“myVariable 不等于 3”。返回 false，因为 myVariable 等于 3：let myVariable = 3;myVariable !== 3;

条件语句

条件语句是用来测试表达式的真假的代码结构。一个常用的条件语句是 if...else 语句。例如：

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("我最喜欢巧克力冰淇淋了！");
} else {
  alert("但是巧克力才是我的最爱呀……");
}

if () 中的表达式是一个测试。用（上文所提到的）严格相等运算符来比较 iceCream 变量与 chocolate 字符串是否相等。如果返回 true，则运行第一个代码块；如果返回 false，则运行 else 关键字之后的第二个代码块。

函数

函数是一种避免重复编写相同代码的好方式。你已经看到了一些函数的使用示例了。比如：

let myVariable = document.querySelector("h1");

alert("你好！");

document.querySelector 和 alert 是浏览器内置的函数。

如果你发现有个像变量名，但后面跟着小括号——()——的东西，它很可能是函数。函数通常接收参数：函数用来执行特定的任务。参数位于小括号内，多个参数之间用逗号分开。

比如， alert() 函数在浏览器窗口内弹出一个警告框，但还应为其提供一个字符串参数，告诉它警告框里要显示的内容。

你也可以定义你自己的函数。在下面的例子中，我们创建了一个接收两个数字参数的函数，并对这两个参数做乘法：

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

尝试在控制台中运行这个函数；然后多试几组参数。比如：

multiply(4, 7);
multiply(20, 20);
multiply(0.5, 3);

备注：return语句告诉浏览器将 result 变量返回到函数外面。这一点很有必要，因为函数内定义的变量只能在函数内使用。这叫做变量的作用域。

事件

事件处理器能为网页添加真正的交互。它们是监听浏览器活动的代码块，并在响应中运行代码。最明显的例子就是处理点击事件，当你用鼠标点击时，浏览器会触发该事件。作为演示，在控制台中输入下面的代码，然后点击网页的任意位置：

document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼！");
});

将事件处理器与元素绑定有许多方法。这里我们选择了 <html> 元素，然后调用了它的 addEventListener() 函数，并传递要监听的事件名（'click'）和事件发生时要运行的函数。

刚刚我们传递给 addEventListener() 的函数被称为匿名函数，因为它没有名字。匿名函数还有另一种书写方式，我们称之为箭头函数。箭头函数使用 () => 而不是 function ()：

document.querySelector("html").addEventListener("click", () => {
  alert("别戳我，我怕疼！");
});

完善示例网站

现在你已经具备了一些 JavaScript 基础，下面让我们为示例网站添加一些新特性。

在继续下面的内容之前，将 main.js 文件中的内容都删掉——即你在“Hello world!”示例中添加的内容——并保存这个空文件。要是不这样做的话，已经存在的代码将会与你下面要写的新代码产生冲突。

添加一个图片切换器

在本小节，你将会学习如何使用 JavaScript 和 DOM API 特性交替显示两张图片。当用户点击图片时进行切换。

1. 选择一张你想在页面上展示的图片。理想情况下，这张图片的尺寸与之前添加的图片的尺寸尽可能相同。
2. 将这张图片保存在 images 目录中。
3. 将这张图片重命名为 firefox2.png。
4. 将下列的 JavaScript 代码添加到 main.js 文件：

const myImage = document.querySelector("img");

myImage.onclick = () => {
  const mySrc = myImage.getAttribute("src");
  if (mySrc === "images/firefox-icon.png") {
    myImage.setAttribute("src", "images/firefox2.png");
  } else {
    myImage.setAttribute("src", "images/firefox-icon.png");
  }
};

发生的事情是这样的。把 <img> 元素的引用存储在 myImage 变量中。接下来，让它的 onclick 事件处理器属性等于一个无名函数（“匿名”函数）。这样每次点击图片时：

1. 获取这张图片的 src 属性值。
2. 用一个条件句来判断 src 的值是否等于原始图片的路径：
   1. 如果是，则将 src 的值改为第二张图片的路径，在 <img> 内强制加载第二张图片。
   2. 如果不是（意味着它已经修改过）, 则把 src 的值重新设置为原始图片的路径，即原始状态。

添加个性化欢迎信息

接下来，让我们在用户第一次访问站点时将页面标题修改为个性化欢迎信息。这个欢迎消息会一直存在。名字信息会由Web 存储 API 保存下来，即使用户关闭页面之后再重新打开。还会添加一个选项，改变用户名字以更新欢迎信息。

1. 打开 index.html，在 <script> 元素前添加下列代码：

   <button>Change user</button>

2. 打开 main.js，将下列代码原封不动地添加到文件的底部。将获取新按钮和标题的引用，并存储到变量中：

   let myButton = document.querySelector("button");
   let myHeading = document.querySelector("h1");

3. 添加下列设置个性化欢迎信息的函数。现在什么都还没发生，但一会就会发生了。

   function setUserName() {
     const myName = prompt("Please enter your name.");
     localStorage.setItem("name", myName);
     myHeading.textContent = `Mozilla is cool, ${myName}`;
   }

   setUserName() 函数包含一个 prompt() 函数，与 alert() 类似会弹出一个对话框。prompt() 函数的功能更多，需要用户输入数据，并在用户点击确定后将数据存储在一个变量中。在这个例子里，我们要求用户输入一个名字。接下来，代码调用 localStorage API，它允许我们将数据存储在浏览器中并供后续获取。我们使用 localStorage 的 setItem() 函数创建并存储一个'name' 的数据项，并将它的值设置为包含用户名的 myName 变量。最后将标题的 textContent 属性设置为带有用户新设置的名字的字符串。

4. 在函数声明的后面添加下列条件语句块。我们称之为初始化代码，因为它在初次加载时开始工作。

   if (!localStorage.getItem("name")) {
     setUserName();
   } else {
     const storedName = localStorage.getItem("name");
     myHeading.textContent = `Mozilla is cool, ${storedName}`;
   }

   这里的第一行使用取非运算符（逻辑非，用 ! 表示）检测 name 数据是否存在。若不存在，调用 setUserName() 创建 name 数据。若存在（即用户上次访问时设置了用户名），调用 getItem() 获取保存的名字，然后像 setUserName() 中那样设置标题的 textContent。

5. 设置按钮的 onclick 事件处理器。按钮点击时，运行 setUserName() 函数。这样用户就可以通过点击按钮设置新名字了。

   myButton.onclick = function () {
     setUserName();
   };

用户名为 null ?

运行示例代码，弹出输入用户名的对话框，试着点击取消按钮。此时标题会显示为 Mozilla is cool, null。这是因为取消提示对话框后值将设置为 null。*null 是 JavaScript 中的一个特殊值，表示引用的值不存在。

也可以不输入任何名字直接点击确认*，你的标题会显示为 Mozilla is cool,，原因么显而易见。

要避免这些问题，应该检查用户没有输入空名字。更新 setUserName() 为：

function setUserName() {
  const myName = prompt("Please enter your name.");
  if (!myName) {
    setUserName();
  } else {
    localStorage.setItem("name", myName);
    myHeading.textContent = `Mozilla is cool, ${myName}`;
  }
}

翻译一下就是：如果 myName 没有值，就再次从头运行setUserName()。如果有值（如果上面的表达式不为真），就把值存储到 localStorage 并设置为标题文本。

总结

按照上面的做法得到了下面的页面

发布你的网站

一旦完成了代码编写和构成网站的文件的组织工作，你就需要把它们全部放在网上，这样人们才能找到它。本文描述如何以最简便的方式将你的简单示例上线至网络。

有哪些方法可供选择

1. 购买 Web 托管服务和域名
2. 在线工具：如 GitHub 。GitHub 有一个非常有用的特性叫 GitHub Pages，允许你发布网站。免费使用，但是功能有限。

参考文献

1. https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Getting_started/Your_first_website