HTML常用标签table-layout 定义了用于布局表格单元格行和列的算法，取值有：auto(按照内容宽度布局)，f

1.a标签

作用：

跳转到外部页面
跳转到内部电话
跳转到邮箱或电话

1.1href(hyper+refer,超级引用)，a的href取值如下所示：

  <p id="xxx">跳转过来吧</p>
    <!-- 网址 -->
    <a href="https://baidu.com"></a>
    <a href="http://baidu.com"></a>
    <!-- 无协议网址 -->
    <a href="//baidu.com">超链接</a>  
    <!-- 路径 -->
    <a href="form.html">另一个文件</a>
    <!-- 伪协议 -->
    <a href="javascript:alert(1);">javascript伪协议</a>
    <!-- 需要一个a标签，但是又什么都不做，采用以下方式 -->
    <a href="javascript:;">javascript伪协议</a>
    <a href="mailto:157777@qq.com">发邮件给点点</a>
    <a href="tel:13750553333339">给小蓝打电话</a>
    <!-- 定位到id="xxx"的标签 -->
    <a href="#xxx">点击跳转到上面p标签</a>

1.2target(目标)取值如下：

_top：多个窗口在同一界面时，在最上面的那个窗口打开链接；
_parent：多个窗口在同一界面时，上一层窗口打开链接；
_blank：新的空窗口打开页面；
_self：本空窗口打开页面（默认属性）；

1.3download:下载页面，不是所有浏览器都支持，尤其是手机浏览器

2.iframe标签：内嵌窗口，较少使用

3.table标签

3.1主要标签如下所示

thead
tbody
tfoot
tr:table row(table里面的一行)
th
td:table data(table里的数据)

 <table>
        <thead>
            <tr>//table row(table里面的一行)
                <th>英语</th>
                <th>翻译</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>hyper</td>//table data(table里的数据)
            <td>超级</td></tr>
            <tr><td>hyper</td>
                <td>超级</td></tr>
                <tr><td>hyper</td>
                    <td>超级</td></tr>
                    <tr><td>hyper</td>
                        <td>超级</td></tr>
        </tbody>
        <tfoot>
            <tr><td>空空如也</td>
                <td>空空如也</td></tr>
        </tfoot>
    </table>

3.2table布局标签

table-layout 定义了用于布局表格单元格行和列的算法，取值有：auto(按照内容宽度布局)，fixed(等宽布局)。
border-collapse: collapse;（合并边框）
border-spacing:0;(表格框框之间的距离，一般设置为0)

4.img标签

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

src:图片地址
alt:无法顺利获取图片时展示的内容
width/height:设置图片宽高
max-width：在css加入该属性，手机页面响应式
onloag:图片加载成功可触发的事件
onerror:图片加载失败可触发的事件

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    img{
        /* 手机页面响应式 */
        max-width: 100%;
    }
</style>
<body>
    <img width="400px" src="waitou.jpg" alt="歪头猫" id="xxx">
    <script>
        xxx.onload = function(){
            console.log("图片加载成功")
        }
        xxx.onerror = function(){
            console.log("图片加载失败")
            xxx.src="error.jpg"
        }
    </script>
</body>

5.form标签

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

action：数据发送地址，由后台提供
method:决定form发出的时post请求还是get请求
autocomplete(on/off)：属性规定输入字段是否应该启用自动完成功能。自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
input submit和button submit 不同的是，button里面可以加任何东西
form里面必须有一个type="submit"的按钮，如果不写，默认就是submit

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

6.input标签

  <!-- 默认为文本，加入 required该文本框就是必填选项-->
        <input type="text" required>
        <!-- 里面可以是颜色 -->
        <input type="color">
        <!-- 密码 -->
        <input type="password">
        <!-- 单选框 -->
        <input type="radio" name="gender">男
        <input type="radio" name="gender">女
        <!-- 复选框 -->
        <input type="checkbox" name="hobby">唱
        <input type="checkbox" name="hobby">跳
        <input type="checkbox" name="hobby">rap
        <input type="checkbox" name="hobby">篮球
        <!-- 选择文件，multiple表示可多选-->
        <input type="file" multiple>

7.textarea标签

<!-- 文本框，可通过鼠标拖曳放大缩小，resize: none表示固定文本框，不再可以改变大小 -->
 <textarea name="" id="" cols="30" rows="10" style="resize: none;"></textarea>

8.select选择列表

 <select name="" id="">
            <option value="1">周一</option>
            <option value="2">周二</option>
            <option value="3">周三</option>
            <option value="4">周四</option>
            <option value="5">周五</option>
            <option value="6">周六</option>
            <option value="7">周日</option>
        </select>