HTML超链接、列表标签、图片格式以及行内元素与块元素

在互联网中，超链接可谓是无处不在，它是各个网页之间的桥梁，使得网页能够进行跳转。一个网站之中的页面也必须通过超链接连接起来才能称之为网站。

当然，超链接除了指向另一个网页之外，还可以指向邮箱地址、图片、文件等。

1.a标签
向网页中添加a标签是实现超链接的重要方式，但不是唯一方式。本文后面所提到的超链接一般是指通过a标签添加的超链接。

<a href="https://gitee.com/HeavyLeaf">我的码云</a>

以上代码实现了一个超链接，指向一个网页。点击后可以访问连接指向的网页。

1.1 重要属性
在超链接中最主要的属性有三个，分别是：href、title、target。其他一些属性会在后面陆续出现。

1.1.1 href
href属性用于指示一个目标，该属性是a标签必不可少的，少了它超链接将不能跳转。href属性的值是一个链接，也就是网页或资源的地址。比如：href="https://gitee.com/HeavyLeaf"，href的值是一个网页的地址。

链接可以是一个完整的地址，也可以是相对路径。对于外部连接通常使用完整的链接，链接必须包含所使用的协议（HTTP，HTTPS等），否则将是一个无效链接。

<a href="https://gitee.com/HeavyLeaf">我的码云</a>
<a href="gitee.com/HeavyLeaf">我的码云</a>

上例中，第一个超链接的地址是完整的地址，包含了https协议，因此该超链接是有效的；第二个超链接的地址个缺少协议类型，因此是无效的超链接。

对于内部链接，通常使用的是相对路径。

<a href="../src/index.html">我的主页</a>

1.1.2 title
title属性可以为超链接设置一些介绍信息。当鼠标移到设置了title属性的超链接上时，会显示title属性值的内容。设置了title不仅可以提升用户体验，还可以提升网页的SEO（搜索引擎优化）。

<a href="https://gitee.com/HeavyLeaf" title="欢迎访问我的码云">我的码云</a>

1.1.3 target
target属性用于控制链接网页打开的位置（相对于当前网页）。默认情况下，是刷新当前网页所在的窗口，加载新的页面。

target属性值及描述：

_self：默认状态。在当前页面所在窗口打开链接的网页。

_blank：在当前浏览器中打开一个新窗口加载链接的网页。

_parent：在父窗口打开链接的网页。（有些页面可以通过等方式打开一些子窗口）

_top：清除当前窗口中打开的所有框架（子窗口），并在整个窗口打开链接的网页。

framename：在指定的框架中打开链接的网页。

使用得最最频繁的属性值是_self和_blank。至于_parent、_top和framename基本已不再使用。

1.2 锚链接
锚链接可以链接到本页面的特定位置，也可以链接到另一个页面的特定位置。其实现方式是添加锚标记。

当跳转到当前页面的特定位置时，直接将锚标记设为href属性的值。

<a href="#标记名">跳转到本页面的id标记处</a>

当跳转到另一个网页的特定位置时，将锚标记添加到链接地址的末尾。

<a href="http://www.baidu.com#标记名">跳转到另一个页面的标记处</a>

关于“#标记名”，它其实是页面中某一个标签的id属性值。也就是说，如果要跳转到网页的某个位置，就先在这个位置所在的标签设置id属性，然后就可以通过锚链接跳转到这个位置了。

<a href="#标记名">跳转</a>

<标签名 id="标记名"></标签名>


当href属性的值为一个“#”时，表示该链接是指向页面顶部的，点击后可直接跳转到本页面顶部。

<a href"#">返回顶部</a>

 

1.3 空链接

 空链接的写法

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

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

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

          就可以用列表

2.列表标签

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

         5.ol，li 

           ul，li

           dl，dt，dd都是配套使用的，就像cp

  3.图片的格式

                JPEG(JPG)

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

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

                

                GIF

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

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

               

                PNG

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

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

                      专为网页而生的

                webp

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

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

                   -缺点：兼容性不好

                   

                base64

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

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

            图片的使用原则：

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

                效果一致，使用小的

4.行内元素与块元素

   元素分类

        块元素（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标签是个特殊的行内元素，它里面什么都能放