您的位置：首页 > Web前端 > HTML

HTML系列（3）基本的HTML标签（二）

2016-07-26 23:56 495 查看
[b] 本节继续介绍HTML的常用标签。[/b]

[b] (1)input标签之文本域(text和textarea)、密码域(password):[/b]

<!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>




[b] (2)fieldset与checkbox:[/b]

<fieldset style="width: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>




[b] (3)form表单与radio单选按钮:[/b]

<!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>




[b] (4)select标签:[/b]

<!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>




[b] (5)button与div和span标签:[/b]

<!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>




[b] (6)各种自带字体标签:[/b]

<!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>




[b] (7)a标签的其他用法和font标签的face属性:[/b]

<!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>




[b] (8)marquee标签:(动态的)[/b]

<!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>




[b] (9)frameset标签:[/b]

<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>






[b] (10)body标签:(body设置背景和a标签的target属性)[/b]

<!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>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航