HTML初学(二)

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>练习6.13</title>
</head>
<body>
<form action="#" name="name" method="post">
&nbsp;&nbsp;用户名
<span style="color: #ff0a10;">*</span>
<input type="email" title=""/>
<span style="font-size: 12px;color: #0effbb">请使用邮箱地址</span><br/><br/>
&nbsp;&nbsp;&nbsp;密码
<span style="color: #ff0a10;">*</span>
<input type="password" title=""/>
<span style="font-size: 12px;color: #0effbb">密码强度</span>
<span style="font-size: 12px;color: #ff000f">弱</span>
<span style="font-size: 12px;color: #000000">中</span>
<span style="font-size: 12px;color: #09ff22">强</span><br/><br/>
&nbsp;确认密码
<span style="color: #ff0a10;">*</span>
<input type="password" title/><br/><br/>
&nbsp;注册目标
<span style="color: #ff0a10;">*</span>
<input type="radio" name="name" title=""/>会员&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-size: 12px;color: #0bfffc">(快速卖出或买入农产品)</span><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="name" title=""/>农业经济人&nbsp;
<span style="font-size: 12px;color: #0bfffc">(为广大会员服务,促成农产品交易)</span><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="name" title=""/>渠道联盟&nbsp;&nbsp;
<span style="font-size: 12px;color: #0bfffc">(成为我们的合作伙伴)</span><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="radio" name="name" title=""/>信息员&nbsp;&nbsp;&nbsp;
<span style="font-size: 12px;color: #0bfffc">(采集发布热点农业信息)</span><br/>
&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-size: 12px;color: #0bfffc">&nbsp;&nbsp;&nbsp;备注:请选择您的主职身份,其他信息可以以后您需要的时候进行扩展</span><br/><br/>
&nbsp;&nbsp;&nbsp;姓名
<span style="color: #ff0a10;">*</span>
<input type="text" title=""/>
<span style="font-size: 12px;color: #0effbb">请使用与身份中相同的真实姓名</span><br/><br/>
&nbsp;&nbsp;&nbsp;手机
<span style="color: #ff0a10;">*</span>
<input type="tel" maxlength="11" title=""/>
<span style="font-size: 12px;color: #0effbb">11位手机号码</span><br/><br/>
&nbsp;所在区域
<span style="color: #ff0a10;">*</span>
<select name="所在区域" id="123" style="width: 100px" title="">
<option value="天朝">天朝</option>
<option value="霓虹">霓虹</option>
<option value="棒子">棒子</option>
<option value="米国">米国</option>
</select>
<select name="所在区域" id="2123" style="width: 100px" title="">
<option value="北上广">北上广</option>
<option value="黑吉辽">黑吉辽</option>
</select><br/><br/>
&nbsp;&nbsp;验证码
<span style="color: #ff0a10;">*</span>
<input type="text" title=""/>
<img src="../" alt="图呢?"/>
<a href="#"><span style="text-decoration: none;font-size: 12px">看不清?换一个</span></a><br/><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button style="background-color: #f2ff03;width: 200px;height: 50px;border-radius: 15px;">
<span style="font-size: 18px;color: red">同意一下条款并注册</span>
</button>
<button style="background-color: #ffffff;border: none"><span style="font-size: 12px;">登入</span></button>
<button style="background-color: #ffffff;border: none"><span style="font-size: 12px;">忘记密码</span></button>
<br/><br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<textarea name="文本" id="" cols="30" rows="5" title="">欢迎使用</textarea>
        <hr/>
<hr/>
<!--多种input标签的type属性值-->
<input type="date"/>
<input type="datetime"/>
<input type="datetime-local"/>
<input type="number" min="0" max="5"/>
<input type="email"/>
<input type="color"/>
<input type="range"/>
<!--域的用法-->
<fieldset style="width: 250px">
<legend>请登录</legend>
男<input type="radio" name="sex"/>
女<input type="radio" name="sex"/>
gay<input type="radio" name="sex"/>
<input type="reset"/>
</fieldset>
<!--其他用法-->
<!--作者信息斜体-->
<address>作者信息。。。</address>
<!--默认黄色高亮-->
<p>李逵和李鬼都是<mark>黑人</mark></p>
<!--网站下方的注册信息等-->
<small>在2005年在北京注册&copy;</small>
<!--上标下标-->
<sup>上标</sup>
<sub>下标</sub>
<!--时间-->
<time>2月14日</time>是情人节?
<!--导航栏-->
<nav>
<a href="#">新闻</a>
<a href="#">图片</a>
<a href="#">网页</a>
</nav>
<nav>
<ul style="list-style: none">
<!--此处style="list-style: none"作用去除列表前方圆点-->
<li><a href="#">新闻</a></li>
<li><a href="#">网页</a></li>
<li><a href="#">图片</a></li>
</ul>
</nav>

<article>
<h1>红瓦寺失火了</h1>
<p>...</p>
<article>甲:。。。。</article>
<article>乙:.......</article>
</article>

<section>
<h1>红瓦寺失火相关报道</h1>
<p>...</p>
</section>
<section>
<h2>并不是因为分手,而是....</h2>
<p>。。。。</p>
</section>

<aside>
。。。。
aside 表示网页中的侧边栏
</aside>




</form>
</body>
</html>




posted @ 2016-06-13 22:49  奕军  阅读(126)  评论(0编辑  收藏  举报