鱼C论坛

 找回密码
 立即注册
查看: 1053|回复: 23

[学习笔记] 003 - 从一段鬼畜的密文说起

[复制链接]
最佳答案
213 
发表于 2018-3-25 10:20:05 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本帖最后由 不二如是 于 2018-4-9 08:49 编辑







                               
登录/注册后可看大图


万众瞩目的零基础入门学习Web开发(H5&C3)开始更新了!!!


Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生,时间总是善待任何想拿它搞事情的存在体

很幸运,一切就这样开始了,开局总会有些不足,但一切在慢慢变好,不是吗?

作为,吹水阁中最爱吹水(爱干无意义事情)的鱼油,整套教程的亮点(槽点)由我来承包~

关注本系列推送(最下方有订阅方式)的鱼油,会享受到一个福利
会比正常推送,早一个时间节点,看到还未出炉的美味课程


哈哈,废话不多说了,#敲黑板时刻!





官方课程下载地址:传送门





课程思维导图

Snip20180325_1038.png

猛戳

                               
登录/注册后可看大图
超清





重要的<meta>标签

Snip20180325_1024.png


<meta> 标签的内容不会显示在网页中,但经常被机器(比如网页爬虫)解析。

所以,作为初学者可能用不到上面的知识点,要知道以下四个点

★1、字符乱码

<meta>标签中charset="UTF-8",可以解决中文字符乱码问题。

乱码案例1-a

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>懒得写(反正你们也看不到)</title>
  5. </head>
  6. <body>
  7.     <img id="target" src="../img/FishC.png" alt="鱼C-Logo" width="256px" height="256px">
  8.     <p>我知道,就算我在这里说你们什么坏话,你们也是不会知道の……因为,你们看到的页面肯定会是一坨坨的乱码~~~哈哈哈哈哈~~~</p>
  9. </body>
  10. </html>
复制代码

Snip20180324_983.png


见证奇迹的时刻,在<head>标签中添加(案例1-b):
  1. <head>
  2.     <meta charset="UTF-8">
  3. </head>
复制代码

Snip20180324_984.png


结论:
Snip20180325_1025.png


记住,如果本地网页打开,没有出现乱码,这是浏览器帮你做了后台优化~

如果不加UTF-8,服务器是不会认识中文滴~

精力还很充沛的鱼油,可以看0 1 7 1 - Meta标签详述 | 【难忘粗心】换个维度理解<meta>。

★2、自适应

适合PC端的案例2-a(未指定大小的页面不适合移动端,但都适合PC端):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>懒得写(反正你们也看不到)</title>
  5.     <meta charset="utf-8">
  6. </head>
  7. <body>
  8.     <h1>“自适应”演示</h1>
  9.     <p>请分别在PC和手机上打开该页面!</p>
  10.     <img id="target" src="../img/FishC.png" alt="鱼C-Logo" width="256px" height="256px">
  11.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  12.     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  13.     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  14.     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  15.     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  16.     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  17. </body>
  18. </html>
复制代码


此时在移动端打开会看到:
1.png


有点很诡异,有木有。

在head中添加一行神奇的代码(案例2-b):
  1. <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制代码


此时在移动端打开:
Snip20180325_1027.png


神奇的事情发生了,这样的页面才是在移动端上给人看的吗?!


★3、作者信息

百度搜素引擎优化:传送门

认真听课的鱼油,不知道发没发现这个彩蛋:
Snip20180325_1029.png


善用Meta description:
Snip20180325_1031.png


案例3:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>懒得写(反正你们也看不到)</title>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta name="keywords" content="小甲鱼,Web开发,HTML5,CSS3,Web编程教学">
  8.     <meta name="description" content="《零基础入门学习Web开发》案例演示">
  9.     <meta name="author" content="小甲鱼">
  10. </head>
  11. <body>
  12.     <h1>“自适应”演示</h1>
  13.     <p>请分别在PC和手机上打开该页面!</p>
  14.     <img id="target" src="../img/FishC.png" alt="鱼C-Logo" width="256px" height="256px">
  15.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  16.     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  17.     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  18.     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  19.     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  20.     proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  21. </body>
  22. </html>
复制代码


换一个角度演示下meta的name属性。

name属性很重要,当别人搜索时(信息匹配),添加这些属性属性的网页会被更容易索引到。

身处数字时代,越高的曝光度,越意味着,鱼油懂的~

而用了name,必须要使用content属性来增加内容。

先来添加关键字:
  1. <meta name="keywords" content="C,C++,Python,Scratch,HTML5,CSS3,JavaScript,Qt,汇编,WinSDK">
复制代码


添加描述网页内容:
  1. <meta name="description" content="鱼C工作室|免费编程视频教学|编程技术交流|C语言|汇编|Python|win32|Delphi|加密与解密|Linux">
复制代码


添加作者信息:
  1. <meta name="author" content="Cononico">
复制代码


当添加完这些信息,在搜索时就会看到:
Snip20180324_985.png


这些属于基本套路,作为初学者一定要掌握哦~


★4、自动跳转

Mar-25-2018 10-13-22.gif


案例4中,在head中继续添加了一段神奇的代码:
  1. <meta http-equiv="refresh" content="0;http://fishc.taobao.com">
复制代码


0s跳转,简直是赤裸裸的广告(课堂演示啦 )。

Snip20180325_1032.png





牢记鱼C案例库

Snip20180325_1033.png


好处多多,不需要解释...

速速收藏:传送门





彩蛋:致敬Hawking


                               
登录/注册后可看大图


一段小小的视频(霍金客串生活大爆炸“CIAO”的梗):
游客,如果您要查看本帖隐藏内容请回复


2018.3.14,霍金离开了地球...

霍金走的那天,是爱因斯坦的生日,而他出生的那天,是伽利略去世的日子。

或许这就是天选之人吧。

希望鱼油记得“编码”不同会带来天差地别的表达方式:
“CIAO”是意大利语,你好的意思。

法语中是再见。





课后作业,完成了吗?








                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑&#9758;传送门)(不喜欢更要订阅



                               
登录/注册后可看大图




评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +6 收起 理由
elias + 5 + 5 + 3
xenli + 5 + 5 + 3

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-25 20:17:28 | 显示全部楼层
硬着头皮买
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-26 10:42:05 From FishC Mobile | 显示全部楼层
不二老师,请问这是一个视频系列的教程吗?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2018-3-26 11:48:25 | 显示全部楼层
chmmoon 发表于 2018-3-26 10:42
不二老师,请问这是一个视频系列的教程吗?

《零基础入门学习Web开发》(HTML5 & CSS3)的同步(抢先)笔记,会时不时加戏~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-26 15:11:07 | 显示全部楼层
下载链接挂了.  麻烦核实~~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2018-3-26 15:23:56 | 显示全部楼层
-Pan 发表于 2018-3-26 15:11
下载链接挂了.  麻烦核实~~


可以用~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-26 16:51:20 From FishC Mobile | 显示全部楼层
不二如是 发表于 2018-3-26 11:48
《零基础入门学习Web开发》(HTML5 & CSS3)的同步(抢先)笔记,会时不时加戏~

老师,我想问这个系列教程是视频吗~
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-28 14:50:21 | 显示全部楼层
不二兄,笔记借我看一下
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-3-28 20:36:06 | 显示全部楼层
不二老湿,这节课的百度下载链接挂了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
213 
 楼主| 发表于 2018-3-29 08:21:43 | 显示全部楼层
骑着蜗牛狂奔 发表于 2018-3-28 20:36
不二老湿,这节课的百度下载链接挂了


不是挂了,因为发音问题,重新调整完再放出来~

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
骑着蜗牛狂奔 + 5 + 5 + 3

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-4-2 20:23:21 | 显示全部楼层
感谢楼主
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-4-5 16:01:56 | 显示全部楼层
emmm
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-2 22:56:10 | 显示全部楼层
感谢楼主
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-5-18 17:26:18 | 显示全部楼层
看看彩蛋
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-6-10 22:23:33 | 显示全部楼层
为什么小甲鱼之前的实例没有meta这个标签,也没有乱码呢?我在我电脑上完成一二课的实例和课后作业,也没有出现乱码,这个乱码什么时候出现,我百度了一下,有时候加了<meta charset="utf-8">也会有乱码是为啥呢?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-6-19 10:06:05 | 显示全部楼层
需要笔记!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-6-26 18:54:09 | 显示全部楼层
惜今怀远 发表于 2018-6-10 22:23
为什么小甲鱼之前的实例没有meta这个标签,也没有乱码呢?我在我电脑上完成一二课的实例和课后作业,也没有 ...

因为这是要把网页放入服务器才可以发现乱码的,写好以后没有通过服务器打开是不会有乱码的。。。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-7-16 10:45:16 | 显示全部楼层
.
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
1 
发表于 2018-7-22 14:55:04 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
最佳答案
0 
发表于 2018-7-25 21:07:46 | 显示全部楼层
elias 发表于 2018-6-26 18:54
因为这是要把网页放入服务器才可以发现乱码的,写好以后没有通过服务器打开是不会有乱码的。。。

谢谢
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

小甲鱼强烈推荐上一条 /1 下一条

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号

GMT+8, 2018-9-24 06:55

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表