|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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
楼主
