web前段开发||head标签介绍

数据小金

已于 2023-07-21 11:05:37 修改

阅读量436

点赞数 1

分类专栏：网站设计文章标签：前端

于 2023-07-21 11:04:16 首次发布

本文链接：https://blog.csdn.net/ppcxl/article/details/131847272

版权

网站设计专栏收录该内容

3 篇文章 0 订阅

订阅专栏

hello，大家好，我是万人迷小金啊。今天我们一其来探讨下HTML标签中的head标签。

head标签概述

head标签用于在HTML文档中指定文档的元数据，包括文档标题、字符集、样式表、脚本等等。它通常位于HTML文档的头部，不会在浏览器窗口中显示出来，但是它包含了一些非常重要的信息，如搜索引擎优化所需的关键字和描述，以及浏览器渲染页面所需的CSS和JavaScript文件的链接等。

们打开vscode，新建一个文件我们给他起名叫head标签介绍，注意后缀是.html，新建好文件后我们输入英文状态下的!按tab键，自动帮我们生成了网页的基本结构。如下代码所示

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0">                 
        <title>Document</title> 
    </head> 
    <body> 
    </body> 
</html>

在生成的结构中，head标签内帮我们生成了两个meta标签，和一个title标签，此外我们还可以再head标签内些style标签script标签等。

meta标签

我们先来介绍meta标签，meta标签可以用来制定字符集，指定视图大小，meta标签还可以用来指定网页的关键词和描述，以及设置搜索引擎的索引方式和频率。此外，meta标签还可以用来禁止网页缓存、自动刷新网页等。总之，meta标签是网页优化和SEO中不可或缺的一部分。

meta标签设置字符集

我们先介绍下什么是字符集？

字符集是一种规定了一组字符的编码方式，用于计算机存储和处理文本信息。它包含了字母、数字、符号和其他特殊字符，每个字符都有一个唯一的编码值。常见的字符集包括ASCII、Unicode等。在计算机中，使用字符集来表示和处理文本信息，以确保不同的计算机系统之间可以正确地显示和处理文本。我们通常使用的字符编码就是utf-8或者GBK。

我们通过meta标签的charset属性来设置字符编码如：

<meta charaset="utf-8">

这样就告诉我们的浏览器使用utf-8编码来加载这个网页

meta标签设置SEO

我们还可以使用meta标签来做搜索引擎的优化(SEO)，搜索引擎优化是一种通过优化网站内容和结构，以提高网站在搜索引擎结果页面中的排名和可见性的技术。通过使用关键字、改进网站结构、提高网站速度等方法，可以帮助网站在搜索引擎中获得更高的排名，从而增加流量和受众。

我们通过meta标签的name属性设置搜索引擎类型，content属性设置搜索内容。

其基本语法如下：

指定作者 <meta name="author" content="" /> 
指定描述文档 <meta name="description" content="" /> 
指定关键字<meta name="keywords" content="" />/

比如，我们要在网站上发一篇朱自清的春，我们就可以通过以下方式来进行SEO

<meta name="author" content="朱自清" /> 
<meta name="description" content="盼望着，盼望着，东风来了，春天的脚步近了。" /> 
<meta name="keyword" content="朱自清春" />

meta标签设置网页缓存

meta标签还可以通过http-equiv属性来设置网页刷新与禁止网页缓存，基本语法如下

<!--刷线网页：--> 
<meta http-equiv="refresh" content="时间；网址" /> 
<!--禁止网页缓存--> 
<meta http-equiv="Pragma" content="no-cahe" /> 
<meta http-equiv="Cache-Control" content="no-cache"/> 
<meta http-equiv="expires" content="0">

title标签

接下来我们介绍，title标签，title标签用于在HTML文档中定义网页的标题，它会显示在浏览器的标题栏或标签页上。这个标签非常重要，因为它会影响到搜索引擎对网页的理解和排名。通常情况下，title标签应该包含简短、准确、具有描述性的词语，以便用户和搜索引擎了解页面的主题和内容。

我们来看一下title标签效果。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>head标签介绍</title> 
    </head> 
    <body> 
    </body>
</html>

我们在title标签里写内容head标签介绍，展示如下