在HTML中<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
那么在head标签里我们能定义些什么标签呢？这里我们介绍一些很常用的。
首先是<meta>
H5代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
这段代码中，我在meta标签里添加了一个charset属性，让这个属性等于utf-8。这个意思就是规定 HTML 文档的字符编码。也就是说换一句话说，就是我们的文档文字用的是什么编码格式，utf-8是最最常用的编码格式，它兼容中文，也兼容英文。我们也可以更改编码格式比如：gb2312
<meta charset="gb2312">
gb2312是国家标准，utf-8国际通用的标准。所以，在没有特殊要求的情况下我们使用utf-8。
因为HTML版本的问题我们简单的介绍一下老版本对于这一部分是怎么写的，我们用现在用的比较多的HTML 4.01做参考
//HTML 4.01
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
//HTML5
<meta charset="utf-8">
//表达的意思是完全一致的
好，我们继续
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="这里面写的是网站描述，描述你网站是干嘛的，主要用途是做SEO的。。。用户看不到这一部分，是给搜索引擎看的"/>
</head>
<body>
</body>
</html>
网站描述-主要写你网站是干嘛的
先写一个name属性，等于description（描述）
content="具体的网站描述"
那我写这个有什么用呢？
这个主要是做SEO优化用的，简单来说就是做网站排名，搞营销。
我们来看几个真实案例
//京东
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
//阿里云
<meta name="description" content="230万用户正享用阿里云提供的云服务器、云数据库、云存储、CDN、大数据等服务，7x24售后支持，故障100倍赔偿，快速备案，5天无理由退款。">
// 优酷
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
通过这三个案例，我们看他所写的内容可以准确的知道这个网站是干什么的，这就是网站描述。
除了，网站描述，还有一个重要的一部分就是网站关键词。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="这里面写的是网站描述，描述你网站是干嘛的，主要用途是做SEO的。。。用户看不到这一部分，是给搜索引擎看的"/>
<meta name="Keywords" content="这里面填写关键词" />
</head>
<body>
</body>
</html>
网站关键词-网站核心的代名词，代表网站定位
先写一个name属性，等于Keywords(关键词)
关键词对网站的意义非常大，在初次定下关键词之后，建议不要修改。这涉及到网站抓取的问题，这些问题，我们留到之后再说。关键词之前通过" , "来区分。同样我们看几个实例
//京东
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
//阿里云
<meta name="keyword" content="阿里云，云数据库，云服务器，云计算，域名注册">
//优酷
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放" />
我们可以很清楚的看到，关键词定义了这三个网站最核心的业务，网站的定位。
好，我们再说一个必不可少的<title></title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页的显示名称</title>
<meta name="description" content="这里面写的是网站描述，描述你网站是干嘛的，主要用途是做SEO的。。。用户看不到这一部分，是给搜索引擎看的"/>
<meta name="Keywords" content="这里面填写关键词" />
</head>
<body>
</body>
</html>
title标签中写的消息会在浏览器的标签中显示出来，就像这样
image.png
当期我打开了四个页面，这四个页面的title会分别显示出来，显示内容就是title中所包含的内容。
我们写一个小的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>从0开始的HTML</title>
<meta name="description" content="我们是从0开始的HTML，爱生活，爱代码"/>
<meta name="Keywords" content="HTML,代码,从0开始"/>
</head>
<body>
</body>
</html>
image.png
这样最简单的head内容我们就完了，当然，head里还可以引入资源文件，控制浏览器的渲染方式，刷新页面等一系列的操作，等我们用到的时候再说。
网友评论