网站首页 > 基础教程正文

初识meta标签与SEO——零基础自学网页制作

ccvgpt 2024-11-25 10:18:23 基础教程 1 ℃

初识meta标签属性

如果您学习了《HTML页面中head标签有啥用？——零基础自学网页制作》这一篇教程，一定了解了utf-8这种编码方式的特性，下面我们通过一个练习来看看指定或不指定utf-8编码方式对页面显示的影响。

练习一：测试不同浏览器是否自动补齐"<meta charset="utf-8">"代码。

Step1. 下载ie浏览器、下载Google浏览器，然后安装。

Step2. 找到"第一个网页.html"，并确定文件中没有"<meta charset="utf-8">

"这段代码，右键，分别使用ie和Google浏览器打开。

Step3. 看一下结果，如图所示：ie浏览器测试结果。

如下图所示：Google浏览器（Chrome）测试结果

Step4. 在"第一个网页.html"中添加"<meta charset="utf-8">"代码。如图所示：

保存后，再次使用ie浏览器打开，如图所示：中文可以正常显示了！

表格内容来自http://www.runoob.com/tags/tag-meta.html

左边绿色的文字是属性名，中间是属性值，描述和没说一样。初学者看到这样的表格，发现字全认识、意思嘛，隐隐约约。这是正常现象，计算机语言本身就不是人话。随着我们进一步学习，慢慢就会理解这些属性的用途了。

练习二：使用<meta http-equiv="refresh" content="5"> 代码，实现每隔5秒钟自动刷新页面的功能。

Step1. 首先为http-equiv属性添加（=）"refresh（刷新）"值；然后为content属性赋值"5"，指定刷新间隔时间。

注意：使用英文半角输入引号！

代码如下：

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
    <meta http-equiv="refresh" content="5">
      <title>学习写第一个网页</title>
</head>
<body>
      <h1>第一个网页</h1>
<p>随着学的内容越来越多，网页就会越来越漂亮了！</p>
</body>
</html>

Step2. 使用浏览器打开看看效果（建议使用Chrome浏览器）！

这时，看页面的话什么也看不到，因为我们的计算机的速度非常快，要想看清刷新过程，建议点击键盘上的F12键，这是页面变成了这样：

我们盯着右边的网页代码，默默计算时间，五秒时，这些代码会因为再次加载而闪烁一次！

使用笔记本或小键盘的同学可以按住Fn键再按F12键实现这个操作。

SEO是什么？

首先我们来介绍搜索关键词的概念

我们看一个meta标签中关于关键词指定的属性。通过图表可知，关键词keyword在name属性中，如何为网页指定搜索关键词呢？代码如下：

<meta name="keywords" content="HTML,自学,零基础,meta,SEO">

大家注意，写法和指定utf-8不同，charset变成了name，keyword要加引号，关键词内容要写在content（内容）的等号后，也要加引号，每个关键词之间用逗号隔开。

这样，我们就为页面标记出了关键词，比如HTML、自学、零基础、meta，如果有人通过搜索引擎搜索"HTML、自学、零基础、meta"这样的关键词，那么我们的这个页面就能被检索到。（具体操作不是我们向页面添加关键词就能被引擎找到，能被引擎找到的前提是我们的网站已经被某些搜索引擎收录，比如，我们做一个网站，网站被百度收录，再在百度中搜索关键字才有可能找到我们网站中的相关页面。）百度网站收录申报页面如图所示：

网址：http://site.cnzzla.com/baidu/

简单来说，搜索引擎在检索页面时，通常会通过比对各个页面中的关键词与搜索关键词的匹配程度来决定页面在检索结果列表中的排位，通常，匹配程度高的会更靠前，具体的比对算法是一个值得深入探究的问题，因此，如何通过合理安排页面中的关键词来提高页面在搜索结果中的排位就成为各大网站运营商非常重视的技术问题，行业能称为SEO（Search Engine Optimization搜索引擎优化）

网站搜索引擎优化任务主要是认识与了解其它搜索引擎怎样紧抓网页、怎样索引、怎样确定搜索关键词等相关技术后，以此优化本网页内容，确保其能够与用户浏览习惯相符合，并且在不影响网民体验前提下使其搜索引擎排名得以提升，进而使该网站访问量得以提升，最终提高本网站宣传能力或者销售能力的一种现代技术。基于搜索引擎优化处理，其实就是为让搜索引擎更易接受本网站，搜索引擎往往会比对不同网站的内容，再通过浏览器把内容以最完整、直接及最快的速度提供给网络用户。（刘玉娥.网站搜索引擎优化技术分析[J].信息化建设,2015）

因此，建立SEO意识也是网页制作的一个基本素养，随着学习的深入，大家会获得更多有趣的技术与知识。

喜欢的小伙伴请关注我，有任何问题请留言，如有疏漏或错误欢迎斧正！

谢谢大家。