资讯

展开

HTML基础

作者:快盘下载 人气:

根据以下学习视频;个人整理的笔记

https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0&vd_source=7a8946d22777450e46486d5fd60d8d4d

HTML

什么是HTML

HTML;超文本标记语言

HTML5

世界知名浏览器厂商都对HTML5提供支持市场的需求跨平台

W3C:万维网联盟

http://218.206.242.148:12345/images/20_csdn.net/20220917/vojxgxc0vhy.jpg; alt=;漫画图片; title=;悬停文字; width=;1000px; height=;1000px;> </body> </html>

链接标签

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>链接标签</title>
	</head>
	<body>
		<!-- 使用name作为锚标记 -->
		<a href=;; name=;top;>顶部</a>
		
		<!-- 链接标签
		 href;必填;表示要跳转到哪个页面
		 target;表示窗口在哪里打开
			_blank 		在新标签中打开
			_self 		默认的;在自己的网页中打开
		 -->
		<a href=;图像标签.html; target=;_blank;>点击我跳转</a>
		<a href=;https://www.baidu.com; target=;_self;>点击我跳转到百度</a>
		
		<br>
		
		<!-- 图像超链接 -->
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		<a href=;我的第一个网页.html;>
			<img src=;Resource/image/39.jpg; alt=;漫画图片;	title=;悬停文字; width=;1000px; height=;1000px;>
		</a>
		
		<!-- 锚链接 
		1.需要一个锚标记
		2.可以跳转到锚标记;不同页面也可以实现;href需要先填写要跳转的页面;再添加#标记;
		#
		-->
		
		<a href=;#top;>回到顶部</a>
		
		<!-- 功能性链接
		 
		 邮件链接;mailto
		 QQ链接;
		 -->
		
		<a href=;mailto:qq398156587;163.com;>点击联系我</a>
		
		<a target=;_blank; href=;http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes;><img border=;0; src=;http://wpa.qq.com/pa?p=2::53; alt=;你好加我领取小电影; title=;你好加我领取小电影;/></a>
		
	</body>
</html>

行内元素和块级元素

块级元素

无论内容多少;该元素独占一行;div、p、h1~h6。。。;

行内元素

内容撑开宽度;左右都是行内元素的可以排在一行;span、img、a、strong、em。。。;

行内元素可以被包含在块级元素中;反之;则不可以~

列表标签

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>列表标签</title>
	</head>
	<body>
		
		<!-- 有序列表 -->
		<ol>
			<li>Java</li>
			<li>Python</li>
			<li>运维</li>
			<li>前端</li>
			<li>C/C;;</li>
		</ol>
		
		<hr >
		<!-- 无序列表 -->
		<ul>
			<li>Java</li>
			<li>Python</li>
			<li>运维</li>
			<li>前端</li>
			<li>C/C;;</li>
		</ul>
		
		<!-- 自定义列表
		 dl;标签
		 dt;列表名称
		 dd;列表内容
		 -->
		<dl>
			<dt>学科</dt>
			
			<dd>Java</dd>
			<dd>Python</dd>
			<dd>运维</dd>
			<dd>C/C;;</dd>
			<dd>前端</dd>
			
			
			<dt>位置</dt>
			
			<dd>北京</dd>
			<dd>深圳</dd>
			<dd>上海</dd>
			<dd>珠海</dd>
			<dd>杭州</dd>
		</dl>
		
	</body>
</html>

表格标签

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>表格标签</title>
	</head>
	<body>
		<!-- 表格table
		 行 tr
		 列	td
		 
		 -->
		
		<table border=;1px; >
			<tr>
				<!-- colspan 跨列 -->
				<td colspan=;4;>1-1</td>
			</tr>
			<tr>
				<!-- rowspan 跨行 -->
				<td rowspan=;2;>2-1</td>
				<td>2-2</td>
				<td>2-3</td>
				<td>2-4</td>
			</tr>
			<tr>
				<td>3-1</td>
				<td>3-2</td>
				<td>3-3</td>
			</tr>
		</table>
		
		
		
	</body>
</html>

媒体元素

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>媒体元素</title>
	</head>
	<body>
		<!-- 音频和视频 
		src 资源路径
		controls控制条
		autoplay 自动播放
		-->
		
		<video src=;./Resource/video/c336626706ed2eb760c69de02bda6b4a.mp4; controls=;; autoplay=;;></video>
		
		
		<audio src=;./Resource/audio/天門%20-%20桜花抄%20(樱花抄).mp3; controls=;; autoplay=;;></audio>
		
		
	
	</body>
</html>

页面结构分析

headerfootersectionarticleasidenav ;导航类辅助内容;

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>页面结构分析</title>
	</head>
	<body>
		<header>
			<h2>网页头部</h2>
		</header>
		
		
		<section>
			<h2>网页主体</h2>
		</section>
		
		
		
		<footer>
			<h2>网页脚部</h2>
		</footer>
		
		
	</body>
</html>

iframe内联框架

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>内联框架</title>
	</head>
	<body>
		<!-- iframe内联框架
		 src 地址
		 width 宽
		 height 高
		 name 框架标识名
		 -->
		
		<iframe src=;https://www.qqmusic.com; width=;1000px; height=;1000px;></iframe>
		
		
		<iframe src=;; name=;hello; width=;1000px; height=;1000px;></iframe>
		<a href=;图像标签.html; target=;hello;>点击跳转</a>
		
		
		
		<iframe src=;//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11; scrolling=;no; border=;0; frameborder=;no; framespacing=;0; allowfullscreen=;true;> </iframe>
		
	</body>
</html>

初识表单post和get提交

表单form提交方式

get提交方式;我们可以在url中看到我们提交的信息;不安全;但高效post提交方式;比较安全;可以传输大文件

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
		 
		 -->
		<form action=;我的第一个网页.html; method=;post;>
			<!-- input type=;text; 文本输入框 -->
			<p>名字;<input type=;text; name=;username; id=;; value=;; /></p>
			<!-- input type=;password; 密码框 -->
			<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
			
			
			
			<input type=;submit; />
			<input type=;reset; />
			
		</form>
		
		
	</body>
</html>

文本框和单选框

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
		 
		 -->
		<form action=;我的第一个网页.html; method=;get;>
			<!-- input type=;text; 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			-->
			<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; maxlength=;8; size=;30;/></p>
			<!-- input type=;password; 密码框 -->
			<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
			
			<!-- 单选框 radio 
				name 一样代表同一个组
				value 单选框的值
			 -->
			<p>性别;
			<input type=;radio; name=;sex; id=;; value=;boy; />男
			<input type=;radio; name=;sex; id=;; value=;girl; />女
			</p>
			
			
			<p>
			<input type=;submit; />
			<input type=;reset; />
			</p>
		</form>
		
		
	</body>
</html>

按钮和多选框

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
		 
		 -->
		<form action=;我的第一个网页.html; method=;get;>
			<!-- input type=;text; 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			-->
			<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; maxlength=;8; size=;30;/></p>
			<!-- input type=;password; 密码框 -->
			<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
			 -->
			<p>性别;
			<input type=;radio; name=;sex; id=;; value=;boy; />男
			<input type=;radio; name=;sex; id=;; value=;girl; />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好;
				<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
				<input type=;checkbox; name=;hobby; id=;; value=;code; />敲代码
				<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
				<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
			</p>
			
			<!-- 按钮 
			type=;button;	普通按钮
			type=;image;	图片按钮
			type=;submit;	提交按钮
			type=;reset;	重置按钮
			-->
			<p>按钮;
				<input type=;button; name=;btn1; id=;; value=;点击变长; />
				<!-- 图片按钮 -->
				<input type=;image; src=;./Resource/image/39.jpg; />
			</p>
			
			
			
			<p>
			<input type=;submit; />
			<input type=;reset; />
			</p>
		</form>
		
		
	</body>
</html>

列表框文本域和文件域

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
		 
		 -->
		<form action=;我的第一个网页.html; method=;get;>
			<!-- input type=;text; 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			-->
			<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; maxlength=;8; size=;30;/></p>
			<!-- input type=;password; 密码框 -->
			<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
			 -->
			<p>性别;
			<input type=;radio; name=;sex; id=;; value=;boy; checked=;;/>男
			<input type=;radio; name=;sex; id=;; value=;girl; />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好;
				<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
				<input type=;checkbox; name=;hobby; id=;; value=;code; checked=;;/>敲代码
				<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
				<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
			</p>
			
			<!-- 按钮 
			type=;button;	普通按钮
			type=;image;	图片按钮
			type=;submit;	提交按钮
			type=;reset;	重置按钮
			-->
			<p>按钮;
				<input type=;button; name=;btn1; id=;; value=;点击变长; />
				<!-- 图片按钮 -->
				<input type=;image; src=;./Resource/image/39.jpg; />
			</p>
			
			<!-- 下拉框;列表框
			 -->
			<p>国家;
				<select name=;列表名称;>
					<option value =;china;>中国</option>
					<option value =;us;>美国</option>
					<option value =;ruishi; selected=;;>瑞士</option>
					<option value =;yindu;>印度</option>
				</select>
			</p>
			
			<!-- 文本域
			 -->
			<p>反馈;
				<textarea name=;textarea; rows=;10; cols=;50;>文本内容</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type=;file; name=;files; id=;; value=;; />
				<input type=;button; name=;upload; value=;上传;/>
			</p>
			
			
			
			
			
			<p>
			<input type=;submit; />
			<input type=;reset; />
			</p>
		</form>
		
		
	</body>
</html>

搜索框滑块和简单验证

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
		 
		 -->
		<form action=;我的第一个网页.html; method=;get;>
			<!-- input type=;text; 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			-->
			<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; maxlength=;8; size=;30;/></p>
			<!-- input type=;password; 密码框 -->
			<p>密码;<input type=;password; name=;pwd; id=;; value=;; /></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
			 -->
			<p>性别;
			<input type=;radio; name=;sex; id=;; value=;boy; checked=;;/>男
			<input type=;radio; name=;sex; id=;; value=;girl; />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好;
				<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
				<input type=;checkbox; name=;hobby; id=;; value=;code; checked=;;/>敲代码
				<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
				<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
			</p>
			
			<!-- 按钮 
			type=;button;	普通按钮
			type=;image;	图片按钮
			type=;submit;	提交按钮
			type=;reset;	重置按钮
			-->
			<p>按钮;
				<input type=;button; name=;btn1; id=;; value=;点击变长; />
				<!-- 图片按钮 -->
				<input type=;image; src=;./Resource/image/39.jpg; />
			</p>
			
			<!-- 下拉框;列表框
			 -->
			<p>国家;
				<select name=;列表名称;>
					<option value =;china;>中国</option>
					<option value =;us;>美国</option>
					<option value =;ruishi; selected=;;>瑞士</option>
					<option value =;yindu;>印度</option>
				</select>
			</p>
			
			<!-- 文本域
			 -->
			<p>反馈;
				<textarea name=;textarea; rows=;10; cols=;50;>文本内容</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type=;file; name=;files; id=;; value=;; />
				<input type=;button; name=;upload; value=;上传;/>
			</p>
			
			
			<!-- 邮件验证 -->
			<p>邮箱;
				<input type=;email; name=;email; id=;; value=;; />
			</p>
			
			<!-- URL验证 -->
			<p>URL;
				<input type=;url; name=;url; id=;; value=;; />
			</p>
			
			<!-- 数字验证 -->
			<p>数字;
				<input type=;number; name=;num; max=;100; min=;0; step=;10; id=;; value=;; />
			</p>
			
			<!-- 滑块 -->
			<p>滑块;
				<input type=;range; name=;voice; max=;100; min=;0; step=;10; id=;; value=;; />
			</p>
			
			<!-- 搜索框 -->
			<p>搜索;
				<input type=;search; name=;search; id=;; value=;; />
			</p>
			
			
			<p>
			<input type=;submit; />
			<input type=;reset; />
			</p>
		</form>
		
		
	</body>
</html>

表单的应用

隐藏域 hidden只读 readonly禁用 disabled

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
		 
		 -->
		<form action=;我的第一个网页.html; method=;get;>
			<!-- input type=;text; 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			readonly 只读
			-->
			<p>名字;<input type=;text; name=;username; id=;; value=;狂神好帅; readonly=;; maxlength=;8; size=;30;/></p>
			<!-- input type=;password; 密码框 
			hidden 隐藏域
			-->
			<p>密码;<input type=;password; name=;pwd; id=;; value=;; hidden=;;/></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
				disabled 禁用
			 -->
			<p>性别;
			<input type=;radio; name=;sex; id=;; value=;boy; checked=;; disabled=;;/>男
			<input type=;radio; name=;sex; id=;; value=;girl; />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好;
				<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
				<input type=;checkbox; name=;hobby; id=;; value=;code; checked=;;/>敲代码
				<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
				<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
			</p>
			
			<!-- 按钮 
			type=;button;	普通按钮
			type=;image;	图片按钮
			type=;submit;	提交按钮
			type=;reset;	重置按钮
			-->
			<p>按钮;
				<input type=;button; name=;btn1; id=;; value=;点击变长; />
				<!-- 图片按钮 -->
				<input type=;image; src=;./Resource/image/39.jpg; />
			</p>
			
			<!-- 下拉框;列表框
			 -->
			<p>国家;
				<select name=;列表名称;>
					<option value =;china;>中国</option>
					<option value =;us;>美国</option>
					<option value =;ruishi; selected=;;>瑞士</option>
					<option value =;yindu;>印度</option>
				</select>
			</p>
			
			<!-- 文本域
			 -->
			<p>反馈;
				<textarea name=;textarea; rows=;10; cols=;50;>文本内容</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type=;file; name=;files; id=;; value=;; />
				<input type=;button; name=;upload; value=;上传;/>
			</p>
			
			
			<!-- 邮件验证 -->
			<p>邮箱;
				<input type=;email; name=;email; id=;; value=;; />
			</p>
			
			<!-- URL验证 -->
			<p>URL;
				<input type=;url; name=;url; id=;; value=;; />
			</p>
			
			<!-- 数字验证 -->
			<p>数字;
				<input type=;number; name=;num; max=;100; min=;0; step=;10; id=;; value=;; />
			</p>
			
			<!-- 滑块 -->
			<p>滑块;
				<input type=;range; name=;voice; max=;100; min=;0; step=;10; id=;; value=;; />
			</p>
			
			<!-- 搜索框 -->
			<p>搜索;
				<input type=;search; name=;search; id=;; value=;; />
			</p>
			
			
			<p>
				<!-- 增强鼠标可用性 -->
				<label for=;mark;>你点我试试</label>
				<input type=;text; name=;; id=;mark; value=;; />
			</p>
			
			
			
			<p>
			<input type=;submit; disabled=;;/>
			<input type=;reset; />
			</p>
		</form>
		
		
	</body>
</html>

表单初级验证

placeholder 提示信息required 非空判断pattern 正则表达式;可以上网查找常用正则表达式;不用自己写;

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset=;utf-8;>
		<title>表单提交</title>
	</head>
	<body>
		<h1>注册</h1>
		
		<!-- 
		 method 表单数据提交方式
		 action 表单数据提交的位置;可以是网站;也可以是一个请求处理地址
		 
		 -->
		<form action=;我的第一个网页.html; method=;get;>
			<!-- input type=;text; 文本输入框
			value 初始值
			maxlength 最大字符长度
			size 文本框长度
			readonly 只读
			placeholder 提示消息
			required 非空判断
			-->
			<p>名字;<input type=;text; name=;username; placeholder=;请输入用户名; required=;;/></p>
			<!-- input type=;password; 密码框 
			hidden 隐藏域
			-->
			<p>密码;<input type=;password; name=;pwd; id=;; value=;; hidden=;;/></p>
			
			<!-- 单选框 radio 
				name 	name一样代表同一个组
				value 单选框的值
				disabled 禁用
			 -->
			<p>性别;
			<input type=;radio; name=;sex; id=;; value=;boy; checked=;; disabled=;;/>男
			<input type=;radio; name=;sex; id=;; value=;girl; />女
			</p>
			
			<!-- 多选框	checkbox
				name 	name一样代表同一个组
			 -->
			<p>爱好;
				<input type=;checkbox; name=;hobby; id=;; value=;sleep; />睡觉
				<input type=;checkbox; name=;hobby; id=;; value=;code; checked=;;/>敲代码
				<input type=;checkbox; name=;hobby; id=;; value=;chat; />聊天
				<input type=;checkbox; name=;hobby; id=;; value=;game; />打游戏
			</p>
			
			<!-- 按钮 
			type=;button;	普通按钮
			type=;image;	图片按钮
			type=;submit;	提交按钮
			type=;reset;	重置按钮
			-->
			<p>按钮;
				<input type=;button; name=;btn1; id=;; value=;点击变长; />
				<!-- 图片按钮 -->
				<input type=;image; src=;./Resource/image/39.jpg; />
			</p>
			
			<!-- 下拉框;列表框
			 -->
			<p>国家;
				<select name=;列表名称;>
					<option value =;china;>中国</option>
					<option value =;us;>美国</option>
					<option value =;ruishi; selected=;;>瑞士</option>
					<option value =;yindu;>印度</option>
				</select>
			</p>
			
			<!-- 文本域
			 -->
			<p>反馈;
				<textarea name=;textarea; rows=;10; cols=;50;>文本内容</textarea>
			</p>
			
			<!-- 文件域 -->
			<p>
				<input type=;file; name=;files; id=;; value=;; />
				<input type=;button; name=;upload; value=;上传;/>
			</p>
			
			
			<!-- 邮件验证 -->
			<p>邮箱;
				<input type=;email; name=;email; id=;; value=;; />
			</p>
			
			<!-- URL验证 -->
			<p>URL;
				<input type=;url; name=;url; id=;; value=;; />
			</p>
			
			<!-- 数字验证 -->
			<p>数字;
				<input type=;number; name=;num; max=;100; min=;0; step=;10; id=;; value=;; />
			</p>
			
			<!-- 滑块 -->
			<p>滑块;
				<input type=;range; name=;voice; max=;100; min=;0; step=;10; id=;; value=;; />
			</p>
			
			<!-- 搜索框 -->
			<p>搜索;
				<input type=;search; name=;search; id=;; value=;; />
			</p>
			
			
			<p>
				<!-- 增强鼠标可用性 -->
				<label for=;mark;>你点我试试</label>
				<input type=;text; name=;; id=;mark; value=;; />
			</p>
			
			<p>自定义邮箱;
				<input type=;text; name=;diymail; pattern=;^w;([-;.]w;)*;w;([-.]w;)*.w;([-.]w;)*$; id=;; value=;; />
			</p>
			
			<p>
			<input type=;submit; disabled=;;/>
			<input type=;reset; />
			</p>
		</form>
		
		
	</body>
</html>

加载全部内容
相关教程
猜你喜欢
用户评论
快盘暂不提供评论功能！