您的位置:首页> 前端教程> HTML教程
文章导航

HTML <head>标签

2018-8-4 09:43| 作者: admin| 查看: 2220| 评论: 0|来自: 蚂蚁部落

HTML 基本结构一章节,已经对<head>标签的作用了一个宏观的介绍。

下面再来介绍一下它内部元素的具体作用。

一.<head>包含的元素:

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

(1).<title>:规定网页的标题。

(2).<meta>:主要给浏览器解析或者搜索引擎提供相关信息。

(3).<link>:从外部引入CSS文件。

(4).<style>:内部定义CSS代码。

(5).<script>:从外部引入js文件或者直接定义js代码。

(6).<base>:为当前文档的所有链接设置基准链接。

二.<title>标签:

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

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

三.<meta>标签:

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

[HTML] 纯文本查看 复制代码
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />

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

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

<meta>的内容很多,具体可以参阅HTML <meta>详解一章节。

四.<style>标签:

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

[HTML] 纯文本查看 复制代码运行代码
<!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>
</head>
<body>
<div>蚂蚁部落</div>
</body>
</html>

在<style>标签中创建了一些css代码用来定义div元素的相关样式。

关于CSS知识可以参阅CSS教程版块。

五.<link>标签:

此标签用于引入外部css文件,虽然可以在<style>标签中直接定义CSS代码,但是如果CSS代码比较庞大,那么势必会造成页面的庞大,不仅不容易管理,并且也无法重复利用CSS代码,代码实例如下:

[HTML] 纯文本查看 复制代码
<link rel="stylesheet" type="text/css" href="common.css" />

六.<script>标签:

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

[HTML] 纯文本查看 复制代码运行代码
<!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代码直接定义在<script>标签内。

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

[HTML] 纯文本查看 复制代码运行代码
<!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 src="portal.js" type="text/javascript"></script>
</head>
<body>
<div id="ant">蚂蚁部落</div>
<input type="button" id="bt" value="查看效果"/>
</body>
</html>

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

七.<base>标签:

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

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

[HTML] 纯文本查看 复制代码
<img src="img.jpg" />

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

[HTML] 纯文本查看 复制代码
<img src="http://www.softwhy.com/img.jpg" />

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

[HTML] 纯文本查看 复制代码运行代码
<!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>

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

[HTML] 纯文本查看 复制代码
http://www.163.com/img.jpg

注意:<base>标签仅对相对地址有效,对于绝对地址是无效的。


鲜花

握手

雷人

路过

鸡蛋
上一篇:HTML 基本结构下一篇:HTML 自闭和元素

最新评论

返回顶部