『HTML』详解head标签

StarAndroid
257 阅读3分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

👨‍🎓作者简介：一位喜欢写作，计科专业的大二菜鸟

🏡个人主页：starry陆离

🕒首发日期：2022年6月17日星期五

🌌上期文章：『HTML』HTML简述与常用标签

📚订阅专栏：『JavaWeb基础入门』 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

『HTML』详解head标签

一个网页由head和body标签组成

body用来呈现网页内容，而head标签中除了title标签还有什么作用与属性呢？

 <html>
 ​
     <head>
       <title>文档的标题</title>
     </head>
 ​
     <body>
       文档的内容... ...
     </body>
 ​
 </html>

文件标题标签

 <title>标题</title>

 <base href="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属性下的参数

  1. keywords（关键字）

    用来告诉搜索引擎网页的关键字是什么

  2. description（描述）

    用来告诉搜索引擎网页的内容

    当我们用搜索引擎如百度，我们爬取到腾讯首页，百度会显示描述信息，这个信息其实就是获取的腾讯网页的description里的描述内容

  3. robots（机器人向导）

    用来告诉搜索引擎哪些界面需要索引，哪些界面不需要索引

  4. author（作者）

    用来标注网页的作者

2.http-equiv

http-equiv属性 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容 与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meta标签的http-equiv属性语法格式是

<meta http-equiv="参数" content="参数变量值">

  1. refresh（刷新）

    自动刷新并指向新页面（此功能常用于广告页面和登录自动调转页面）

     <meta http-equiv="refresh" content="2;URL=新页面的网址">

    注意引号的范围

     ​
 <head>
 <meta charset="utf-8">
     <title>Insert title here</title>
     <meta http-equiv="refresh" content="2;URL=https://www.hnucm.edu.cn/">
 </head>

    在这里插入图片描述

  1. content-Type（显示字符集的设定）

    设定用户使用的字符集

     <meta http-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年创立至今，已经成为集新闻信息，区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。腾讯网下设新闻、科技、财经、娱乐、体育、汽车、时尚等多个频道，充分满足用户对不同类型资讯的需求。同时专注不同领域内容，打造精品栏目，并顺应技术发展趋势，推出网络直播等创新形式，改变了用户获取资讯的方式和习惯。" />

在百度搜索引擎下搜索 腾讯首页 image-20220321122040078

avatar
文章
阅读
粉丝