本节继续介绍HTML的常用标签。
(1)input标签之文本域(text和textarea)、密码域(password):
<!DOCTYPE html> <html> <head> <title>示例3.1</title> </head> <body> 昵称：<input type="text" size="15" background-color:green /><br/> 姓名：<input type="text" size="15" /><br/> 密码：<input type="password" size="15"><br/> 详细介绍：<br/> <textarea rows="4" cols="21"></textarea> </body> <html>
(2)fieldset与checkbox:
<fieldset style="300px;height:60px;" align="center"> <!--align属性在火狐浏览器不起作用，在360的快速模式下能够让标题居中。在IE或兼容模式下能够起作用--> <legend><font size="4">兴趣爱好</legend> <groupbox> <input type="checkbox">吃饭 <input type="checkbox">睡觉 <input type="checkbox">玩游戏 <input type="checkbox">学习 </groupbox> <br/> <input type="submit" value="注册"> <input type="reset"/> </fieldset>
(3)form表单与radio单选按钮:
<!DOCTYPE html> <html>
<head>
<title>示例3.3</title>
</head> <body> <form> 男性：<input type="radio" checked="checked" name="Sex" value="male" /> <br /> 女性：<input type="radio" name="Sex" value="female" /> </form> <p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p> </body> </html>
(4)select标签:
<!DOCTYPE html> <html> <head> <title>示例3.4</title> </head> <body> 出生地： <select> <option>中国</option> <option>美国</option> <option>日本</option> <option>加拿大</option> </select> <select> <option>安徽</option> <option>贵州</option> <option>浙江</option> <option>河北</option> </select> <select> <option>贵阳</option> <option selected="selected">合肥</option> <!--自定义初始状态是谁被选中了--> <option>石家庄</option> <option>杭州</option> </select> </body> </html>
(5)button与div和span标签:
<!DOCTYPE html> <html> <head> <title>示例3.5</title> </head> <body> <form action="" method="post"> <br/> <span >QQ帐号： <input type="text" size="25";name="用户名" value=""/></span><br/><br/> <span >QQ密码： <input type="text" size="25";name="密码" value="" /> 忘记密码?</span><br/><br/> <div > <input type="checkbox"/>下次自动登录<br/><br/> <input type="button" value="开通微博"/> </div> </form> </body> </html>
(6)各种自带字体标签:
<!DOCTYPE html> <html> <head> <title>示例3.6</title> </head> <body> <h3>测试各种字体:<h3> <font size="3">1.粗体：</font><b>MenAngel</b><br/> <font size="3">2.斜体：</font><i>MenAngel</i><br/> <font size="3">3.右上角：MenAngel</font><sup>2</sup><br/> <font size="3">4.右下角：MenAngel</font><sub>2</sub><br/> <font size="3">5.删除字体：</font><s>MenAngel</s><br/> <font size="3">6.较大字体：</font><big><big>MenAngel</big><br/> <font size="3">7.较小字体：</font><small>MenAngel</small><br/> <font size="3">8.强调字体：</font><em>MenAngel</em><br/> <font size="3">9.下划线字体：</font><u>MenAngel</u><br/> </body> </html>
(7)a标签的其他用法和font标签的face属性:
<!DOCTYPE html> <html> <head> <title>示例3.7</title> </head> <body> <a href="#尾部" name="头部">直达尾部</a><br/> <font size="4" face="楷体">欧阳明日就是乔振宇</font><br/> <font size="4" face="黑体">欧阳明日就是乔振宇</font><br/> <a href="#头部" name="尾部">直达头部</a> </body> </html>
(8)marquee标签:(动态的)
<!DOCTYPE html> <html> <head> <title>示例3.7</title> </head> <body> <marquee direction="right" behavior="alternate"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858720/o_%E6%98%8E%E6%97%A505.jpg" width="300"/> </marquee> <marquee direction="left" behavior="slide"> <img src="http://images.cnblogs.com/cnblogs_com/MenAngel/858720/o_%E6%98%8E%E6%97%A504.jpg" width="300"/> </marquee> </body> </html>
(9)frameset标签:
<html> <head> <title>示例3.9</title> </head> <frameset cols="25%,50%,25%"> <frame src="http://www.cnblogs.com/MenAngel/p/5447078.html"> <frame src="http://www.cnblogs.com/MenAngel/p/5448795.html"> <frame src="http://www.cnblogs.com/MenAngel/p/5450785.html"> </frameset> </html>
(10)body标签:(body设置背景和a标签的target属性)
<!DOCTYPE html> <html> <head> <title>示例3.10</title> </head> <body background="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/02/01/ChMkJlbKxKyIX9HbAA5_3tlCLbgAALHKgO_eagADn_2756.jpg"> <a href="http://www.cnblogs.com/MenAngel/" target="_blank"><font size="7">在新的窗口中打开链接</font></a> </body> </html>
