前端入门知识——HTML head标签

最新推荐文章于 2024-07-04 21:40:21 发布

原创最新推荐文章于 2024-07-04 21:40:21 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#程序员 #编程 #web前端 #资讯 #科技

编程同时被 3 个专栏收录

104 篇文章

订阅专栏

互联网

104 篇文章

订阅专栏

程序员

104 篇文章

订阅专栏

本文介绍了HTML head标签的基本元素，包括title、meta、link、style、script等，讲解了它们的功能和用法，强调了title标签在SEO中的重要性，并提供了CSS和JS的引入示例，还解释了base标签在设定链接基准上的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.包含的元素:

标签内主要包含以下几种类型的元素:

（1）.:规定网页的标题。

（2）.:主要给浏览器解析或者搜索引擎提供相关信息。

（3）.:从外部引入CSS文件。

（4）.

（5）.

（6）.:为当前文档的所有链接设置基准链接。

二.标签:

此标签用于定义网页的标题，主要目的是告诉用户此网页是做什么用的，或者主要主题是什么。

它对于搜索引擎优化有着举足轻重的作用，当然SEO不是本教程的内容，这里不多介绍。

三.标签:

此标签规定的内容不会在展现给用户，它主要内容是告诉浏览器或者搜索引擎一些网页的信息。

<meta charset=" utf-8">
<meta name="author" content="http://www.softdewhy.com/" />

（1）.第一个meta告诉浏览器是采用utf-8编码。

（2）.第二个meta告诉浏览器本文的作者是谁。

四.

此标签用于定义CSS代码，来控制页面的表现，代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softdewhy.com/" />
<title>兴趣部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  line-height:50px;
  background-color:#ccc;
  text-align:center;
}
</style>
</head>
<body>
<div>兴趣部落</div>
</body>
</html>

在

五.标签:

此标签用于引入外部css文件，虽然可以在

<link rel="stylesheet" type="text/css" href="common.css" />

六.

此标签不但能直接定义js代码，也能够引入外部js文件，当然格式有所不同。

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>兴趣部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  line-height:50px;
  background-color:#ccc;
  text-align:center;
}
</style>
<script>
window.onload = function () {
  var odiv = document.getElementById("ant");
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    odiv.style.display="none"
  }
}
</script>
</head>
<body>
<div id="ant">兴趣部落</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面的代码，点击按钮可以隐藏div元素；js代码直接定义在

如果js代码比较庞大，或者需要重复利用，最好的方式就是引入外部js文件，如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softdewhy.com/" />
<title>兴趣部落</title>
<style type="text/css">
div {
  width:100px;
  height:50px;
  line-height:50px;
  background-color:#ccc;
  text-align:center;
}
</style>
<script src="portal.js" type="text/javascript"></script>
</head>
<body>
<div id="ant">兴趣部落</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

上面就是引入外部js文件；仅仅是一个引入方式演示，具体代码没有实现。

七.标签:

此标签可以为当前文档的所有链接设置基准链接，对于基准链接的理解是关键。

在网页代码中一般使用相对链接连获取一个文件，例如:

<img src="img.jpg" />

上面是再简单不过的用法，其实这个链接是不完整的，因为在实际解析的时候浏览器会将这个路径解析为绝对路径，例如网站地址是http://www.softdewhy.com，那么浏览器就会将相对转换为绝对地址:

<img src="http://www.softdewhy.com/img.jpg" />

网站的url就是基准链接，这是默认的，当然可以人为的规定基准链接，标签就派上用场了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>兴趣部落</title>
<base href="http://www.163.com">
</head>
<body>
<img src="img.jpg" />
</body>
</html>

以上代码通过标签将基准链接设置为网易地址，那么这个图片的地址就是: