HTML常用标签1. a 标签 2. iframe 标签 3. table 标签 table 标签里面只包含 thead

1. a 标签

href属性的取值

网站

<a href="https://www.baidu.com">百度</a>
<a href="http://www.baidu.com">百度</a>
<a href="//baidu.com">百度</a> <!-- 无协议地址 -->

路径（绝对路径和相对路径）

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

这里的 /a 中的 / 表示的不是根目录，而是服务所在的目录（绝对路径）

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

这里表示的意思是在当前目录下，寻找a，然后寻找b，然后寻找c，最后找到d.html（相对路径）

伪协议

<a href="javascript:;"></a>

使用这个伪协议可以做一个点击以后无反应的效果

<a href="#xxx"></a>

这个超链接会跳转到 id 为 xxx 的位置上

 <a href="mailto:xxxxxxx@xx.com">发邮件</a>

这个超链接会跳转到发邮件界面

 <a href="tel:xxxxxxxxx">打电话</a>

这个超链接会跳转到打电话界面

target 属性

<a href="https://www.baidu.com" target="_black">百度</a>

target="_black" 链接会在新窗口打开

<a href="https://www.baidu.com" target="_self">百度</a>

target="_self" 链接会在当前窗口打开

<a href="https://www.baidu.com" target="_top">百度</a>

target="_top" 链接会在顶级窗口打开

<a href="https://www.baidu.com" target="_parent">百度</a>

target="_parent" 链接会在父级窗口打开

download属性暂时不做了解
rel=noopener属性暂时不做了解

2. iframe 标签

<iframe>内容</iframe>

内嵌窗口，已经很少使用，能调整其宽高

3. table 标签

table 标签里面只包含 thead 标签， tbody 标签和 tdoot 标签。

tr 标签代表 table row 行
th 标签代表 table head 表头
td 标签代表 table data 数据

实例
<table>
        <thead>
            <tr>
                <th></th>
                <th>小明</th>
                <th>小红</th>
                <th>小黄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>语文</th>
                <td>65</td>
                <td>95</td>
                <td>80</td>
            </tr>
            <tr>
                <th>数学</th>
                <td>65</td>
                <td>95</td>
                <td>80</td>
            </tr>
            <tr>
                <th>英语</th>
                <td>65</td>
                <td>95</td>
                <td>80</td>
            </tr>
        </tbody>
        <tfoot>
            <th>总分</th>
            <td>195</td>
            <td>285</td>
            <td>240</td>
        </tfoot>
    </table>
</body>

实际效果

table 的相关样式

table-layout: auto; table 的每一列和行长度会根据内容来变化
table-layout: fixed; table 的每一列和行的长度是等宽的
border-collapse: collapse; 边框合并
border-spacing: 0px; 边框之间的距离为0

4. img 标签

该标签的实质是发出get请求，展示一张图片

<img src="" alt="" height="" width="">

src 是引用的图片的路径
alt 是图片展示失败时候展示的内容
height 设置图片的高度，只设置 height 的话， width 自适应
width 设置图片的宽度，只设置 width 的话， height 自适应

img 标签触发的事件类型有： onload 和 onerror

5. form 标签

form 标签的实质是发 get 请求或者 post 请求，然后刷新页面

<form action=""></form>

action 是控制请求哪个页面

<form action="" method=""></form>

method 是控制用GET或者POST请求

<form action="" method="" autocomplete=""></form>

autocomplete=“on” autocomplete=“off” 自动填充开或者关

<form action="" method="" autocomplete="" target=""></form>

target 可以控制表单提交到哪个页面，哪个页面应该刷新

<input type="text" >

输入文本

<input type="color" >

选择颜色

<input type="password" >

输入密码

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

radio 是单选框，当name是相同的时候，只能选择当中的其中一个

<input  name="hobby" type="checkbox" >唱
<input  name="hobby" type="checkbox" >跳
<input  name="hobby" type="checkbox" >rap
<input  name="hobby" type="checkbox" >篮球

checkbox 表示复选框，当name是一样的时候，表示这是同一组的

<input  type="file" >

选择要上传的文件

<input  type="file"  multiple>

选择要上传的多个文件

<input  type="hidden" >

隐藏，看不见

<textarea> </textarea>

文本域，可以再里面输入内容，一般添加样式resize: none;不能通过拖动而改变此区域的大小一般是会自己设置该文本域的宽和高

<section>
    <option  value="">内容</option>
    <option  value="">内容</option>
    <option  value="">内容</option>
</section>

section 是表示选择，option 表示选择项

<input type="search" name="" id="">
<input type="email" name="" id="">
<input type="tel" name="" id="">

还有其他search / email / tel 等

注意

<input type="submit" value="提交">

<button type="submit">提交</button>

上面两段代码的区别，都是提交的作用，但是 button 里面可以再包含其他标签，例如是strong标签，或者是img标签等
form 标签里面必须包含type=submit 的标签，否则无法提交此表单
input 触发的事件有：onchange / onfocus / onblur
一般不监听 input 的 click 事件
form 里面的 input 要有 name
form 里面需要放一个 type=submit 才能触发 submit 事件