T-HTML基础-day02-图像和链接、表格、列表

六. 图像和链接

1. 图像
   <img> 或者 <img/>,属性：
   src="图片资源的路径"
alt="图片加载失败时显示的文本"
width="100" 设置图片的宽度
height="500" 设置图片的高度
   如果宽高设置的尺寸和原始宽高比不同，图片会发生失真现象
   解决方案，width/height只设置一个，另外一个自动匹配
   注意，img标签是行内元素，可以设置宽高的行内元素
2. URL：Uniform Resource Locator 统一资源定位符，路径
   1. 绝对路径:完整的路径
      1. 使用网路资源的，用绝对路径
         使用网络资源的优点：节省本服务器的磁盘空间, 缺点：资源不稳定，不受控制
      2. 本地资源，可以使用绝对路径调用，但是项目中千万千万不能用绝对路径
   2. 相对路径:相对，相对当前html的路径
      1. 兄弟关系，直接写文件名调用 src="09.png"
      2. 兄弟的儿子，写兄弟文件夹名称，找到兄弟,使用/进入兄弟文件夹，在写儿子的名称 src="image/07.png"
      3. 父亲的兄弟，使用../找到父亲,父亲的兄弟直接写文件名 src="../10.png"
         
3. 链接
   1. 语法
      <a></a> 需要添加href属性，才会出现链接功能，不然就是一个普通文本,属性：
      href：链接的路径，需要添加协议
      target：设置链接的打开方式
      _self：默认缺省值，在当前标签页打开
      _blank ：在新的标签页打开
   2. a标签的其他功能
      1. 跳转页面
      2. 下载资源<a href="1.zip">下载</a>，项目中基本不用
      3. 链接到的电子邮件的发送(需要电脑中，安装了邮件的软件)
         <a href="mailto:ciang@140.com">发邮件</a>
      4. 使用a标签，调用js脚本（必须掌握）
         <a href="javascript:show()">调用js</a>
      5. 回到页面顶部
         <a href="#">回到页面顶部</a>
         另外，如果你开发的时候，还不知道要跳转到哪里，可以使用#来占位，不让href没有值
   3. 锚点
      1. 定义锚点
         1. 使用a标签定义锚点 <a name="锚点名称"></a>
         2. 直接使用元素的id值当做锚点 <div id="id当做锚点名称"></div>
      2. 激活锚点
         使用a标签激活锚点(跳转到锚点)
         
         浏览器地址栏会显示当前激活的锚点名称

      ---

      练习
      02_ex.html
      网页中使用p标签，p内容是某个小说
      定义两个p标签
      在刚刚的01_ex.html中，再使用p标签，包含一部小说的内容
      在02_ex.html中，激活3个锚点？？

      ---

七.表格

语义上，表格就是用作显示数据， 早期，表格用于布局，后来由于加载速度很慢，被淘汰，现在，表格就用于 数据展示(由于学习的知识点不全，目前学习过程中，先用表格布局)

1. 表格的语法
   标签

   <table>              ------>表格开始
     <tr>                      ------>行开始 table row
        <td></td>                 ---->列   table data
     </tr>                      ------>行结束
   </table>              ------>表格结束
   

   多数情况下，每一行的列数是相同的
2. 表格的属性
   1. table
      border="1"
width="200"
height="200"
align="left" 设置table本身水平对齐方式
      bgcolor="pink"
bordercolor="purple"
cellpadding="50" 设置单元格内边距，边框到内容之间的距离
      cellspacing="20" 设置单元格外边距，边框到边框之间的距离

      ---

      练习：03_table 设置4*4表格，宽高200*200，背景为pink 表框颜色为purple，表格水平居中，单元格内边距为2，单元格外边距为5

      ---

   2. tr
      align="right" 设置当前行内容的水平对齐方式
      valign="middle" 设置当前行内容的垂直对齐方式top/middle/bottom
bgcolor
   3. td/th
      width="150"
height="50"
align="right" 内容的水平对齐方式
      valign="bottom" 内容的垂直对齐方式
      bgcolor="coral" 当前单元格的背景色
      colspan
rowspan
3. 表格的特点
   1. 每一行，对应的列，宽度相同
   2. 每一行，所有的列，高度相同
   3. 如果内容少，设置的宽高大，表格按照设置宽高显示,如果内容多，设置的宽高小，表格按照内容宽高显示
   4. 表格在渲染时候，是先把所有内容保存在内存中，以后一次性渲染到页面，导致渲染效率低
      ps:浏览器解析html文本的时候，没有空格，就认为是一个单词，不会换行
      有空格，认为是多个单词，放不下会自动换行
4. 不规则的表格
   colspan="n" 跨列
   从指定的单元格的位置处开始
   向右合并n个单元格(n包含自己)
   被合并的单元格要手动删除
   rowspan="n" 跨行
   从指定的单元格位置处开始
   向下合并n个单元格(n包含自己)
   被合并的单元格要手动删除
5. 表格的可选标记(可用可不用)
   1. 表格标题
      <caption>表格标题</caption> 必须紧紧挨着table的起始标签
   2. th 表头和列头
      代替td <th></th> 内容加粗并居中
6. 表格的复杂应用
   1. <thead></thead> 表头
   2. <tbody></tbody> 表主体 注意，不写表结构，浏览器会自动添加tbody
   3. <tfoot></tfoot> 表脚
      表结构标签，在页面中，不可见
   4. 表格嵌套，所有嵌套的内容，必须放在td中。

八.列表

本意也是做数据展示的，有条理的展示数据
但是，所有人都习惯使用列表来做布局
列表的组成：列表都是有"列表类型"和"列表项"组成

1. 列表类型
   有序列表 <ol></ol> order list
   无序列表 <ul></ul> unorder list
2. 列表项
   <li></li> list item