🌹 渣渣丰

HTML 常用标签

4分钟阅读

a 标签

属性

  • href（指定要跳转的链接），取值如下
  • 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>

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

相关样式

  • 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 事件