HTML常用标签

a 标签的用法

属性

• href
• target
• download
• rel=noopener

作用

1. 跳转到外部页面（href="//xxx.html"）
2. 跳转到内部锚点（href=#xxx）
3. 跳转到邮箱或电话等（移动端常用）

href的取值

• 网址
  • https://google.com
  • http://google.com
  • //google.com
• 路径
  • /a/b/c 以及 a/b/c
  • index.html 以及 ./index.html
• 伪协议
  • javascript:代码;
  • mailto:邮箱
  • tel:手机号
• id
  • href=#xxx

img 标签的用法

作用

发出get请求，请求图片文件并展示

属性

• alt
• height
• width
• src

事件

• onload
• onerror

响应式

在style中添加max-width:100%

可替换元素

参考自MDN<img>词条。

<img>是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。你可以为<img>设置 border/border-radius、padding/margin、width、height 等等的 CSS 属性。

另附MDN可替换元素词条

table 标签的用法

例子:

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>总计</th>
            <td>2</td>
        </tr>
    </tfoot>
</table>

相关样式

• table-layout
• border-collapse
• border-spacing

form标签的用法

作用

发出GET或POST请求，然后刷新页面

属性

• action
• autocomplete
• method
• target

事件

• onsubmit

input标签的用法

作用

让用户输入内容

属性

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

事件

• onchange
• onfocus
• onblur

验证器

• HTML5新增功能（required等等）

注意

一般不监听input的click事件