非计算机专业学p还是c,写给非计算机相关专业的网页制作入门与防谣言坑骗指北...

网页制作入门与防谣言坑骗指北..."/>

非计算机专业学p还是c,写给非计算机相关专业的网页制作入门与防谣言坑骗指北...

写在前面

从各大高校的综合实验楼探测到金矿到这两天软院学子上热搜，谣言截图都是高校的官网页面。

辟谣的时候都是说造谣手段为：“p图”、“PS”、“虚假站点”、“网页制作”。其实哪有这么麻烦，根本不需要去克隆一个一样的网页甚至建个虚假站点(网站)。

流言止于智者，看完本文，你也能成为这方面的智者。

作为一篇 《写给非计算机相关专业的网页制作入门与防谣言坑骗指北》，本文力求简单易懂，重点在于容易上手。

本文创作时使用的是 windows 10、Edge、csdn的markdown编辑器

本文将包括以下几部分内容：

如何生成/制作一个网页文件

如何编写一个不规范的网页文件

如何快速制作一个*言网页

用浏览器的开发者工具抓取音乐、视频的地址并下载

正文

如何生成/制作一个网页文件

在window中文件类型是以文件后缀名来区分的，网页文件的后缀名为 .html和.htm (windows系统中这两种后缀名没有区别，在其他系统可能有区别)。

当你双击打开一个文件时，系统会自动根据文件后缀名来选择打开的程序。(也就是说系统会提前跟一些应用程序打好招呼，什么后缀名的文件将由谁来打开。当然这种约定，我们也是可以手动去更改设置的。另说。)

生成一个网页文件的最快方式就是，鼠标右键新建一个以.txt为后缀名的文本文件，直接将文件后缀名修改为.html。(单击文件然后按键盘上的F2，就能快速重命名。)

通过这种方式，可以生成各种图标的文件。当然，这样的mp4、jpg 文件直接双击打开会告诉你“文件损毁”、“文件无法打开”啥的，因为它里面根本什么东西都没有！

常见后缀名

如果你的没有显示后缀名，打开 我的电脑 或者 资源管理器 , 勾选上 文件扩展名

点击图片查看大图

如何编写一个不规范的网页文件

你写得不规范，浏览器也能看的懂(正常解析、渲染)，所以对于非专业的你，不需要去管那么多屁事。

对刚新建的网页文件右键，打开方式选择“记事本”，这也是本专业的学生入门时用的文本编辑器。

大多数新建的文件都是空白的，Word啥的除外。

现在我们输入(输个屁，把下面的文本复制粘贴过去。要每复制一行然后回车以下，全部复制一次性粘贴的话，换行会被沙雕的记事本给吃掉。)

写给非计算机相关专业的网页制作入门指北

写在前面

从各大高校的综合实验楼探测到金矿到这两天软院学子上热搜，谣言截图都是高校的官网页面。

辟谣的时候都是说造谣手段为：“p图”、“PS”、“虚假站点”、“网页制作”。其实哪有这么麻烦，更不需要去建个虚假站点(网站)。

保存(键盘操作：Ctrl S)，双击网页文件打开，如果已经打开，按 F5 刷新页面即可。看到以下内容：

image

你可能会奇怪，这个沙雕的浏览器怎么把我的换行给吃掉了。

其实浏览器是比较傲慢的，它无视所有键盘敲入的回车换行，你再怎么敲打回车键也没用。如果你想换行，请输入这个
, 这个标签会告诉浏览器在此处需要换行了。

点击图片查看大图

千万记得保存，保存了修改才能生效。 按F5刷新页面

点击图片查看大图

下面就要介绍到网页的主要语言, 它还算不上一个编程语言，它就像一种文字标签，你一段文字打上一个标签，他就能呈现这种标签相应的样式 (指示浏览器将其渲染成什么样子)。

打上加粗标签 ，它就能加粗，打上斜体标签 , 它就变成斜体，而标签本身不会显示出来。

而且标签总是成双成对的，先开始后闭合。比如加粗以行字： 我很粗, 我是斜的。

也有个别标签独自出现，比如

---

, 这个标签会被浏览器渲染成一条 细细的分割线，不近视的同学应该看得清楚。

现在我是使第一行加粗加大让他长得像一个标题。

那么在左边加上

，在右边加上

然后 写在前面 这几个字也要加粗加大，但是要比标题小一些，算是个小标题。

那么在左边加上

，在右边加上

文本文件现在是这样的：

点击图片查看大图

千万记得保存，保存了修改才能生效。 按F5刷新页面

聪明的你可能会想有没有

并且它们的字号越来越小，确实是这样的。

标签

可以联想到 单词 heading

标签
可以联想到单词 break

标签 可以联想到单词 bold

...

还有其他很多标签，每个标签都自己的含义，称为标签语义化，一篇语义化的网页代码，就跟合唱奏乐一样，有急有缓，有轻有重。没有标签指示的网页文本就像只有词而没有曲谱和指挥的合奏。

如何快速制作一个*言网页

认识敌人，才能消灭敌人；认识谣言，才能消灭谣言。--沃兹基·硕德

百度搜索“XX大学教务管理系统”，我就在外面看看不进去。

点击图片查看大图

按下F12 键，弹出开发人员工具，不要慌，随我来。

点击图片查看大图

点击这个 选择元素 ，只要点一下，你就启用了这个小功能，然后鼠标在网页上晃，鼠标滑过的元素(标签的另一种叫法)的大小位置会显示出来。

点击图片查看大图

点击图片查看大图

点击一下，会自动定位那一行网页文本

点击图片查看大图

发现这四个字被 标签标记着，直接在这四个字上双击即可修改，修改完在其他地方点一下，就可以完成修改

点击图片查看大图

点击图片查看大图

再看到右边，有 标签的样式，点击 小红块，直接修改 的 color 值

点击图片查看大图

点击图片查看大图

改后变成了这个样子：

点击图片查看大图

你还进行删除和增加操作元素(标签的另一种叫法，除了叫做element，在一些语境下还能叫做node节点，因为一层一层像一颗树一样)。

选择这个图片：

点击图片查看大图

在元素上右键，删除元素，这个图片就没有了。如果没有用，就再试一次，因为第一次你可能选中的是外一层的标签，而不是图片标签 。

点击图片查看大图

刷新一下页面，所有一切又还原了。

总结一下

我们先学习了网页的最基本的制作方法和流程，然后再学习了windows自带的浏览器Edge的开发人员工具的简单方法，修改网页上的文字，删除图片。

希望各位以后碰到这种网页截图切勿上当受骗(给你发支付宝余额或者支付记录的截图啥的，现在你也会了改了吧，hhhh)或者传播谣言，谣言止于智者，至少是看完本文的各位。

利用这个开发者工具和相同原理，我们还能做些其他事情，比如把网页中一些图片抠出来，获得到它的链接；把网页中的视频、音乐资源找出来，然后下载下来，但是并不是所有网页视频、音乐都可以搞定，专业的视频网站的视频是经过加密，或者通过专用的播放器播放的，这个是不能简单的搞定的。

开发者工具选择 网络，下面的内容类型选择 媒体，然后点击网页中的播放按钮，就出下面的资源。

右键选择复制URL.

点击图片查看大图

新建一个页面，粘贴如url到地址栏回车访问，但抱歉的是，我也不知道怎么用Edge下载这样一个音乐资源

但是用Chrome谷歌浏览器是可以的， 这也是我所建议的浏览器，因为考虑到各位可能没有这个浏览器，所以选择了windows10 自带的 Edge。

下面说说Chrome应该怎么做：

打开Chrome的开发者工具也是F12键，选择 Network，下面 在过滤器栏中选择 Media。(没错就是那个，我只是顺便告诉你那里是放着很多的资源过滤器。启用某个过滤器，就会过滤掉除此之外的所有类型的资源。)

然后按F5， 刷新页面。出现以下画面。

点击图片查看大图

在资源上右键，选择 open in new tab ， 这样资源的url在一个新的页面被打开(一般情况下，不管是图片资源还是视频资源，只要获得其url链接，就能直接访问)，

点击图片查看大图

点击这三个点，即可下载

点击图片查看大图

视频也是一样的

点击图片查看大图

写了三个小时，结束了，喜欢的，觉得有帮助，欢迎在下方小额打赏。