一. a标签

1.1 用法

链接主要是通过<a>来表示，用户通过点击点击，就会跳转到指定的网址，例如:

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

此代码运行之后产生的效果是：
链接图片.png
当用户点击百度之后就会跳转到href所指向的链接。

1.2 属性

href:属性给出链接所指向的网址。它的属性值如下：

URL
路径：
- 例如： a/b/c或a\b\c; index.html或./index.html
锚点
- 例如：格式举例: <a href=”#X”></a> <p id=”X”></P>
伪协议
- 例如：javaScript:; 、mailto:邮箱；、 tel:手机号；

target: 该属性用于设定通过何种方式打开链接。它可以是在指定的窗口打开，也可以在当前页面打开，也可以在iframe中打开。该属性取值如下：

_blank: 该属性值表示用新页面打开。

<a href="https://baidu.com" target="_blank">百度</a>//通过新窗口打开链接

_self：该属性值表明通过当前页面打开。同时这也是默认的打开方式。

<a href="https://baidu.com" target="_self">百度</a>//通过当前页面打开链接

_top ：该属性顶层窗口打开。

<a href="https://baidu.com" target="_top">百度</a>//通过顶层窗口打开链接

parent : 该属性值表面上层窗口打开，通常用于从父窗口打开子窗口，或者<iframe>里面的链接

<a href="https://baidu.com" target="_parent">百度</a>//通过上层窗口打开

二. table标签

2.1 用法

<table>标签是一个块级容器标签，所有表格内容都要放在这个标签里面。主要包含的有：


<table>
  <thead>... ...</thead>
  <tbody>... ...</tbody>
  <tfoot>... ...</tfoot>
</table>

<thead>、<tbody>、<tfoot>这三个标签是<table>的一级子元素，他们也都是块级元素容器。分别表示的是表头、表体、表尾。
其他子元素：

<tr> : 该标签表示的是表格的一行（table row）。如果表格中有<thead>、<tbody>、<tfoot>这些标签，那么此标签就是放在这些标签中的。如果没有上述标签，那么<tr>是直接放在<table>标签中的。
<th>: 该标签表示的是标题单元格。
<td>: 该标签表示的是数据单元格。例如：

<table>
    <thead>
        <tr>
            <th></th>
            <th>小明</th>
            <th>小红</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>语文</th>
            <td>90</td>
            <td>95</td>
        </tr>
        <tr>
            <th>数学</th>
            <td>97</td>
            <td>93</td>
        </tr>
        <tr>
            <th>英语</th>
            <td>99</td>
            <td>97<td>
        </tr>
    </tbody>
<table/>

此时运行的结果为：

运行结果.png

2.2 相关样式

table-layout: 定义了用于布局表格单元格，行和列的算法。
border-spacing: 该属性设置相邻单元格的边框间的距离。
border-collapse: 该属性设置表格的边框是否被合并为一个单一的边框。

<style> 
    table { 
        <!-- auto为默认的样式值，是指给根据单元格的内容进行分配；fixed平均分配表间距。
        table-layout: auto;
        <!--设置相邻单元格之间的距离为0 -->
        border-spacing: 0px;
        <!-- 用来设置表格的边框是否合并 -->
        border-collapse: collapse;
    } 
</style>

三. img标签

3.1 用法

<img>: 该标签用于插入图片。它是单独使用的，没有闭合标签。
例如：

<img src="dog.png">

上面代码在网页插入一张图片dog.png,,src属性指定图片的地址.

3.2 相关属性

src：指明图像的路径。
alt：用于指定图片无法加载时显示的文字。
title：当鼠标在图片上悬停时的提示。
width：宽度。
height: 高度。
border: 边框。

实际使用过程中可以通过监听来判断图片是否加载成功：
例如：

<img id ="xxx" src ="cat.png">

xxx.onload = function(){
    console.log("图片加载成功");
}
xxx.onerror = function(){
    console.log("图片加载失败");
}

四. input标签

4.1 用法

<input>标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。它有多种类型，取决于type属性的值，默认值是text，表示一个输入框。
例如：

<input type ="text">

这就是一个默认的输入框。其取值还可以为：

4.2 补充

4.2.1

label：使得用户在点击文本输入框前面汉字的时候也可以找到对应的输入框。
用法：
第一种用法：

<label>
    姓名：<input type ="text" name ="username" placeholder ="请输入用户名">
</label>

这种客户点击姓名的时候就会获取到输入框的焦点。
第二中用法：

<label for="userId">姓名：</label>
<input type ="text" name ="username" placeholder ="请输入用户名" id ="userId">

此用法的效果和第一种用法相同，但是使用此方法需要注意laber中的for属性值需要和input中的id的属性值保持相同。

4.2.2 form表单

<form>:标签用来定义一个表单，所有表单内容放到这个容器元素之中。常见的结构为：

<form>
  <!-- 各种表单控件-->
</form>

属性：

action:如果用户点击了提交按钮，那么浏览器就会向服务器发送请求，action就是请求的页面。如果action为空，那么就是向自己请求的页面即还是原来的页面。
method：可以选择的属性值有POST和GET.
target: 在哪个窗口展示服务器返回的数据，可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<iframe>标签的name属性（即表单返回结果展示在<iframe>窗口）。
autocomplete：属性为 <input> 字段提供了各种各样的选项。其作用是向浏览器指示值是否应在适当时自动填充。其属性取值为on（默认的方式，自动填写），off(不自动填写）。

HTML常用标签