本篇主要介绍的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 和 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 | application/x-www-form-urlencoded | 在发送前编码所有字符（如若没有特别声明，则默认该值） |
| multipart/form-data | 不对字符编码。但在使用含有文件上传控件的表单时，必须使用这个值 | |
| text/plain | 将空格转换为"+"，不对特殊字符编码 |
以下分别是当 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可以用来定义输入框的各种属性
| 属性 | 值 | 描述 |
|---|---|---|
| type | password | 密码输入框 |
| file | 文件上传 | |
| hidden | 隐藏域 | |
| button | 按钮 | |
| radio | 不多选框 | |
| submit | 提交按钮 | |
| reset | 重置按钮 | |
| text | 文本输入框 | |
| checkbox | 复选框 | |
| name | field_name | 定义input元素的名称 |
| size | number_of_char | 定义输入框的长度大小 |
| maxlength | number | 规定输入框中允许输入字符的最大数 |
| value | value | 规定input元素的默认值 |
| readonly | 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 的尺寸
· 文本域中编辑好的字符中的空格也会显示在运行结果中
| 属性 | 值 | 描述 |
|---|---|---|
| cols | number | 规定文本区内可见的宽度 |
| rows | number | 规定文本区内可见的行数 |
<!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 ）
| 属性 | 值 | 描述 |
|---|---|---|
| target | _self | 用于在当前选项卡中跳转，也就是不新建页面跳转 |
| _blank | 用于在新的选项卡中跳转，也就是新建页面跳转 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.soso.com" 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 属性
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 规定显示图像的URL |
| alt | text | 规定图像的替代文本 |
<!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 是用来合并单元格的
| 属性 | 值 | 描述 |
|---|---|---|
| border | pixels | 规定表格边框的宽度 |
| cellpadding | pixels | 单元边与内容之间的空白 |
| cellspacing | pixels | 单元格之间的空白 |
| 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>
运行结果如下图所示：
