【HTML】详解head标签

简介: 👨‍🎓作者简介:一位喜欢写作,计科专业的大二菜鸟🏡个人主页:starry陆离🕒首发日期:2022年6月17日星期五🌌上期文章:『HTML』HTML简述与常用标签 📚订阅专栏:『JavaWeb基础入门』 如果文章有帮到你的话记得点赞👍+收藏💗支持一下哦

【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属性下的参数

  1. keywords(关键字)
    用来告诉搜索引擎网页的关键字是什么
  2. description(描述)
    用来告诉搜索引擎网页的内容

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

  1. robots(机器人向导)
    用来告诉搜索引擎哪些界面需要索引,哪些界面不需要索引
  2. author(作者)
    用来标注网页的作者

2.http-equiv

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

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

  1. refresh(刷新)
    自动刷新并指向新页面(此功能常用于广告页面和登录自动调转页面)

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

  1. 注意引号的范围

 

<head>

<metacharset="utf-8">

    <title>Insert title here</title>

    <metahttp-equiv="refresh"content="2;URL=https://www.hnucm.edu.cn/">

</head>

  1. content-Type(显示字符集的设定)
    设定用户使用的字符集

<metahttp-equiv="content-Type"content="text/html"charset="gb2312">

简体中文:gb2312

繁体中文:big5

纯英文网页:ios-8859-1

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

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

相关文章
|
1月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
48 5
|
3月前
|
数据采集 移动开发 前端开发
HTML代码的革命:语义化标签的魅力,让你的网页结构焕然一新!
【8月更文挑战第26天】本文探讨了Web前端开发中的语义化标签概念及其重要性。语义化标签通过使用具有明确含义的HTML标签来构建页面结构,提升了网页的可访问性及搜索引擎优化效果,并增强了代码的可读性和维护性。文章还讨论了实际开发中遇到的问题及未来发展趋势。
51 0
|
2天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
2天前
|
存储 移动开发 前端开发
|
30天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
37 2
|
30天前
|
移动开发 前端开发 JavaScript
【HTML】HTML页面和常见标签
【HTML】HTML页面和常见标签
30 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
99 1
|
2月前
|
移动开发 开发者 UED
HTML5中video标签controlslist属性的使用方法
`controlsList`属性为开发者提供了更多控制HTML5视频播放器行为的能力,让视频内容的集成更加灵活和符合需求。通过精心设计的控制列表,可以提升用户体验,同时保持内容的安全性和专业性。这种细节的控制和定制能力是现代Web开发的一个重要方面,反映了HTML5对开发者和内容创作者需求的响应。
174 1
|
2月前
|
存储 JavaScript Java
使用NekoHTML解析HTML并提取META标签内容
关于NekoHTML的代码样例,这里提供一个简单的示例,用于展示如何使用NekoHTML来解析HTML文档并提取其中的信息。请注意,由于NekoHTML的具体实现和API可能会随着版本更新而有所变化,以下代码仅供参考。 ### 示例:使用NekoHTML解析HTML并提取META标签内容 ```java import org.cyberneko.html.parsers.DOMParser; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NodeList; import org.xml
|
2月前
|
XML JavaScript Java
NekoHTML 是一个基于Java的HTML扫描器和标签补全器
**NekoHTML** 是一个基于Java的HTML扫描器和标签补全器(tag balancer),由J. Andrew Clark开发。它主要用于解析HTML文档,并能够“修正”许多在编写HTML文档过程中常犯的错误,如增补缺失的父元素、自动用结束标签关闭相应的元素,以及处理不匹配的内嵌元素标签等。这使得程序能够以标准的XML接口来访问HTML文档中的信息。 ### NekoHTML的主要特点包括: 1. **错误修正**:能够自动修正HTML中的常见错误,如未闭合的标签等。 2. **DOM树生成**:将HTML源代码转化为DOM(Document Object Model)结构,便