目录

1. <a> 标签
2. <table> 标签
3. <img> 标签
4. <form> 标签

1.<a>的属性(包括但不限于)：

1. href

href属性给出链接指向的网址，也就是说把网站或者文件的地址填进去。

<a href="//baidu.com">百度</a>

可以填 https ://baidu.com 、 http ://baidu.com 、//baidu.com这三种链接， 我们可优先选择填 //baidu.com这一种链接 ，原因是链接更简单并且浏览器可自动匹配https:或http:等前缀，可减少出错率。

2. target

target属性指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。

<p><a href="http://baidu.com" target="_self">百度1</a></p>
<p><a href="http://baidu.com" target="_blank">百度2</a></p>
<p><a href="http://baidu.com" target="_parent">百度3</a></p>
<p><a href="http://baidu.com" target="_top">百度4</a></p>

• _self：当前窗口打开，这是默认值。
• _blank：新窗口打开。

<a
  href="https://www.example.com"
  target="_blank"
>示例链接</a>

上面代码点击后，浏览器会新建一个窗口，在该窗口打开链接。

• _parent：上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self。

点击子标签中的_parent以后会在原来父标签的位置打开子标签

    <!-- 将Google链接的target设置为"xxx" -->
    <a href="//google.com/" target="xxx">谷歌</a>
    <!-- 将baidu链接的target设置为"yyy" -->
    <a href="//baidu.com" target="yyy">百度</a>
    <!-- 创建两个iframe窗口，一个叫"xxx"一个叫"yyy" -->
    <hr>
    <iframe src="" name="xxx"></iframe>
    <hr>
    <iframe src="" name="yyy"></iframe>

点击后，会在相同 target 名字的 iframe 窗口中打开对应的网页

• _top：顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self。 注意，使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。 此外，如果将两个链接的target值设置为一样，就可以看到如下效果

<a href="//google.com/" target="xxx">谷歌</a>
<a href="//baidu.com" target="xxx">百度</a>

首先点击Document标签页中的"谷歌"链接，会打开一个新窗口，用window.name可以看到，当前窗口的名字为'xxx'

再次点击Document标签页中的"百度"链接，会在原来打开"谷歌"的窗口中打开"百度"页面，用window.name可以看到，当前窗口的名字也为'xxx'，正是因为它们的窗口名字设置为了一样的值，所以才会出现这种效果。

3. download

download属性表明当前链接用于下载，而不是跳转到另一个 URL。

此外href还有如下作用

    <!-- javascript伪协议，点击后会弹出一个提示框显示"1" -->
    <a href="javascript:alert(1)">javascript伪协议</a>
    <!-- 空的伪协议，点击后无任何反应 -->
    <a href="javascript:">空的伪协议</a>
    <!-- 点击后跳转到id为"xxx"的地方去 -->
    <a href="#xxx">查看xxx</a>
    <!-- 点击后浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件 -->
    <a href="mailto:2425172709@qq.com">发邮件给高天赐</a>
    <!-- 点击后，会唤起电话，可以进行拨号 -->
    <a href="tel:18257390950">打电话给我</a>

2. <table>标签主要作用为生成表格，它的用法(包括但不限于)：

thead :表头 tbody :表体 tfoot :表尾 tr :表示表格的一行（table row） th :标题单元格 td :数据单元格

<table>
        <thead>
            <tr>
                <th>英语</th>
                <th>翻译</th>
            </tr>
            <!-- table row -->
        </thead>
        <tbody>
            <tr>
                <td>hyper</td>
                <td>超级</td>
            </tr>
            <tr>
                <td>target</td>
                <td>目标</td>
            </tr>
            <tr>
                <td>reference</td>
                <td>引用</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>空</td>
                <td>空</td>
            </tr>
        </tfoot>
    </table>

显示效果

 <table>
        <thead>
            <tr>
                <th></th>
                <th>小红</th>
                <th>小明</th>
                <th>小兰</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th>数学</th>
                <td>89</td>
                <td>23</td>
                <td>12</td>

            </tr>
        </tbody>

        <tfoot>
            <tr>
                <th>总分</th>
                <td>89</td>
                <td>23</td>
                <td>12</td>
            </tr>
        </tfoot>
    </table>

显示效果

关于表格的css属性table-layout:

• table-layout: auto; 是根据内容来分配宽度
• table-layout: fixed; 是尽量平均每行的宽度 除此之外，table常用的还有
• border-collapse:
• border-spacing: 用法看我的另一篇博客juejin.cn/post/710078…

2. <img>标签用于插入图片，它的用法(包括但不限于)：

1. 插入一张图片

<img src="dog.jpg">

2. 将图片变成可点击的链接

<a href="//baidu.com">
  <img src="dog.jpg">
</a>

3. 图片加载失败时，用文字替代图片

<img src="dog.jpg" alt="小狗">

4. 通过js实现在dog.png图片加载失败时，用404.png替代图片进行替代

<img id="xxx" src="./dog.png" alt="小狗">
    <script>
        xxx.onload = function () {
            console.log("图片加载成功");
        };

        xxx.onerror = function () {
            console.log("图片加载失败");
            xxx.src = "/404.png";
        };
    </script>

5. 创建响应式布局(主要用在手机端)

<style>
        /* 响应式页面布局 */
        img{
            max-width: 100%;
        }
</style>

• 非响应式布局

• 响应式布局

4. <form> 标签

1. 最简单的 form 表单

<!-- 将请求提交给"xxx" -->
<form action="/xxx">
       <input type="text">
       <input type="submit">
</form>

2. 加上autocomplete进行自动填充（记得要在input中加"username"才会生效）

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

• 效果如下

3. input type="submit"和button type="submit"的区别

• input中不能再含有标签等东西，而button中可以添加

<form action="/xxx" autocomplete="on" target="a">
        <input name="username" type="text">
        <input type="submit">
        <!-- button中可以添加<strong><img>等各类标签-->
        <button type="submit"><strong>点我</strong></button>
</form>

4. 通过 "required" 来实现如果不填写内容就无法提交

<form action="/xxx" autocomplete="on" target="a">
      <input name="username" type="text" required>
      <input type="submit">
</form>

• 如果不输入任何内容就会出现以下情况

5. 通过设置相同的name属性实现二选一操作

<form action="/xxx" autocomplete="on" target="a">
        <input name="gender" type="radio"> 男 <input name="gender" type="radio"> 女
        <input type="submit">
</form>

6. 通过 checkbox 实现多选操作

<form action="/xxx" autocomplete="on" target="a">
        <input type="checkbox" name="hobby" value="sing">唱
        <input type="checkbox" name="hobby value="dance"">跳
        <input type="checkbox" name="hobby value="rap"">rap
        <input type="checkbox" name="hobby value="basketball">篮球
        <input type="submit">
</form>

7. 上传文件

<form>
<!-- 上传单个文件 -->
<input type="file"> 
<!-- 上传多个文件 -->
<input type="file" multiple>
</form>

8. 生成一个文本框供用户输入内容

 <form>
 <textarea style="resize: none;width: 50%; height: 50%;"></textarea>
 </form>

9. 生成一个选项框供用户选择

<form>
<select>
     <option value="">请选择</option>
     <option value="1">星期1</option>
     <option value="2">星期2</option>
     <option value="3">星期3</option>
</select>
</form>