<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body><h1>陈华斐pink</h1><p>小猪佩奇</p><div id="container" style="width: 400px"> ???<div id="header" style="background-color: chocolate"><h2 align="center">登录</h2></div> ???<div id="content"> ???????<form setion=""> ???????????用户名：<input type="text" name+="username" placeholder="请输入用户名"><br> ???????????密码：<input type="password"> ???????????<br> ???????????<input type="radio" name="role" value="stu">student ???????????<input type="radio" name="role" value="tea">teacher ???????????<br> ???????????<input type="checkbox" value="true"><span></span>记住我<a href="">登录遇到问题</a><br> ???????????<input type="button" value="login" onclick="alert(‘‘)"> ???????</input> ???????</form>登录验证 ???</div> ???<div> ???????<select>评论 ???????????<option>收藏</option> ????????????<option>点赞</option> ????????????<option></option> ???????</select>评论<ul> ???<li>python</li> ???<li>html</li></ul> ???</div> ???<div id="footer" style="background-color: chocolate"><p align="center"> <i>版权@chf96</i></p></div><a href="http://image.so.com/v?q=小猪佩奇图片&cmsid=380851e6494219daf0f9e42637e2ca63&cmran=0&cmras=0&i=2&cmg=5fa9918b43bdd880a720ad048811374f&src=360pic_strong&z=1#q=%E5%B0%8F%E7%8C%AA%E4%BD%A9%E5%A5%87%E5%9B%BE%E7%89%87&i=2&src=360pic_strong&z=1&lightboxindex=0&id=9a99e6fee214ae9faf1913bd48d9d8a2&multiple=0&itemindex=0&dataindex=0&prevsn=0&currsn=0&jdx=0">小猪佩奇<img src="http://i2.hunantv.com/p1/20160801/1059291401.jpg" width="258" height="39"></a><hr></body></html>
运行结果：
web基础，用html元素制作web页面
原文地址：http://www.cnblogs.com/chenhuafei/p/7680176.html