HTML常用标签

本文介绍了 <a>、<table>、<img>、<form>以及<input>和<button>标签。

<a> 标签

超链接。可以通过它的“href”属性创建通向其他网页、文件、同一页面内的描点、电子邮件地址或任何其他URL。

一、属性 href(hyper reference) 的取值

1. 网址：

    1. <a href="https://google.com">
    2. <a href="http://google.com">
    3. <a href="//google.com">

以上三种写法都正确，但是相对来说第3种方式最好。对于第3种方式，浏览器会去判断是否符合第1种或第2种写法，然后再跳转网站；但是前两种方式就写死了前缀，一旦网址对应不上就直接报错。(可以在浏览器终端“network”中查看基于第3中写法反馈的日志，注意一定要勾选 preserve log)

2. 路径：

    <a href="/a/b/c">

这是绝对路径，要区别命令行指向的绝对路径。

    <a href="a/b/c">
    <a href="index.html">
    <a href="./index.html">

这是相对路径。
3. 伪协议：

    <a href="javascript:代码;">

访问<a>标签而什么都不做时，则可以使用这个伪协议：href=“javascript:;”

    <a href="mailto:邮箱">
    <a href="tel:手机号">

手机端则会弹出邮箱选项，或者直接拨打电话。

二、属性 target 的取值

1. “_blank”，新建窗口打开。
2. “_self”，字面意思，加载响应到当前iframe(HTML中有一个名为iframe的老标签，可以实现内嵌窗口的功能，现在已经很少用。)。
3. “_top”，加载响应，进入顶层iframe（这个顶层iframe没有父级）。
4. “_parent”，加载响应到相对当前iframe的父级iframe中。第3、4种情况，如果没有顶层iframe或者父级iframe，则加载响应与“_self”相同。

<table> 标签

制作表格。相关标签有table、thead、tbody、tfoot、tr、th、td。

    <table><!-- 表格 -->
        <thead><!-- 表头 -->
            <tr><!-- tr=table row，表中的一行 -->
                <th>xxx</th><!-- th=talbe head，表头，默认加粗 -->
            </tr>
        </thead>
        <tbody><!-- 表中内容 -->
            <tr>
                <th>xxx</th><!-- 可以不写。当表格需要两个维度来指定内容时，则在tbody中用到这个rh标签 -->
                <td>xxx</td><!-- td=table data，内容 -->
                ...
            </tr>
            ...
        </tbody>
        <tfoot>
            <tr>
                <th>xxx</th><!-- 同上 -->
                <td>xxx</td>
                ...
            </tr>
        </tfoot>
    </table>

注意，thead和tfoot分别代表表头和表尾，标签内的内容分别会在表格首行和最后一行显示，而与代码书写位置无关。

<img> 标签

该标签的作用是发出get请求，然后展示一张图片。

1. 属性
   • alt：当图片加载失败时，会显示alt中描述的内容。
   • height/width：修饰图片的长度和宽度，默认单位px(像素)。注意，当同时设置height和width后，很容易出现图片压缩或拉伸的后果！
   • src：图片的加载路径。
2. 事件：
   • onload：加载图片成功后执行的操作。
   • onerror：加载图片失败后执行的操作。
3. 响应式：
   • "max-width:100%"该属性可以使窗口无论是在电脑端还是手机端打开，都以占满整个屏幕的方式来展示图片。

<form> 标签

该标签作用是发get或post请求，然后刷新页面。注意，结合了input或者button标签后，form标签必须要包含“type=“submit””（button标签不写type属性时，则默认type=“submit”），否则form标签不会提交内容。

属性

• action：处理表单提交的URL。
• autocomplete：用于指示是否能够拥有一个默认值，此默认值是由浏览器自动补全的。值有两种：on开启，off关闭。
• method：该属性的值表示提交表单的方式，如post方式、get方式。
• target：表示在提交表单之后，在哪里显示响应信息。

<input>和<button>标签

input标签用于为表单创建交互式控件，button标签表示一个可点击的提交表单按钮。input标签也可以创建一个提交表单的按钮，但它们的区别是，input标签显示的按钮只能是纯文本形式，而button标签可以设置按钮中文本的样式。

    <input type="text" />
    <!-- 输入内容 -->
    <input type="password" />
    <!-- 输入内容以“***”的方式显示 -->
    <input type="radio" name="gender" /> 男
    <input type="radio" name="gender" /> 女
    <!-- 单选，name的值相同表示同组，因此只能在男或女中进行单选 -->
    <input type="checkbox" name="xxx" /> xxx
    <input type="checkbox" name="xxx" /> xxx
    <input type="checkbox" name="xxx" /> xxx
    <!-- 多选，name相同时表示同组 -->
    <input type="file" /><!-- 上传单个文件 -->
    <input type="file" multiple /><!-- 上传多个文件 -->
    <input type="hidden" /><!-- 上传内容由JS自动填入，用户不需要看见 -->

其他感想

需要查看更多标签详细内容，推荐使用Google搜索：标签名+html+mdn。（mdn网站包含了详细的HTML参考文档，而且内容及时更新，保证内容的准确性）