网络前端初步 总结

前置工具

前端所需的工具

  • 首先需要写代码的工具
    • 推荐 VS Code.
    • 编写 HTML, CSS, JavaScript 够用了.
  • 然后是修图的工具
    • 推荐 GIMP.
    • 比 Photoshop 入门简单.
  • 拥抱开源!

一些常用学习网站

  • MIT 的一门 Web 开发入门课.
    • 详细介绍了网页的前端与后端制作, 只关注前端的话只用学 HTML, CSS, JavaScript.
    • 这门课 2021 年的授课视频在 Youtube 上可以看到(这一年的比较清晰).
  • MDN 文档.
    • 可以查到几乎所有的网页编写资料.
  • 菜鸟教程.
    • 比 MDN 写得更简略.

认识网页前端

网页由 HTML, CSS, JavaScript 三部分构成.

  • HTML: 是网页的"骨架". 有了它, 网页就有了基本的框架.
  • CSS: 是网页的"皮肤". 有了它, 网页就有了各种各样的样式.
  • JavaScript: 是网页的"肌肉". 有了它, 网页就可以有各种运动效果.

下面先给几个例子:

网页由 HTML, CSS, JavaScript 三部分构成.

在 VS Code 里打开一个工作区. 新建一个 index.html, 输入以下内容.

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>我的网页</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>你好，世界！</h1>
    </body>
</html>

网页由 HTML, CSS, JavaScript 三部分构成.

效果如下:

effect

具体的细节后面再说.

网页由 HTML, CSS, JavaScript 三部分构成.

我们来试试加入 CSS 来改变一下样式.

在之前的 index.html 中加入一行, 成为

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>我的网页</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>你好，世界！</h1>
    </body>
</html>

网页由 HTML, CSS, JavaScript 三部分构成.

并且, 在同级目录新建一个文件 style.css(和上面的 href="style.css" 相对应), 写:

h1 {
    color: purple;
    font-size: 44px;
    text-align: center;
}

刷新页面, 现在的效果为

with css

文字是居中的, 且文字大小和文字颜色发生了变化.

网页由 HTML, CSS, JavaScript 三部分构成.

再来试试加入一些 Javascript 吧!

修改 index.html 如下:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>我的网页</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1 id="firstTitle">你好，世界！</h1>
    </body>
    <script src="script.js"></script>
</html>

网页由 HTML, CSS, JavaScript 三部分构成.

然后, 再在同级目录下添加一个 script.js, 输入

title = document.getElementById("firstTitle");
title.innerHTML = "这是 JavaScript 修改后的标题!";
title.style.color = "green";

效果为:

  • 因为网页一加载就会执行 script.js, 所以直接就会改变标题.
  • 但是我们可以加入 if, for, 按钮等元素进行控制. 后面再说.

HTML 的基本元素

HTML 基本框架

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <title>我的网页</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <!-- contents -->
    </body>
</html>
  • 几乎所有的 HTML 元素(标签)都要写成 <name> 和 </name> 开闭的形式, 类似于 C 语言的 { 和 }.
  • 除了有一些标签, 中间一般不会夹元素, 比如上面的 <meta>, <link>, 还有后面会说到的 <img> 等, 那么它们一般不会有闭合标签.
  • HTML 的注释的写法是 <!-- XXX -->. 注释的内容不会被浏览器渲染.
  • HTML 最外面有一个固定的大标签 <html> 代表整个页面, 然后在 <html> 里有 <head> 和 <body> 两个标签, 分别表示标题部分和主要页面部分.
  • HTML 常用的标签有:
    • <p>contents</p> 段落, 段落结尾换行.
    • <h1>title</h1> 标题, 可以用 <h1> <h2> 一直到 <h6>, 大小从大到小.
    • <a href="your-link">contents</a> 超链接, 可以连接页内, 也可以连接页外.
    • <div>contents</div> 万能块状标签, 用来划分页面元素, 方便加 CSS 和 JavaScript.
  • HTML 常用的标签有: (续)
    • <br> 换行.
    • <hr> 分割线.
    • <b>contents</b> 加粗.
    • <img src="path" alt="desc">插入图片, 其中路径为 path, 描述为 desc.
    • <button type="button" onclick="js-code"></button> 按钮, 按下后执行 onclick 后面的 JavaScript 代码.
  • 还有更多的标签, 但可能不太用得到. 可以逛 MDN 或者菜鸟教程了解更多的信息.

HTML 和 CSS 配合使用

在 HTML 中引用 CSS

  • HTML 是单独的一个文件, 默认不会与其他文件产生关联.
  • 所以需要导入 CSS.
  • 只需要在 title 部分加入一句
<link rel="stylesheet" href="style.css"/>

其中 href 后是 CSS 样式文件的目录.

就可以应用这个文件中的 CSS 样式了.

CSS 基础格式

所有的 CSS 采用形如

name {
    attribute1: value1;
    attribute2: value2;
    /* ... */
}

的形式进行格式设置. 其中:

  • name 是标签名或 class 名或 id 名.
  • attribute 是属性.
  • value 是值.
  • /* Contents */ 是注释(类似 C 的).

对标签名进行格式设置

比如, 我们要对所有的 <p> 和 <li> 进行格式设置, 设置为红色, 行高设置为 1.5 倍, 字号设为 24px. 那么我可以写

p, li {
    color: red;
    line-height: 1.5;
    font-size: 24px;
}

这样， 所有在 HTML 中写的 <p> 和 <li> 都会应用这种格式.

CSS 中有很多属性可以更改, 而且很多属性有注意事项. 在应用属性前, 可以查一查 MDN 或者菜鸟教程了解更多.

对 class 名和 id 名进行格式设置

有些时候我们不想让某种标签的全部元素应用相同的格式, 比如让某一个 <p>标签有以上的格式, 那么可以使用 HTML 的 class 或 id 功能.

在 HTML 中我们这样写 <p> 标签:

<p class="className">content1</p>
<p id="idName">content2</p>

这里有两种写法, 我们可以对 class 名或 id 名进行 CSS 样式设置为:

.className {
    /* 内容略, 注意 className 前的 . */
}
#idName {
    /* 内容略, 注意idName 前的 # */
}

class 和 id 的区别

  • 在 HTML 中, 可以有多个元素有着同样的 class, 一个元素可以有多个 class.
    • 多个 class 的语法是
    <p class="class1 class2 class3">contents</p>
  • 在 HTML 中, 只能有唯一的一个元素有着某个 id, 一个元素只能有唯一的一个 id.
  • 在使用 CSS 的时候, 避免使用 id 来进行格式设计, 而是使用 class.

思考题: 如果一个元素, 它的标签进行了格式设置, 有多个 class 且也进行了格式设计, 同时也有一个 id 进行了格式设计(虽然最好不要这样). 如果它们的格式有冲突, 哪个的优先级最高?

使用 JavaScript 将页面动起来

JavaScript 简介

  • JavaScript 是 Web 的编程语言.
  • 可以看菜鸟教程学习 JavaScript 基础. 你会发现它和 C 和 Python 十分相像!
    • 有着和 C 几乎一模一样的 for, if, while, switch 等。
    • 和 Python 一样是解释型语言, 弱类型.
  • 所以学起来很快!

使用 JavaScript 操纵 HTML

  • 使用
const node = document.getElementById("idName");

返回一个 idName 对应的 HTML 元素的索引.

  • 使用
const nodeArray = document.getElementsByClassName("className");

返回一个 className 对应的 HTML 元素组成的 HTML Collection, 可以用 for 循环遍历:

for(let i = 0; i < nodeArray.length; i++) {
    // Do something on nodeArray[i]
}

使用 JavaScript 操纵 HTML

  • 更改对象的内部 HTML
document.getElementById("idName").innerHTML= "newHTML";
  • 更改对象的属性(比如是一张图片更改 src)
document.getElementById("pic").src = "newPath";
  • 更改对象的样式(比如更改文字颜色)
document.getElementById("para").style.color = "newColor";

使用更多有意思的东西

  • HTML 的按钮元素
<button type="button" onclick="js-code">Name</button>

可以把 onclick 后面的 js-code 改为一串 javaScript 代码, 一般是某个函数的入口

  • 显示/隐藏 HTML 元素

有个样式属性叫做 display.

document.getElementById("divName").style.display = "none";
// 隐藏
document.getElementById("divName").style.display = "block";
// 显示

学会网页设计啦!

那就开始做吧! 可以找个网页抄抄.

找到网页设计思路

  • 可以看看别的网页, 按下 F12 键可以看到网页源代码.
  • 听一听 MIT Weblab 的课(见这一页).
  • 自己头脑风暴.

如何收集材料

  • 把组里摸鱼的拉出来让他们收集, 转移矛盾.
  • 谷歌, 维基百科, 知网.

欢迎来我们网页逛一逛!

(Advanced)网页部署

大致流程

  • 建立 GitHub 仓库

请自行搜索, 将自己的代码库用 git 上传到某个 GitHub 仓库去.

  • 选择挂载的网站. 常见的选择有
    • GitHub Pages.
    • Cloudflare.
  • 定期 commit, 进行构建.

GitHub Pages

  • 请看这篇教程.
  • 优点:
    • 免费;
    • 速度还行;
    • 自动构建.
  • 缺点:
    • 代码必须公开;
    • 只能对一个分支进行构建.
  • 这是我们用 GitHub Page 进行挂载的网页.

Cloudflare

  • 请看这篇教程.
  • 优点:
    • 免费;
    • 自动构建;
    • 可以使用私人仓库;
    • 可以挂载多个网站;
    • 可以同时对多个分支进行构建.
  • 缺点:
    • 有点慢, 难连接.
  • 这是我们用 Cloudflare 进行挂载的网页.

谢谢观看!

来我们的 GitHub 仓库逛一逛吧! (求个 Star 😀)