HTML初识2

元素分类

        块元素（block element） 用来布局

          特点：

           1、会独占一行

           2、默认情况下，块元素的宽度是视口的100%

           3、默认情况下，块元素的高度是被内容撑开的

          常用块元素：div、p、h1-h6、header、main、footer、nav

        行内元素（inline element） 用来包裹文字

          特点：

           1、不会独占一行

           2、宽高是被内容撑开的，内容有多宽它就多宽

          常用行内元素：span、strong、em、del等

        行内块元素

          特点：

            兼具块元素和行内元素特点

          常用行内块元素：img

        注意：

        1、块元素主要是用来布局，里面可以放任何元素,块元素、行内元素、行内块元素

        2、行内元素主要用来包裹文字的，一般情况下不能放块元素

        3、p标签是个特殊的块元素，它里面不能放块元素

        4、a标签是个特殊的行内元素，它里面什么都能放

列表：如果页面中，出现结构、样式，功能等都比较雷同的部分，

          就可以用列表

      列表（list） 一组一组  

            1:有序列表   用ol创建列表，li表示列表项

            2:无序列表   用ul创建列表，li表示列表项

            3:定义列表   用dl创建列表，dt表示下定义，dd表示对定义的解释

                类似：大列表里有很多的小列表，每个小列表里有标题，有对标题的解释

    注意：1、 列表之间是可以互相嵌套的，ul，ol，li是块元素

         2、 可以使用type属性  更改项目符号

              ol 它的项目符号：1、a、A、I 等，默认项目符号是‘1’

              ul  它的项目符号:

                    disc，默认值，实心的圆点

                    square，实心的方块

                    circle，空心的圆

         3、默认样式，li前有项目符号，上下左右有间距

         4、最常用ol、ul，在实际的使用中，一般不做有顺序或者无顺序区分

    

<h1>起床的三件事</h1>
    <ol type="A">
      <li>刷牙</li>
      <li>洗脸</li>
      <li>吃早餐</li>
    </ol>

    <h1>最喜欢的三件</h1>
    <ul type='circle'>
      <li>吃饭</li>
      <li>睡觉</li>
      <li>打豆豆</li>
    </ul>

    <dl>
      <dt>web前端课程体系</dt>
      <dd>网页三剑客</dd>
      <dd>vue2/ve3</dd>
      <dd>react</dd>

      <dt>java架构</dt>
      <dd>java基础</dd>
      <dd>三大框架</dd>
      <dd>五大数据库</dd>

<!-- html  超文本语言 -->

    <!--超链接： 2个功能，2个属性，1个补充-->

    <!--

     超链接:可以是一个字，可以是一个块元素，可以是图片，可以是任何内容,

          特殊的行内元素，可以包裹任何元素，除了它自己

          默认样式：字体有一定颜色，有下划线

     功能：1、从一个页面跳到另一个页面

          2、在当前页面进行跳转（楼梯导航/锚点功能）

          3、下载

     属性：

          href属性   指向跳转的地址

              绝对地址：不管你的html文件在哪里，超链接去的地方是确定的，是绝对

              相对地址：它的地址值跟超链接的html文件位置相关

                      ./   当前目录下跳转   ./可省略，默认是./

                      ../  跳出当前目录，来到上一级目录

                  注意：很多路径规则都是一样，包括图片、音视频跳转等

          target属性  指定超链接页面打开的方式

            可选值：

              _self    在当前页面打开超链接   默认值   一般情况下，国外网站常用

              _blank   新开页面打开超链接  一般情况下， 国内常用

            具体用哪种方式，根据项目需求来的

      锚点功能实现

         去顶部   href属性值设置为#

         去任意的位置   先给要去的位置打个标记  id属性='id属性值'

                      在href里填写标记      href='#id属性值'

               注意： id属性值： 你起的名字  

                       不以数字开头

                       一般不用汉字

                       一般不能重复使用

      补充：空链接的写法

         <a href="#">空链接1</a>

         <a href="JavaScript:;">空链接2</a>

 

     -->

<a href="#abc">去底部</a>
    <a href="#center">去中间</a>
    <div>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p id="center1">
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p id="center">
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
      <p>
        迷卡三救正下秦彷普韩判亓壬历杀临服气了，作才极商感天光应之明久丹后要，而是卞而磊同蒲判动德朗的作他亲化死的巴，撒者厅往洪啦，第太说土孔其薪互，促者将后师非姑，使子衣奔仁在也只，徒密学尤落者子却，惊洪第道助量服三设揽问，杨一事得得她之中皇，轻了却，促当后她。
      </p>
    </div>
    <a href="#" id="abc">去顶部</a>
    <a href="#">空链接1</a>
    <a href="JavaScript:;">空链接2</a>

    <!-- a标签可以包裹任意元素 -->
    <!-- <a href="">
       <div>搏我得不才，洞必使。</div>
     </a>
     <a href="">
       <span>后</span>
     </a> -->
    <!-- <a href="">
       <img src="./img/img/2.gif" alt="">
     </a> -->
    <!-- <a href="https://www.jd.com/">
       京东
     </a><br><br>
     <a href="https://www.baidu.com/">
       百度
     </a><br><br>
     <a href="03.列表.html">
       列表
     </a><br><br>
     <a href="../1116源码以及作业/07.实体.html">
       1116实体
     </a><br><br>
     <a href="./测试/01.测试1.html">
       去测试1
     </a><br><br>
     <a href="./测试/测试2/测试3/测试3.html">
       测试3
     </a> -->