1 a 标签的用法

a是一个超链接标签,点击a可以跳转到另外一个页面.

1.1 a标签的属性

• href超链接地址

• target如何打开新的页面

  • _blank 新窗口打开
  • _self 当前窗口打开(默认)
  • 也可以自定义值,打开方式和_blank类似
    • 打开的新页面window.name=我们自定义的target值.
    • 如果多个a标签的target自定义值相同,同时打开页面会跳到同一个页面上.
    • 因为window.name相同.

1.1.1 href 标签值的分类

1.URL地址

• https://baidu.com
• http://baidu.com
• //baidu.com (推荐使用无协议地址)

2.相对地址和绝对地址

• /a/b/c.html http服务的绝对地址是服务的启动地址.
• a/b/c.html http的相对地址是从当前页面所在地址开始

3.协议

• javascript:; a标签被点击后,阻止页面刷新并且没有任何变化.
• mailto: 邮箱
• tel: 手机号

4. 锚点(在当前页面跳转)

• 选择当前页面的元素#id 进行锚点跳转.

2 img 标签的用法

• img标签在页面被访问的时候会发出get请求,展示一张图片.
• 图片事件 onload/onerror

2.1 img的属性

• src 图片地址
• alt 如果图片不能显示,显示这里的文字告诉用户.

2.3 图片在手机端的响应式.

• max-width:100%;

3 table 标签的用法

<!-- 表格-->
   <table>
      <!-- 表的头部 -->
      <thead>
        <!-- <tr></tr>table row  表行 -->
        <tr>
          <!-- <th></th> table_head 表头 -->
          <th>id</th>
          <th>name</th>
          <th>age</th>
        </tr>
      </thead>
      <!-- 表的主体 -->
      <tbody>
        <tr>
          <!-- <td></td> table_data 表格数据 -->
          <td>1</td>
          <td>z3</td>
          <td>19</td>
        </tr>
      </tbody>
      <!-- 表的脚部 -->
      <tfoot>
        <!-- 一般做统计 -->
      </tfoot>
    </table>

• thead/tbody/tfoot如果顺序如果乱序,也会按头身体脚排序.

3.1 table的CSS样式

• table-layout: auto(根据内容预定宽度)/fixed(等宽):
• border-collapse: collapse; //单元格之间的距离消失.
• border-spacing: 0; //单元格之间的空隙消失.

4其他感想

前端中的细节特别多,很多地方都需要注意.