1. a 标签的用法

1.1 `a`标签的作用一共有三点：

跳转外部页面

<a href="https://google.com">Google</a>

跳转内部锚点

<a href="#xxx">跳转id为xxx的标签</a>

跳转到邮箱或电话等

<!--发邮件 -->
<a href="mailto:邮箱">发邮件</a>
<!--打电话 -->
<a href="tel:手机号">打电话</a>

1.2 `a`标签的属性

href：href的取值

网址：

https协议:https://google.com
http协议：http://google.com
无协议：//google.com，在不知道自己希望跳转的网址是http协议或是https协议的情况下推荐使用这种。

路径

/a/b/c.html或者a/b/c.html均可，此处的/a/b/c.html不是代表的是系统的根目录，而是代表的是http服务饿的根目录（因此程序员若想调试html页面的时候不可以单击html文件打开，此时会跳转到系统根目录上）
index.html和./index.html均可，表示的是相对于当前目录下的index.html

伪协议

javascript:代码；指的是点击a标签的时候执行javascript代码，一般情况下使用javascript:;,表示空标签，可以单击a标签不跳转，也不刷新页面
mailto:邮箱
tel:手机号

id href="#xxx"

target:target的取值

_blank，表示在新的页面打开链接
_self,表示在本页面打开链接
_parent，表示在父级页面中打开链接
_top，表示在顶级页面中打开链接

download,download的作用不是打开页面而是下载页面，然而不推荐使用此属性，因为并不是所有的浏览器都支持，尤其是手机浏览器
rel= noopener,设置window.opener会被设置成null，在老的浏览器，可以使用rel= noreferrer，它不仅禁用window.opener后一个页面也无法获取referrer

2. img 标签的用法

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

src属性是必须的，包含了你想嵌入的图片的文件路径
alt表示图片加载失败时显示的内容，便于让用户清楚未加载的图片内容是什么
width 和height，img具有自适应特点，在规定了图片的宽度或高度时，另外的一个会自己等比例调整
响应式：max-width = 100%可以根据浏览器窗口的大小调整图片大小

3. table 标签的用法

<table>
        <thead>
            <tr>
                <th>国家</th>
                <th>首都</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>中国</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>英国</td>
                <td>伦敦</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>表格尾部内容</td>
                <td>表格尾部内容</td>
            </tr>
        </tfoot>
    </table>

4. form标签的用法

form标签根据method属性发出get或post请求，然后刷新页面

属性：

action：控制请求哪个页面
autocomplete:自动填充，给用户提示填写建议，写法autocompelte = on或者autocompelte = off
method: get 或者post
target:告诉浏览器要提交到哪个页面应该让哪个页面刷新

5.input标签

作用是让用户输入内容

<form>
        <!--按钮-->
        <input type="button" value="按钮">
        <br>
        <!--勾选框-->
        <input type="checkbox">
        <br>
        <!--邮件-->
        <input type="email">
        <br>
        <!--上传文件,若想上传多个文件用multiple -->
        <input type="file">
        <br>
        <!--隐藏内容,作用让JS自动填入数据如id或字符串等 -->
        <input type="hidden">
        <br>
        <!--密码 -->
        <input type="password">
        <br>
        <!--圆形按钮，若想控制多个按钮，多选一，则让他们具有相同的name-->
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <br>
        <!--提交按钮 -->
        <input type="submit">
        <button type="submit">提交</button>
        <br>
        <!-- 文本-->
        <input type="text">
    </form>

其中必须保证在form中含有一个type = "submit"的按钮这样才能出发submit事件，input的submit和button的submit的区别为button里面可以再加其他的标签而input里面不能含有其他任何东西

6. iframe标签用法

是HTML内联框架元素，表示潜逃的网页内容，可以将另一个HTML页面嵌入当前页面中

<iframe src="a-target-iframe.html" frameborder="0"></iframe>

7. 其他感想

html的标签的用法不难但是很杂，若想掌握应该要多练习，多看mdn文档。

HTML常用标签