大学牲HTML作业二：亿些细节性的小语句-CSDN博客

本文链接：https://blog.csdn.net/As_Expected/article/details/134278988

meta元素：

提供有关页面的元信息，例如标题、关键字、一些页面描述等信息。meta不会先显示在页面上，但是对于机器来说是可读的，可以帮助机器理解和索引网页。

例如：

<!DOCTYPE html>
<html>
    <head>
        <title>网页标题</title>
        <meta name="description" content="这是一个关于 meta 的网页">
        <meta name="keywords" content="HTML, meta, 网页">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
</html>

在网页上是这样的：

什么都不显示，包括源码。

虽然meta方法在页面上什么都不显示，但是其对于网页得优化和搜索引擎的索引是非常重要的，可以提高网页的质量和可访问性。

举个栗子，假如这里有一个网站，它是一个关于 HTML 的教程，但是你想要让更多的人能够找到这个网站，那么就需要使用 meta 元素来告诉搜索引擎一些关于这个网站的信息，比如标题、描述、关键字等。这样，当用户在搜索引擎中输入相关的词语时，就可以看到这个网站的简介，从而吸引用户点击进入该网站。如果不使用 meta 元素，那么搜索引擎可能无法正确地理解和显示这个网站，网站可能会排名较低，或者被忽略，这样就会减少网站的流量和影响力。

除了对搜索引擎有用，meta 元素还可以对浏览器有用，比如设置字符集、视口、缓存等，这些都可以影响网页的显示和性能。

因此，meta 元素虽然在网页上看不见，但是它在背后起着很大的作用，它是网页的元数据，也就是数据的数据，是网页的灵魂。

最经典的一句话：

<meta charset="UTF-8">

这句话就是告诉浏览器解码文档使用UTF-8类型，这也是现在的主流类型。

再举一些栗子：

<meta name="viewport" content="width=device-width, user-scalable=no">

其中name="viewport"表示我告诉浏览器，要设置一个网页视图了

content后面接具体设置，这里是说网页宽度设置为设备宽度，这样就很好适配了手机和电脑打开网页时很大或很小的问题了，最后一句user-scalable=no表示不允许用户缩放网页，这一句加在这里纯纯是因为想多写两句话，以体现meta的高级用法。

<meta name="keywords" content="HTML, CSS, JavaScript, web development">

这里name定义了与网页内容相关的关键字，这些关键字可以帮助搜索引擎了解网页的主题，用户网上搜索HTML, CSS, JavaScript, web development这些关键词的时候也会出现我的网页，尽管我的网页什么内容都没有。

上面几句话运行出来依然同上图一样，空空如也。

meta就到这里，还有很多用法，我也没学多少。

注释语句：

这个比meta简单多了,就是一个  就好了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        <!--这是一个注释-->
        <p>半亩方塘一鉴开</p>
        <!--又是一个注释-->
        <p>天光云影共徘徊</p>
        <!--回忆一下斜体-->
        <i>问君哪得清如许</i>
        <!--回忆一下换行-->
        <br><br>
        <!--回忆一下黑体-->
        <b>唯有源头活水来</b>

    </body>
</html>

运行结果如下：

角标标签

上一次作业给忽略了，角标标签也属于简单标签，分为上标和下标。

上标：<sup> 上标</sup>

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        <!--上标举例-->
        <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
        <!--下标举例  工业制月亮-->
        <p>Mn+O<sub>2</sub>=Moon</p>
    </body>
</html>

效果预览：

缩进：

在html中是没有缩进的，写出来的内容不美观，我们平时看到的网页也是从顶格开始写的，一部分原因是歪果仁首段本来就没有缩进，另一方面是因为中文所占3个UTF-8字符，而一个缩进&nbps符号只占一个UTF-8字符，所以要空两格（中文形式）就需要点6个&nbsp，非常麻烦。

当然我看查到css里面可以自定义空格像素 text-indent: 50px; 方法了，这个明显方便很多，但是笔者还没有学到css，这里就不谈这个。

最后上代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
        <p>这是一段带有&nbsp;&nbsp;&nbsp;&nbsp;额外缩进的文本。</p>
    </body>
</html>

输出结果：