网络前端初步总结

前置工具

前端所需的工具

首先需要写代码的工具
- 推荐 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 的注释的写法是 . 注释的内容不会被浏览器渲染.
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 的课(见这一页).
自己头脑风暴.

如何收集材料

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

欢迎来我们网页逛一逛!

在 Cloudflare 挂载;
在 GitHub Pages 挂载;
GitHub 仓库.

(Advanced)网页部署

大致流程

建立 GitHub 仓库

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

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

GitHub Pages

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

Cloudflare

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

谢谢观看!

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

1 / 36

网络前端初步总结

网络前端初步 总结

网络前端初步总结