html图像
<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过‘src’属性定义图片的地址（可为绝对路径也可为相对路径），通过‘alt’属性定义图片加载时显示的文字，以及对搜索引擎和盲人读屏软件的支持。
<img src="images/pic.jpg" alt="加载图片失败，妹妹睡觉去了"/>
<!--图片显示-->
<img src='http://i02.pictn.sogoucdn.com/a1bbd31d4f7df270' alt="产品图片"/>
<img src="images/pic.jpg" alt="加载图片失败，妹妹睡觉去了"/> <br />
<img src='http://i04.pictn.sogoucdn.com/c86564260dc87a3c'/>
<img src="http://i01.pictn.sogoucdn.com/97e326743ea33368"/>
<!--以上均为绝对路径，相对路径如下-->
<!--相对路径指的是相对html文件的路径-->
<!-- ./表示当前文件所在目录下 ../表示当前文件所在目录下的上一级目录-->
<img src="./images/1.jpg" alt="在当前路径下有个images文件夹，里边存放了1.jpg"/>
html链接
网页上的超链接一般分为三种：
1.一种是绝对URL的超链接。URL（Uniform Resource Locator）就是统一资源定位符，简单的讲就是网络上的一个站点、网页的完整路径；
2.第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去；
3.还有一种称为同一网页的超链接，这种超链接又叫做书签。
<a>表示超链接，英文叫anchor，可以指向任何一个文件源，一个HTML网页，一个图片，一个影视文件等，用法:
<a href="ur1">链接显示的文字</a>
包含5个属性：href target title name
href属性：表示这个链接文件的路径。
target属性：可以选择在一个新窗口里或原窗口里打开链接文件
title属性：可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。可以使用 注释多行显示
name属性：通常用于创建一个大文件的章节目录（table of contents）。每个章节都建立一个链接，放在文件的开始处，每个章节的开头都设置name属性。当用户点击某个章节的链接时，这个章节的内容就显示出来。
使用name属性，可以跳到文件的指定部位。
name属性，要设置一对。1.一是设定name的名称 2.二是设定一个href指向这个name
<a href="#C1">参见第一章</a> <a name="C1">第一章</a>
以上总体功能展示如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <h1>我是一级标题</h1> 9 <h2>我是二级标题</h2> 10 <h3>我是三级标题</h3> 11 12 <p> 13 第一段：好好学习天天向上 14 </p> 15 <p> 16 第二段：好的<br />没问题 17 </p> 18 19 <!--注释的写法，浏览器不会进行任何的操作，快捷键crtl / --> 20 21 <p> 22 大小于号的写法：<br /> 23 3 < 5<br /> 24 10 > 5 <br /> 25 4<6 <br /> 26 7>1 <br /> 27 空格1 空格2 空格3 空格4 28 </p> 29 30 <p> 31 <!--图片显示--> 32 <img src='http://i02.pictn.sogoucdn.com/a1bbd31d4f7df270' alt="产品图片"/> 33 <img src="images/pic.jpg" alt="加载图片失败，妹妹睡觉去了"/> <br /> 34 <img src='http://i04.pictn.sogoucdn.com/c86564260dc87a3c'/> 35 <img src="http://i01.pictn.sogoucdn.com/97e326743ea33368"/> 36 <!--以上均为绝对路径，相对路径如下--> 37 <!--相对路径指的是相对html文件的路径--> 38 <!-- ./表示当前文件所在目录下 ../表示当前文件所在目录下的上一级目录--> 39 <img src="./images/1.jpg" alt="在当前路径下有个images文件夹，里边存放了1.jpg"/> 40 </p> 41 42 <p> 43 <!--点击文字的超链接--> 44 双11节提前开始了 45 <a href="http://www.taobao.com">点击下面的链接，优惠50%</a> 46 <!--点击图片的超链接--> 47 <a href="https://www.cnblogs.com/"><img src='https://www.cnblogs.com/images/logo_small.gif' alt="图片"/></a> 48 <!--以上均为绝对路径，相对路径如下--> 49 <!--相对路径指的是相对html文件的路径--> 50 <a href="./images/1.jpg">点击回到本地1.jpg</a> 51 <!-- target属性：target="blank"或者"_blank"，点击链接会在一个新的页面显示 target="_self"，点击链接会原页面显示--> 52 <a href="http://www.jd.com" target="_blank"><img src="https://p.ssl.qhimg.com/t01fdadfd1706f7d040.jpg"></a> 53 <a href="http://www.cnblogs.com/tianqizhi/p/" target="_self">点击跳转到我的博客</a> 54 <!-- target不写，默认会在原页面显示--> 55 <!--属性：title 注： 可用于换行--> 56 <a href="http://www.cnblogs.com/tianqizhi/p/" title="鼠标放在上边 第二行 ">鼠标放在上边会显示本句</a> 57 <!--name属性--> 58 59 <p> 60 <a href="#C6">参见第10章</a> 61 </p> 62 63 <a name="C1"><h2>第1章</h2></a> 64 <p>这是齐1</p> 65 66 <a name="C2"><h2>第2章</h2></a> 67 <p>这是齐2</p> 68 69 <a name="C3"><h2>第3章</h2></a> 70 <p>这是齐3</p> 71 72 <a name="C4"><h2>第4章</h2></a> 73 <p>这是齐4</p> 74 75 <a name="C5"><h2>第5章</h2></a> 76 <p>这是齐5</p> 77 78 <a name="C6"><h2>第6章</h2></a> 79 <p>这是齐6</p> 80 81 <a name="C7"><h2>第7章</h2></a> 82 <p>这是齐1</p> 83 84 <a name="C8"><h2>第8章</h2></a> 85 <p>这是齐2</p> 86 87 <a name="C9"><h2>第9章</h2></a> 88 <p>这是齐3</p> 89 90 <a name="C10"><h2>第10章</h2></a> 91 <p>这是齐4</p> 92 </p> 93 </body> 94 95 </html>
结果
