学习笔记 | HTML（2）——关于HTML的head标签（404界面示例）
上一篇文章：学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！
我们知道，在HTML语言中，一个页面是由四个部分组成：
- 文档声明：
- html 标签对：
- head 标签对：
- body 标签对：
在 head 标签中，我们共有以下6个标签可选：
- title 标签
- style 标签
- script 标签
- link 标签
- base 标签
- meta 标签
那么，这些标签具体是怎么用的呢？
1. title 标签
title标签的作用就是定义网页的标题。如下例：
DOCTYPE html>
<html>
<head>
<title>Cresyeal的博客title>
head>
<body>
body>
html>
我们可以看到，title标签中的文本内容就是这个网页的标题。
有一点需要说明一下，这里网页的标题只会显示在标签栏中，并不指页面内容的题目：
如图，title标签定义标签栏中的 “古诗”，而页面中的 “酬乐天扬州初逢席上见赠” 则需在 body 标签中定义。
2. style 标签
在HTML中，style 标签用于定义元素的CSS样式，属于“内部样式表”。这属于CSS方面内容，在HTML这里不多作介绍。
格式示例：
DOCTYPE html>
<html>
<head>
<style>
/*这里写CSS样式内容*/
style>
head>
<body>
body>
html>
3. link 标签
在 HTML 中，link 标签用于引入外部CSS样式文件，属于“外部样式表”。这属于CSS方面内容，在HTML这里不多作介绍。
格式示例：
DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="文件路径">
head>
<body>
body>
html>
4. script 标签
在HTML中，script 标签用于定义页面的 JavaScript 代码，也可引入外部 JS 代码文件。这是 JS 部分内容，在 HTML 这里不多作介绍。
格式示例：
DOCTYPE html>
<html>
<head>
<script>
//这里写script代码
script>
<script src="文件路径">script>
head>
<body>
body>
html>
5. base 标签
在 HTML 中，base 标签通常可用作为该页面上的相对 URL 指定默认值和 target 属性。这将有利于我们减轻页面的重量、保持 URL 的简洁干净。
举个例子，假如你把页面上所有的图片嵌套在某处，比如这个图片地址：
https://example.com/home/topbuttons/images/home.jpg
这时候，若是你对每一个图片的链接都这样写，那么代码将会十分冗杂：
<img src="https://example.com/home/topbuttons/images/home.jpg">
<img src="https://example.com/home/topbuttons/images/articles.jpg">
这时候我们可以在 base 标签中加入如下代码：
<head>
<base href="https://example.com/home/topbuttons/images/">
head>
于是我们的图片就可以这样写：
<img src="home.jpg">
<img src="articles.jpg">
是不是就简洁很多？
同时我们也可以为超链接设置默认 URL 和 target 属性：
<head>
<base target="_blank" href="https://example.com/home/topbuttons/">
head>
<body>
<a href="home.html">主页a>
body>
当然，有时候我们有一些 URL 并不在 base 标签设定的默认位置中，需要指定完全不同的位置，这时候我们可以直接简单地使用绝对地址，或是使用以正斜杠（/）开头的 URL，如下：
<head>
<base href="https://example.com/home/topbuttons/images/"/>
head>
<body>
<img src="home.jpg"/>
<img src="/weixin_52132159.jpg"/>
<a href="https://blog.csdn.net/weixin_52132159">作者主页a>
body>
5. meta 标签
在 HTML 中，meta 标签一般用于定义页面的一些特殊信息，如页面关键字、页面描述、页面作者等。这些对用户来说不可见，是提供给搜索引擎看的。
在HTML中，meta标签有两个主要的属性：
- name
- http-equiv
5.1 name 属性
语法：
<meta name="属性" content="属性值" />
name 属性的常用属性值：
| 属性值 | 描述 |
|---|---|
| keywords | 页面关键字，用逗号分隔 |
| description | 页面描述 |
| author | 网页作者 |
| copyright | 版权信息 |
| generator | 编辑器信息 |
示例：
<head>
<meta name="keywords" content="技术博客,前端开发,HTML"/>
<meta name="descriptions" content="Cresyeal的博客，Cresyeal关注Python领域"/>
head>
5.2 http-equiv 属性
语法：
<meta http-equiv="属性" content="属性值"/>
该属性一般有两个重要的属性值：
- Content-Type 指定编码格式
- refresh 自动跳转到新页面
指定编码格式
指定网页所使用的编码格式，语法：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
当然，在HTML5标准中，我们可以使用以下的简写形式：
<meta charset="utf-8"/>
在实际开发中，为了保证页面不出现乱码，我们必须保证在每个页面中加上这句代码指定编码格式，否则可能会出现乱码。
定义网页自动跳转
语法：
<meta http-equiv="refresh" content="秒数; url=网址"/>
如下示例，做一个简单的404自动跳转界面，等待五秒跳转到作者博客：
https://blog.csdn.net/weixin_52132159
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="5; url=https://blog.csdn.net/weixin_52132159"/>
<title>404title>
head>
<body>
<h1>404 not foundh1>
<p><strong>5strong>秒后自动跳转到作者博客页面p>
body>
html>
效果如上图，缺点是秒数不能自动变化。不过这涉及到 JavaScript，有兴趣的同学们可以看一看：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>404title>
<script>
//在页面加载完毕时执行
window.onload = function()
{
var a = document.getElementById("num"); //获取id为num的标签
setInterval(function() //计时器
{
if (a.innerHTML == 0){
open("https://blog.csdn.net/weixin_52132159","_self"); //打开新页面
clearInterval(timer) //清除计时器
} else {
a.innerHTML--; //改变数字实现倒计时
};
}, 1000);
}
script>
head>
<body>
<h1>404 not foundh1>
<p><strong id="num">5strong>秒后自动跳转到作者博客页面p>
body>
html>
效果如下：
– the End –
好啦，这篇文章就到这里了。
以上就是我分享的全部内容，感谢阅读！
后记：开学之后要上学，可能更文会变得少了，甚至几乎不更了。因为面临着中考的压力。也许等到放假之后会继续更新，谢谢大家的支持！
本文收录于专栏：前端开发学习笔记
关注作者，持续阅读作者的文章，学习更多编程知识！
https://blog.csdn.net/weixin_52132159
推荐阅读
- 前端
- 学习笔记 | HTML 基本结构和基本标签 ——前端学习第一步！
- Python
- Python爬虫 | 爬取b站北京奥运会开幕式弹幕，有多少人从东京奥运会跑过来的？
- 绝密！Python爬虫告诉你刷分机器人背后的原理！这篇文章差点没过审
- 【爬虫】用Python爬取豆瓣电影分类排行榜
- 【Python爬虫】爬虫利器 requests 库小结（建议收藏！）
- 没想到我连五年级的题目都解不出来？可不能被人小看，让万能的Python登场
- 女朋友让我深夜十二点催她睡觉，我有Python我就不干
- Python：程序猿怎么追女生？教你用Python做一个表白神器，告别表白尴尬！
- Python标准库：datetime 时间和日期模块 —— 时间的获取和操作详解
- Python每天一道题：昆虫繁殖问题？我把密密麻麻的幼虫和成虫搞定了