a标签

• 常用，但很多人不会用
• 属性
  • href
    • hyper+reference 超级引用，超链接
    • 不要双击html打开,因为会用文件方式的绝对路径
    • a的href的取值
      • 网址
        • google.com
        • google.com
        • //google.com
          • a->google.com ->www.google.com->https://www.google…
          • 历史原因
          • 用//google.com,它会自动选择用http还是https
      • 路径
        • /a/b/c以及a/b/c
          • 在文件中，/表示根目录；在http协议中，/表示在哪开的服务，哪里就是根目录
          • 没有/,表示在当前目录下，是一个相对路径
        • index.html以及./index.html
          • 都是在当前目录找index.html
      • 伪协议
        • javascript:代码;

          <!-- 什么都不做的a标签 -->
          <a href="javascript:;">空的伪协议</a>
          <!-- 会刷新，会跳转到顶部 -->
          <a href="">空的伪协议</a>
          <!-- 会跳转到顶部,不会刷新 -->
          <a href="#">空的伪协议</a>
          

        • mailto:邮箱

           <a href="mailto:nihao2020@126.com">发邮件给我</a>
          

        • tel:手机号

          <a href="tel:17715266431">打电话给我</a>
          

        • id:xxx

              <!-- 跳转到id=xxx的地方,不刷新 -->
              <a href="#xxx">查看xxx</a>
          

  • target
    • 指定在哪个窗口打开超链接
    • a的target的取值
      • _blank:在新的窗口打开
      • _top:在当前链接所在的最顶层页面打开
      • _self:在超链接所在的窗口打开，默认
      • _parent:在当前链接所在的上一层页面打开
    • 程序员命名：
    • window的name
      • 可以重复利用某个窗口打开多个网页
      • 窗口的名字可在控制台用window.name打开
    • iframe的name
      • google不允许iframe指向它
      • 可用来做一个可在同一个页面打开多个浏览器首页的页面
  • download
    • 下载打开的网页，
    • 但不靠谱，很多浏览器不支持，尤其是手机浏览器
  • rel = noopener
    • 为了防止一个bug,js会讲
• 作用
  • 跳转外部页面
  • 跳转内部锚点
  • 跳转到邮箱回电话等

img标签

• image的缩写
• 作用
  • 发出get请求，展示一张图片
• 属性
  • alt
    • 图片加载失败时，会显示的字，用来提示用户
  • height/width
    • 只写高度，宽度会自适应
    • 只写宽度，高度会自适应
    • 既写高度又写宽度，会让图片变形
    • 不用写px,因为它只支持px
    • 不让图片变形是前端工程师的底线，可以只写宽度或高度
  • src
    • source的简写
    • 图片的地址，可以是网络地址，也可以是相对地址或绝对地址
• 事件
  • onload/onerror
  • 监听图片是否加载成功，加载成功调用onload,加载失败调用onerror
• 响应式
  • 所有网页默认在手机上能够浏览
  • img样式添加max-width:100%，能够让图片自适应所在屏幕的宽度

table标签

• 制作表格
• 相关标签
  • <table>的下一层只有三个标签<thead>,<tbody>,<tfoot>
  • 头部，尾部可以没有
  • 如果没写<thead>,<tbody>,<tfoot>,浏览器会自动添加这些标签
  • 表格的呈现与<thead>,<tbody>,<tfoot>的顺序无关
  • <tr>是table row的简写，表示一行
  • <th>是table head的简写，表示表头
  • <td>是table data的简写，表示表格数据
• 相关样式
• table-layout
• 定义了用于布局表格单元格，行和列的算法。
  • auto
    • 表格及单元格的宽度取决于其包含的内容。
    • 一个单元格的宽度变大，会导致所在的整个列的宽度变大
    • 绝大部分浏览器使用的表格属性
  • fixed
    • 尽量等宽
• border-collapse
  • border是否合并
• border-spacing

  • border的间距

  • border-collapse设置成collapse之后，border-spacing失效了