常用标签

2022年6月13日大约 2 分钟

a标签

属性:

  • href
  • target
  • download

作用:

  • 跳转外部页面
  • 跳转内部锚点
  • 跳转到邮箱或电话

href 属性

target 属性

  • 内置名字

    _blank (在新页面打开)

    _top (在最上层内联框架打开)

    _parent(在父级内联框架内打开)

    _self (默认:在当前页面打开)

  • 自定义名字

    window 的名字

    iframe 的名字

download 属性

下载页面,不是所有浏览器都支持

iframe 标签(不推荐使用)

table 标签

  • thead
  • tbody
  • tfoot
  • tr
  • td
  • th
<table>
  <thead>
    <tr>
      <th></th>
      <th>小明</th>
      <th>小红</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>数学</th>
      <td>100</td>
      <td>99</td>
    </tr>
    <tr>
      <th>语文</th>
      <td>100</td>
      <td>99</td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>
image-20210326175514184

样式

  • table-layout ( auto 与 fixed )

清除 table 默认样式


table {
 border-collapse: collapse;
 border-spacing: 0;
}

img 标签

作用:

  • 发出 get 请求,展示图片

属性:

  • alt (图片加载失败时替换文本)
  • height
  • width
  • src

事件:

  • onload
  • onerror

响应式:

  • max-width: 100%

form 标签

作用:

  • 发出 get 和 post 请求,然后刷新页面

属性:

  • action、autocomplete、method、target

事件:

  • onsubmit
<input type="submit" value="提交" />
<button type="submit">提交</button>
// 区别:button标签内可以加其他标签,如图片、加粗等。input不能

input 标签

作用:

  • 让用户输入内容

属性:

  • type: button / checkbox / email / file / hidden / number / password / radio / search / submit / tel / text
  • 其他 name/ autofocus/ checked/ disabled/ maxlength /pattern/value/placeholder

事件:

  • onchange
  • onfocus
  • noblur

验证器:

  • H5新增(required)

其他输入标签

  • select + option
  • textarea
  • label

一般不监听 input的 click 事件

form 标签中的 input 要有 name

form 标签中必须有type = submit的按钮inputbutton,否则无法提交

  • meta
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

让viewport的宽度等于物理设备上的真实分辨率,不允许用户缩放

是否独占一行width、heightpadding、margin默认宽高
块级元素有效有效撑满父元素
行内元素无效padding 有效;margin 水平方向有效,竖直方向无效随内部元素的内容变化
行内块级元素有效有效随内部元素的内容变化
  • 常⽤的块级元素:<div><p><h1>~<h6><ol><ul><dl><table><blockquote><form>
  • 常⽤的内联元素:<a><span><br><i><em><strong><label><q><code>
  • 常⽤的内联元素:<img><input><td><textarea><select>