HTML基础笔记——head标签

head标签是网页的头部，用于定义一些特殊的内容，比如页面标题、定时刷新、外部文件等等

head标签内一般有6个标签：title、meta、link、style、script、base

1.title标签

title标签的作用就是定义网页的标题

<!DOCTYPE html>
<html><head><title>这是一个网页标题</title></head><body><p>内容</p></body>
</html>

2.meta标签

meta标签一般用于定义页面的特殊信息，如页面关键字、页面描述等。这些信息并不是给用户的，而是给搜索引擎看的。

meta标签有两个重要的属性：name和http-equiv

name属性的几个常用取值

属性值	说明
keywords	网页的关键字（可以多个）
description	网页的描述
author	网页的作者
copyright	版权信息

<!DOCTYPE html>
<html><head><title>这是一个网页标题</title><meta name="keywords" content="CSDN，前端学习笔记，Kll"/><meta name="description" content="这是CSDN的前端学习笔记"/><meta name="author" content="Kll"/><meta name="copyright" content="本站所有笔记均为书籍所学习摘抄，如有侵权，立即删除。"/></head><body><p>内容</p></body>
</html>

meta 标签的http-equiv属性只有两个重要作用：定义网页所使用的编码，定义网页自动刷新跳转。

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

这段代码告诉浏览器，该页面所使用的编码是utf-8，不过在HTML5标准中，代码简写为

<meta charset="utf-8"/>

如果你发现页面打开是乱码，很可能是没有加上这一句代码。在实际的开发中，我们必须在每一个页面中加上这句代码。

http-equiv的另一个作用是定义网页自动刷新跳转

<meta http-equiv="refresh" content="6;url=http://www.bilibili.com"/>

这段代码表示当前页面在6秒后会自动跳转到B站。

现在我们可以来尝试一下

<!DOCTYPE html>
<html><head><meta http-equiv="refresh" content="6;url=http://www.bilibili.com"/></head><body><p>等待6秒后自动跳转至B站</p></body>
</html>

3.style标签

style标签用于定义元素的CSS样式，等CSS篇再详细介绍，我们只需了解一下语法

<!DOCTYPE html>
<html><head><style type="text/css">/*这里写CSS样式*/</style></head><body></body>
</html>

4.script标签

script标签用于定义页面的JavaScript代码，也可以引入外部JavaScript文件，等JavaScript篇时再详细介绍

<!DOCTYPE html>
<html><head><script>/*这里写JavaScript代码*/</script></head><body></body>
</html>

5.link标签

link标签用于引入外部样式文件（CSS文件）

<!DOCTYPE html>
<html><head><link type="text/css" rel="stylesheet" href="css/index.css"></head><body></body>
</html>

6.base标签

base标签的作用是当超链接标签<a>没有指定href和target的属性时会默认使用<base>标签的内容

我们只需了解有这么一个标签即可

HTML基础笔记——head标签相关推荐

HTML基础-笔记1标签
html标签整理: <hx>标题</hx> <p>段落</P> <q>引用短语</q> <blockquote>自带 ...
JavaScript基础笔记集合（转）
JavaScript基础笔记集合 JavaScript基础笔记集合 js简介 js是脚本语言.浏览器是逐行的读取代码,而传统编程会在执行前进行编译 js存放的位置 html脚本必须放在< ...
Java零基础笔记自用版（一）
系列文章目录一.Java零基础笔记自用版(一) 目录系列文章目录前言一.⭐️Java概述二.⭐️变量三.⭐️运算符四.⭐️控制结构五.⭐️数组.排序.查找写在最后前言最近在学习J ...
Andrew Ng-机器学习基础笔记（下）-Python实现代码
目录前言: 10. 应用机器学习的建议 10.1 决定下一步做什么 10.2 评估一个假设 10.3 模型选择和交叉验证集 10.4 诊断误差和方差 10.5 正则化和偏差/方差 10.6 学习曲线 ...
GIT基础笔记之一：从浅入深使用GIT
GIT基础笔记之一:从浅入深使用GIT 前言由于公司一直用的TortoiseSVN,导致之前用的一些git命令忘记,因此做个笔记总结一下,顺便后续部署几个自己的小项目,同时为大家在学习代码的路上越走 ...
HTML5、CSS3基础笔记
HTML5 & CSS3基础笔记 HTML html的基本格式实体 meta标签语义化标签-01 块和行内语义化标签-02 列表超链接介绍相对路径超链接的其他用法图片标签图片格 ...
.NET基础笔记（C#）
作者:七步. 出处:http://www.cnblogs.com/dongyu9521/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保 ...
JQuery 基础笔记
JQuery 基础笔记 1. jQuery 概述 1.1 jQuery 是什么? 1.2 jQuery 简单应用 1.3 jQuery 功能应用 1.4 jQuery 技术优势 1.5 jQuery ...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言本文完全基于参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
mysql数据库逆心_数据库系统基础笔记(7)--函数
逆心 MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数数学函数主要用于处理数字,包括整型.浮点 ...

HTML基础笔记——head标签

HTML基础笔记——head标签相关推荐

最新文章

热门文章