写在前面
从各大高校的综合实验楼探测到金矿到这两天软院学子上热搜，谣言截图都是高校的官网页面。
辟谣的时候都是说造谣手段为：“p图”、“PS”、“虚假站点”、“网页制作”。其实哪有这么麻烦，根本不需要去克隆一个一样的网页甚至建个虚假站点（网站）。
流言止于智者，看完本文，你也能成为这方面的智者。
作为一篇 《写给非计算机相关专业的网页制作入门与防谣言坑骗指北》，本文力求简单易懂，重点在于容易上手。
本文创作时使用的是 windows 10、Edge、csdn的markdown编辑器
本文将包括以下几部分内容：
- 如何生成/制作一个网页文件
- 如何编写一个不规范的网页文件
- 如何快速制作一个*言网页
- 用浏览器的开发者工具抓取音乐、视频的地址并下载
正文
如何生成/制作一个网页文件
在window中文件类型是以文件后缀名来区分的，网页文件的后缀名为 .html和.htm (windows系统中这两种后缀名没有区别，在其他系统可能有区别)。
当你双击打开一个文件时，系统会自动根据文件后缀名来选择打开的程序。（也就是说系统会提前跟一些应用程序打好招呼，什么后缀名的文件将由谁来打开。当然这种约定，我们也是可以手动去更改设置的。另说。）
生成一个网页文件的最快方式就是，鼠标右键新建一个以.txt为后缀名的文本文件，直接将文件后缀名修改为.html。（单击文件然后按键盘上的F2，就能快速重命名。）
通过这种方式，可以生成各种图标的文件。当然，这样的mp4、jpg 文件直接双击打开会告诉你“文件损毁”、“文件无法打开”啥的，因为它里面根本什么东西都没有！
常见后缀名
如果你的没有显示后缀名，打开 我的电脑 或者 资源管理器 , 勾选上 文件扩展名
点击图片查看大图
如何编写一个不规范的网页文件
你写得不规范，浏览器也能看的懂（正常解析、渲染），所以对于非专业的你，不需要去管那么多屁事。
对刚新建的网页文件右键，打开方式选择“记事本”，这也是本专业的学生入门时用的文本编辑器。
大多数新建的文件都是空白的，Word啥的除外。
现在我们输入（输个屁，把下面的文本复制粘贴过去。要每复制一行然后回车以下，全部复制一次性粘贴的话，换行会被沙雕的记事本给吃掉。）
写给非计算机相关专业的网页制作入门指北
写在前面
从各大高校的综合实验楼探测到金矿到这两天软院学子上热搜，谣言截图都是高校的官网页面。
辟谣的时候都是说造谣手段为：“p图”、“PS”、“虚假站点”、“网页制作”。其实哪有这么麻烦，更不需要去建个虚假站点（网站）。
保存（键盘操作：Ctrl S），双击网页文件打开，如果已经打开，按 F5 刷新页面即可。看到以下内容：
image
你可能会奇怪，这个沙雕的浏览器怎么把我的换行给吃掉了。
其实浏览器是比较傲慢的，它无视所有键盘敲入的回车换行，你再怎么敲打回车键也没用。如果你想换行，请输入这个 <br/> , 这个标签会告诉浏览器在此处需要换行了。
点击图片查看大图
千万记得保存，保存了修改才能生效。 按F5刷新页面
点击图片查看大图
下面就要介绍到网页的主要语言, 它还算不上一个编程语言，它就像一种文字标签，你一段文字打上一个标签，他就能呈现这种标签相应的样式 （指示浏览器将其渲染成什么样子）。
打上加粗标签
<b>，它就能加粗，打上斜体标签 <i> , 它就变成斜体，而标签本身不会显示出来。而且标签总是成双成对的，先开始后闭合。比如加粗以行字：
<b>我很粗</b>, <i>我是斜的</i>。也有个别标签独自出现，比如
<hr> , 这个标签会被浏览器渲染成一条 细细的分割线，不近视的同学应该看得清楚。
现在我是使第一行加粗加大让他长得像一个标题。
那么在左边加上 <h1>，在右边加上</h1>
然后 写在前面 这几个字也要加粗加大，但是要比标题小一些，算是个小标题。
那么在左边加上 <h2>，在右边加上</h2>
文本文件现在是这样的：
点击图片查看大图
千万记得保存，保存了修改才能生效。 按F5刷新页面
聪明的你可能会想有没有
<h3></h3> <h4></h4> <h4></h3> <h5></h5> 并且它们的字号越来越小，确实是这样的。标签
<h1></h1> 可以联想到 单词 heading标签
<br/> 可以联想到单词 break标签
<b></b> 可以联想到单词 bold...
还有其他很多标签，每个标签都自己的含义，称为标签语义化，一篇语义化的网页代码，就跟合唱奏乐一样，有急有缓，有轻有重。没有标签指示的网页文本就像只有词而没有曲谱和指挥的合奏。
如何快速制作一个*言网页
认识敌人，才能消灭敌人；认识谣言，才能消灭谣言。--沃兹基·硕德
百度搜索“XX大学教务管理系统”，我就在外面看看不进去。
点击图片查看大图
按下F12 键，弹出开发人员工具，不要慌，随我来。
点击图片查看大图
点击这个 选择元素 ，只要点一下，你就启用了这个小功能，然后鼠标在网页上晃，鼠标滑过的元素（标签的另一种叫法）的大小位置会显示出来。
点击图片查看大图
点击图片查看大图
点击一下，会自动定位那一行网页文本
点击图片查看大图
发现这四个字被<em></em> 标签标记着，直接在这四个字上双击即可修改，修改完在其他地方点一下，就可以完成修改
点击图片查看大图
点击图片查看大图
再看到右边，有
<em></em> 标签的样式，点击 小红块，直接修改 <em></em> 的 color 值
点击图片查看大图
点击图片查看大图
改后变成了这个样子：
点击图片查看大图
你还进行删除和增加操作元素（标签的另一种叫法，除了叫做element，在一些语境下还能叫做node节点，因为一层一层像一颗树一样）。
选择这个图片：
点击图片查看大图
在元素上右键，删除元素，这个图片就没有了。如果没有用，就再试一次，因为第一次你可能选中的是外一层的
<a>标签，而不是图片标签 <img>。
点击图片查看大图
刷新一下页面，所有一切又还原了。
总结一下
我们先学习了网页的最基本的制作方法和流程，然后再学习了windows自带的浏览器Edge的开发人员工具的简单方法，修改网页上的文字，删除图片。
希望各位以后碰到这种网页截图切勿上当受骗（给你发支付宝余额或者支付记录的截图啥的，现在你也会了改了吧，hhhh）或者传播谣言，谣言止于智者，至少是看完本文的各位。
利用这个开发者工具和相同原理，我们还能做些其他事情，比如把网页中一些图片抠出来，获得到它的链接；把网页中的视频、音乐资源找出来，然后下载下来，但是并不是所有网页视频、音乐都可以搞定，专业的视频网站的视频是经过加密，或者通过专用的播放器播放的，这个是不能简单的搞定的。
开发者工具选择 网络，下面的内容类型选择 媒体，然后点击网页中的播放按钮，就出下面的资源。
右键选择复制URL.
点击图片查看大图
新建一个页面，粘贴如url到地址栏回车访问，但抱歉的是，我也不知道怎么用Edge下载这样一个音乐资源
但是用Chrome谷歌浏览器是可以的， 这也是我所建议的浏览器，因为考虑到各位可能没有这个浏览器，所以选择了windows10 自带的 Edge。
下面说说Chrome应该怎么做：
打开Chrome的开发者工具也是F12键，选择 Network，下面 在过滤器栏中选择 Media。（没错就是那个，我只是顺便告诉你那里是放着很多的资源过滤器。启用某个过滤器，就会过滤掉除此之外的所有类型的资源。）
然后按F5， 刷新页面。出现以下画面。
点击图片查看大图
在资源上右键，选择 open in new tab ， 这样资源的url在一个新的页面被打开（一般情况下，不管是图片资源还是视频资源，只要获得其url链接，就能直接访问），
点击图片查看大图
点击这三个点，即可下载
点击图片查看大图
视频也是一样的
点击图片查看大图
网友评论