HTML入门第二课

上篇文章介绍了一些简单的常用标签，其实，HTML中还有许多重要的标签和基础概念，这次我们来说一些其他的基础知识。

1.实体
什么是实体

        浏览器会提前征用一部分的字符，例如大于号，小于号，空格，版权符号等等

        如果程序员想用，可以用一些额外的字符去表示，这些额外的字符，我们叫实体

实体的语法： &实体的名字; （不要忘了分号）

常用的实体

        大于号：>

        小于号：<

        空格： 

        版权符号：©

示例：

效果图如下：

2.列表

列表（list）一组一组

         1：有序列表 用ol标签创建，li表示列表项

                默认样式：

                列表项的前面有加1，2，3等项目符号

                列表项的前面有较大间距

          2：无序列表 用ul标签创建，li表示列表项

                默认样式：

                列表项的前面有加黑色实心小圆点

                disc，默认值

                square,实心的方块

                circle,空心的园

                实际开发过程中，我们会去除默认的项目符号

           3：定义列表 用dl标签创建，使用dd对内容进行解释说明

        注意：1、常用有序列表和无序列表，而且在实际开发过程中，

                         不需要特别区分有序或者无序

                   2、有type属性，可以更改列表项目符号

                          ol  type属性值：1，a，A，i，I

                          ul  type属性值：circle，square，disc

                    3、列表之间是可以相互嵌套的

                    4、ol li

                          ul li

                          dl dt dd

                         是配合使用，一般情况下不加入其他直接子元素

                         默认样式，li有项目符号，上下外边距，左内边距

3.超链接

何为超链接呢，上次说到，html是超文本标记语言，这里的超就是超链接。

超链接：可以是一个字，可以是图片，可以是表格，或者音视频等等

               是行内标签，特殊的行内标签，它里面什么都能放，除了他自己

功能：

            1、从一个页面跳到另一个页面

            2、在当前页面进行跳转（锚点功能），一般可以用来做“楼梯导航”

            3、下载

 属性：

            href属性 指向超链接跳转的地址

            跳转的路径：

            绝对路径：是一个完整的地址，无论超链接在哪里，只要地址不写错，就可以实现跳转

            相对路径：不是一个完整的地址，路径写法跟你所在位置相关

                        ./  你（超链接）所在的位置跟你要跳转的位置在同一目录下，默认就是 ./ 开始

                        ../ 你（超链接）所在的位置跟你要跳转的位置不在同一目录下

                                跳出当前目录来到上一级目录寻找，如果上一级目录下还未寻找到，

                                那就再../，直到找到为止

            target属性：设置超链接的打开方式

                   可选值：

                    _self： 当前页面打开超链接 ，也是默认值，一般情况，国外的网站喜欢用  _self

                    _blank： 新开页面打开超链接， 国内的网站常用 _blank

  空连接写法（2种写法）：

锚点功能实现：

            第一步：给你要跳转的位置打一个标记

                    id=‘xxx’

                    id属性值：不能以数字开头，最好不要是汉字

            第二步：在超链接href属性值里：#id属性值

        特殊情况：回到顶部

                          <a href="#">回到顶部</a>

                         会刷新页面，滚动条回到最开始的位置

4.img标签

使用img标签来向网页中引入一个外部图片

img这种元素属于替换元素，行内块标签（基于块和行内元素之间，具有两种元素的特点）

         4个属性：

                src：指向图片的引入路径

                       绝对路径：完整的地址

                       相对路径：不完整的的地址，./或../

                alt：对图片的文字描述，正常情况下不显示，当图片引入不成功的时候会显示

                        对seo推广有好处

                width：设置图片的宽度

                height：设置图片的高度

                         注意：一般情况下不会同时设置宽度和高度

                         只会设置其一，另外一个浏览器会自适应调整大小

这里补充一下常用的几种图片格式：

                JPEG(JPG)

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

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

                GIF

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

                         图片单一或者是动态图时可以使用GIF

                PNG

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

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

                         专为网页而生

                webp

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

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

                          缺点：兼容性不好

                base64

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

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

            注意：图片的使用原则

                 效果不一致，使用效果好的

                 效果一致，使用小的

5.音视频

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

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

        src：引入音视频的路径

               相对路径，绝对路径

        controls：控制用户是否可以播放，默认用户不可以播放

        sutoplay：自动播放（基本被废止）

        loop：循环播放

示例：

效果图如下：

今天的分享到这里就结束了，感兴趣的同学可以自己动手实操一下