web前端篇:html基础知识（3）

图像与超链接标签

URL
- 统一资源定位符：用来标识网络中资源的位置，俗称路径URL 组成：协议域名文件目录及文件名。
- URL分类：
  - 绝对路经：
    - 从根目录开始查找，常用于网络文件路经。
  - 相对路经：
    - 从当前文件所在的文件夹开始查找
  - 根相对路径（了解）：
    - 从Web程序所在的根目录开始查找资源文件
    - 注意：网络URL中不能出现中文，URL是严格区分大小写的。
图像标签
- 在网页中插入一张图片
- 语法：[图片上传失败…(image-b32810-1560344691312)]
- 属性：
  - src :指定要显示的图片路径
  - width ：设置图片的宽度，以像素px为单位，也可以省略单位
  - height ：设置图片的高度
    注意 : src 为必填属性，宽高可以省略，省略宽高的话，图片将以原始尺寸显示在网页中
  - title ：用来设置图片的标题，当鼠标悬停在图片上方时出现
  - alt : 用来设置图片加载失败之后的提示文本

超链接标签

什么是超链接标签
- 能够实现从当前文件跳转到其他文件的标签
语法：
- <a></a>
- 标签属性：
  - href :必填属性，指定链接地址，以路径形式给出,#表示当前页，不会发生页面刷新操作，如果属性为"",也表示当前页，但是包含了网络请求，相当于刷新页面。
  - target :可选属性，设置目标文件的打开方式。
    - _self ：默认值，表示在当前窗口打开
    - _blank:表示新建窗口打开
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com/">百度一下</a>
    <a href="">回到顶部</a>
</body>
</html>
```

锚点链接

链接到当前文件的指定位置

1\. 设置锚点<a name="anchor1"></a>
2\. 设置跳转<a href="#anchor1">早年经历</a>

<body>
    <a href="https://www.baidu.com/" name="ac1">百度一下</a>
    <a href="#ac1">回到顶部</a>
</body>

表格

标签介绍：

表格标签：<table></table>
行标签：<tr></tr>
单元格标签：<td></td>

创建顺序：

在表格标签中嵌套行标签，每一个 tr 就代表一行
在行标签中创建单元格标签，用来存放数据

    <table>
        <tr><!--代表一行-->
            <td>id</td><!--代表单元格-->
            <td>name</td>
            <td>age</td>
        </tr>
        <tr>
            <td>1</td>
            <td>xjk</td>
            <td>18</td>
        </tr>
        <tr>
            <td>2</td>
            <td>half</td>
            <td>15</td>
        </tr>
    </table>

标签属性

table 属性
- border ：设置边框，取值以px为单位的数值（px可以省略）
- width ：设置宽度
- height ：设置高度
- align ：设置表格在其父元素中的水平对齐方式
- cellpadding : 设置单元格的内边距（内容与边框之间的距离），取值为px单位的数值
- cellspacing : 设置单元格的外边距（单元格与单元格之间的距离，或者单元格与表格边框之间的距离），取值像素为单位的数值
- bgcolor : 设置表格的背景颜色，取值可以是英文的颜色名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="https://www.baidu.com/" name="ac1">百度一下</a>
    <a href="#ac1">回到顶部</a>
    <table border="1"  align="center" cellpadding="10" cellspacing="1" bgcolor="red">
        <tr>
            <td>hello</td>
            <td>html</td>
        </tr>
    </table>
</body>
</html>

tr 属性
- bgcolor : 设置当前行的背景颜色
- align ：设置当前行中内容的水平对齐方式
  取值： left / center / right
- valign :设置当前行内容的垂直对齐方式
  取值：top / middle / bottom,默认垂直居中。
td属性
- width 设置单元格的宽度
- height 设置单元格的高度
- align 单元格内容的水平对齐方式
- valign 单元格内容的垂直对齐方式
- bgcolor 单元格的背景颜色
单元格的合并
- 单元格独有的属性 colspan rowspan
- 单元格的跨列合并
  - 从当前单元格的位置开始，横向向右合并几个单元格colspan = “3” ->跨3列进行合并(包含自身)
- 单元格的跨行合并
  - 从当前的单元格开始，纵向向下合并单元格rowspan = “3” ->向下跨3行合并单元格
- 注意：一旦发生单元格合并，跨列合并，要删除当前行中多余的单元格跨行合并，要删除其后行中多余的单元格始终保持表格结构完整。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1" cellspacing="0" width="400" height="400">
        <tr>
            <td colspan="2" bgcolor="red"></td>
            <!--<td>2</td>-->
            <td rowspan="2" bgcolor="#00008b"></td>
        </tr>
        <tr>
            <td rowspan="2" bgcolor="#663399"></td>
            <td bgcolor="#ff1493"></td>
            <!--<td>6</td>-->
        </tr>
        <tr>
            <!--<td>7</td>-->
            <td colspan="2" bgcolor="#adff2f"></td>
            <!--<td>9</td>-->
        </tr>
    </table>
</body>
</html>

行分组

允许将表格中的一行或者是若干行划分为一组，便于管理。

语法

1\. 表头行分组
<thead>
    <tr>
        <td></td>
    </tr>
</thead>
2\. 表尾行分组
<tfoot>
    <tr>
        <td></td>
    </tr>
</tfoot>
3\. 表主体信息
<tbody>
    <tr>
        <td></td>
    </tr>
</tbody

表单

用于接收用户的数据并且提交给服务器

表单2个要素
- form表单元素
- 表单控件
  - 提供了能够跟用户交互的可视化组件

.form元素

注意：form元素本身是不可见的，却不能省略，因为数据的提交功能要由 form 元素完成
语法：<form></form>

form标签属性

action
- 指定数据提交的目的地址
method
- 数据请求方式 get /post (默认get)
- get
  - 通常用于向服务器端获取数据
  - 特点：
    - 提交的数据会以参数的形式拼接在URL后面
    - 安全性较低
    - 提交数据最大2KB
- post
  - 将数据提交给服务器处理
  - 特点：
    - 隐式提交，看不到提交数据
    - 安全性较高
    - 没有数据大小限制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="">
        <input type="text" name="user">
        <input type="password" name="pwd">
        <input type="submit" value="提交">
    </form>
</body>
</html>
##################################################################################
file:///D:/code/day43.html

file:///D:/code/day43.html?user=alex&pwd=123

.表单控件

作用：提供与用户交互可视化组件（这里注意只有放在表单元素中的表单控件才允许被提交）
分类：
- 文本框与密码框
  - 语法：
    - 文本框：<input type="text">
    - 密码框：<input type="password">
  - 属性：
    - name 属性定义当前控件的名称，缺少的话无法提交。
      
      name = “uname”
    - value 属性，要提交给服务器的值，同时也是默认显示在控件上的值。
    - maxlength 用来限制用户输入最大字符串。
    - placeholder 用户输入之前显示在框中的提示文本。
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" name="user" maxlength="5" placeholder="输入至少5位数字">
    <input type="password" name="pwd" maxlength="10" placeholder="输入至少10位的密码">
</body>
</html>
```
- 单选框和复选框
  - 单选按钮<input type="radio">
  - 复选框<input type="checkbox">
  - 属性：
    - name 定义控件名称，还起到分组的作用，一组中的按钮名称必须保持一致。
    - value 属性设置当前控件的值，最终提交给服务器。
    - checked 属性设置预选中状态可以省略属性值，也可以使用"checked" 作为值。
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="radio" name="sex" checked="checked">男
    <input type="radio" name="sex">女
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="checkbox">抽烟
    <input type="checkbox">喝酒
    <input type="checkbox">烫头
</body>
</html>
```
- 隐藏域和文件选择框
  - 隐藏域
    - 作用：需要提交给服务器但是却不需要呈现给用户的数据，都可以放在隐藏域中。
    - 语法：<input type='hidden'>
    - 属性：
      - name 控件名称
      - value 控件的值
  - 文件选择框
    - 作用：选择文件上传，发送给服务器
    - 语法：<input type="file">
    - 属性：name 定义控件名称。
- 下拉选择框
  - <select name="province">
    - 属性：
      - multiple 可进行多选(ctrl+鼠标左键)
```
    <select name="pro" id="" multiple>
        <option value="hebei">河北</option>
        <option value="heilongjiang">黑龙江</option>
        <option value="hunan">湖南</option>
    </select>
```
- 文本域
  - 支持用户多行文本
  - 语法：<textarea></textarea>
  - 属性：
    - name 控件名称
    - cols 指定文本默认显示的列数，一行中能显示的英文字符量，中文减半
    - rows 指定文本域能够显示的行数
  - 注意：文本域可以由用户调整大小
```
<textarea name="wenben" id="123" cols="30" rows="10"></textarea>
```
- 按钮
  - 提交按钮
```
<input name='' id='' type="submit">
```
  - 重置按钮
```
<form action="">
    <input type="text" name="123">
  <input name='' id='' type="reset" value="重置按钮">
</form>
```
  - 普通按钮
```
<input type="button" value="点击">
```
  - 按钮显示文本
```
<button>按钮显示文本</button>
```
    - 注意：
      - 按钮标签可以在任何地方使用，不局限在form表单中使用
      - 按钮标签使用在form中，默认具有提交功能，等同于input submit
      - 可以添加属性type 取值 submit/reset/button 进行区分（非必填）
      - 在表单外做为普通按钮使用时，需要通过JS，动态绑定事件
- label特殊方法
  - 使用label标签包裹表单控件要显示的文本信息，为label标签添加for属性，属性值与所要绑定的表单控件的ID属性值保持一致，实现文本与控件的绑定。
```
<label for="male">男</label>
<input type="radio" name="gender" value="male" id="male">
```

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。