标签的action之前 加密"/>
form标签的action之前 加密
本篇主要介绍的HTML常用标签有：
· form 标签
· input 标签
· select 标签
· textarea 标签
· a 标签
· img 标签
· table 标签
· 列表标签
form 标签
· 是用于为用户输入创建 HTML 表单的
· 表单用于向服务器传送数据
· 表单能够包含 input、menus、textarea、fieldset、legend 以及 label 元素
· method 属性规定用于发送表单数据的 HTTP 方法
· enctype 属性规定在发送表单数据之前如何对其进行编码
· action 属性用来规定当提交表单时向何处发送表单数据
| 属性 | 值 | 描述 |
|---|
以下分别为当 method 的值为 get 和 post 两种情况下的代码演示和运行结果图
- method的值为get时：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><!--作者：苏酥su时间：2020-10-02描述：当method="get"时，能在浏览器上显示出提交的表单数据--><body><form method="get" action="" enctype="application/x-www-form-urlencoded">账号：<input type="text" name="username" value="admin" maxlength="10" size="30"/><br />密码：<input type="password" name="password" maxlength="10" size="30"/><br /><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body>
</html>运行结果如下图所示：
- method 的值为 get 时：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><!--作者：苏酥su时间：2020-10-02描述：当method="post"时，不能在浏览器上显示出提交的表单数据--><body><form method="post" action="" enctype="application/x-www-form-urlencoded">账号：<input type="text" name="username" value="admin" maxlength="10" size="30"/><br />密码：<input type="password" name="password" maxlength="10" size="30"/><br /><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body>
</html>运行结果如下图所示：
| 属性 | 值 | 描述 |
|---|
以下分别是当 enctype 的值为上表三种值的情况下的代码演示和运行结果图
- enctype 的值为 application/x-www-form-urlencoded 时参照上方 method 属性的演示即可。
- enctype 的值为 multipart/form-data 时：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form method="get" action="" enctype="multipart/form-data"><input type="file" name="file"/><input type="submit" value="提交" /></form></body>
</html>运行结果如下图所示：
- enctype 的值为 text/plain 时：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><!--作者：苏酥su时间：2020-10-03描述：将账号和密码的value值都定义为五个空格--><body><form method="get" action="" enctype="text/plain">账号：<input type="text" name="username" value=" " size="30" maxlength="10" /><br />密码：<input type="password" name="password" value=" " maxlength="10" /><br /><input type="submit" value="提交" /><input type="reset" value="重置" /></form></body>
</html>运行结果如下图所示：
input 标签
· 用于搜集用户的信息
· 根据不同的 type 属性值，输入字段拥有很多种形式。这里主要介绍 button、checkbox、file、hidden、password、radio、reset、submit 以及 text
· 还有name、size、maxlength、value以及readonly可以用来定义输入框的各种属性
| 属性 | 值 | 描述 |
|---|
以下分别是上表中各个属性的具体代码演示以及运行结果图:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form method="get" enctype="application/x-www-form-urlencoded">账号：<input type="text" name="username" value="admin" size="30" maxlength="10" /><br />密码：<input type="password" name="password" size="30" maxlength="10" /><br /><input type="hidden" name="token" value="这是隐藏域" />性别<input type="radio" name="sex" value="1" checked="checked"/>男<input type="radio" name="sex" value="2" />女<br />喜爱的语言<input type="checkbox" name="app[]" value="java" />java<input type="checkbox" name="app[]" value="c++" />c++<input type="checkbox" name="app[]" value="php" checked="checked"/>php<br /><input type="submit" value="提交" /><input type="reset" value="重置" /> </form><br /><form method="get" action="" enctype="multipart/form-data"><input type="file" name="file"/><input type="submit" value="提交" /></form></body>
</html>运行结果如下图所示:
select 标签
· 是一个下拉选择框标签
· 其中的 option 用于定义列表的可用选项
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form method="get" enctype="application/x-www-form-urlencoded">地区<select name="address"><option value="shanghai">上海</option><option value="beijing">北京</option><option value="guangzhou">广州</option></select><br /><input type="submit" value="提交" /><input type="reset" value="重置" /> </form></body>
</html>运行结果如下图所示：
textarea 标签
· 定义多行的文本输入控件，即文本域
· 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）
· 可以通过 cols 和 rows 属性来规定 textarea 的尺寸
· 文本域中编辑好的字符中的空格也会显示在运行结果中
| 属性 | 值 | 描述 |
|---|
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form method="get" enctype="application/x-www-form-urlencoded">简介<br /><textarea cols="30" rows="10" name="info">a a a a a</textarea><br /><!--作者：苏酥su时间：2020-10-02描述：空格也会计算进去--><input type="submit" value="提交" /> </form></body>
</html>运行结果如下图所示：
a 标签
· 定义超链接，用于控制界面与页面之间的跳转的
· 最重要的属性是 href 属性，它指示链接的目标
· target 属性在这里主要介绍 _self 和 _blank 两种值（默认是 _self ）
| 属性 | 值 | 描述 |
|---|
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a href="" target="_self">百度</a><a href="" target="_blank">soso</a></body>
</html>运行结果如下图所示：
在这里也顺便介绍一下锚文本
· 锚文本又称锚文本链接，是链接的一种形式。
· 和超链接类似，超链接的代码是锚文本，把关键词做一个链接，指向别的网页，这种形式的链接就叫作锚文本。
· 锚文本又称锚文本链接，锚文本实际上是建立了文本关键词与URL链接的关系。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><a name="top"></a><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><p>aaaaaaaaaaaaaaaaaaaa</p><a href="#top">返回顶部</a></body>
</html>运行结果如下图所示：点击"返回顶部"的链接就能直接跳转到页面的顶部
img 标签
· 向网页中嵌入一幅图像
· 它有两个必需的属性：src 属性 和 alt 属性
| 属性 | 值 | 描述 |
|---|
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><img src="img/sususu.jpg" alt="logo" /></body>
</html>运行结果如下图所示：
table 标签
· 用来定义 HTML 表格
· tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元
· 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成
· colspan 和 rowspan 是用来合并单元格的
| 属性 | 值 | 描述 |
|---|
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" cellpadding="10" cellspacing="1"><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>你</td><td>10</td></tr><tr><td>2</td><td>我</td><td>11</td></tr><tr><td>3</td><td>他</td><td>12</td></tr><tr><td>总数</td><td colspan="2">3人</td></tr></table><br /><table border="1" cellpadding="10" cellspacing="1"><tr><th>编号</th><th>姓名</th><th>年龄</th></tr><tr><td>1</td><td>你</td><td>10</td></tr><tr><td>2</td><td>我</td><td>11</td></tr><tr><td>3</td><td>他</td><td rowspan="2">12</td></tr><tr><td>4</td><td>它</td></tr></table></body>
</html>运行结果如下图所示：
列表标签
· < ul >为无序列表，< ol >为有序列表
· < li >标签用来定义列表项目
· 无序列表有三种项目符号，分别为 square、circle、disc
· 有序列表有五种排序符号，分别为数字列表（默认）、小写字母列表、大写字母列表、罗马字母列表以及小写罗马字母列表
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><ul type="square"><li><a href="#">第一课</a></li><li><a href="#">第二课</a></li><li><a href="#">第三课</a></li><li><a href="#">第四课</a></li></ul><ul type="circle"><li><a href="#">第一课</a></li><li><a href="#">第二课</a></li><li><a href="#">第三课</a></li><li><a href="#">第四课</a></li></ul><ul type="disc"><li><a href="#">第一课</a></li><li><a href="#">第二课</a></li><li><a href="#">第三课</a></li><li><a href="#">第四课</a></li></ul><ol><li><a href="#">第一课</a></li><li><a href="#">第二课</a></li><li><a href="#">第三课</a></li><li><a href="#">第四课</a></li></ol><ol type="A"><li><a href="#">第一课</a></li><li><a href="#">第二课</a></li><li><a href="#">第三课</a></li><li><a href="#">第四课</a></li></ol><ol type="I"><li><a href="#">第一课</a></li><li><a href="#">第二课</a></li><li><a href="#">第三课</a></li><li><a href="#">第四课</a></li></ol></body>
</html>运行结果如下图所示：
（若有错误与不足之处也希望大家帮忙指出∩ω∩）
作者：行舟客
链接：web安全之HTML基础（2）常用标签学习（下）
来源：csdn
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
更多推荐
form标签的action之前 加密
发布评论