图像和链接 、 表格 、 列表

1、URL
   目录结构的表示方式
   URL : Uniform Resource Locator , 统一资源定位器 ，俗称，路径
   作用：用来标识网络中的资源位置
     http://www.baidu.com
     images/logo.gif
   URL的三种形式:
     1、绝对路径
     2、相对路径
     3、根相对路径


   1、绝对路径
      文件从最高级目录开始的完整的路径
      绝对路径就是完整的URL
      1、从本机目录结构查找，从盘符开始
         D:\zhaoxu\HTML5Basic\Day02\images\logo.jpg
      2、网络资源目录结构开始查找
         协议、主机、目录路径、文件名称
http://www.baidu.com/images/logo.jpg
   2、相对路径
      相对于当前文件的位置，查找资源文件
      1、同级目录(直接找)
         直接输入资源文件名称即可
logo.png
      2、子级目录(先进入)
         先进入到指定文件夹，再查找资源文件
images/logo.png
      3、父级目录(先返回)
         先返回到指定的父级目录出，再查找指定资源文件
../  :  表示返回上一级
../../images/logo.png
   3、根相对路径
      file:///E:/zhaoxu/ ........   本地访问


      http://www.baidu.com
      http://localhost/ ...... 从服务器访问数据


      根相对路径：
      / 开始
      /images/logo.png
2、图像
   语法:<img />
   属性:
       src : 图像的路径(绝对路径、相对路径、根相对路径)
       width : 宽度
       height: 高度
       alt : 提示，
           1、鼠标移入时显示的文本
      2、图像不显示时，显示的文本


       注意：通常情况下， 不需要手动改变图像的宽和高
3、链接
   能够完成简单的跳转动作
   语法：<a></a>  ,anchor 缩写
   属性：
        href : 链接URL
target ： 目标 ，指定打开新网页的方式
        取值 _blank : 在新标签页中打开
      _self : 在自身(当前)页面中打开(默认值)
name : 定义锚点名称
   链接的表现形式:
   1、页面间跳转
      <a href="页面路径">文本 或 图像</a>
   2、页面上的文档(资源)下载
      <a href="指定资源路径">文本或图像</a>
      资源路径：非html,htm,txt的资源
      <a href="xxx.rar">下载</a>
   3、返回页面顶部的空连接
      <a href="#">返回顶部</a>
      跳转到本页(开发、测试阶段使用)
   4、电子邮件链接
      打开本机邮件客户端，向指定地址处发送email邮件
      <a href="mailto:zhaoxu@tarena.com.cn">联系我们</a>
   5、链接到Javascript
      <a href="javascript:js代码段落"></a>


   锚点：在页面的任意位置处定义一个标识，随时随地的都可以跳转到这个标识上
   什么时候使用:向快速的跳转到网页的某个位置处，可以选择使用锚点
   锚点的使用方式：
   1、定义锚点 
      <a name="anchorName"></a>
   2、链接到锚点
      <a href="#anchorName">文本 或 图像</a>
      <a href="url#anchorName"></a>
      
   
4、表格
   1、什么是表格
      有行有列，按照一定的格式(从左到右，从上到下)排列里面的内容
   2、表格的作用
      组织结构化的信息，按照一定的格式来进行数据显示
      单元格?
   3、创建表格
      定义表格:<table></table>
      定义行:<tr></tr>  --> Table Row
      创建列(单元格):<td></td> --> Table Data
      注意:原始的表格中，每行的列数全部都是统一的。
      Question:创建一个表格，有3行2列
      <table>
<tr>
 <td></td>
  <td></td>
</tr>
<tr>
  <td></td>
 <td></td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
      </table>
   4、表格属性
      table:
        width : 宽度
height : 高度
align : 水平对齐方式（left,center,right）
border : 设置表格的变宽,以px(像素)为单位
cellpadding : 内边距,(单元格边框与内容之间的距离)
cellspacing : 外边距,(单元格与单元格之间的距离)
bgcolor : 表格背景颜色
      tr : 
        align : 设置该行内容的水平对齐方式(left,center,right)
valign: 设置该行内容的垂直对齐方式(top,middle,bottom)
      td : 
        align: 水平对齐方式（left,center,right
valign: 设置该行内容的垂直对齐方式(top,middle,bottom)
width:宽度
height:高度
colspan : 单元格跨列(向右合并单元格)
rowspan : 单元格跨行(向下合并单元格)
   5、表格标题
      <caption>标题文本</caption>
      <table>
<caption></caption>
<tr>
  <td></td>
</tr>
      </table>
   6、表格复杂应用
      1、行分组
         根据行不同的作用，划分成不同的组
行分组分为3个部分:
表头，表主体，表尾
表头:<thead></thead>
表主体:<tbody></tbody>
表尾:<tfoot></tfoot>
      2、不规则表格
         1、跨列:colspan
2、跨行:rowspan
   
5、列表
   1、有序列表 
      语法:<ol></ol> --> Order List
           <li></li> --> List Item  列表项
      属性:
          ol : 
    type : 列表类型
        取值:
   1 : 数字（默认值）
     a : 小写字母
     A : 大写字母
     i : 小写罗马数字
   I : 大写罗马数字
    start : 起始编号
   2、无序列表
      语法:<ul></ul> --> Unorder List
      列表项<li></li>
      属性:
          ul:
    type
      取值:
       disc : 实心圆(默认)
circle : 空心圆
square : 实心矩形
      什么时候使用列表(有序、无序):
      1、从上到下，只有一列显示数据
      2、从左到右，只有一行显示数据(导航)
   3、自定义列表
      <dl>  定义列表
          <dt></dt> 列表内容标题
<dd></dd> 列表数据
      </dl>
      使用场合:做图文混排的布局