<form action="#" method="post">
    <p>
        <!--在登录时，一般用在用户名-->
        文本：<input type="text"/>
    </p>
    <p>
        <!--在登录时，一般用在密码-->
        密码：<input type="password"/>
    </p>
    <p>
        <!--在个人信息中，一般选择你的爱好，性格等，多选-->
        复选： 苹果<input type="checkbox"/>
               西瓜<input type="checkbox"/>
    </p>
    <p>
        <!--单选的 name值必须一致 才能归类成一类 单选-->
        单选：男<input name="gender" type="radio"/>
              女<input name="gender" type="radio"/>
    </p>
    <p>
        <!--隐藏文本框，它存在，但看不见-->
        <input type="hidden"/>
    </p>
    <p>
        <!--下拉列表，我们还会用跟这个做三级浮动，比如 中国的 省、市、县-->
       下拉列表： <select name="xiala" id="xiala">
            <option value="眼睛">眼睛</option>
            <option value="笑容">笑容</option>
            <option value="嘴巴">嘴巴</option>
        </select>
    </p>
    <p>
        <!--大家在评论或者发表的时候，就会用到这个，和文本框性质差不多，不过更合适用来写文本内容-->
        多行文本：<textarea name="text" id="text" cols="30" rows="10"></textarea>
    </p>
    <p>
        <!--它是提交整个form表单，获取这个表单里面的 input select textarea 然后到action指向的地址-->
        提交按钮：<input type="submit"/>
    </p>
</form>

<a href="http://www.baidu.com">百度</a>

<div id="top" style="height: 600px;background-color: #d6e9c6">我是顶部</div>
<div style="height: 600px;background-color: #b2dba1">我是中间内容</div>
<a href="#top">返回顶部</a>