马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2021-6-4 16:50 编辑
在线视频：
课程思维导图
重要的<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跳转，简直是赤裸裸的广告（课堂演示啦 ）。
牢记鱼C案例库
好处多多，不需要解释...
彩蛋：致敬Hawking
一段小小的视频（霍金客串生活大爆炸，“CIAO”的梗）：
2018.3.14，霍金离开了地球...
霍金走的那天，是爱因斯坦的生日，而他出生的那天，是伽利略去世的日子。
或许这就是天选之人吧。
希望鱼油记得“编码”不同会带来天差地别的表达方式：
“CIAO”是意大利语，你好的意思。
法语中是再见。
课后作业，完成了吗？
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-3-25 10:20:05
置顶卡
千斤顶
显身卡
发表于 2018-3-25 20:17:28
发表于 2018-3-26 10:42:05
楼主
