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

公告

View Post

本节继续介绍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="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>

(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帐号：&nbsp;&nbsp;<input type="text" size="25";name="用户名" value=""/></span><br/><br/>
  <span >QQ密码：&nbsp;&nbsp;<input type="text" size="25";name="密码" value="" />&nbsp;忘记密码?</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>

posted on 2016-07-26 23:56 MenAngel 阅读(371) 评论(0) 收藏举报

刷新页面返回顶部