HTML学习篇（二） head标签

最新推荐文章于 2024-03-17 11:50:58 发布

haobrother

最新推荐文章于 2024-03-17 11:50:58 发布

阅读量489

点赞数

分类专栏：学习笔记文章标签： html head

本文链接：https://blog.csdn.net/weixin_44247959/article/details/86409856

版权

20 篇文章 0 订阅

订阅专栏

在HTML中，head标签内包含的元素表示网页文档的元数据，即用来描述网页但又不直接显示的数据。下面描述head标签及其常用内容。

顾名思义，title表示网页的标题，另外title对于网页在搜索引擎的搜索结果上也有体现。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页</title>
  </head>
  <body>
    测试一下
  </body>
</html>

上面的页面在Firefox浏览器显示为：

从上面代码也可以看到，有一个meta标签，并且包含有charset属性为utf-8，表示网页内容使用的字符集是UTF8，如果把这一行去掉，页面会乱码：

因为页面默认的字符集是ISO-8859-1，它是欧美系字体的字符集，例如英文之类的语言就没问题，它包含了ASCII字符集在内。因为UTF8包含了中文编码，为了让页面显示中文，我们需要一句<meta charset="utf-8">即可。

另外meta标签代表的是元数据，所以不像title或者其他body内的元素那样需要包含内容，它是空元素，只需要包含属性即可。除了charset属性，还有用name/content对来表示各种各样的元数据，name代表元数据类型，content代表元数据内容，详细可以参考HTML <meta>。

为了在HTML中引用外部的CSS文件和Javascript文件，需要分别使用link和script标签：

<head>
    <link rel="stylesheet" href="cssFile.css">
</head>

<head>
    <script type="text/javascript" src="jsFile.js"></script>
</head>

上面两个标签分别引用了html同目录下的cssFile.css和jsFile.js文件

另外，如果要在文档里使用css和js，可以直接使用style标签和script标签嵌入CSS和JS内容：

<head>
    <style>
        p{ font-size: 50px; }
    </style>
</head>

<head>
    <script type="text/javascript">
        alert("测试");
    </script>
</head>

OK，关于head标签的总结先到这里，后面如果有补充会再更新。

关注