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

HTML系列（3）基本的HTML标签（二）的更多相关文章

  1. 第一篇-Html标签中head标签，body标签中input系列，textarea和select标签

    第十四周课程(1-12章节) HTML 裸体 CSS   穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...

  2. ECMall2.x模板制作入门系列之2（模板标签/语法）

    ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...

  3. 《手把手教你》系列技巧篇（三十二）-java+ selenium自动化测试-select 下拉框（详解教程）

    1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...

  4. (C#)Windows Shell 编程系列4 - 上下文菜单(iContextMenu)（二）嵌入菜单和执行命令

    原文(C#)Windows Shell 编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:( ...

  5. HTML 5的革新——语义化标签(二)

    HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...

  6. HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)

    HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...

  7. 《手把手教你》系列技巧篇（五十二）-java+ selenium自动化测试-处理面包屑（详细教程）

    1.简介 面包屑(Breadcrumb),又称面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了 ...

  8. struts2官方 中文教程 系列三：使用struts2 标签 tag

    避免被爬,先贴上本帖地址:struts2 官方系列教程一:使用struts2 标签 tag http://www.cnblogs.com/linghaoxinpian/p/6901316.html 本 ...

  9. 初学HTML 常见的标签(二) 列表标签

    上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> & ...

  10. Struts2(十)OGNL标签二与Struts2标签

    一.Struts2标签的优势 标签库简化了用户对标签的使用 结合OGNL使用,对于集合.对象的访问功能非常强大 提供可扩展的主题.模板支持.极大简化了视图页面的编写 不依赖任何表现层技术 Struts ...

随机推荐

  1. OC-1-面向对象

    课程要点: C语言是一种面向过程的语言,OC是一种面向对象的语言 类与对象的关联 如何在xcode中创建一个类 如何在类中标记该类事物的属性和动作 C语言是一种面向过程的语言,OC是一种面向对象的语言 ...

  2. OpenAPI初体验

    问题的一开始源于客户和服务部门抱怨我的REST API文档写得不好,然后又了解到 django rest framework 利用 coreapi 能自动生成文档,再就是看到 swagger.io 上 ...

  3. Anaconda+Tensorflow环境安装与配置（转载）

    Anaconda+Tensorflow环境安装与配置 转载请注明出处:http://www.cnblogs.com/willnote/p/6746499.html Anaconda安装 在清华大学 T ...

  4. 巧用批处理cmd快速切换IP地址

    如果你的笔记本经常在不同的地方使用,有些地方需要自动获取IP,而有些地方需要配置固定IP,每换一个地方都需要重新配置一遍,是不是感觉很麻烦呢? 下面介绍一种通过建立批处理文件来快速切换IP的方法: s ...

  5. Linux Linux程序练习三

    /* index1 = 45 index2 = 36 index3 = 231 index4 = 43 index5 = 100 index6 = 123 index7 = 51 * * 通过读取读取 ...

  6. oracle数据库中VARCHAR2(50 CHAR) 和VARCHAR2(50) 有啥区别？

    VARCHAR2(50 char)这种类型的字段最多放50个字符,不够50个用空格填充:而VARCHAR2(50)最大允许存放50个字符,但是不足50个也不用空格填充.varchar2是变长字符串,与 ...

  7. 从获取点击事件根元素谈 target和currentTarget

    事情由来: 写了一个点击事件,想获取根元素,想的直接用current就行了,因为之前就是这么用的,但是之前的点击元素是没子元素的,current就是根元素,但是这次点击元素内部有子元素,current ...

  8. Webkit内核探究【2】——css简介

    注:[转载请注明文章来源.保持原样] 出处:http://www.cnblogs.com/jyli/archive/2010/01/31/1660364.html 作者:李嘉昱 CSS在Webkit中 ...

  9. veridata实验举例（4）验证veridata查找出updata、delete操作导致的不同步现象

    veridata实验举例(4)验证veridata查找出updata.delete操作导致的不同步现象 续接:<veridata实验举例(3)验证veridata查找出insert操作导致的不同 ...

  10. linux用户与组管理

    普通用户的管理 用户管理的基本任务包括添加新用户.删除用户.修改用户属性以及对现有用户的访问参数进行设置.与密切 相关的文件包含/etc/passwd./etc/shadow以及/home目录下的文件 ...