在线简历 | 开发静态网站

2020-05-03 本文已影响0人空无一码

本节课我们将使用vs code 编辑器和Chrome浏览器开发一个简单的纯静态网站，掌握web全栈工程师需要掌握html、css和JS的基础前端技能。

首先打开vs code，通过文件菜单栏新建一个文件，取名为index.html，然后粘贴以下内容到文件中：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>个人网站</title>
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
    </body>
</html>

然后，Mac系统上使用command + s保存文件到桌面，然后如何在浏览器打开查看效果呢？

第一种方式是先最小化到桌面，然后到桌面右击index.html文件，选择使用浏览器打开；

第二种更好，不过需要安装一个vs code 的插件，点击左侧的插件功能图标，输入 open in browser 搜索，找到搜索到的插件，点击安装后，我们在vscode 通过右击文件编辑区，选择通过浏览器打开即可，当然也可以通过其提示的快捷键打开，比如Mac 系统使用 Alt + B打开。

相信大家很快就看到了我们第一个网页的效果了，但是简单的网页背后包含了大量的web的知识，这里我们简单谈一谈。

首先什么是HTML？

HTML 是 HyperText Markup Language 的简称，中文意思为超文本标记语言，是一种用于创建网页的标准标记语言，它运行在浏览器上，由浏览器来解析。

它不是一种编程语言，而是一种标记语言，一套标记标签 (markup tag)

它使用标记标签来描述网页
HTML文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

什么是 HTML 标签？

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签,开始和结束标签也被称为开放标签和闭合标签

在上面的例子中，<!DOCTYPE>声明有助于浏览器中正确显示网页，而其他示例中标签的作用如下：

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

当然，我们常用的标签还有div 标签，img标签、button、label、span、a等标签，以及html5这个新规范添加的section、header等语义化标签。

对于这些标签的使用，建议大家完整的去看一下菜鸟教程中的HTML教程 https://www.runoob.com/html/html-tutorial.html 或MDN的对应教程 https://developer.mozilla.org/zh-CN/docs/Web/HTML，先大体了解一下，用到时再去细查。

这里我们简单讲解一下一些常识，比如html 标签，也称 html 元素的语法：

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

讲完标签后，我们再谈一谈标签的属性。

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。
双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name='John "ShotGun" Nelson'。
属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

常用的属性有：

class 为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id 定义元素的唯一id
style 规定元素的行内样式（inline style）
title 描述了元素的额外信息 (作为工具条使用)
接下来我们去尝试一下使用style 这个属性，比如我们设置这个网站的背景色为红色，示例代码如下：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>个人网站</title>
    </head>
    <body style="background: red;">
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
    </body>
</html>

此时，我们使用Chrome浏览器打开它，就能看到网页的背景变成红色了，我们只是在 body 标签中的style属性中设置了background 这个Css属性而已。

什么是CSS呢？

CSS 是Cascading Style Sheets的缩写，译为层叠样式表，定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样，通过使用 CSS 我们可以大大提升网页开发的工作效率！

当读到一个样式表时，浏览器会根据它来格式化 HTML 文档，插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

要使用内联样式，你需要在相关的标签内使用样式（style）属性，Style 属性可以包含任何 CSS 属性，比如我们前面让背景变红色使用的就是内联的方式。由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。

当单个文档需要特殊的样式时，就应该使用内部样式表。我们可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
    <style>
        body {background: red;}
    </style>
</head>

我们把body标签中的style属性删除后，也能看到相同的效果，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人网站</title>
        <style>
            body {background: red;}
        </style>
    
    </head>
    <body>
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
    </body>
</html>

而当样式需要应用于很多页面时，外部样式表将是理想的选择，不过需要使用 <link>标签链接到样式表， <link>标签放在HTML文档的头部：

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存，当然使用了css处理器的除外，比如less的使用.less为扩展名，而scss和stylus则分别使用.scss和.styl。

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。比如我们在三种方式中都定义了页面的背景色，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人网站</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <style>
            body {background: yellow;}
        </style>
    
    </head>
    <body style="background: red;">
        <h1>我的第一个标题</h1>
        <p>我的第一个段落</p>
    </body>
</html>

mystyle.css中也定义了背景色：

body {
    background: blue;
}

此时，浏览器如何显示呢？红黄蓝哪个更好呢？

这就需要一个规则，没有规则就乱套啦。因为样式表允许以多种方式规定样式信息，样式可以规定在单个的 HTML 元素中，也可以在 HTML 页的头元素中，还可以在一个外部的 CSS 文件中，甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

基于这个优先级的规则，上面的例子中内联样式设置背景色为红色，内部样式表则为黄色，而外部则为蓝色，通过我们没有设置前为白色，推断出默认样式为白色，根据顺序，我们得出最后背景色为红色。

更多的css的基础知识请通过 https://www.runoob.com/css/css-tutorial.html 或 https://developer.mozilla.org/zh-CN/docs/Web/CSS 学习或查阅。

一个小练习

了解了HTML和CSS的一些基础概念后，我们来做一个小练习，实现一个红色的正方形，示例代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人网站</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <style>
            div {
              width: 300px;
              height: 300px;
              background: red;
            }
        </style>
    </head>
    <body>
        <h1>红色的正方形</h1>
        <div></div>
    </body>
</html>

可以看到，我们通过CSS设置一个div 块级元素的宽高，就轻易实现了，但是我们怎么实现让其上下左右居中呢？这是一个最常见的面试题。

有很多种方法，这里老师只演示老师用得最多的一种，示例代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人网站</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <style>
            body {
                  display: flex;
                  justify-content: center;
                  align-items: center;
            }
            div {
              width: 300px;
              height: 300px;
              background: red;
            }
        </style>
    </head>
    <body>
        <h1>红色的正方形</h1>
        <div></div>
    </body>
</html>

此时，我们刷新并没有看到我们期待的效果，因为flex布局默认是横向的，所以我们需要在display: flex;这个css属性后面加上flex-direction: collumn; 此时我们就能看到左右居中啦，但是为何上下没有居中呢？这是因为html和body元素的高度根据其子元素的高度决定，我们需要设置它们的高度为100%，最终程序如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人网站</title>
        <style>
            html {
              height: 100%;
            }
            body {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
            }
            div {
              width: 300px;
              height: 300px;
              background: red;
            }
        </style>
    </head>
    <body>
        <h1>红色的正方形</h1>
        <div></div>
    </body>
</html>

此时我们就能看到一个上下左右都居中的正方形啦。但是如果我们想点击正方形，让它变成绿色，这个怎么实现呢？

这就需要用到javascript。

什么是JavaScript呢？

JavaScript 是 Web 的编程语言，几乎所有现代的 HTML 页面都要使用 JavaScript

为什么学习 JavaScript? 因为一个完整的web网页基本都有HTML、CSS和JavaScript组成，它们关系如下：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为

JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script>
    alert("我的第一个 JavaScript");
</script>

现在我们无需理解上面的代码。只需明白，浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

我们可以在 HTML 文档中放入不限数量的脚本。脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。通常的做法是把函数放入 <head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

我们也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在 <script>标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>

可以将脚本放置于<head> 或者 <body>中，放在 <script>标签中的脚本与外部引用的脚本运行效果完全一致。

JavaScript 函数和事件

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。HTML 事件是发生在 HTML 元素上的事情，当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件可以是浏览器行为，也可以是用户行为，以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 某个元素被点击

在事件触发时 JavaScript 可以执行一些代码，HTML 元素中可以添加事件属性，比如我们要实现点击红色正方形，可以在div添加一个click事件属性，示例代码如下：

<div id="demo" onclick="getElementById('demo').style.background='green'"></div>

在vs code 中改完后，我们刷新一下浏览器，点击红色正方形后就能看到它变为绿色。当然，我们也可以使用script标签的方式实现样的功能：

<h1>红色的正方形</h1>
<div id="demo" onclick="changeColor()"></div>
<script>
  function changeColor() {
    document.getElementById('demo').style.background='green';
  }
</script>

甚至，我们建一个changeColor.js文件，通过外部文件引进来，也是一样的：

  function changeColor() {
         document.getElementById('demo').style.background='green';
  }

此时，index.hml中的相关部分改成：

<h1>红色的正方形</h1>
<div id="demo" onclick="changeColor()"></div>
<script src="changeColor.js"></script>

可以看到，在HTML中使用js，和CSS一样，也有三种使用的方式。同时给HTML添加事件，还可以使用 addEventListener() 方法，它允许向同一个元素添加多个事件，且不会覆盖已存在的事件：

  <div id="demo"></div>
  <script>
      document.getElementById('demo').addEventListener('click', (el) => {
        el.target.style.background='green';
      });
  </script>

可以看到，此时我们在div中去掉了onclick事件属性，而是通过标签元素上的addEventListener 添加事件监听函数，然后通过el这个事件对象的target 获取元素，进而改变其样式。

那么前面用到的document 是什么呢？当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

通常，通过 JavaScript，您需要操作 HTML 元素。为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id，本例查找 id="demo" 元素：

var demoDiv=document.getElementById("demo");

总之，通过 HTML DOM，我们不仅可以访问 JavaScript HTML 文档的所有元素，而且可以改变其内容和各种属性。

经过前面的学习，我们已经初步掌握了html、css和js的作用和相互间的关系，以及Js是如何通过浏览器提供 DOM API 来操作HTML元素及其CSS样式的。

对于JS我们只是简单使用了一下，并没有系统的学习，更多的js知识推荐大家，先通过 https://www.runoob.com/js/js-tutorial.html、https://developer.mozilla.org/zh-CN/docs/Web/JavaScript、https://wangdoc.com/javascript/basic/history.html 和 https://es6.ruanyifeng.com/等文字教程学习或查阅。

大家系统看过以后，在后面的教程中，我再展开讲解所用到的js知识。