HTML学习篇(二) head标签

<head>标签

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

<title>标签

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

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

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

<meta>标签

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

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

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

 

<link>和<script>标签

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

扫描二维码关注公众号,回复: 5657705 查看本文章
<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标签的总结先到这里,后面如果有补充会再更新。

猜你喜欢

转载自blog.csdn.net/weixin_44247959/article/details/86409856
今日推荐