HTML常用标签

1. <a>

1.1 属性

（1）href

• 网址
  • https://google.com
  • http://google.com
  • //google.com（建议写这种形式）
• 路径
  • /a/b/c以及a/b/c（结果相同，http协议根目录即开启服务时的根目录）
  • index.html以及./index.html
• 伪协议
  • javascript:;执行空的JS语句，效果为点击之后没有反应。
  • mailto:邮箱地址
  • tel:手机号
• id（href = #xxx）

（2）target

• _blank（空白页面打开）
• _top（顶级窗口打开）
• _parent（当前页面的上一层）
• _self（当前页面打开）
• xxx（如果有就在xxx打开，如果没有就新建一个），利用相同 target 可以做一个 goobai 页面。

（3）download

（4）rel = noopener

1.2 功能

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

2. <img>

（1）作用

发出 get 请求，展示一张图片。

（2）属性

• alt（图片加载失败时替换）
• height
• width
• src

（3）事件

• onload（图片加载成功）
• onerror（图片加载失败），可以修改 src 替换一个图片优化用户体验。

（4）响应式

max-width: 100%

3. <table>

以下是一个完整结构的<table>。

<table>
        <thead>
            <tr>
                <th></th>
                <th>小明</th>
                <th>小红</th>
                <th>小王</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>61</td>
                <td>91</td>
                <td>85</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>200</td>
                <td>200</td>
                <td>200</td>
            </tr>
        </tfoot>
    </table>

tips：

• 如果不写 tbody 和 tr，浏览器会自动添加。
• thead、tbody 和 tfoot 位置即便打乱，浏览器也会按照这个顺序。
• tr（table row），表示表中的一行。
• th（table head），表示表头。
• td（table data），表示表中的数据。

相关的样式：

<style>
        table {
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>

table-layout可选值：

• auto，表格及单元格的宽度取决于其包含的内容。
• fixed，平均。

border-collapse: collapse单元格合并。

border-spacing设置 border 间距。

4. <form>

（1）作用

发 get（默认）或 post 请求，然后刷新页面

（2）属性

• action，请求的页面。
• method，请求方式（GET/POST）。
• autocomplete

<form action="/xxx" method="POST" autocomplete="on">
        <input type="text" name="username">
    </form>

以上代码可以实现自动补全用户名。

• target

（3）事件

onsubmit

（4）input和button

button中可以嵌套其他标签，input不行。

一般不监听input的 click 事件。

<form>中必须要有一个type="submit"的按钮才能提交。

<form>里面的 input 要有 name。

type的取值：

• text
• color
• password
• radio（单选）

<form>
    <input type="radio" name="gender">男
	<input type="radio" name="gender">女
</form>

• checkbox（多选）
• file
• hidden
• textarea，style="resize: none"设置用户不可改变大小。
• select

<select>
            <option value="">- 请选择 -</option>
            <option value="1">星期一</option>
            <option value="2">星期二</option>
        </select>

验证器： required