## html02
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form01</title>
</head>
<body>
<h3>form 表单提交</h3>
<form action="myWeb.html" method="get"> <!--//表单可以提交到一个网页也可以是一个请求-->
<p>name:<input name="name" type="text" required/></p>
<p>psw:<input name="psw" type="text" placeholder="请输入密码"/></p>
<p>自定义邮箱：parrent<input type="email" placeholder="请输入正确邮箱"
pattern="[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"
/></p>
<!--表单验证 placeholder 默认值提示信息 required 非空 pattern 正则表达式-->
<p>password:<input name="password" type="password"/></p>
<p>text默认 maxlength最多输入字符数:<input name="text" type="text" maxlength="10"/></p>
<p>radio:单选框<input name="sex" type="radio" value="man"/></p>
<p>radio:<input name="sex" type="radio" value="girl"/></p>
<p>checkbox:多选框<input name="ss" type="checkbox" /></p>
<p>checkbox:<input name="ss" type="checkbox" /></p>
<p>button<input name="btn" type="button" value="click long"/></p>
<p>image:图片按钮<input name="image" type="image" src="../img/xc.jpg" width="20px" height="20px"/></p>
<p>file<input name="files" type="file" value="dddd"/></p>
<p>email会自动验证包含@<input name="email" type="email" value="email0000"/></p>
<p>url自动验证<input name="url" type="email" value="url0"/></p>
<p>number数字<input name="number" type="number" value="number2"/></p>
<p>
滑块音量：range step="2"每一步增量
<input type="range" max="10" min="0" step="2" name="voice"/>
</p>
<p>
搜索：
<input id="search" type="search" name="search"/>
</p>
<label for="search">点击指向位置</label>
<p>
<select name="select1">
<option value="dd">china</option>
<option value="usa">usa</option>
<option value="v">girls</option>
</select>
</p>
<p>
<textarea name="textares" cols="10" rows="5">textarea</textarea>
</p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en"><!--网页总标签-->
<head><!--头部标签-->
<meta charset="UTF-8"><!--描述标签-->
<meta name="keywords" content="我的网页">
<meta name="description" content="来这里练习">
<title>frist web</title><!--网页标题-->
</head>
<body><!--主体标签-->
<header>
<h3>i am header</h3>
</header>
<section>i am section</section>
Hello Girl
<hr/>
<!--有序列表ol-->
<ol>
<li>ol li1有序列表 多用于试卷问答形式</li>
<li>ol li2</li>
<li>ol li3</li>
<li>ol li4</li>
</ol>
<ul>
<li>ul li1无序列表 多用于导航侧边栏</li>
<li>ul li1=2无序列表</li>
<li>ul li1=3无序列表</li>
</ul>
<dl>
<dt>dl 自定义列表中dt 多用在公司网站底部 </dt>
<dd>dl dd </dd>
<dd>dl dd </dd>
<dd>dl dd </dd>
</dl>
<table border="1px">
<tr>
<td colspan="3">成绩</td>
<!--<td>2</td>-->
<!--<td>3</td>-->
</tr>
<tr>
<td rowspan="2">1</td>
<td>yuwen</td>
<td>600</td>
</tr>
<tr>
<!--<td>1</td>-->
<td>shuxu</td>
<td>300</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>英语</td>
<td>322</td>
</tr>
<tr>
<!--<td>1</td>-->
<td>物理</td>
<td>311</td>
</tr>
</table>
<hr/>
<h1>wo shi h1</h1>
<p>i am p</p>
<b>i am b</b>
<i>i am i </i>
<strong>i am strong</strong><br/>
<span>up have a br</span>
<em>i am em</em>
<p> 空 格</p>
<p>>大于gt，<小于lt，©copy版权</p>
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<a href="#a1" target="_blank" title="找锚点1" name="iam">点我去锚点1</a>
<video src="../mm/map.mp4" autoplay controls>video视频放器:autoplay 自动播放controls：进度条</video>
<audio src="../mm.mp3" controls> audio 音频播放器 </audio>
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px"><img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<img src="../img/xc.jpg" alt="我的第一个相亲对象" title="我是悬停显示" width="200px">
<p id="a1">锚点1</p><a href="#" title="top">回顶部</a>
<footer>i am footer</footer>
<a href="www.jjc.com" target="hello">在内联框架中打开</a><!--在内联框架中打开-->
<iframe name="hello" src="http://www.hao123.com" width="1000px" height="600px" frameborder="1"></iframe>
</body>
</html>
