003 - 从一段鬼畜的密文说起
本帖最后由 不二如是 于 2021-6-4 16:50 编辑上一集：002 - 这个系列我们打算怎么玩
在线视频：
https://www.bilibili.com/video/BV1QW411N762?p=4
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
重要的<meta>标签
<meta> 标签的内容不会显示在网页中，但经常被机器（比如网页爬虫）解析。
所以，作为初学者可能用不到上面的知识点，要知道以下四个点。
★1、字符乱码
<meta>标签中charset="UTF-8"，可以解决中文字符乱码问题。
乱码案例1-a：
<!DOCTYPE html>
<html>
<head>
<title>懒得写（反正你们也看不到）</title>
</head>
<body>
<img id="target" src="../img/FishC.png" alt="鱼C-Logo" width="256px" height="256px">
<p>我知道，就算我在这里说你们什么坏话，你们也是不会知道の……因为，你们看到的页面肯定会是一坨坨的乱码~~~哈哈哈哈哈~~~</p>
</body>
</html>
见证奇迹的时刻，在<head>标签中添加（案例1-b）：
<head>
<meta charset="UTF-8">
</head>
结论：
记住，如果本地网页打开，没有出现乱码，这是浏览器帮你做了后台优化～
如果不加UTF-8，服务器是不会认识中文滴～
精力还很充沛的鱼油，可以看0 1 7 1 - Meta标签详述 | 【难忘粗心】换个维度理解<meta>。
★2、自适应
适合PC端的案例2-a（未指定大小的页面不适合移动端，但都适合PC端）：
<!DOCTYPE html>
<html>
<head>
<title>懒得写（反正你们也看不到）</title>
<meta charset="utf-8">
</head>
<body>
<h1>“自适应”演示</h1>
<p>请分别在PC和手机上打开该页面！</p>
<img id="target" src="../img/FishC.png" alt="鱼C-Logo" width="256px" height="256px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
此时在移动端打开会看到：
有点很诡异，有木有。
在head中添加一行神奇的代码（案例2-b）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
此时在移动端打开：
神奇的事情发生了，这样的页面才是在移动端上给人看的吗？！
★3、作者信息
百度搜素引擎优化：传送门
认真听课的鱼油，不知道发没发现这个彩蛋：
善用Meta description：
案例3:
<!DOCTYPE html>
<html>
<head>
<title>懒得写（反正你们也看不到）</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
<meta name="description" content="《零基础入门学习Web开发》案例演示">
<meta name="author" content="小甲鱼">
</head>
<body>
<h1>“自适应”演示</h1>
<p>请分别在PC和手机上打开该页面！</p>
<img id="target" src="../img/FishC.png" alt="鱼C-Logo" width="256px" height="256px">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
换一个角度演示下meta的name属性。
name属性很重要，当别人搜索时（信息匹配），添加这些属性属性的网页会被更容易索引到。
身处数字时代，越高的曝光度，越意味着，鱼油懂的～
而用了name，必须要使用content属性来增加内容。
先来添加关键字：
<meta name="keywords" content="C,C++,Python,Scratch,HTML5,CSS3,JavaScript,Qt,汇编,WinSDK">
添加描述网页内容：
<meta name="description" content="鱼C工作室|免费编程视频教学|编程技术交流|C语言|汇编|Python|win32|Delphi|加密与解密|Linux">
添加作者信息：
<meta name="author" content="Cononico">
当添加完这些信息，在搜索时就会看到：
这些属于基本套路，作为初学者一定要掌握哦～
★4、自动跳转
案例4中，在head中继续添加了一段神奇的代码:
<meta http-equiv="refresh" content="0;http://fishc.taobao.com">
0s跳转，简直是赤裸裸的广告（课堂演示啦{:10_297:} ）。
牢记鱼C案例库
好处多多，不需要解释...
速速收藏：传送门
彩蛋：致敬Hawking
http://xxx.fishc.com/forum/201803/14/160315uzvzyosntqbztaqv.jpeg
一段小小的视频（霍金客串生活大爆炸，“CIAO”的梗）：
**** Hidden Message *****
2018.3.14，霍金离开了地球...
霍金走的那天，是爱因斯坦的生日，而他出生的那天，是伽利略去世的日子。
或许这就是天选之人吧。
希望鱼油记得“编码”不同会带来天差地别的表达方式：
“CIAO”是意大利语，你好的意思。
法语中是再见。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：004 - 一只特立独行的猪
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
硬着头皮买 不二老师，请问这是一个视频系列的教程吗？ chmmoon 发表于 2018-3-26 10:42
不二老师，请问这是一个视频系列的教程吗？
《零基础入门学习Web开发》（HTML5 & CSS3）的同步（抢先）笔记，会时不时加戏～ 下载链接挂了.麻烦核实~~ -Pan 发表于 2018-3-26 15:11
下载链接挂了.麻烦核实~~
可以用～ 不二如是 发表于 2018-3-26 11:48
《零基础入门学习Web开发》（HTML5 & CSS3）的同步（抢先）笔记，会时不时加戏～
老师，我想问这个系列教程是视频吗~ 不二兄，笔记借我看一下 不二老湿，这节课的百度下载链接挂了{:10_266:} 骑着蜗牛狂奔 发表于 2018-3-28 20:36
不二老湿，这节课的百度下载链接挂了
不是挂了，因为发音问题，重新调整完再放出来～ 感谢楼主 emmm 感谢楼主 看看彩蛋 为什么小甲鱼之前的实例没有meta这个标签，也没有乱码呢？我在我电脑上完成一二课的实例和课后作业，也没有出现乱码，这个乱码什么时候出现，我百度了一下，有时候加了<meta charset="utf-8">也会有乱码是为啥呢？ 需要笔记！！ 惜今怀远 发表于 2018-6-10 22:23
为什么小甲鱼之前的实例没有meta这个标签，也没有乱码呢？我在我电脑上完成一二课的实例和课后作业，也没有 ...
因为这是要把网页放入服务器才可以发现乱码的，写好以后没有通过服务器打开是不会有乱码的。。。 . {:7_146:} elias 发表于 2018-6-26 18:54
因为这是要把网页放入服务器才可以发现乱码的，写好以后没有通过服务器打开是不会有乱码的。。。
谢谢{:5_109:}