文章目录
一、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:306630xxxxxx@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>
有帮助的话点个收藏呦~