3.17 表格

1. 路径问题

1. 相对路径：从html文件夹开始查找

• 同级：src="xx.jpg"
• 下级：src="img/xx.jpg"
• 上级：scr="../xx.jpg"

2. 绝对路径：从指定的盘符开始查找的

• src="c:\user\desktop\xx.jpg"

注意：

1. 路径中不能有中文
2. 不能跨盘符
3. 统一使用反斜杠 “/”
4. 不使用绝对路径

2. a标签

控制页面之间的跳转
<a href="#" target="_blank" title="xx">xx</a>

1. href属性：为跳转的链接地址。

• href="#"，这个假连接会跳转到顶部
• href="javascript:"，这个假连接不会跳回顶部。
• href="#id名"，为页面某处设置锚点（id="xx"），跳转到这个页面的指定处，没有过渡动画。
• href="xxx.html#id名"，设置锚点，跳转到指定页面的某处。

2. target属性：控制页面跳转方式

• targe="_self" 是在本页面打开
• targe="_blank" 是在新的空白页面打开

3. title属性：控制鼠标悬停时出现的文字，同image

注意：

1. href属性为跳转的地址（本地或者网络），必须加上http://或https://
2. a标签中间为展现的内容，可以添加image标签

3. base标签

<base target="_self">
base标签是一个单标签，用来统一指定当前网页所有超链接的打开类型，写在head标签里。

4. 列表标签

列表标签是赋予一堆数据列表的语义，让浏览器知道这堆数据是列表

1. 无序列表（ul）
   无序列表是赋予一堆数据列表语义且这堆数据没有先后之分

<ul>
    <li>    </li>
     ...
    <li>    </li>
</ul>

注意：

1.只是赋予数据列表的语义，不管样式。
2.ul和li成对出现，不单独出现
3.ul和li标签绑定，ul标签里不能写别的标签，li可以。
4.ul和li标签的嵌套。

2. Emmet语法

• ! + tab 快速生成H5模版，包含viewport
• 任何标签缩写+tab ，快速生成标签
• “ # ”+id名 ：快速生成<div id="id名">
• “ . ”+类名 ：快速生成<div class="类名">
• “ > ” ：子级标签，
• “ + ” ：同级标签，
• “ * ” x ：生成标签数量为x个
• “ $ ”*x ：名称中的变量名从1开始递增到x
• “ $@n ” *x ：名称中的变量名从n开始递增，递增x次
• “ $@- ” *x ：名称中的变量名从x开始递减到1
• “ $@-n ” *x ：名称中的变量名递减到n

例如： table>(thead>tr>th{第$}*3)+(tfoot>tr>td{第$@-10}*3)+(tbody>tr>td{第$@7}*3)，按下tab键生成：

<table>
    <thead>
    <tr>
        <th>第1</th>
        <th>第2</th>
        <th>第3</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td>第12</td>
        <td>第11</td>
        <td>第10</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>第7</td>
        <td>第8</td>
        <td>第9</td>
    </tr>
    </tbody>
</table>

3. 有序列表（ol）
   给一堆数据添加列表语义，并且这堆数据又先后顺序

<ol>
    <li>    </li>
    ......
    <li>    </li>
</ol>

4. 定义列表（dl）
   dt：定义标题
   dd：定义描述

<dl>
    <dt></dt>
    <dd></dd>
</dl>

注意：

• dl，dt，dd是整体，不单独出现
• 推荐一个dt对应一个dd，dd中再添加别的标签。
• 可以在dt和dd中添加其他标签
• 无序列表仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一个原点用于标识。
  有序列表通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
  定义列表常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。

5. 表格标签
   赋予数据表格语义，tr个数代表行数，一个td代表一格

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
         <tr>
            <td></td>
         </tr>
    </tbody>
    <tfoot>
          <tr>
            <td></td>
         </tr>    
    </tfoot>
</table>

• 表格的标题：caption，一定要放在table中，指定标题，自动相对于表格居中。有align属性
• table：width/border/bgcolor/cellpadding/cellspacing
• thead（表头信息）：高度固定，不会随table高度变化而变化
• tfoot（页尾信息）：高度固定，不会随table高度变化而变化，放在thead和tbody中间
• /tbody（主体信息）：没写tbody标签时，浏览器会自动补充。
• tr：bgcolor/align/valign
• th（每列的标题单元格：自动居中粗体）/td：width/height/bgcolor/align/valign
• 细线表格：不用设置border，使cellspacing=“1”（默认值为2），利用table的bgcolor与tr的bgcolor的色差配合cellspacing形成细线。
• 单元格合并：
  • 水平方向：合并列：td colspan="2" ，当前单元格变成两格，要删除后面的一个单元格，永远是在向后合并。
  • 垂直方向：合并行：td rowspan="2"，当前单元格变成两行，要删除下行的单元格，永远是在向下合并。

注意：

1. 默认border属性为0，不可见
2. table tr td 绑定出现
3. 宽度和高度默认随内容大小变，可以赋值给table和td。但赋值给td不改变整个table大小。
4. 水平位置 align
5. 垂直位置 valign
6. thead与tbody tfoot一起出现