HTML day02

一.URL
  1.统一资源定位器
      用于表示网络中任意资源的位置。
  2.路径的表现形式
        1.绝对路径（完整路径）
            1.网络资源
              协议+主机+目录结构+文件名称
            2.本地路径
              从最高盘符处开始去查找
        2.相对路径
          从当前文件所在的位置开始查找资源所经过的路径，就是相对路径。
            同级目录：直接引用       ex:jd_logo.png
            子级目录：先进入，再引用 ex:img/page.jpg
            父级目录：先返回，再引用 ex:../jd_logo1.png
        3.根相对路径
          永远是从web站点的根目录处开始查找
            ex:/codeboy/img/a.jpg
二.图像和链接
  1.图像格式
      .jpg 压缩比率大
        .png 背景透明
        .gif 动画
  2.图像元素
      语法：<img>
        属性：
          src:指定要显示图像的url
            width:指定图片的宽度  取值以px或%为单位的数字
            height:指定图片的高度 取值以px或%为单位的数字
            alt:图片无法正常显示时给的提示文字
            注意：如果要修改图片的尺寸，一般只需修改其中一个属性值即可。
      练习：Day02文件夹中的01-url.html网页需要去引用与Day02平级的other文件夹中的login.png图片
  3.链接
    1.语法：<a>内容</a>
      属性：
                 1.href 指定链接的url
             2.target 指定打开新网页的方式
               取值：
                    1._self 默认值，在当前网页中打开新的网页
                        2._blank 在新的标签页中打开新网页
       2.链接其它表现形式：
           1.资源下载
               让链接的url，链接到rar/zip的文件即可。
                 <a href="a.rar">下载</a>
           2.电子邮件链接
               <a href="mailto:g-yangyan@tedu.cn">打开邮件</a>
           3.返回页面的顶部
               <a href="#">返回页面顶部</a>
                   4.链接到js
               <a href="javascript:js代码">执行js代码</a>

                练习：定义一个js函数,函数体内弹出"hello world!",在a标记中调用该函数，运行页面查看效果。（3分钟）
    3.锚点
          1.什么是锚点
              锚点，就是网页中的一个记号，可以通过超链接跳转到记号位置处。
                  2.锚点的使用方式
              1.定义锚点
                    1.使用a标记的name属性定义锚点
                      <a name="锚点名称"></a>
                                        2.使用任意元素的id属性定义锚点
                      <any id="锚点名称"></any>

              2.链接到锚点
                        1.链接到当前页面锚点
                      <a href="#锚点名称"></a>
                        2.链接到其它页面锚点位置处
                      <a href="网页url#锚点名称"></a>
          
                    练习：
                     在不同的网页中分别定义三个锚点，锚点中内容随意，然后通过a标记分别链接到三个锚点位置处。
          
三.表格
  1.表格作用
      按照一定结构显示数据，由单元格按照从左往右，从上到下的方式排列到一起。数据都保存在单元格中，表格可以显示数据，也可以设置页面的布局。
  2.表格语法
      1.基本标记
          表格：<table></table>
            行：  <tr></tr>        table row
            单元格/列：<td></td>   table data

            练习：创建一个4行4列的表格
              1.在网页中创建一对<table></table>标记
                2.在<table>标记中嵌套<tr></tr>
                3.在<tr>标记中嵌套<td></td>   
    2.属性
          1.table的属性
                border:设置表格的边框 取值以px为单位的数字
                width:设置表格的宽度
                height:设置表格的高度
                align:设置表格的水平对齐方式
                      取值：left/center/right
                bgcolor:设置背景颜色 取值：合法的颜色值
                cellpadding:设置单元格的内边距（内容与td之间的间距）
                cellspacing:设置单元格的外边距（td边框与边框之间的间距）
                练习：
                  在以上表格练习的基础上设置表格的尺寸400*400px,表格的背景颜色为橙色，表格边框为1px,并设置表格内边距为15px,外边距为10px（2分钟）。
         2.tr的属性
              align:设置当前行内容水平对齐方式
              valign:设置当前行内容垂直对齐方式
                       取值：top/middle/bottom
              bgcolor:设置当前行的背景颜色
        3.td的属性
                width:宽度
                height:高度
                align:水平对齐
                valign:垂直对齐
                bgcolor:单元格的背景颜色
                colspan:跨列
                rowspan:跨行
    3.不规则表格的使用
          1.跨列 colspan
              从指定单元格位置处开始，横向向右合并几个单元格（包含自己），被合并掉的单元格要删除。
          2.跨行 rowspan
              从指定单元格位置处开始，纵向向下合并几个单元格（包含自己），被合并掉的单元格要删除。
    4.可选标记
          1.表格标题
              <caption></caption>
                如果设置标题的话，则必须位于<table>下的第一个子元素
          2.行/列标题
              <th></th>
                所有td都可以用th替换
    5.表格的复杂应用
    1.表格嵌套
              表格中所有被嵌套的内容只能放在td中。
                ex:
                <table>
                  <tr>
                      <td>
                          <table>
                              <tr>
                                  <td></td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
      2.行分组
    可以将连续的几个行，划分到一个组中，并进行统一管理。
        1.表头行
                  <thead></thead>
                    表格中最上面一行进行分组的话，可以放在表头行中。
        2.表主体行
                  <tbody></tbody>
                    允许将若干行放在tbody中，进行统一管理。
        3.表尾行
                  <tfoot></tfoot>
                    表格中最后一行进行分组的话，可以放在表尾行中。
四.列表
  1.列表的作用
      按照从上到下的方式来显示所有数据（或从左往右显示），并且可以在数据前增加显示的标识。
  2.列表的组成
      1.列表的类型
          有序列表：<ol></ol>  order list
            无序列表：<ul></ul>  unorder list
      2.列表项
          用于表示列表中的数据（嵌套在列表中）
            <li></li>   list item
  3.列表的属性
      1.有序列的属性
          1.type 指定列表标识类型
              取值：
                   1 默认值，以数字排序
                     a 小写英文字母排序
                     A 大写英文字母排序
                     I 大写罗马数字排序
                     i 小写罗马数字排序
          2.start 指定起始编号是从第 几 开始
              取值：为无单位的数字
      2.无序列表的属性
          1.type 指定无序列表的标识
              取值：
                   disc   实心圆
                   circle 空心圆
                       square 实心方块
                   none   不显示标识
  4.列表的嵌套
      在一个列表中又出现另外一个列表。
        被嵌套的列表只能在li中出现
        ex：
        <ol>
          <li>
               <ul>
                   <li></li>
                 </ul>
            </li>
        </ol>
  5.自定义列表
      1.什么是自定义列表
          定义列表常用于给一类事物或对名词进行解释说明。
    2.语法
          <dl></dl> 表示定义列表
            <dt></dt> 表示列表中要解释说明的名词
            <dd></dd> 表示列表中对名词解释的具体内容
            ex：
            <dl>
              <dt>名词</dt>
                <dd>解释的内容</dd>
            </dl>

            常用场合：图文混排。
五.结构标记
  1.结构标记的作用
      用于描述网页的基本结构（取代div做布局）
        提升代码的语义性，方便阅读和维护。
  2.常用的结构标记
      1.header
          定义网页的头部
        2.nav
          定义导航链接内部
        3.section
          定义网页主体
        4.aside
          定义网页的侧边栏内容
        5.footer
          定义网页偏底部内容
        6.article
          定义与文字描述相关的内容，如果，论坛中帖子，微博条目，用户评论等等。