标签详解

a标签

href属性的取值

• https://google.com
• http://google.com (最终会链接到第一个https)
• //google.com (最终会链接到第一个https)
• 相对路径
  1. /a/b/c 当前目录文件夹a-文件夹b-文件夹c
  2. index.html或者./index.html 当前目录的index.html
• javascript:js代码; 点击后会运行js代码，如果js代码为空，则不会有任何效果，且不会刷新页面，不会定位到页面顶部
• mailto:邮箱 电脑端会打开对话框，让用户选择打开邮箱/手机端会自动打开邮箱，发件人已经填好
• tel:手机号 手机端会自动拨号
• #id 会跳转到此ID元素位置

target属性的取值

• _blank 在新页面中打开
• _top 多层嵌套页面中，在最顶层页面打开
• _parent 嵌套页面中，在父页面中打开
• _self 在当前页面中打开

download属性的取值

• 不是打开页面，而是下载页面。有的浏览器不支持

表格标签

相关标签

• table 表格最外层标签
• thead 表头信息(thead,tbody,tfoot顺序可以颠倒)
• tbody 表体信息
• tfoot 表尾信息
• tr 行
• td 数据(格子)
• th 表头

    <table>
      <thead>
        <tr>
          <th>英语</th>
          <th>翻译</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>hyper</td>
          <td>目标</td>
        </tr>
        <tr>
          <td>hyper2</td>
          <td>目标2</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>小计</td>
          <td>合计</td>
        </tr>
        <tr>
          <td>小计2</td>
          <td>合计2</td>
        </tr>
      </tfoot>
    </table>

相关样式

      table {
        width: 600px;
        table-layout: auto;
        border-collapse: collapse;
        border-spacing: 0;
      }

• table-layout: auto 会根据表格内容自动计算宽度
• table-layout: fixed 表格内容宽度固定
• border-collapse: collapse 边线合并
• border-spacing: 0 边线空隙为0

img标签(永远不要改变图片原有的大小)

作用

发出get请求，获取一张图片

属性

• src 用来获取图片
• alt 获取图片失败后显示的文本
• height 高度
• width 宽度

事件

• onload 图片加载成功后调用
• onerror 图片加载失败后调用

响应式

• max-width: 100% 宽度自动适应，可使用于手机端

<style>
      img {
        max-width: 100%;
      }
</style>
<img id="xxx" src="aaaa.jpg" alt="一朵花" height="600px" />

<script>
      xxx.onload = function () {
        console.log("花加载成功");
      };
      xxx.onerror = function () {
        console.log("花加载失败");
        // 补救，指向另一张图片
        xxx.src = "b.jpg";
      };
    </script>

表单

见代码

<form action="xxx" method="POST" autocomplete="on" target="_blank">
      <input type="text" name="username" />用户名

      <input type="password" name="password" />密码

      <input type="radio" name="gender" value="1" />男
      <input type="radio" name="gender" value="2" />女

      <input type="checkbox" name="hobbies" value="0" />唱
      <input type="checkbox" name="hobbies" value="1" />跳
      <input type="checkbox" name="hobbies" value="3" />rap
      <input type="checkbox" name="hobbies" value="4" />篮球

      <input type="submit" />
    </form>

• autocomplete="on" 在input的输入框，会自动弹出提示的内容