Web前端学习笔记2（Html）_用五谷无畜的主题有文字和图片用html进行布局写代码web前端-优快云博客

本文介绍了HTML的基本标签如标题、语义化、列表、超链接、图片和内联框架，以及CSS的初步应用，包括元数据设置和网页布局控制。通过VSCode的快捷方式演示了如何快速创建和编辑代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在了解了基本的框架之后就可以进一步学习了，刚开始写Html代码的时候是使用的文本编辑器和notepad++，这样将整个框架自己敲一遍，就能对基本的代码更加熟悉！当熟悉了基础的代码之后就没必要每次写的时候都敲一遍，因为整体的框架都是相同的，就可以借助集成的编辑器来写，各种快捷键比较方便快捷！这里我使用的是VSCode。

在安装好之后，配置好环境就可以开始使用。学习Html其实就是学习它的各种标签。

知识点学习

当使用VSCode进行编码，只需要Shift+!，然后回车即可，就可以快速生成代码框架！如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

下面就是学习的每一个小的知识点。

1、实体

对于实体，其实就相当于C语言或者C++中的转义字符，当我们想要表示一些特殊的符号的时候，例如：空格、字母两侧的大于号或者小于号，为了和标签等其他符号的混淆，所以就用到了实体，需要特殊记忆。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实体</title>
</head>
<body>
    <p>
        <!-- 
            在网页中想要写一些特殊的符号，例如空格，字母两侧的大于号小于号，
                则要使用html中的实体（转义字符）

            实体的语法：
                &实体的名字；
                    &nbsp; 空格
                    &gt; 大于号
                    &lt; 小于号
                    &copy; 版权符号
                    ···
         -->
         <h1>
             M&nbsp;&nbsp;&nbsp;&nbsp;YH
         </h1>

         <p>
            a&gtb&ltc
         </p>

    </p>
</body>
</html>

到用到的时候可以去查，到w3cschool网站去查。

2、meta标签

meta主要用于设置网页中的一些元数据，元数据不是给用户看的。例如：网页中的字符集、搜索关键字、网页的描述等等。

一般都写在head里面，因为这些内容不想给用户在网页中看到。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 
            charset 指定网页的字符集
            name 指定数据的名称
            content 指定数据的内容

                keywords 表示网站的关键字，可以同时指定多个关键字，用逗号隔开
                    <meta name="keywords" content="360,购物,导购,折扣,实惠,品牌特卖,促销,特价商品,特价,低价,女装,男装,母婴,零食">
                
                description 用于指定网站的描述
                    <meta name="description" content="360购物-“惠”聚全网优质折扣商品,为您推荐近期热门有趣的商品,致力于打造“有温度”的购物体验。囊括女装、男装、鞋包、美妆、母婴、数码、美食等多个品类【你爱的都在这里！】">
                    网站的描述会显示在搜索引擎的搜索结果中

        title标签的内容会作为搜索结果的超链接
     -->

     <meta name="keywords" content="html5,前端,CSS3">
     <meta name="description" content="这是一个非常不错的网站">

    <title>meta标签</title>
</head>
<body>
    
</body>
</html>

其中还有一个相对比较特殊的可以用来跳转网页，与后面学习的超链接还有一些差别，这个可以实现自动跳转，下面这个meta标签就可以实现3秒之后从当前的网页跳转到百度网页。

<!-- 
    用来跳转网站
-->
<meta http-equiv="refresh" content="3;url=https://www.baidu.com">

3、语义化标签（1）

语义化标签，当使用的时候应该更注重它的语义，而不是样式。因为Html主要负责网页的结构，它的样式交给CSS来处理，所以我们需要关注语义。
主要内容：
标题标签：h1~h6
标题分组标签：hgroup
段落标签：p
语气加重标签：em
强调标签：strong
长引用标签：blockquote
短引用标签：q
换行标签：br
关注语义，不关注长什么样
块元素（独占一行）
行内元素（不独占一行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        在网页中HTML主要用来负责网页的结构
            所以在使用html标签时，应该关注的是标签的语义，而不是它的样式

            标题标签：
                h1 ~ h6 一共六级标题
                从h1 ~ h6重要性依次递减，h1最重要，h6最不重要
                h1在网页中的重要性仅次于title标签，一个页面中一般性只有一个h1
                一边情况下标题标签只会用到h3，h4~h6几乎不用

                都是块元素

            块元素：
                在页面中独占一行的成为块元素（block element）

     -->
     <h1>一级标题</h1>
     <h2>二级标题</h2>
     <h3>三级标题</h3>
     <h4>四级标题</h4>
     <h5>五级标题</h5>
     <h6>六级标题</h6>

     <!-- 
         hgroup标签用来为标题分组，可以将一组相关的标题放在一个组里面
      -->
      <hgroup>
          <h1>回乡偶书</h1>
          <h2>其二</h2>
      </hgroup>>



    <!-- 
        p标签表示页面中一个段落

        p也是一个块元素
     -->
     <p>在p标签中内容就表示一个段落</p>
     <p>在p标签中内容就表示一个段落</p>


     <!-- 
         em标签用于表示语调、语调的加重

         行内元素：
            在页面中不会独占一行的元素成为行内元素（inline element）
      -->
     <p>今天天气<em>针</em>不戳！</p>

     <!-- strong表示强调，重要内容！-->
     <p>你今天必须要<strong>完成作业</strong>！</p>


     <!-- blockquote表示一个长引用 -->
     鲁迅说：
     <blockquote>
         我从来没说过这句话！
     </blockquote>
      

     <!-- q表示一个短引用 -->
    子曰：
    <q>
        学而时习之，不亦说乎！
    </q>

    <!-- br表示页面中的换行，一个换一行，两个换两行 -->
    <br>
    <br>
    今天天气真不错！

    
</body>
</html>

这里只学习了一部分，其他在使用的时候可以查阅帮助文档。

4、语义化标签（2）

布局标签（结构化语义标签），这里讲述了一些布局标签，指示网页的头部、底部或者一篇文章网页导航等等。但是常用的还是div和span。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <!-- 
        布局标签（结构化语义标签）
        主要用的还是 div 和 span
     -->

     <!-- 
         header 表示网页的头部
         main 表示网页的主题部分（一个网页中只有一个main）
         footer 网页的底部
         nav 表示网页中的导航
         aside 和我们的主题相关的其他内容（主要表示网页中的侧边栏）
         article 表示独立的一篇文章
         section 表示一个独立的区块，上边的标签都不能表示时，使用section

         div 没有语义，就是用来表示一个区块，目前div还是一个主要的布局元素
         span 行内元素，没有任何语义，一般用于在网页中选中文字
      -->
     <header></header>
     <main></main>
     <footer></footer>

     <nav></nav>
     <aside></aside>
     <article></article>
     <section></section>

     <div></div>
     <span></span>  
</body>
</html>

5、列表

Html中创建列表，分为3种：有序列表、无序列表和定义列表。

有序列表，使用ol标签来创建无序列表，使用li来表示列表项
无序列表，使用ul标签来创建无序列表，使用li来表示列表项
定义列表，使用dl标签来创建定义列表，使用dt来表示定义的内容，使用dd来对定义的内容解释说明。

列表之间可以相互嵌套。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

     <ol>
         <li>结构</li>
         <li>表现</li>
         <li>行为</li>
     </ol>

     <ul>
         <li>结构</li>
         <li>表现</li>
         <li>行为</li>
     </ul>

     <dl>
         <dt>结构</dt>
         <dd>结构表示网页的结构，规定哪里是标题，哪里是段落！</dd>
     </dl>

     <ul>
         <li>
             aa
             <ul>
                 <li>aa-1</li>
                 <li>aa-2</li>
             </ul>
         </li>
     </ul>

</body>
</html>

6、超链接

超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的其他位置。使用 a 标签来定义超链接。还可以指定超链接打开的位置，在当前页面或者新打开一个页面！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <!-- 
        超链接可以让我们从一个页面跳转到其他页面，
            或者当前页面的其他位置

        使用 a 标签来定义超链接
            属性：
                href 指定跳转的路径
                - 值可以是一个外部的网站的地址
                - 也可以写一个内部页面的地址

        超链接是也是一个行内元素，在 a 内可以嵌套除了它以外的任何元素
     -->
        
    <!-- 
        targrt属性，用来指定超链接打开的位置
            可选值：
                _self 默认值 在当前的页面打开超链接
                _blank 在一个新的页面打开超链接
     -->
    
    <a href="https://www.baidu.com">超链接1</a>

    <br><br>

    <a href="07.列表.html">超链接2</a>
    <a href="07.列表.html" target="_blank">超链接3</a>
</body>
</html>

以上的超链接是跳转到另一个页面，下面的超链接是跳转到当前页面的其他位置。只需要将 href 的属性值做相应的更改。

还可以跳转到指定的位置，只要将 href 的值写为 #目标元素的id属性值，为了查看效果，随便粘贴了一篇文章进行测试。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

    <a href="#bottom">去底部</a>
    <br><br>
    
    <a href="#p3">去第三自然段</a>
    
    <p>
        “周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。

　　久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”

　　周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”

　　周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。

　　周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。

　　周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”

　　陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。

　　此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。

　　后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。

　　周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。
    </p>

    <p>
        “周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。

　　久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”

　　周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”

　　周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。

　　周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。

　　周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”

　　陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。

　　此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。

　　后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。

　　周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。
    </p>

    <p id="p3">
        “周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。

　　久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”

　　周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”

　　周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。

　　周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。

　　周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”

　　陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。

　　此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。

　　后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。

　　周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。
    </p>

    <p>
        “周处自新”是中国历史上一个很有名的故事。周处是晋代义举阳羡，也就是现在的江苏宜兴人，鄱阳太守周鲂之子。周处年少时纵情肆欲，不拘小节，性情凶悍粗鲁，恣意妄为，简直成了乡中一害，乡亲们都十分怕他，总是躲得远远的，不愿和他交往。

　　久而久之，周处也知道自己为乡亲们所憎恶，便有了悔改之意。他见乡亲们大多愁眉不展，闷闷不乐，心里觉得奇怪，便问道：“如今天下太平，风调雨顺，五谷丰登，事事都如人意，为什么你们还郁郁不乐呢？”父老们答道：“现今地方上有三害未除，哪里能快乐得起来呢？”周处问道：“是哪三害？”父老答道：“南山上的白额猛虎随意伤人，为一害；长桥下的河中蛟龙常伤人畜，又是一害；至于第三害……”说到此处，父老们有些犹豫，但还是说了出来：“恐怕要算是你了。”

　　周处听罢此言，沉默良久，最后他决然说道：“这三害我都能除去！”

　　周处身带利器，孤身进山搜寻白额猛虎，与猛虎一番搏斗，终于杀死了这只伤人性命的猛兽。接着他又奋身投入河中，去斩杀那条蛟龙。蛟龙在水中或沉或浮，周处与蛟龙一起浮沉了几十里远。而周处比蛟龙更勇猛，他与蛟龙恶战三日三夜，终于将蛟龙斩杀。

　　周处三日不归，乡亲们以为他已经死了。想到地方上一下子三害俱去，从此可以太平无事，乡亲们都高兴的互相庆贺，欢喜雀跃。这时候，周处正好归来，眼见乡亲们的高兴情景，才明白自己被大家痛恨到了何等地步，顿时大受刺激，这也更加坚定了他改过自新、从新做人的决心。

　　周处决心已定，立即付诸行动。他了解到吴中大将陆逊的孙子陆机、陆云很有才学，便专程前去拜访，想拜他们为师。周处只见到了陆云，将自己的情况如实相告，问陆云：“我很想改过自新，可是岁月已经荒废了，怕终于没有什么成就。不知是否来得及？”陆云鼓励周处道：“古人珍视道义，曰：朝闻道夕可死。认为‘哪怕是早晨听闻了圣贤之道，即使晚上死了也不算虚度此生了。’况且你的前途还是有希望的。再说人就怕立不下志向，只要能立志，又持之以恒，何必担忧好名声不能传扬呢？”

　　陆云的一番话极大的鼓励了周处，他从中领悟了有志者事竟成和浪子回头金不换的道理。从此，周处洗心革面，努力读圣贤书，好学上进。他勤学而有文思，又十分注重自身修养，养成了良好的品德。仅一年，他的名声就大大不同以往，以至于州、府的官员都举荐他出来做官。

　　此后，周处为官三十余年。在任时，他恪尽职守，政绩很好，如在新平任太守时，与少数民族关系相处得很好；当广汉做太守时，为官清廉，处理了不少数十年留存下来的积案；当御史中丞后，他秉公执法，不攀附权贵，他的刚正不阿，自然是难以见容于恶势力。

　　后来，少数民族首领齐万年造反，朝中想加害于周处的权贵故意推荐他去征讨。有人知道那些朝臣们的险恶用心，规劝周处推辞掉这个差使。周处坚决说道：“忠孝岂能两全，既然辞别亲人，服务于朝廷，父母亲哪里还能把儿子仅仅当作自己的私有之物呢？今天是我献身的时候了！”最后周处由于恶人的陷害，战死疆场，以身殉国。

　　周处勇于改过，忠于国事，由一个地方恶少转变为忠臣良将，给后人以很大的启示。他的故事说明，一个人做错了事，但只要立志改过，从善如流，是有光明前途的，有志者事竟成，只要下定决心，踏踏实实的去做，一定会有一个好的未来。
    </p>

    <br><br>

    <!-- 
        可以使用javascript:;作为 href 的属性，但是点击的时候什么也不会发生，相当于一个占位符
     -->

     <a href="javascript:;">这是一个新的超链接</a>

     <br><br>
    <!-- 
        可以直接将超链接的 href 属性设置为#，这样就可以跳转到当前页面的顶部

        还可以跳转到指定的位置，只要将 href 的值写为 #目标元素的id属性值
        
        id属性（唯一不重复的）
            - 每一个标签都可以添加一个id属性
            - id为每一个元素的唯一标识，同一个页面不能重复
            - 区分大小写，并且必须字母开头
     -->
     <a id="bottom" href="#">回到顶部</a>
</body>
</html>

7、图片标签

可以引入本地的图片，也可以引入线上的图片，只需要对路径进行修改即可。还可以设置图片的长度和宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        图片标签用来向当前页面引入一张外部图片
            使用img标签来引入外部图片，img标签是一个自结束标签
            img 是替换元素（基于块元素和行内元素之间，具有这两种元素的特点）
            属性：
                src 是图片的路径（可以是本地的，也可以是外部网站的）
                alt 是对图片的一个描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示
                    搜索引擎会根据alt中的内容来识别图片

                width 图片的宽度
                height 图片的高度

                注意：
                    一般在PC端，不建议修改图片的大小，需要多大就裁剪多大
     -->
     <img src="./img/45137cd0182cdd4b91338bc58e32c565.jpg" alt="青蛙">
     <img src="./img/52311da6c6d0c173c01f8e3fdd3fb574.jpeg" alt="加菲猫">
     
     <img width="400" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa4.att.hudong.com%2F27%2F67%2F01300000921826141299672233506.jpg&refer=http%3A%2F%2Fa4.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1612193435&t=03c83fe8560f09ac16f7e5b75e5202ab" alt="二哈">

     <!-- 
         图片的格式：
            jpeg(jpg)
            gif
            png
            webp      

            base64
                - 将图片使用base64进行编码
                - 希望图片加载特别快的时候使用
      -->
</body>
</html>

8、内联框架

内联框架就是在当前的页面引入一个其他的已经存在的页面，使用标签iframe。很少使用这种标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <!-- 
        内联框架，用于向当前页面中引入一个其他的页面
            src 引入网页的路径
            frameborder 指定内联框架的边框（有或者没有）
            
        很少使用
     -->

     <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
     <h1>Hello</h1>
</body>
</html>

9、音视频标签

和图片标签类似，只不过标签的名称为audio和vedio。可以添加各种属性来控制自动播放、循环播放等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音视频</title>
</head>
<body>

    <!-- 
        audio 标签用来向网页中引入一个外部的音频文件
            引入时，默认不支持用户控制播放
        
        属性：
            controls 是否允许用户控制播放
            autoplay 音频文件是否自动播放
            loop 音乐是否循环播放
     -->

    <!-- <audio src="./source/imagine.mp3" controls autoplay loop></audio> -->
    
    <!-- 除了使用src来指定外部文件路径，还可以通过source来指定 -->
    <audio controls>
        <source src="source/imagine.mp3">
            <embed src="source/imagine.mp3" type="audio/mp3">
    </audio>


    <video controls>
        <source src="./source/194181武汉加油宣传片.mp4">
            <embed src="./source/194181武汉加油宣传片.mp4" type="video/mp4">
    </video>

    <iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=i0521adt0m5" allowFullScreen="true" width="400" height="300"></iframe>
</body>
</html>