HTML 常用标签

a 标签

属性

• href（指定要跳转的链接），取值如下
  • 网址（https://google.com，http://google.com，//google.com）
  • 路径（/a/b/c，a/b/c/，index.html）
  • 伪协议（javascript:代码;，tel:手机号，mailto:邮箱）
• target（指定打开链接的窗口），取值如下
  • _blank（新窗口打开）
  • _top（顶级窗口打开）
  • _parent（父级窗口打开）
  • _self（默认值，表示在当前页面打开）

table 标签

相关的标签

• table
• thead（表头）
• tbody（表内容）
• tfoot（表尾）
• tr，table row 缩写，表示一行。
• td，table data 缩写,表示内容
• th，table header 缩写，表示标题

我们可以用如下代码的来实现，一个简单的表格

<table>
    <thead>
    <tr>
        <th></th>
        <th>小明</th>
        <th>小红</th>
        <th>小白</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <th>数学</th>
        <td>82</td>
        <td>93</td>
        <td>99</td>
    </tr>
    <tr>
        <th>语文</th>
        <td>82</td>
        <td>93</td>
        <td>99</td>
    </tr>
    <tr>
        <th>英语</th>
        <td>82</td>
        <td>93</td>
        <td>99</td>
    </tr>
    </tbody>

    <tfoot>
    <tr>
        <th>总分</th>
        <td>246</td>
        <td>279</td>
        <td>297</td>
    </tr>
    </tfoot>

	小明	小红	小白

<tbody>
<tr>
    <th>数学</th>
    <td>82</td>
    <td>93</td>
    <td>99</td>
</tr>
<tr>
    <th>语文</th>
    <td>82</td>
    <td>93</td>
    <td>99</td>
</tr>
<tr>
    <th>英语</th>
    <td>82</td>
    <td>93</td>
    <td>99</td>
</tr>
</tbody>

<tfoot>
<tr>
    <th>总分</th>
    <td>246</td>
    <td>279</td>
    <td>297</td>
</tr>
</tfoot>

其中 小明，小红，小白 为表头的标题，所以使用 标签包裹，并使用 标签表示表头。 数学，语文，英语，总分 也为标题，因此也要用 标签包裹，总分在 中，使用 包裹。这样就实现一个简单的表格。

相关样式

• table-layout
  • auto，根据内容的宽度展示
  • fixed，固定的宽度
• border-collapse（border 是否合并）
  • collapse 表示合并
• border-spacing（合并 border 之间的距离）**

img 标签

作用

发出 get 请求，展示一张图片

属性

• alt（图片加载失败时展示的内容）
• height（图片高度，直接使用数字。支持自适应，高度固定则宽度自适应）
• width（图片宽度，直接使用数字。支持自适应，宽度固定则高度自适应）
• src（引用图片地址，可以使用绝对路径，相对路径，网络地址）

事件

• onload（图片加载成功事件）
• onerror（图片加载失败页面），通常可以做一些处理，例如当图片加载失败之后，可以使用默认的错误图片来展示。

响应式

• max-width:100%，自适应不同屏幕分辨率。可以使图片根据不同屏幕大小完整显示。

form 标签

作用

发 get 或 post 请求，然后刷新页面。

属性

• action（请求的地址）
• method（请求方法）
• autocomplete（比如输入账号有自动填充）
• target（指定刷新页面）

事件

• onsubmit（表单提交）

注意事项

• form 里面放一个 type = submit 才能触发事件。
• 可以是 <button type="submit"></button> ，或者 <input type="submit"/>

input 标签

作用

让用户输入内容

属性

• type
  • button，按钮
  • checkbox，复选框，提交多个选项将 input 的 name 属性设置为相同的值
  • file，上传单个文件，上传多个需要在 input 中加入 multipart 即可
  • hidden
  • password，密码类型
  • radio，单选框，实现单选需要将两个 input 的 name 设为相同的值
  • submit，提交表单
  • text，文本类型

事件

• onchange，输入框中改变的事件
• onfocus，输入框焦点事件
• onblur，输入框移出事件
• 一般不监听 input 的 click 事件