从零开始学习HTML（二）

前言：

今天是学习HTML的第二天，来看今天的学习内容。

学习内容：

1、结构标签、区分元素的种类，列表
2、超链接、图片格式、音视频

结构标签：

布局标签（结构化标签） 用来布局的标签都是块元素

    header  网页的头部

    main  网页的主体部分（一般就一个）

    footer 网页的底部

    nav  网页的导航

    aside  和主体相关的内容，侧边栏

    article  文章之类的

    section 独立的区块，上面的标签都不合适，就用这个用来代替div

区分元素种类：

元素分类

        块元素（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，在实际的使用中，一般不做有顺序或者无顺序区分

 超链接：

超链接： 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>

 图片格式：

图片格式有五种，分别是JPG,PNG,GIF,webp,base64

其中他们的特点分别为：

JPEG(JPG)

                    - JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明

                    - 一般用来保存照片等颜色丰富的图片

                   

                GIF

                    - GIF支持的颜色少，只支持简单的透明，支持动态图

                    - 图片颜色单一或者是动态图时可以使用gif

               

                PNG

                    - PNG支持的颜色多，并且支持复杂的透明，不支持动图

                    - 可以用来显示颜色复杂的透明的图片

                      专为网页而生的

                webp

                   -谷歌新推出的专门用来表示网页的一种格式

                   -它具有其他图片格式的所有优点，而且文件格式还很小

                   -缺点：兼容性不好

                   

                base64

                   -讲图片使用base64编码，这样可以将图片转换为字符，通过字符形式来引入

                   -一般都是需要和网页一起加载的图片才会使用base64

音视频：

audio标签 用来向页面中引入一个外部的音频文件 

video标签来向页面中引入一个视频，使用方式跟音频基本上一样的

      src  引入音视频的路径

      controls   控制用户是否可以播放,默认是不能播放

      autoplay  自动播放   （基本被废止，也是考虑到用户的体验，除了ie9以下）

      loop     循环播放

总结 ：

今天所学都围绕HTML的标签进行，通过今天的学习对于HTML的标签了解和 掌握了更多，

对于代码的编写也更加得心应手。