第3天：HTML 中的 head 标签

最新推荐文章于 2022-12-15 23:28:30 发布

lefex

最新推荐文章于 2022-12-15 23:28:30 发布

阅读量150

点赞数

本文链接：https://blog.csdn.net/lefex/article/details/103351439

版权

昨天同学反馈的问题主要集中在以下几个：

1 .内容比较少，很快就学完了。

目前内容确实比较简单，我在文末加入一些比较难的内容，有条件的同学可以提前学习。

2 .多讲一些原理性的内容。

为了照顾所有的同学，还是从基础开始，后续会适当的增加一些除课程大纲外的内容。

前面我们讲了 HTML 的基本结构，对于各个标签并没有深入讲解，今天我们学习 head 标签。先看一下 MDN 关于 head 标签的说明：

The Head is the part of an HTML document that contains metadata about that document, such as author, description, and links to CSS or JavaScript files that should be applied to the HTML.

也就是说 head 标签中的内容是为了描述网页的「额外」信息，主要给浏览器或者搜索引擎使用的。而具体展示给用户的信息是在 body 中定义的。其中比较重要的是元数据标签 meta，它通过类似于 key 和 value 的形式提供不同的内容。总的来说 head 中可以定义：

1.定义基本的元数据信息，提供关于文档的额外信息；

定义页面的编码方式<meta charset="UTF-8">viewport 为可视区域，它的宽度为设备的宽度<meta name="viewport" content="width=device-width, initial-scale=1.0">http-equiv 表示执行一个命令，下面设置 HTTP 的 content-type<meta http-equiv="content-type" content="text/html; charset=UTF-8">页面的描述信息，可供搜索引擎显示<meta name="description"content="前端小课">

2.定义 CSS 样式，可通过 style 标签或 link 的方式引入。在后续文章中我们会详细说明 CSS；

直接定义css样式<style>  .title {    font-size: 20px;    color: red;}</style>使用外部定义的 css<link rel="stylesheet" href="./day3.css">

3.定义 JavaScript 内容，可通过 script 或 link 的方式引入，这里需要强调一点 head 中定义的 JavaScript 将会在页面加载前执行，会阻塞页面加载，所以往往会把 JavaScript 定义在 body 标签中；

<!DOCTYPE html><html lang="en">
<head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>HTML Head</title>    <script>        let name = "前端小课";        console.log(name);</script>    <script src="./day3.js"></script></head>
<body>    <p class="title">欢迎来到前端小课，共同学习前端</p>    <script>        console.log("body js");</script></body>
</html>

通过 onload 方法可以监听页面加载完成，在这个时机可以对 DOM 进行操作：

<head>    <script>       window.onload = function() {         console.log('window loaded');       }    </script></head>

4.定义 title 标签，也就是文档的标题。

总结

今天介绍了 head 标签，学完本节内容，希望你能够掌握如何使用外部定义的 CSS 和 JavaScript，内部直接定义 CSS 和 JavaScript，对 head 标签中的内容能干什么事情有一个了解。更多 meta 标签内容，可以参考 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta 。

今天的内容比较简单，可以提前学习一下 CSS 布局相关的内容，这部分知识学习起来会难一些。

加餐内容：图解CSS - 搞懂基本布局 position 。

今天的打卡指令是下面任意一种方式：

1.你都见过哪些 HTML 标签，并说出它们的作用；

2. 什么是 position 布局；

3. Head 标签中还能干什么或者还有哪些有用的meta标签；

4.如果觉得题目太难，可以点击在看也算打卡，同时鼓励下作者；