【HTML】详解head标签
一个网页由head和body标签组成
body用来呈现网页内容,而head标签中除了title标签还有什么作用与属性呢?
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容... ...
</body>
</html>
文件标题标签
<title>标题</title>
<basehref="URL">基地址标记
<meta>文档相关资料标记
meta就是元
meta data就是元数据,用来描述数据的数据;如一个数据
1.70
,我们并不知道它代表什么,但是身高:1.70
我们就知道1.70表示身高,而身高
就是元数据,用来描述数据1.70
meta标签共有两个属性,它们分别是name属性
和http-equiv属性
,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。
1.name属性
name属性主要用于描述网页,与之对应的属性值为content,(两者搭配使用)content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。meta标签的name属性语法格式是<meta name="参数名称" content="具体的参数值 " >
.
name属性下的参数
- keywords(关键字)
用来告诉搜索引擎网页的关键字是什么 - description(描述)
用来告诉搜索引擎网页的内容
当我们用搜索引擎如百度,我们爬取到腾讯首页,百度会显示描述信息,这个信息其实就是获取的腾讯网页的description里的描述内容
- robots(机器人向导)
用来告诉搜索引擎哪些界面需要索引,哪些界面不需要索引 - author(作者)
用来标注网页的作者
2.http-equiv
http-equiv属性相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容与之对应的属性值为content,content中的内容其实就是各个参数的变量值。meta标签的http-equiv属性语法格式是
<meta http-equiv="参数" content="参数变量值">
- refresh(刷新)
自动刷新并指向新页面(此功能常用于广告页面和登录自动调转页面)
<metahttp-equiv="refresh"content="2;URL=新页面的网址">
注意引号的范围
<head>
<metacharset="utf-8">
<title>Insert title here</title>
<metahttp-equiv="refresh"content="2;URL=https://www.hnucm.edu.cn/">
</head>
- content-Type(显示字符集的设定)
设定用户使用的字符集
<metahttp-equiv="content-Type"content="text/html"charset="gb2312">
简体中文:gb2312
繁体中文:big5
纯英文网页:ios-8859-1
有时网页乱码就是因为字符集不匹配的原因,我们只需修改网页的charset属性
3.link标签
指明本网页需要其他资源的情况、显示作者信息、相关索引信息等
定义了文档与外部资源之间的关系。
4.style标签
<style>
</style>
css样式标记,css的代码就写在其中
腾讯首页的网页源码:
<head>
<title>腾讯首页</title>
<meta charset="gb2312">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="baidu-site-verification" content="OfJHAPXD7i" />
<meta name="baidu_union_verify" content="4508fc7dced37cf569c36f88135276d2">
<meta name="theme-color" content="#FFF" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="format-detection" content="telephone=no">
<!-- <script src="//js.aq.qq.com/js/aq_common.js"></script> -->
<script type="text/javascript">
try {
if (location.search.indexOf('?pc') !== 0 && /Android|Windows Phone|iPhone|iPod/i.test(navigator.userAgent)) {
window.location.href = 'https://xw.qq.com?f=qqcom';
}
} catch (e) {}
</script><!--[if !IE]>|xGv00|2d5210e6c1b95e3bf4b8983f9cb00ab3<![endif]-->
<meta content="资讯,新闻,财经,房产,视频,NBA,科技,腾讯网,腾讯,QQ,Tencent" name="Keywords">
<meta name="description" content="腾讯网从2003年创立至今,已经成为集新闻信息,区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道,充分满足用户对不同类型资讯的需求。同时专注不同领域内容,打造精品栏目,并顺应技术发展趋势,推出网络直播等创新形式,改变了用户获取资讯的方式和习惯。" />
在百度搜索引擎下搜索 腾讯首页