web-2：http表格、表单标签_web基础表格标签2-优快云博客

web-2： http表格、表单标签

一.图像与超链接

1.URL

Uniform Resource Locator统一资源定位符。
俗称路径，有本地路径，有网路路径。
组成：完整的URL 由协议域名文件目录文件名组成
分类：绝对路径、相对路径。

绝对路径
从根目录开始逐级查找，直到找到文件名。通常用于网络资源文件。

C:/Users/Python/Desktop/前端/web_1.md

window操作系统上绝对路径以盘符开头；
mac os 操作系统上绝对路径以/开头。

相对路径
是从当前所在的目录文件夹开始查找。

2.图片标签

语法： <img src="url">

在网页中插入一张图片，默认按照原始尺寸显示。
使用相对路径时，一定要注意：

从当前所在目录文件夹开始查找
可以使用， “…/” 返回上一级目录
必要时，“…/” 可以多次使用

标签属性：

width: 取px为单位的像素值，设置图片宽度
height: 取像素值，设置图片的高度
title: 用来设置鼠标悬停于脱线上方时的显示文本
alt：当图片加载失败时显示的文本

3.超链接标签

什么是超链接？
能够实现文件跳转的文本，叫超链接文本。

使用超链接

语法：
<a href="https://www.jianshu.com/bookmarks">简书</a>

注意:

href属性是必填属性，否则超链接文本跟普通文本无差别；
如果是网络路径，必须加协议，如：https…;
链接地址可以是网络路径，也可以是本地路径。

超链接标签属性

target: 设置目标文件的打开方式，默认在当前窗口打开。

取值: _self: 默认值，当前窗口打开。
取值: _blank: 新建窗口打开。

href 属性的特殊取值

href="" : 表示链接至本页面，包含刷新操作。
href=“javascript:void(0)” : 表示链接至本页，无刷新。
href="#" : 表示链接至本页的锚点位置，无刷新。

使用锚点链接

通过定义锚点，实现跳转至指定文件的指定位置。
使用：

定义超链接，链接到本页的指定位置；
在页面相应位置添加锚点。

<a href="#7">7. 人物介绍</a>
<a name="7"></a>
说明:使用name属性定义锚点名称，超链接的链接地址中使用#表示本页，跟上锚点名称，表示跳转至锚点位置。

二.表格标签

语法

1. <table></table> 表示表格标签
2. <tr></tr> 表示表格中的一行 table row
3. <td></td> 表示行中的一个单元格 table data

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

表格的标签属性

table标签的属性

border ：为表格设置边框线，线宽取像素值。
width height : 设置表格整体的宽、高大小，取像素值。默认情况下，表格尺寸由内容自适应。
bgcolor : 设置整个表格背景颜色。
align : 设置表格在父元素中的水平对齐方式。可取值：left(默认)/right/center。
cellspacing : 设置单元格与单元格之间的距离，取像素值。
cellpadding : 设置单元格[内容]与单元格[边框]之间的距离，取像素值。

tr(行)标签的属性

bgcolor : 设置行的背景颜色。
align ：设置单元格内容的水平对齐方式。取值：left(默认)/right/center。
valign : 设置单元格内容的垂直对齐方式。取值：top/midle(默认)/bottom。

td(单元格)标签的属性

width height : 设置单元格尺寸，取像素值。
align xalign : 设置单元格内容的水平和垂直对齐方式。
bgcolor : 设置单元格的背景颜色。

单元格合并

单元格合并涉及表格结构的调整。

1.跨列合并。
属性： colspan
取值：无单位的数值，表示跨几列。

2.跨行合并。
属性： rowspan
取值：无单位的数值，表示跨几列。

注意事项

跨行和跨列都是对单元格的操作，所以属性是单元格td的属性。
一旦发生单元格合并，要删除多余的单元格。
2.1 跨列合并：影响当前行中单元格的数量，需删除当前行中多余的单元格。
2.1 跨行合并：影响下面行中单元格的数量，需删除后面行中多余的单元格。

表格行分组

表格在浏览器中渲染时，会自动添加结构标签。
表格可以分为thead 、 tfoot 、 tbody三部分。

thead表头
<thead></thead> 标签用来划分表头，表头中可以有若干行组成。

<thead>
    <tr>
        <td></td>
    </tr>    
</thead>

tfoot表尾
<tfoot></tfoot> 标签用来划分表尾，表尾中可以有若干行组成。

tbody表体
<tbody></tbody> 表示表格主体，默认情况下，所有的行会自动加入tbody.

注意事项
如果涉及在html代码中完整书写行分组标签，建议按照<thead></thead>、<tfoot></tfoot>、<tbody></tbody>顺序来书写。

三. 表单

用来接收用户输入的数据，并且提交给服务器。
表单二要素 : 表单元素、表单控件。
1.表单元素：
<form></form>
2.表单控件：
提供一系列可视化的组件，能够实现跟用户的交互。例如：输入框，按钮，文件上传等。

表单元素

表单元素的标签
<form></form>
用来提交数据到服务器，表单控件都应书写在form标签中。

标签的属性

method ：用来设置数据的提交方式。取值：get 、post。默认是get请求方式提交。
1.1 get请求：
数据会以参数的形式拼接在url后面。
安全性较低。
最大提交数据2kb。
1.2 post
数据会打包在请求头中，隐式提交。
安全性较高。
没有数据大小限制。
action ：必填。指定数据的提交地址。
enctype ： (encode type)指定数据的编码类型。
3.1 application/x-www-form-urlencoded（默认的编码类型）
将表单中的数据转换为字符串格式（name=zhangsan & pwd=123456),附加在url后面，使用？与url隔开。
3.2 multipart/form-data 专门用来上传特殊类型的数据，例如图片，文件，MP3等。此时数据的提交方式必须是post。
3.3 txt/plain 数据以纯文本形式编码，不含任何控件和格式字符。

表单控件(重点)

表单控件的数据只有放在表单元素中，才可以被提交。

表单控件的分类: 文件框和密码框 / 单选按钮和复选框 / 隐藏域和复选框 / 下拉选择框

文件框和密码框。

语法：
文本框： <input type="text">
密码框： <input type="password">

标签属性：

type 指定控件类型。
name 指定控件名称，缺少的话无法提交。
value 指定控件的值，可以通过JS获取。
maxlength 指定最大输入字符数。
autocomlete 设置是否自动补全,可设置on(默认)、off。

单选按钮和复选框

语法：
单线按钮： <input type="radio">

复选框： <input typr="checkbox">

标签属性：

name : 指定控件名称，缺少的话无法提交。
一组的按钮控件名称必须保持一致，实现单选。
value : 指定控件的值，最终将发送给服务器，按钮的value属性必须指定。
checked : 表示选中当前按钮。

特殊用法
lable for id

将按钮文本与按钮控件绑定在一起，实现点击文本与点击控件等价的效果。
使用：
1.使用<lable></lable>标签包括按钮文本。
2.为按钮控件添加id属性，属性值自定义。
3.为label标签添加for属性,属性值与控件的id属性值保持一致,实现文本与控件绑定。

隐藏域和复选框

隐藏域：
需要提交给服务器，但是不需要呈现给用户的内容，都可以使用隐藏域表示。
例如：用户id.

<input type="hidden" nam="uid" value="0001">  
name定义控件名称，value定义控件的值，都是必填项。

文件选择框

<input type="file" name="">  
涉及二进制数据提交，图片,mp3需要设置form enctype属性,指定数据提交方式为post。

下拉选择框

<select name="address">
  <option value="beijing">北京</option> 
  <option value="shanghai">上海</option>
</select>

文本域（可以支持多行输入）

语法：

<textarea name="uinfo"> </textarea>

标签属性：
cols ：指定文本域默认宽度，宽度是通过列数控制的，以英文字符数量为准，中文字符减半。
row ：指定文本域的行数。
特点：文本域的大小可以由用户手动调整。

按钮

提交按钮：点击时，用于将表单数据发送给服务器。

<input type="submit" value=" ">
value 属性：设置按钮的显示文本。

重置按钮：点击时，会将表单数据还原成默认状态。

<input type="reset" value=" ">
value 属性：设置按钮的显示文本。

普通按钮:

<input type="button" value=" ">
绑定自定义时间

button：

<button>按钮显示文本</button>
1.按钮标签，可以在HTML中任意地方使用，需要绑定自定义事件。  
2.如果按钮标签放在form标签中使用，默认具备提交功能，等同于提交按钮submit。