HTML Class 2

学习内容：

1.向页面标题添加图标，在head标签中添加：<link rel="shortcut icon" href="图标地址">

1 <head>
2　　 <meta charset="utf-8" >
3 　　<title>添加图标</title>
4 　　<link rel="shortcut icon" href="logo.ico">
5 </head>

2.图片标签：<img src="图片地址" title="文字" alt="文字">

（1）title属性：当鼠标悬停在图片上时，显示文字。

1 <img src="img.png title="这是一张图片">

（2）alt属性：当图片无法正常显示时，显示文字。

1 <img src="img.png" alt="这是一张图片">

3.图片路径：绝对路径；相对路径

（1）绝对路径：引入图片的位置，例如E:图片123.png

1 <img src="E:图片123.png">

绝对路径不建议使用

（2）相对路径：相对当前HTML文件的路径

A. / windows盘符图片和html文件在同级目录时可以省略

1 <img src="/img/下载.jpg" alt="红点">

B. ../代表html文件的上一级目录

1 <img src="../img/下载.jpg">

C. ./代表当前文件目录，可以省略

1 <img src="./whole_看图王.png">

4.超链接标签： <a href="" target=""></a>

（1）href属性：填写链接路径，即可跳转至路径网页，当路径文件浏览器无法打开时，例如zip格式文件，那该文件将会被下载，可用来制作下载链接

1 <a href="../img/下载.zip">下载</a>

（2）target属性：_blank：在当新页面打开链接；_self：在当前页面打开链接

5.锚点链接：<a name="值">跳转位置</a><a href:"路径#name值">跳转链接</a>

对第一个a标签指定一个name值，另第二个a标签的href填写路径#name值，可以实现点击第二个a标签跳转至第一个a标签的位置，当路径为其他HTML页面时，可以实现跨页面跳转

1 <a name="demo">这是跳转地点</a>
2 <a href="../html/classD1.html#demo" target="_self">跳转至classD1的页面的demo位置</a>

ps:可以对一个标签例如p制定一个id，#id即可实现跳转至该标签

1 <a href="#p">跳转至P</a>
2 <p id="p">12345</p>

6.表格：<table><tr><td></td></tr></table> tr定义行，td定义列，常用属性有cellspacing;cellpadding;border;colspan;rowspan

（1）cellspacing控制单元格之间的距离，用于table标签

1 <table cellspacing="10px">
　　<tr>
　　　　<td></td>
　　</tr>
　</table>

（2）cellpadding控制单元格内数据与单元格之间的距离，用于table标签

1 <table cellpadding="10px">
　　<tr>
　　　　<td></td>
　　</tr>
  </table>

（3）border控制这个单元格边框的有无、粗细，用于table标签

（4）colspan为列合并，rowspan为行合并,用于td标签

 1 <table border="1px">
 2 　　<tr>
 3 　　　　<td colspan="2">123</td>
 4 　　</tr>
 5 　　<tr>
 6 　　　　<td>456</td>
　　　　　　<td rowspan="2">789</td>
 7 　　</tr>
 8 　　<tr>
 9 　　　　<td>101112</td>
10 　　</tr>
11 </table>

（5）表格内可以嵌套表格

 1 <table>
 2 　　<tr>
 3 　　　　<td>
 4     　　　　<table>
 5     　　　　　　<tr>
 6    　　　　 　　<td></td>
 7    　　　　 　　</tr>
 8    　　 　　</table>
 9　　 　　</td>
10 　　</tr>
11 </table>

2018.02.01