base标签

• base标签
  • 作用:统一指定当前网页中所有超链接(a标签)如何打开
  • 注意点:
    • 必须写在head标签中
    • base标签和a标签都有target,则a标签target有效

假链接

• 存在意义: 开发前期不知道要跳转到什么地方
• 格式:
  • #符号
  • javascript:
  • 区别: #会回到顶部,javascript:不会

锚点

• 作用: 在页面内跳转到指定位置(在假链接的基础上发展而来)
• 用法: 给跳转目标标签添加唯一的id,设置a标签href属性为此id
  <a href="#目标标签id">跳转文本</a>
• 注意点:
  • 跳转时没有过渡动画
  • 还可以跳转到其它页面的指定位置
    例: <a href="其它页面.html#目标标签id">跳转到其它页面的指定位置</a>

列表标签

无序列表

• 意义: 给一堆数据添加列表主义,表示是一个整体
• 列表标签分类
  1. 无序列表(最多)(unorderde list)
  2. 有序列表(最少)(ordered list)
  3. 定义列表(其次)(definition list)
• 无序列表的作用: 给一堆数据添加列表主义,并且没有先后之分
• 格式: li=list item

<ul>
  <li>需要显示的条目</li>
  <li>需要显示的条目</li>
  <li>需要显示的条目</li>
</ul

• 注意点:
  • ul标签是给一堆数据添加列表语义的,不是用来添加小圆点的
  • ul标签和li标签都是一起出现的,不可能单独使用
  • ul标签中只能有li标签,不推荐包含其它标签
  • 但是li标签可以放其它标签
• 应用场景:
  1. 新闻列表
  2. 商品列表
  3. 导航条
• 无序列表练习
  • 虽然通过标签属性也能修改样式,但是不推荐
  • ul标签中只能有li标签,不推荐包含其它标签,但是li标签可以放其它标签
  • li标签中可以再放ul标签
  • webstorm中的简化写法: ul>li*3 含义为ul标签下包含三个li标签

有序列表

• 作用: 给一堆数据添加列表语义,但是有先后之分
• 格式: ol=ordered list 仅把ul换成ol

<ol>
  <li>需要显示的条目</li>
  <li>需要显示的条目</li>
  <li>需要显示的条目</li>
</ol>

• 其它跟ul标签一样

定义列表

• 格式: dt是definition title 定义标题 | dd是definition description 定义描述

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

• 定义列表应用场景
  1. 网站尾部相关信息
  2. 图文混排（图是标题，文字是对图的描述）
• 注意点:
  • 和ul/ol一样,dl和dt/dd是一个整体,都是一起出现
  • dl中只放dt和dd
  • 一个dt可以没有对应dd也可有多个对应dd,但推荐一个dt对应一个dd
  • 和li一样,需要丰富界面时,可以在dt和dd中添加其它标签

表格标签

• 历史:表格标签是一个时代的代表
• 作用:给一堆数据添加表格语义.
  表格是一种数据展现形式,当数据量非常大时,表格是最清晰的展现形式
• 格式: table=表格 | tr=一行 | td=单元格

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

• 注意点:
  • 表格边框属性默认是0,所以看不到边框
  • 表格标签和列表标签一样,是一个组合标签,所以table/tr/td要一起出现

表格属性

• 宽度和高度属性:
  • 只对应table和td
  • 默认按内容调整尺寸,也可给table设置width/height属性手动设置宽高
  • 如果给td设width/height属性,会修改当前单元格宽高,不会影响表格的宽高
• 水平和垂直对齐属性:
  • 水平对齐可给table/tr/td用
    • 给table加align属性控制表格在页面水平方向对齐
    • 给tr加align属性,控制内容在单元格水平对齐
    • 给td加align,控制单无格
    • tr和td的align冲突,td优先
  • 垂直对齐只能给tr/td用
    • 垂直属性: valign
    • 用法类似水平的align
• 外边距和内边距属性:
  • 只能给table用
  • 单元格之间的距离叫外边距 cellspacing
  • 默认外边距是2px
  • 文字和单元格的距离叫内边距 cellpadding
  • 默认的内边距是1px
  • 以上内容仅仅了解,开发中控制距离和边距(就是外观样式),统一用css
• 细线表格
  • 探索: 将外边距设为0不行,因为单元格边框会和表格边框连在一起变成粗线
  • 实现原理:表格背景为黑,行背景为白,外边距为1px

<table  cellspacing="1px" bgcolor="black" >
    <tr bgcolor="white">
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr bgcolor="white">
        <td>2.1</td>
        <td>2.2</td>
    </tr>
<table>

• 还有一种方法江哥没讲,背景式要好.使用border-collapse属性

<table border="1" cellspacing="0" bordercolor="#000000" " style="border-collapse:collapse;">
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
    </tr>
<table>

• table/tr/td标签都支持bgcolor属性,但仅作了解,以后样式都有css控制

表格标题

• table专门提供了标题标签,自动相对表格居中,caption写在table内 <caption></caption>
• 注意点:
  • caption一定要写在table内,否则无效
  • caption一定要紧跟在table后

列标题

• 定义每一列的标题<th></th>(把第一行的td都换成th),其中文字自动居中+粗体
• 即行tr中有两种单元格 td和th

表格结构

• 由于表格中存储的数据非常复杂,为方便管理和定义语义,对表格中数据予以分类
• 分为四类
  • 标题 <caption>
  • 表头 <thead>
  • 主体 <tbody>
  • 页尾 <tfoot>
• 表格完整结构应该是

<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

• 注意点:
  • 系统会自动添加tbody
  • 如果指定了thead和tfoot,在修改表格width时,他们不会随着变化
  • 仅做为了解,开发中不会这样写

单元格合并

1. 水平方面单元格合并

• 给td加colspan属性,把一个单元格当多个单元格看待<td colspan="2">/td>
• 注意点:
  • 由于把一个单元格当多个看待,必须删除多余的单元格
  • 单元格合并永远是向后或向下合并

2. 垂直合并单元格
   • <td rowspan="2"></td>
   • 注意点同上

WebStorm快捷键

• 快速移动选中代码
  • 向上移动 Ctrl+Shift+↑
  • 向下移动 Ctrl+Shift+↓
• 快速折叠展开代码(当前单标签)
  • 快速折叠 Ctrl+ -
  • 快速展开 Ctrl+ +
• 快速折叠展开代码(选中多标签)
  • 折叠多标签 Ctrl + Shift + -
  • 展开多标签 Ctrl + Shift + +
• 快速新启一行:
  • Shift + 回车

43