HTML常用标签button 也可以用来做提交按钮，不写type默认值submit.

a 标签

属性

href 跳转网址

网址

google.com
google.com

<a href="https://google.com">google</a>
<a href="http://google.com">google</a>
<a href="//google.com">google</a>  推荐

路径

/a/b/c 或 a/b/c

index.html 或 ./index.html

<a href="/a/b/c.html">c页面</a> 文件夹a里面文件b里面的c.html页面
<a href="index.html">html页面</a> 在当前目录找html页面

伪协议

javascript: 代码;
mailto：邮箱

tel：手机号

<a href="javascript:alert(1);">JavaScript伪协议</a> 一般用来做没有动作的伪协议
<a href="javascript:;">空的伪协议</a> 这样为了防止重新刷新页面，它什么也不会做
<a href="mailto:xxxxxx@123.com">发邮件</a> 打开直接跳转到发邮件，并且邮件地址已经写好了
<a href="tel:1384567890">打电话给我</a> 点击直接到呼叫页面

href = "#xxxx"

<a href="#xxx">跳到id所在的位置</a> 可以通过id跳到指定标签

targeit

内置名字

_blank
_top
_parent

_self

<a href="//baidu.com" target="_blank">百度</a>打开一个新窗口
<a href="//baidu.com" target="_top">top</a> 在嵌套页面中用top 就是在最上面一层打开一个新网站
<a href="//baidu.com" target="_self">self</a> 在嵌套页面中用self 就是在自己内部打开一个网站
<a href="//baidu.com" target="_parent">parent</a> 在当前所在链接的上一层打开

程序员命名

window的name

<a href="//baidu.com" target="XXXX">baidu</a> 打开当前命名为xxxx的窗口名称
<a href="//google.com" target="XXXX">google</a> 当第二次打开xxxx会覆盖当前运行窗口

iframe的name

YYYY跳转到YYYY界面
XXXX跳转到XXXX界面
<a href="//baidu.com" target="YYYY">baidu</a>
<a href="//google.com" target="XXXX">google</a>
<hr>
<iframe src="" name="XXXX"></iframe>
<hr>
<iframe src="" name="YYYY"></iframe>
例：一个页面即可搜索google或者baidu
把iframe做的和网页一样大就可
<a href="//baidu.com" target="XXXX">baidu</a>
<a href="//google.com" target="XXXX">google</a>
<hr>
<iframe src="" name="XXXX" style="border: none;height: 800px;width: 100%;"></iframe>

a的downlad
1. 作用：不是用来打开页面，而是用来下载页面
2. 问题：不是所有浏览器都支持，尤其是手机浏览器可能不支持

table标签

相关的标签
1. table
2. thead
3. tbody
4. tfoot
5. tr（table row）表示表格的一行
6. td （table date）表格数据
7. th （table head）表头
相关的样式
1. table-layout 值auto(根据内容自动计算行列的宽高) 值fixed(行列的宽高平均分配)
2. border-collapse （collapse）表格合并
3. border-spacing 表格之间的间隙

【注】 一定要用规范写法（thead、tbody、tfoot）
    <style>
        td,
        th {
            border: 1px solid black;
        }

        table {
            width: 200px;
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>
		<table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
                <th>小应</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>数学</th>
                <td>61</td>
                <td>82</td>
                <td>83</td>
            </tr>
            <tr>
                <th>语文</th>
                <td>61</td>
                <td>82</td>
                <td>83</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>61</td>
                <td>82</td>
                <td>83</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>总分</th>
                <td>xxx</td>
                <td>xxx</td>
                <td>xxx</td>
            </tr>
        </tfoot>
    </table>

img标签

作用：发出get请求，展示一张图片
属性
1. src (source) 接图片的地址，可是网络地址/相对路径、绝对路径
2. height/width 只写宽/高图片会自适应，如果2个都写图片会变形【注】永远不要让图片变形
3. alt 如果图片加载失败显示alt用来提示客户
事件
1. onload/onerror 用来监听图片是否加载成功 noload成功 onerror失败
  
  作用：图片加载失败的时候可以用来挽救
响应式：max-width：100%

	<img src="xxx.jpeg" id="xxx" alt="这里有一张图片">
    <script>
        xxx.onload = function () {
            console.log("图片加载成功");
        }
        xxx.onerror = function () {
            console.log("图片加载失败");
            xxx.src = '/404.gif'
        }
    </script>

form标签

作用：发get 或post 请求，然后刷新页面
属性
1. action 请求到哪个页面
2. autocomplete on是否自动填充 off不填充 autocomple在form加入然后在input加入 username 在输入框中就会给出自动建议
```
<form action="/xxxx" method="GET" autocomplete="on">
        <input type="text" name="username">
        <input type="submit">
</form>
```
3. method 控制用get/post 请求 method="POST" method="GET"
4. target 把哪个页面变成 action请求的页面
```
<form action="/xxxx" target="_blank"> 就会打开在新开页面
```
事件 onsubmit 当用户提交就会触发这个事件
⚠️注意事项
1. form里面的inpnut要有name(用来区分)
2. form里面放的一个type = submit 才能触发submit事件(type里面不写值，或默认为submit)
3. button 也可以用来做提交按钮，不写type默认值submit.
4. buttom和 submit 区别 button文字里面可以放任何标签，submit不可以

input标签

作用：让用户输入内容

属性

value 按钮上的名字可以根据value改变 value="XXX"

type:button/color/password/radio(单选)/checkbox(多选)file(上传文件)/hidden(隐藏的提交按钮，作用：让js自动某个值)/number/search/tel

radio
<input type="radio" name="gender">男
<input type="radio" name="gender">女
checkbox  checked直接被选中按钮
<input type="checkbox" name="hobby" checked>唱歌
<input type="checkbox" name="hobby">跳舞
file
<input type="file">
<input type="file" multiple>

其他 name/autofocus/checked/disabled/maxlength/pattern/placeholder

事件：onchange/onfocus/onblur
验证器：HTML5新增功能（required）会提示