html头部

最新推荐文章于 2023-04-19 19:39:43 发布

原创最新推荐文章于 2023-04-19 19:39:43 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

html学习专栏收录该内容

14 篇文章

订阅专栏

html head元素是所有头部元素的容器。<head> 子元素 </head>，可以添加到head中的标签有<title>,<base>,<link>,<meta>,<script>和<style>。

1、title 定义文档的标题，在html文档中，title一般都是必须的。有以下用途：

(1) 定义浏览器工具栏中显示的标题

(2) 页面添加到收藏夹时显示的标题

(3) 显示在搜索引擎结果中的页面标题

<head>
    <meta charset="UTF-8">
    <title>这是标题</title>
</head>

2、base 为页面上的所有链接规定默认地址或默认目标（target）其中使用href=""指定地址；使用target=""指定目标。target有以下值：_blank(在新窗口打开链接文档)，_self(默认。在相同的框架打开)，_parent(在父框架打开)，_top(在整个窗口中打开)，framename(在指定框架中打开)。一般只使用_self和_blank。

base标签中href的使用：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    http://www.zbjuran.com/uploads/allimg/171105/2-1G105114Q5.jpg
    http://www.zbjuran.com/uploads/allimg/171105/2-1G105114R0.jpg
    http://www.zbjuran.com/uploads/allimg/171105/2-1G105114Q9.jpg-->
    <base href="http://www.zbjuran.com/uploads/allimg/171105/">
</head>
<body>
<img src="2-1G105114Q5.jpg" alt="图片1">
<img src="2-1G105114R0.jpg" alt="图片2">
<img src="2-1G105114Q9.jpg" alt="图片3">
</body>
</html>

图片1,2,3的绝对地址有相同的http://www.zbjuran.com/uploads/allimg/171105/,则可以将其提出来放在base的href中，使代码简洁和利于后期的维护。

3、link 用于定义文档和外部资源之间的关系，最常用于连接样式表(Css)。如下例：

html中的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <link type="text/css" rel="stylesheet" charset="utf-8" href="p1.css"/>
</head>
<body>
<p class="p1">大家好才是真的好</p>
</body>
</html>

定义的Css样式表p1.css 如下：

.p1{
  background-color: #c81623;
  font-size: 30px;
  color: blue;
}

4、style 用于定义样式

5、meta 可定义页面的关键字和描述。有name和content。使用如下：

<meta name="author" content="www.baidu.com">

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

使用2，链接跳转：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>

<body>
<p>
    对不起。我们已经搬家了。您的 URL 是 <a href="http://www.baidu.com">http://www.baidu.com</a>
</p>

<p>您将在 5 秒内被重定向到新的地址。</p>

<p>如果超过 5 秒后您仍然看到本消息，请点击上面的链接。</p>

</body>
</html>