form提交后刷新网页_初识meta标签与SEO——零基础自学网页制作

初识meta标签属性

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

练习一：测试不同浏览器是否自动补齐""代码。

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

Step2. 找到"第一个网页.html"，并确定文件中没有"

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

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

如下图所示：Google浏览器(Chrome)测试结果

Step4. 在"第一个网页.html"中添加""代码。如图所示：

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

标签还有其他属性吗？当然有！如下图所示：

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

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

练习二：使用 代码，实现每隔5秒钟自动刷新页面的功能。

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

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

代码如下：

      学习写第一个网页

第一个网页

随着学的内容越来越多，网页就会越来越漂亮了！

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

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

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

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

SEO是什么？

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

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

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

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

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

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

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

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

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

谢谢大家。

HTML完整学习目录

HTML序章(学习目的、对象、基本概念)——零基础自学网页制作

HTML是什么？——零基础自学网页制作

第一个HTML页面如何写？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2(路径详解)——零基础自学网页制作

使用HTML添加表格1(基本元素)——零基础自学网页制作

使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作

使用HTML添加表格3(间距与颜色)——零基础自学网页制作

使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的

块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作

HTML表单4(form的action、method属性)——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用标签实现文本内链接——零基础自学网页制作