HTML学习笔记（二）

一、图像

  在HTML中，图像使用<img>标签。对于img标签，我们只需要掌握它的三个属性即可：src、alt、title。

src 图片文件的地址

alt 图片显示不出来时的提示文字

title 鼠标移动到图片上的提示文字

title属性的值一般与alt属性值相同，一个是给读者用户看，一个是给搜索引擎看
<img src="当前图片的路径"  title="鼠标放在图片上时出现的文字"
     alt="当你的图片显示不出来的时候显示的文字">
     路径：1.绝对路径
          2.相对路径
          /    (windows 盘符 代表当前文件夹的根目录)
          ../  （代表当前文件的上一级目录）
          ./    （当前文件目录，可以省略）

二、超链接

语法：<a href="链接地址" target=“目标窗口打开方式”>超链接内容</a>
          打开方式掌握两种：
          1._blank 在新窗口页打开链接
          2._self 在当前窗口打开链接
          
          提供下载功能：当href属性中的路径文件打不开时，或者是个压缩文件，浏览器就会提供下载功能
          <a href="img.zip">下载</a>
三、锚点链接：

  有些网页内容比较多，导致页面过长，访问者需要不停拖动浏览器上的滚动条来查看文档中的内容。为了方便用户查看文档中的内容，需要在文档中建立锚点链接。

  所谓的锚点链接，就是点击某一个超链接，它就会跳到“当前页面”的一部分。
         方法： 首先创建一个标记：<a name="标记值">这是Top</a>
          然后定位<a href="#标记值">Top置顶</a>

四、表格

语法：

<table border="1px" width="600px" height="600px">
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>

            </table>

<tr></tr>表示一行。<td></td>表示一列，所以这表示一个两行两列的表格。border表示边框的宽度单位“1px”的意思是边框宽度为一个像素，width和height分别表示表格的宽度和高度。

表格特性：

如果改变某一个单元格，就会影响

列合并和行合并分别用到colspan和rowspan属性，所谓的合并是调整单元格的宽度，要想实现我们想要的“合并”效果，需要删除多余的行和列。

cellspacing：设置单元格与单元格之间的距离

cellpadding：设置单元格中内容与边框的距离

下面是练习实例

demo：

<img src="D:Pictures366.gif" title="这是一条狗" alt="狗不见了"><!--绝对路径--><br>
<img src="timg2.jpg"><!--同路径下--><br>
<img src="../Users/timg1.jpg"><!--上一级目录的文件夹里面的图片--><br>
<a href="https://www.tmall.com" target="_blank">淘宝网1</a><br>
<a href="https://www.tmall.com" target="_self">淘宝网2</a><br>
<a href="20180131.html" target="_blank">跳转到第一天</a><br>
<a href="Https://www.baidu.com" target="_blank">跳转到百度</a><br>
<a href="https:www.taobao.com" target="_blank"><img src="https://gtms04.alicdn.com/tps/i4/TB1LTFnXcpTBeNjSZFqSuu_nVXa.jpg_.webp" title="淘宝网" alt="图不见了"></a><br>
<a href="img.rar">下载</a><br><hr>
<br>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<a href="#top">Top置顶</a>
<a href="20180131.html#demo">跳转到飞雷神之术</a>此标签在昨天的练习当中
<a href="https:www.baidu.com">跳转到百度</a>

下面是练习做表格的效果图

部分关键代码

<table border="0px" width="490px" height="700px" cellspacing="0px" cellpadding="10px">
    <tr>
        <td colspan="3"><strong>剁手党云集的网站</strong></td>
        <td><a href="#">展开</a></td>
    </tr>
    <tr align="center">
        <td><img src="表格练习/1.png"></td>
        <td><img src="表格练习/2.png"></td>
        <td><img src="表格练习/3.png"></td>
        <td><img src="表格练习/4.png"></td>
    </tr>
    <tr align="center">
        <td><a href="https:www.taobao.com">天猫</a></td>
        <td><a href="https:www.JD.com">京东</a></td>
        <td><a href="https:www.YHD.com">一号店</a></td>
        <td><a href="https:www.amazon.com">亚马逊</a></td>
    </tr>
    <tr align="center">
        <td><small>综合性购物网站</small></td>
        <td><small>3C网购专业平台</small></td>
        <td><small>电子商务型网站</small></td>
        <td><small>网络电子商务公司</small></td>
    </tr>


</body>
</html>