`<a>` 标签

`<a>` 标签的作用

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

`<a>` 标签的属性

href

包含超链接指向的 URL。

href 属性的取值有：

网址

https://baidu.com
http://baidu.com
//baidu.com

推荐使用 //baidu.com 这一种写法，它会自动选着使用哪种协议。

路径

/a/b/c 以及 a/b/c
index.html 以及 ./index.html

伪协议

（1）javascript:代码;

可以直接执行 JS 代码。可以通过执行代码 <a href="javascript:;"></a>，使得点击 <a> 标签之后浏览器不进行任何操作。

需要注意的是：

<a href=""></a> 会让页面刷新；

<a href="#"></a> 会让页面跳转到顶部；

<a href=#xxx"></a> 会让页面跳转到 id=xxx 的元素。

（2）<a href="mailto:xxx@gmail.com"></a>

点击 <a> 标签会跳转到邮箱，然后给 xxx@gmail.com 发邮件。

（3）<a href="tel:123456789"></a>

点击 <a> 标签会拨号界面，自动填入号码。

target

target 属性指定在什么页面打开链接。

_self：在当前页面打开，这是默认值。
_blank：在新窗口打开（点击后，浏览器会新建一个窗口，在该窗口打开链接，且新窗口没有名字）。
_parent 在父级页面打开。
_top 在顶层页面打开。 target="xxx" 会在 xxx 窗口打开链接；若 xxx 窗口不存在，浏览器就新建一个名字为 xxx 窗口，在该窗口打开链接。

`<iframe>` 标签

<iframe> 标签用来在网页中内嵌其他网页。可以通过 width 和 height 属性来控制 <iframe> 的宽和高。<iframe> 标签现在已经很少使用。

`<table>` 标签

表格以行（row）和列（column）的形式展示数据。完整的 <table> 标签包含 <thead>、<tbody> 和 <tfoot> 三个元素。

`<table>` 标签使用方式

表头使用 <th> 标签，数据使用 <td> 标签。

<table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>籍贯</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>北京</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>上海</td>
            </tr>
            <tr>
                <td>王二</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>88</td>
            <td>82</td>
            <td>91</td>
        </tr>
        <tr>
            <th>数学</th>
            <td>94</td>
            <td>89</td>
            <td>86</td>
        </tr>
        <tr>
            <th>英语</th>
            <td>77</td>
            <td>89</td>
            <td>98</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>总分</th>
            <td>259</td>
            <td>260</td>
            <td>275</td>
        </tr>
    </tfoot>
</table>

`<table>` 标签常用的样式

table-layout：auto;：浏览器会根据表格内容长度自适应调节宽度。
table-layout：fixed;：表格的每一列会是等宽，宽度由该列第一行的单元格决定。
border-collapse：用来决定表格的边框是分开的还是合并的。值为 separate，每个单元格有独立边框，这是默认属性；值为 collapse，相邻单元格共用边框。
border-spacing：指定了相邻单元格边框之间的距离。

一般会设置 <table> 的默认样式为：

table {
    table-layout: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

`<img>` 标签

作用

发起GET请求，展示图片。

属性

src：引入图片的地址。
alt：一般用来设定图片的文字说明，当图片无法展示时，图片位置上会显示该值。
width 和 height：用来指定图片的宽和高，指定其中一项，另一个会自适应。

响应式

网页在不同的设备上，都可以进行良好的显示，叫做响应式设计。

在 <img> 标签的样式上加 max-width: 100%; 可以让图片自适应不同尺寸的屏幕。

`<form>` 标签

作用

发起 GET/POST 请求，然后刷新页面。

属性

action：服务器接收请求的 URL。
method：提交请求的方法（GET/POST）。
autocomplete：是否进行自动填充。可取的值有 off（不自动填充）和 on（自动填充）。
target：指定提交后刷新的页面在哪个窗口展示。

`<input>` 标签

作用

<input> 标签的作用是让用户输入内容。

属性

type="text"：用来输入纯文本。
type="password"：密码输入框，输入会被遮挡，输入字符会显示为 * 或者 ·。
type="radio"：单选框，用来选择其中一项。如下：

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

type="checkbox"：复选框（需加相同的 name）。

<input type="checkbox" name="fruit">苹果
<input type="checkbox" name="fruit">橘子
<input type="checkbox" name="fruit">香蕉
<input type="checkbox" name="fruit">草莓

type="file"：上传单个文件；type="file multiple"：上传多个文件。

<input type="file">
<input type="file" multiple>

`<textarea>` 标签

用来输入多行文本。默认可以随意拖动，可以加样式 resize:none 来使其固定，然后可以在样式里通过 width 和 height 来指定宽高。

<textarea style="resize:none; width:500px; height:300px;"></textarea>

`<select>` 标签

用来生成下拉菜单。

option

注意事项

<input> 和 <button> 的区别：
<input> 里不能再有其他标签，
<button> 里可以放任何东西。
<form> 表单里 <input> 有 name。
一般不监听 input 的 click 事件。
form 里必须有一个 type=submit 的 <input> 或者 <button> 才能出发 submit 事件。

HTML常用标签

<a> 标签

<a> 标签的作用

<a> 标签的属性

href

target

<iframe> 标签

<table> 标签

<table> 标签使用方式

两个表头的表格实现

<table> 标签常用的样式

<img> 标签

作用

属性

响应式

<form> 标签

作用

属性

<input> 标签

作用

属性

<textarea> 标签

<select> 标签