HTML 标签、表格、表单、列表详解
程序员文章站
2022-04-29 18:30:19
...
文章目录
一、HTML
一）HTML概述
1、HTML是什么？
HTML（HyperText Markup Language）：超文本标记语言，是一种标志性的语言，用来写网页的骨架。除了说明文字以外，超文本标记语言HTML还可以说明图片、音频、视频、表格、超链接等。
2、HTML标签与浏览器渲染页面
HTML文件在没有写入HTML标签之前是和txt文本文件一样的，没有任何的格式。标签就是为了来描述页面的结构（渲染），让界面看起来更好看、美观。在HTML中，标签是构成网页界面的基础，众多标签彼此分工合作，构成了复杂多采的界面。需要注意的是，浏览器并不会直接将标签展示出来，当使用浏览器打开一个HTML文件时，会先加载并读取HTML代码，接下来解析代码中的每一个标签，产生标签对应的效果（不直接展示标签，通过效果展示）。
3、W3C标准
- 结构化标准（HTML、XHTML（比HTML语法更严格））
- 表现标准（CSS）
- 行为标准（DOM、ECMAScript标准－－＞JavaScript）
4、一段简单的HTML代码
<!--DOCTYPE标签标注HTML文档的类型，默认为HTML5-->
<!DOCTYPE html>
<html lang="en">
<!--<head>标签中放网页的顶部信息-->
<head>
<!--文档的编码方式-->
<meta charset="UTF-8">
<!--网页的顶部信息栏的内容-->
<title>静夜思</title>
</head>
<!--<body>标签中放网页主界面的内容-->
<body>
<!--<h1>标签表示标题标签-->
<h1>静夜思</h1>
<!--<strong>表示粗体，<em>表示斜体-->
<strong><em>唐</em></strong> <em><strong>李白</strong></em>
<hr>
<!--<p>标签表示一个段落-->
<p>
<!--<br>标签表示换行-->
床前明月光，<br>
疑是地上霜。<br>
举头望明月，<br>
低头思故乡。<br>
</p>
</body>
</html>基本结构
- HTML标签分为自闭和标签和正常的标签，所有的自闭和标签都必须是成对出现的，以<>开始，以</>结束。自闭和标签可以只有<>
- <>和</>中间放超文本，标签的属性在前面的<>中设置
HTML文档结构
| 标签 | 作用 |
|---|---|
| 注释，快捷键 ctrl+/ | |
| 标注文档类型，默认为HTML5 | |
| 定义页面的语言，en表示向浏览器表明该网页为英文语言 | |
| 头部标签，表示在页面顶部显示的部分 | |
| 网站描述，charset属性设置编码， | |
| 网站的标题 | |
| 身体标签，网站中的内容写在此部分 |
二）基本标签
1、常用标签
| 标签 | 作用 |
|---|---|
| 标题标签，一共1~6级，1级最大 | |
| 段落标签，标注一个段落 | |
| 换行标签，换行 | |
| 分割线标签，产生一个行分割线 | |
| 字体样式标签，粗体 | |
| 字体样式标签，斜体 | |
|   ; | 空格 |
| > | 大于号 |
| < | 小于号 |
| @copy | 版权符号 |
| @…… | 具体的含义或符号 |
练习：使用上述标签在网页上显示一篇文章，注明出处
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>朱自清散文</title>
</head>
<body>
<!--标题-->
<h1>《春》</h1>
<!--作者姓名，加粗-->
<strong>朱自清</strong>
<hr>
<!--段落-->
<P>
盼望着，盼望着，东风来了，春天的脚步近了。
</P>
<P>
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
</P>
<P>
小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
</P>
<P>
桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿，杏儿，梨儿。花下成千成百的蜜蜂嗡嗡的闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里像眼睛像星星，还眨呀眨的。
</P>
<!--表明出处-->
©朱自清-《春》
</body>
</html>运行结果：
2、图像标签
- 常见的图片格式
| 图片格式 | 优点 | 缺点 |
|---|---|---|
| BMP | 无损压缩，图质最好 | 文件太大，不利于网络传输 |
| GIF | 动画存储格式 | 最多256色，画质差 |
| PNG | 可保存透明背景的图片 | 画质中等 |
| JPG | 文件小，利于网络传输 | 画质损失过大 |
- 相对路径与结对路径
一般我们会创建一个名为statics的包用来存放一些静态资源，比如图片视频音频等，相对路径表示相对与当前工程的位置，比如：…/statics/images/xxx.png。而绝对路径则表示文件存放的具体的全路径。
- 图片标签
及参数
| 参数 | 参数含义 |
|---|---|
| src | 图片资源的路径 |
| alt | 当图片加载失败，显示的信息 |
| title | 当鼠标移动到图片上时，显示的信息 |
| width | 图片的宽 |
| height | 图片的高 |
- 将图片资源放在HTML文件中，显示在网页上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>华山</title>
</head>
<body>
<!--图片标签img-->
<!--设置提示信息，宽高-->
<img src="../statics/images/huashan.jpg" title="华山南峰" alt="图片加载失败" width="800" height="500">
</body>
</html>运行结果
3、超链接
从一个地方跳转到另一个地方，可以是在不同的网页上，也可以是同一个网页的不同位置（类似于文章目录）
| 参数 | 参数说明 |
|---|---|
| herf | 要跳转的地址 |
| target | 链接是在当前页面打开还是新页面打开 |
| 值：_self | 链接在当前窗口打开 |
| 值：_blank | 链接在新窗口打开 |
写一个超链接，点击之后跳转到百度的界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!--超链接，点击跳转到百度界面-->
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>- 锚链接
用于同一页面间指定位置的跳转（目录）或不同页面间跳转（比如网页中的联系我们）
定义锚点：
跳转到锚点：
为一篇文章设置目录
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点的使用</title>
</head>
<body>
<h2>目录</h2>
<!--分别跳转到对应的锚点处-->
<a href="#段落1">第一段</a><br>
<a href="#段落2">第二段</a><br>
<a href="#段落3">第三段</a><br>
<a href="#段落4">第四段</a><br>
<hr>
<!--标题-->
<h1>《春》</h1>
<!--作者，加粗-->
<strong>朱自清</strong>
<hr>
<h3>
<!--段落-->
<P>
<!--在段落1处创建锚点-->
<a name="段落1"></a>
盼望着，盼望着，东风来了，春天的脚步近了。
盼望着，盼望着，东风来了，春天的脚步近了。
盼望着，盼望着，东风来了，春天的脚步近了。
盼望着，盼望着，东风来了，春天的脚步近了。
盼望着，盼望着，东风来了，春天的脚步近了。
</P>
<P>
<!--在段落2处创建锚点-->
<a name="段落2"></a>
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
</P>
<P>
<!--在段落3处创建锚点-->
<a name="段落3"></a>
小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
小草偷偷地从土地里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
</P>
<P>
<!--在段落4处创建锚点-->
<a name="段落4"></a>
桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿，杏儿，梨儿。花下成千成百的蜜蜂嗡嗡的闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里像眼睛像星星，还眨呀眨的。
桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿，杏儿，梨儿。花下成千成百的蜜蜂嗡嗡的闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里像眼睛像星星，还眨呀眨的。
桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿，杏儿，梨儿。花下成千成百的蜜蜂嗡嗡的闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里像眼睛像星星，还眨呀眨的。
桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿，杏儿，梨儿。花下成千成百的蜜蜂嗡嗡的闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里像眼睛像星星，还眨呀眨的。
桃树，杏树，梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味；闭了眼，树上仿佛已经满是桃儿，杏儿，梨儿。花下成千成百的蜜蜂嗡嗡的闹着，大小的蝴蝶飞来飞去。野花遍地是：杂样儿，有名字的，没名字的，散在草丛里像眼睛像星星，还眨呀眨的。
</P>
<!--表明出处-->
©朱自清-《春》
</h3>
</body>
</html>运行结果：
- 功能性标签
邮件标签
点击超链接发送邮箱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>邮件链接</title>
</head>
<body>
<!--邮件链接，mailto:后面跟邮箱的地址-->
<a href="mailto:aaa@qq.com">联系我们</a>
</body>
</html>借助第三方平台
QQ推广
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第三方平台推广</title>
</head>
<body>
<!--该链接会唤醒QQ-->
<!-- 需要到http://shang.qq.com/开通QQ在线状态”服务-->
<a target="_blank" href="推广QQ的链接，在http://shang.qq.com上获得">
<!--QQ的图片标签-->
<img border="0" src="http://wpa.qq.com/pa?p=2:24736743:53" alt="点击这里给我发消息" title="点击这里给我发消息"/>
</a>
</body>
</html>运行结果
三）列表、表格、媒体元素
1、列表
给一堆数据添加列表语义，告诉浏览器列表内的数据是一个整体的
-
无序列表（ul-li）
用来展示结构，并且这一堆元素没有先后之分。比如城市名称、商品列表、新闻列表、导航条等
编写程序，实现下图的元素布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表</title>
</head>
<body>
<ul><strong>常用链接</strong>
<li>我的随笔</li>
<li>我的评论</li>
<li>我的参与</li>
<li>最新评论</li>
<li>我的标签</li>
</ul>
<ul><strong>随笔分类</strong>
<li>HTML(4)</li>
<li>PS(2)</li>
</ul>
<ul><strong>随笔档案</strong>
<li>2017年12月(1)</li>
<li>2017年11月(3)</li>
<li>2017年10月(2)</li>
</ul>
</body>
</html>-
有序列表（ol-li）
有先后之分，比如阅读排行榜、听歌排行榜、热搜榜等
下图是微博的热搜榜，编写程序，实现下图的元素布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有序列表</title>
</head>
<body>
<ol>序号 关键词
<li>中国航母双舰合璧</li>
<li>郑爽 张恒 5312552</li>
<li>341万人报名2020年研考 4126961</li>
<li>饭不好吃与米无关 3679632</li>
<li>霍思燕 杜江欠我一个婚礼 3428009</li>
<li>冯绍峰被p成圣诞树 2424148</li>
<li>活力冬奥学院 2269789</li>
<li>叶轻眉的故事 2265014</li>
<li>方便面高跟鞋 1954654</li>
<li>火狐狸事件当事人现身致歉 1615512</li>
<li>为梓乐让出生命通道 1535290</li>
</ol>
</body>
</html>-
自定义列表（dl-dt-dd）
根据用户的需要，自定义列表元素的排布顺序，多用于网站的底部，用于标记项
下图是oracle官网下方的底部标记栏，使用自定义标签进行模拟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义列表</title>
</head>
<body>
<dl>底部标记栏
<dt>的资源
<dd>开发者</dd>
<dd>初创业者</dd>
<dd>学生和教育者</dd>
</dt>
<dt>伙伴
<dd>甲骨文合作伙伴网络</dd>
<dd>寻找合作伙伴</dd>
<dd>登录OPN</dd>
</dt>
<dt>新兴技术
<dd>人工智能</dd>
<dd>物联网（loT）</dd>
<dd>更多解决方案</dd>
</dt>
<dt>我们如何运作
<dd>企业安全实践</dd>
<dd>与Oracle开展业务</dd>
<dd>甲骨文@甲骨文</dd>
</dt>
<dt>联系我们
<dd>美国销售：+1.800.633.0738</dd>
<dd>全球联络人</dd>
<dd>订阅电子邮件</dd>
</P>
</dt>
</dl>
</body>
</html>2、表格
表格有很多的优点，比如结构简单，样式通用等
表格的基本结构
| table | 表格 |
|---|---|
| tr | 行 |
| td | 列 |
| border | 边框属性 |
| rowspan | 跨行 |
| colspan | 跨列 |
练习一：
定义一个三行四列的表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三行四列的表格</title>
</head>
<body>
<!--定义表格-->
<!--border="1px"是设置表格的边框宽度-->
<table border="1px">
<!--第一行-->
<tr>
<!--第一行的第一列-->
<td>姓名</td>
<!--第一行的第二列-->
<td>语文</td>
<!--第一行的第三列-->
<td>数学</td>
<!--第一行的第四列-->
<td>英语</td>
</tr>
<!--第二行-->
<tr>
<td>张三</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<!--第三行-->
<tr>
<td>李四</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</table>
</body>
</html>运行结果如下：
练习二：
表格跨行与跨列（rowspan与colspan），完成如下表格样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生基本信息表</title>
</head>
<body>
<!--定义表-->
<table border="1px">
<!--定义行1-->
<tr>
<!--定义列-->
<td>姓名</td>
<td>张三</td>
<td>性别</td>
<td>男</td>
<td>出生年月</td>
<td>20000101</td>
</tr>
<!--定义行2-->
<tr>
<!--定义列-->
<td>籍贯</td>
<td>陕西西安</td>
<td>民族</td>
<td>汉</td>
<td>政治面貌</td>
<td>团员</td>
</tr>
<!--定义行3-->
<tr>
<!--定义列-->
<td>所在院系</td>
<td colspan="5"></td>
</tr>
<!--定义行4-->
<tr>
<!--定义列-->
<td>专业</td>
<td colspan="5"></td>
</tr>
<!--定义行5-->
<tr>
<!--定义列-->
<td rowspan="5">教育情况</td>
<td colspan="2">在校时间</td>
<td colspan="2">学校</td>
<td>证明人</td>
</tr>
<!--定义行6-->
<tr>
<!--定义列-->
<td colspan="2">至</td>
<td colspan="2"></td>
<td></td>
</tr>
<!--定义行7-->
<tr>
<!--定义列-->
<td colspan="2">至</td>
<td colspan="2"></td>
<td></td>
</tr>
<!--定义行8-->
<tr>
<!--定义列-->
<td colspan="2">至</td>
<td colspan="2"></td>
<td></td>
</tr>
<!--定义行9-->
<tr>
<!--定义列-->
<td colspan="2">至</td>
<td colspan="2"></td>
<td></td>
</tr>
<!--定义行10-->
<tr>
<!--定义列-->
<td rowspan="5">家庭情况</td>
<td>与本人关系</td>
<td>姓名</td>
<td>民族</td>
<td>政治面貌</td>
<td>单位与职务</td>
</tr>
<!--定义行11-->
<tr>
<!--定义列-->
<td>父子</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr><!--定义行12-->
<tr>
<!--定义列-->
<td>母子</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr><!--定义行13-->
<tr>
<!--定义列-->
<td>姐弟</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!--定义行14-->
<tr>
<!--定义列-->
<td>姐妹</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>运行结果
3、视频音频
-
音频audio
可以将一个音频放在网页上
audio 音频标签名 src 资源路径 autoplay 自动播放功能 controls 提供播放按钮，进度条，音量控制 loop 循环播放 练习：将一段音频放在网页上，自动循环播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>音频</title> </head> <body> <!--audio音频标签名--> <!--src文件路径--> <!--autoplay自动播放--> <!--loop循环播放--> <!--controls提供播放按钮、进度条、音量控制--> <audio src="../statics/audios/刘莱斯%20-%20浮生.flac" autoplay loop controls></audio> </body> </html>运行结果
-
视频video
将一段视频放在网页上面
video 视频标签名 src 视频资源路径 controls 提供播放按钮、进度条、下载按钮、全屏按钮等 autoplay 自动播放 loop 循环播放 练习：将一段视频放在网页上，自动循环播放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>视频</title> </head> <body> <video src="../statics/videos/贪吃蛇.mp4" controls autoplay loop width="=500" height="400"></video> </body> </html>运行结果
4、网页结构分析
网页大体上可以分为头部、尾部、主体，三个部分，这些部分都有其对应的标签，这些标签的作用不是为了让浏览器解析使用的，而是单纯的给开发者看的，让代码看起来更加的美观、简洁、明了，是一种代码规范。
| header | 头部标签 |
|---|---|
| nav | 导航栏标签 |
| aside | 侧边栏标签 |
| article | 文章主题标签 |
| section | 独立区域 |
| footer | 尾部标签 |
5、内联框架
内联框架主要用于在一个网页内显示另一个网页，相当于在网页中嵌套了一个网页
| iframe | 内联框架标签名 |
|---|---|
| src | 将要跳转的网页的链接，用来指向要跳转的网页 |
| height | 内联框架的高。内联框架的宽高可以通过固定值定义，也可以通过百分比定义，使之随浏览器的大小而改变 |
| width | 内联框架的宽 |
| frameborder | 用来定义框架周围的边框宽度，当为0时，无边框。默认是有边框的 |
| name | 定义内联框架的名称，也可以与标签结合，以超链接的方式，实现点击标签链接，在iframe窗口中打开链接的网页 |
| scrolling | 显示框架是否有滚动条，有3个值，yes/no/auto |
练习：创建一个内联框架与标签链接，点击链接，在框架中显示指定的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内联框架</title>
</head>
<body>
<!--内联框架，设置框架的宽高与其实显示的网页-->
<iframe src="http://www.jingdong.com" name="iframeJD" height="500" width="50%"></iframe>
<!--超链接，当点击该链接，将内联框架的网页换位百度的-->
<a href="http://www.baidu.com" target="iframeJD">点击转到百度</a>
</body>
</html>运行结果
跳转前：
跳转后：
四）表单
表单用于搜集不同类型的用户输入。在HTML5 Input，拥有多个新的表单输入类型，提供了更好的输入控制和验证。表单的主要作用是获得用户输入的数据、控制和验证用户输入的数据、提交用书输入的数据。常见的登录、注册、搜索框等输入提交信息的都是表单。如下：
搜索框：
注册界面：
1、基础表单
| from | 表单标签 |
|---|---|
| action | 表单信息提交的地址 |
| method | 提交方式，分为get和post |
| get | 提交方法，携带的参数用户可以在URL中看到，不安全，大小有限制 |
| post | 提交方式，携带的参数用户不可见，安全，大小无限制（常用） |
| input | 标签，用来往表单上放表单元素 |
| name | 元素名称，必须写，因为提交的时候要确定是哪个元素的值 |
| text | 文本框 |
| password | 密码框 |
| submit | 提交按钮 |
| reset | 重置按钮 |
练习：创建一个基础表单，向百度提交用户名与密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础表单</title>
</head>
<body>
<!--创建表单，将表单数据提交到百度上-->
<form action="http://www.baidu.com" method="get">
<!--添加文本框-->
<p>用户：<input type="text" name="username"></p>
<!--添加密码框-->
<p>密码：<input type="password" name="password"></p>
<P>
<!--添加提交按钮-->
<input type="submit" value="提交">
<!--添加重置按钮-->
<input type="reset" value="重置">
</P>
</form>
</body>
</html>运行结果：
使用get方式提交在URL上可以看到用户信息
2、表单元素
所有的表单元素都必须写在表单中，且必须加上name属性，类似于给变量命名。因为在表单提交信息的使用需要标注是那个变量的值。
- 文本框
<!--表单-->
<form action="http://www.baidu.com" method="post">
<!--text：文本框
value：默认初值
size：文本框的长度
maxlength：文本框的最大输入字符长度
-->
<input type="text" name="username" value="用户名" size="50" maxlength="10">
</form>- 密码框
<form action="http://www.baidu.com" method="post">
<!--password：密码框
size：密码框的长度
maxlength：密码的位数
-->
密码：<input type="password" name="password" size="30" maxlength="18">
</form>- 单选按钮
<form action="http://www.baidu.com" method="post">
<!--radio：单选按钮，同一组只能选择一个
value：表单提交的值
name：单选按钮必须要分组，name相同的按钮自动分成一组
checked：默认选中的按钮
disabled：禁用的按钮
-->
<input type="radio" value="非常像我" name="similarity">非常像我
<input type="radio" value="有点像我" name="similarity" checked>有点像我
<input type="radio" value="不像我" name="similarity">不像我
<input type="radio" value="一点都不像我" name="similarity">一点都不像我
</form>- 复选框
<form action="http://www.baidu.com" method="post">
<!--checkbox：复选框
name：组名，复选框也必须要分组，name一致的自动分成一组
value为表单提交的值
checked：默认选中的按钮
disabled：禁用的按钮
-->
<input type="checkbox" name="hobby" value="看电影">看电影
<input type="checkbox" name="hobby" value="听音乐">听音乐
<input type="checkbox" name="hobby" value="打篮球">打篮球
<input type="checkbox" name="hobby" value="跑步">跑步
</form>- 下拉列表框
<form action="http://www.baidu.com" method="post">
<!--select：下拉框
name：必须填，表示组件名，表单提交的变量名
size：下拉框中通知显示的选项数量，默认为1
-->
<select name="科目" size="3">
<!--option：下拉框的选项
selected：默认选项
value：表单提交的值
-->
<option value="80" selected>语文</option>
<option value="70">数学</option>
<option value="80">英语</option>
<option value="80">物理</option>
<option value="80">化学</option>
<option value="80">生物</option>
</select>
</form>- 按钮
分为提交按钮（submit）、重置按钮（reset）、普通按钮（button）、图片按钮（image）
<form action="http://www.baidu.com" method="post">
<!--
submit：提交按钮
reset：清空按钮
button：普通按钮
image：图片按钮，带有提交的功能
-->
<input type="submit" value="提交">
<input type="reset" value="清空">
<input type="button" value="选我">
<input type="image" src="../../statics/images/百度一下.png">
</form>- 文本域
<form action="http://www.baidu.com" method="post">
<!--textarea：文本域
cols：列
rows：行
-->
<textarea name="textarea" cols="10" rows="10">文本域</textarea>
</form>- 文件域
支持提交复杂的文件，上传文件的时候会用到
<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
<!--
file：文件类型
-->
<input type="file" name="files">
</form>- 邮箱（基本验证）
<form action="http://www.baidu.com" method="post">
<!--email：输入邮箱，会对邮箱的格式进行简单的校验
-->
<input type="email" name="email">
</form>- 网址（基本验证）
<form action="http://www.baidu.com" method="post">
<!--
url：会对网址进行简单的校验
-->
<input type="url" name="url">
</form>- 数字（上下）
<form action="http://www.baidu.com" method="post">
<!--number：输入数字
min/max：输入数字的区间
step：可以使用按钮调节数字的大小，step是调节的幅度
-->
<input type="number" min="0" max="100" step="10">
</form>- 滑块（可调节）
<form action="http://www.baidu.com" method="post">
<!--range：滑块，可以使用滑块输入指定范围内的数
min/max：区间
step：滑动的幅度
-->
<input type="range" name="range" min="0" max="1000" step="2">
</form>- 搜索框（带关闭按钮）
<form action="http://www.baidu.com" method="post">
<!--
search：搜索框
-->
<input type="search" name="search">
</form>3、表单的应用
- 隐藏域
当网页中有一些使用到的数据，但是这些数据却不想让用户看到，就可以使用隐藏域，比如页面的登录次数等
<form action="http://www.baidu.com" method="post">
<!--hidden：隐藏域
当网页中有一些使用到的数据，但是这些数据却不想让用户看到，就可以使用隐藏域，比如页面的登录次数等
-->
<input type="hidden" name="count" value="10">
</form>- 只读与禁写
在一个网页中，有一些选项我们只是希望告知用户，而不希望用户更改时，就可以设置成只读的，比如大型考试查成绩的学号等信息。还有会遇到有一部分的数据是用户必须填写的，比如登陆时的账号密码，不能为空，当为空时就禁止点击登录按钮。
<form action="http://www.baidu.com" method="post">
<!--
readonly：只读
disabled：禁写
-->
账号：<input type="text" name="username" readonly>
密码：<input type="password" name="pwd" disabled>
</form>- 标注
将一个label标签与一个文本框绑定起来
<form action="http://www.baidu.com" method="post">
<!--
id：给文本框上打一个标记
for：将label标签与文本框绑定起来
-->
<label for="name"> 用户名：</label>
<input type="text" name="username" id="name">
</form>-
初级表单验证
为什么要进行表单验证？
在数据被送往服务器前，数据可能是合法的，也可能是非法的，这时候先对html表单中的数据进行一次验证，验证一些比较典型的表单数据。能够减轻服务器的压力。具体有如下好处：
- 验证用户是否已填写表单中的必填项目？
- 验证用户输入的邮件地址是否合法？
- 验证用户是否输入合法的日期？
- 验证用户是否在数据域 (numeric field) 中输入了文本？
- ……非法输入
- 默认的输入格式提示
<form action="http://www.baidu.com" method="post">
<!--
placeholder：在输入框中的默认提示，当用户输入数据后消失
-->
<input type="url" name="url" placeholder="必须是URL格式">
</form>- 必填
<form action="http://www.baidu.com" method="post">
<!--
required：必填，不填不能提交表单
-->
密码： <input type="password" name="pwd" required>
</form>- 正则表达式
<form action="http://www.baidu.com" method="post">
<!--
required：必填项
pattern：后跟正则表达式，本例中正则表达式的含义是第一个数字是1，第二个是35789中的一个，剩下9位随机
-->
手机号码：<input type="password" name="tel" required pattern="^1[35789]\d{9}">
</form>有帮助的话点个收藏呦~