Web前端之HTML基础（2）——图像、表格

一.图像和链接

1.使用

<img>或者<img/>

属性：src=“url” 引用图片资源的路径

2.URL
名词解释：文件目录----文件夹嵌套结构
url：Uniform Resource Locator 统一资源定位符，俗称"路径"

3.路径的表现形式
（1）绝对路径
完整的路径

1°使用网络资源的时候，使用绝对路径
通信协议+主机名称+文件目录结构+文件的具体名称
优点：不占用服务器本地存储空间
缺点：不稳定

2°使用本机资源，可以使用绝对路径

<img src="d:\06.png" alt="">

项目中绝对不可以使用

（2）相对路径
使用本服务器资源的时候使用

1°同级目录
直接引用文件名<img src="07.png">
2°子级目录
先进入兄弟文件夹，在引用文件名 <img src="image/08.png">
3°父级目录
先返回上一级目录，再引用文件名<img src="../07.png">

练习
在01_ex.html中，分别使用上述3种情况，引用图片
附加.图片10.png在01_ex.html的父级的兄弟文件夹image下
附加.图片11.png在01_ex.html的父级的父级文件夹下的image文件夹下

<img src="../image/10.png">
<img src='../../image/10.png'>

（3）img标签的属性
src:source 源，图像资源路径
alt:资源出错的时候，提示的文本
width:宽 px为单位的数字
height:高 px为单位的数字
解决图片失真(设置的宽高比与图片默认宽高比不一致，就会失真)
width/height只设置一个，让另一个自适应

（4）链接
1°语法

<a href="url"></a>

属性：
href:链接的路径
target:指定打开链接的方式
取值：_self 默认值，在当前的标签页打开新网页
_blank 在新的标签页中打开网页

2°a标签的其它表现形式
下载资源

  <a href="00.zip">下载</a>

新建邮件

  <a href="mailto:g-chengliang@tedu.cn">新建邮件</a>

执行js代码

 <script>
    function show(){
      alert("中午吃什么");
    }
  </script>
  <a href="javascript:show()">执行js代码</a>
  返回页面顶部
  ！！！<a href="#">返回页面顶部</a>！！！

（5）锚点
锚点就是页面中的一个记号，可以通过点击超链接的方式，直接回到记号处
使用锚点
1°定义锚点
第一种方式 <a name="锚点名称"></a>
第二种方式 给任意的标签添加id，把id当做锚点名称使用

   <any id="锚点名称">

2°链接到锚点

<a href="#锚点名称">链接本页锚点</a>
<a href="其它的url#锚点名称">链接其它页锚点</a>

页面链接到锚点字后，地址栏会显示锚点的名称

练习
在03_ex.html中使用div定义3个锚点（红楼梦，西游记，三国演义）
使用3个a标签链接到这3个锚点
再写一个a标签，链接到03_a.html#hz这个锚点

二.表格

1.标记

<table>
  <tr>      
    <td></td>  
  </tr>
</table>

表格：table
行：tr table row
列：td table data

2.table标签属性
border:设置表格边框 1px 1
width
height 如果设置的宽高小于表格的内容，表格按内容走
如果设置的宽高大于表格的内容，表格按设置的走
align 表格水平对齐方式 left/center/right
bgcolor 表格的背景颜色 合法颜色值
bordercolor 边框颜色 合法颜色值
cellpadding 设置单元格内边距(边框与内容之间的距离)
cellspacing 设置单元格外边距(边框与边框之间的距离)

练习
设置4*4的表格
表格尺寸是400px*400px
边框2px，边框有颜色orange,背景颜色yellow
表格靠右显示，内容为5px，外边距为10px

2.tr的属性
align 设置当前行的文本水平对齐方式 left/center/right
valign 设置当前行的文本垂直对齐方式 top/middle/bottom
bgcolor 设置当前行的背景色(不包含边框颜色)

3.td的属性
width 当前列的宽度，会影响这一列所有宽度
height 当前列的高度，会影响整个行的高度
align/valign 设置当前列内容的对齐方式
bgcolor 设置当前列的背景颜色
colspan 跨列
rowspan 跨行

3.不规则的表格使用
跨列
colspan
从指定单元格的位置开始，横向向右合并n个单元格(n包含自己本身)
被合并的单元格，要删除

跨行
从指定单元的位置开始，纵向向下合并n个单元格(n包含自己本身)
被合并的单元格要删除

4.可选标记
（1）行/列的标题
<th></th>与<td></td>一样的使用方式
内容文字字体加粗，并且水平居中

（2）表格标题

 <caption></caption>

如果要设置表格标题，必须将<caption>放在<table>之后

5.表格的复杂应用
行分组
可以将连续的几行，划分到同一组中，进行统一的管理
（1）表头行 <thead></thead> 表格开始几行放入表头
（2）表主体 <tbody></tbody> 表格的中间几行放入表主体
（3）表尾行 <tfoot></tfoot> 表格的最后几行放入表尾
表格嵌套
表格中所有的嵌套表格只能写在td中