HTML 常用标签 Note-FrontEnd-2HTML常用标签的使用，包括a标签、table标签、img标签、for

HTML常用标签的使用，包括a标签、table标签、img标签、form标签、input标签、其他输入标签。

一、a标签

作用： 超链接，跳转到外部页面、内部页面、邮箱或电话等

写法：

<a href="URL" target="yyy">zzz</a>

属性：

href取值：网址、路径、伪协议、id

网址类型有3种，可以自动跳转网址页面。测试的时候推荐使用第三种不加协议类型，让页面自动跳。

https://google.com
http://google.com
//google.com

路径类型有2种，跳转到子目录或者服务器根目录下的页面。

/a/b/c 以及 a/b/c
index.html 以及 ./index.html

伪协议类型有3类，分别是执行JS代码、跳转到邮箱、跳转到打电话。

javascript:代码;
mailto:邮箱
tel:手机号

id类型1种，跳转到指定id的标签。

#xxx

target取值：_blank、_top、_parent、_self、xxx

_blank -- 在空白页面打开

_top -- 在顶层页面打开

_self -- 在当前页面打开

xxx -- 在xxx页面打开，可以在浏览器新开一个窗口xxx页面打开，也可以将iframe取名为xxx，并在其中打开

二、table标签

作用： 展示一个表格

写法：

<table>
    <thead>
        <tr>
            <th>英语</th>
            <th>翻译</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>hyper</td>
            <td>超级</td>
        <tr>
    </tbody>
    <tfoot>
        <tr>
            <td>空</td>
            <td>空</td>
        </tr>
    </tfoot>
</table>

当想表达两个表头时候，表头部里第 1 个单元格空出，从第 2 个开始写表头，表身体里每行的第 1 个单元格表头，从第 2 个开始写单元格数据，表脚部里每行的第 1 个单元格表头，从第 2 个开始写单元格数据。

当不加 thead、tbody、tfoot，只写 tr 和 td 时，浏览器预览页面 html 会自动添加到 tbody 中。当连 tr 都不写，只写 td 时，浏览器预览页面 html 会自动添加到 tbody 的 tr中。

这就是 html 最强大的超强纠错。

三、img标签

作用： 发出 get 请求，展示一张图片

写法：

img {
    max-width: 100%;
}
<img id=xxx width="400" src="dog.png" alt="一只狗子">
xxx.onload = function () {
    console.dog('图片加载成功');
}
xxx.error = function () {
    console.dog('图片加载失败');
    xxx.src = '/404.png';
}

属性：

src -- 链接图片地址

alt -- 加载失败时显示的内容

height /width -- 图片的高度和宽度，只写一个即可，另一个高度或宽度会自适应

onload / onerror -- 可以挽救图片加载失败，用户体验的优化

max-width:100% -- 在手机上浏览时能占满整个手机宽度

四、form标签

作用： 发 get 或 post 请求，然后刷新页面

写法：

<form action="/xxx" method="POST" autocomplete="on" target="_blank">
    <input name="username" type="text">
    <input type="submit" value="搞起">
    <button type="submit"><strong>搞起</strong></button>
</form>

属性

action / method -- action 是控制请求哪个页面，method 是使用 get 还是 post 请求

autocomplete -- 开启自动建议

target -- 告诉浏览器提交到哪个页面

onsubmit -- 当用户点提交的时候，会触发一个事件

五、input标签

作用： 让用户输入内容

写法及属性：

<input type="text"> -- 输入普通的文本
<input type="color"> --输入颜色选择
<input name=gender type="radio">男 -- 单选
<input name=gender type="radio">女
<input nanme="hobby" type="checkbox">唱 -- 多线
<input nanme="hobby" type="checkbox">跳
<input nanme="hobby" type="checkbox">Rap
<input nanme="hobby" type="checkbox">篮球
<input type="file"> -- 上传一个文件
<input type="multiple"> --  上传多个文件
onchange -- 当用户改变的时候触发的事件
onfocus -- 当用户鼠标集中到它身上的时候触发的事件
oublur -- 当用户鼠标从它身上出来的时候触发的事件

六、其他输入标签

作用： 让用户输入内容

写法和属性：

<textarea style="resize: none;width: 50%;height: 300px;"></textarea> 
-- 能够多行输入，右下角有个地方改变其框大小

<select>
    <option value="">请选择</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
    <option value="3">星期三</option>
</select>
--能够多个项目中做选择