【HTML入门】第二课 - head标签下的常见表情们

news2024/11/19 8:26:01

1 本节概要

2 head下的常见标签

2.1 网页编码设置

2.2 网页的标题

2.3 样式标签

3 head标签的内容不会显示到网页上

4 查看网页源代码

1 本节概要

上一节，我们说了HTML网页最基本的框架标签，说到标签分为head头部和body身体部分。这一小节呢，我们说一下head这个大标签下，一般都会包含哪些内容。

由于现在是入门可成，所以不会说太多复杂的，到后面慢慢的，我们都会说到。

2 head下的常见标签

2.1 网页编码设置

网页编码如果不正确，展示出来的就会是乱码，现在最常用最流行的，也就是utf-8编码。可以这样写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        
    </body>
</html>

你看，这个meta标签，里面有 charset 属性，对应着属性值是 utf-8。就表示咱们这个网页要设置为 utf-8 编码的。

2.2 网页的标题

你看，一般网页都是有标题的，表示这个网页的主旨内容。现在我们还没有设置，所以他用浏览器打开后，长这样：

所以，我们可以添加代码设置，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
    </head>
    <body>
        
    </body>
</html>

再刷新一下网页，我们就可以看到最新设置的标题了。如下图：

2.3 样式标签

后面我们会学到给网页添加样式，也就是CSS的内容。这里我们先学一种标签也就是 style 标签

这个style标签下面，会放CSS样式内容，可以控制网页中的一些元素，让他们更好看一些。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        
    </body>
</html>

要记住，我们给 style 标签添加了 type 的属性，属性值是 text/css。这是固定写法，记下来就可以了。

其实还可以引入外部的CSS样式表，用来影响当前网页的元素内容，这个我们后面说，先记住这个标签就可以了。

3 head标签的内容不会显示到网页上

我们虽然写了这么多标签，但都是在head标签里面的，这些head下面的内容，是不会显示在网页区域的。

比如我们在刚才的style标签下面，写几个文字，包括刚才加的 title 标签，都不会显示出来。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个网页</title>
        <style type="text/css">
            是否有内容呢？
        </style>
    </head>
    <body>
        
    </body>
</html>

然后看一下自己的网页，刷新一下网页看一下效果：