HTML系列（3）基本的HTML标签（二）
本节继续介绍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帐号： <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>
HTML系列（3）基本的HTML标签（二）的更多相关文章
- 第一篇-Html标签中head标签，body标签中input系列，textarea和select标签
第十四周课程(1-12章节) HTML 裸体 CSS 穿华丽衣服 Javascript 动起来 一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...
- ECMall2.x模板制作入门系列之2（模板标签/语法）
ECMall2.x模板制作入门系列之2(模板标签/语法) 今天给大家带来一个模板语法的教程.希望能为ECMall模板制作者提供一份参考资料.如有问题.建议和意见,欢迎提出. 在ECMall模板中,用& ...
- 《手把手教你》系列技巧篇（三十二）-java+ selenium自动化测试-select 下拉框（详解教程）
1.简介 在实际自动化测试过程中,我们也避免不了会遇到下拉选择的测试,因此宏哥在这里直接分享和介绍一下,希望小伙伴或者童鞋们在以后工作中遇到可以有所帮助. 2.select 下拉框 2.1Select ...
- (C#)Windows Shell 编程系列4 - 上下文菜单(iContextMenu)（二）嵌入菜单和执行命令
原文(C#)Windows Shell 编程系列4 - 上下文菜单(iContextMenu)(二)嵌入菜单和执行命令 (本系列文章由柠檬的(lc_mtt)原创,转载请注明出处,谢谢-) 接上一节:( ...
- HTML 5的革新——语义化标签(二)
HTML 5的革新之一:语义化标签二文本元素标签.分组元素标签. HTML 5的革新——语义化标签(一)中介绍了一些HTML5新加的一些节元素,一张页面中结构元素构成网页大体,但是也需要其他内容来填充 ...
- HTML 5的革新——语义化标签(一)HTML 5的革新——语义化标签(二)
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- 《手把手教你》系列技巧篇（五十二）-java+ selenium自动化测试-处理面包屑（详细教程）
1.简介 面包屑(Breadcrumb),又称面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特",当汉赛尔和格莱特穿过森林时,不小心迷路了 ...
- struts2官方 中文教程 系列三：使用struts2 标签 tag
避免被爬,先贴上本帖地址:struts2 官方系列教程一:使用struts2 标签 tag http://www.cnblogs.com/linghaoxinpian/p/6901316.html 本 ...
- 初学HTML 常见的标签(二) 列表标签
上次介绍了一些简单的文本标签设计, 这篇介绍列表类标签, 通过列表能写出很好看的, 多元化的网络页面. ul-li 列表标签 <ul> <li>列表1</li> & ...
- Struts2(十)OGNL标签二与Struts2标签
一.Struts2标签的优势 标签库简化了用户对标签的使用 结合OGNL使用,对于集合.对象的访问功能非常强大 提供可扩展的主题.模板支持.极大简化了视图页面的编写 不依赖任何表现层技术 Struts ...
随机推荐
- hive 添加UDF(user define function) hive的insert语句
add JAR /home/hadoop/study/study2/utf.jar; package my.bigdata.udf; import org.apache.hadoop.hive.ql. ...
- sublime和webstorm安装zencoding
[webstorm] 1.下载模板,地址为http://code.google.com/p/zen-coding/downloads/list,下载以下文件 WebIDE and IntelliJ I ...
- 百度网盘不能绑定QQ
一定要等!!!进度条!! 等全部加载完再点就可以了. 不然的话点关联账号的话会直接跳回个人信息页面. over. 百度账号(百度网盘)绑定QQ账号的页面为什么打不开 总会跳转到个人信息界面,和没点一样 ...
- iOS 实现从后台切换到前台-复制分享宝贝内容，打开淘宝APP，自动弹出宝贝提示信息
- (void)applicationDidBecomeActive:(UIApplication *)application { NSLog(@"\n ===> 程序重新激活 !&q ...
- Java_cpu飙升排查
1.现象 top 2.根据上图找到进程ID=28790 3.查找28790下线占用cpu高的线程ID -o THREAD,tid,time 4.根据上图发现线程ID=29161,换算成16进制 pri ...
- jconsole监控JVM
1.查找catalina.sh,使用tomcat中的catalina.sh 目录地址/opt/apache-tomcat-7.0.82/bin 2.配置JAVA_OPTS JAVA_OPTS=&quo ...
- 【BZOJ5047】空间传送装置 最短路
[BZOJ5047]空间传送装置 Description 太空中一共有n座星球,它们之间可以通过空间传送装置进行转移.空间传送装置分为m种,第i种装置可以用4个参数a_i,b_i,c_i,d_i来描述 ...
- hihoCoder 1549 或运算和
#1549 : 或运算和 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定N个数A1...AN (0 <= Ai < 220) 和一个正整数K,我们用An ...
- discuz X3 门户定制
为了实现门户的定制,在本机全新的安装了discuzX3,现在只想使用其门户功能(即文章CMS管理).但是论坛功能是不能关闭的可能论坛是discuz的核心功能吧. 全新安装的discuzx3,主导航上只 ...
- PHP定界符{}的作用
说明: PHP解析一个字符串为"Hello,$World"时会自动解析$World. {}是方便让PHP更快的查找,它告诉PHP这里面就是变量,不用再判断是否是变量了. 例子: $ ...