HTML简单实例加表单的显示效果

HTML可以说是一种十分简单的标记语言,但是对于Web开发还是必不可少的,所以对HTML的标记进行适当的了解

还是十分有必要的。下面我们来演示一下基本的HTML效果和一些简单的标签,以及在表单界面的各种提交方式。

首先是HTML的常用简单标签。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>hello.html</title> </head> <body> <font color="red" size="7">Hello World</font> <b>第一行文字</b> <p><font color="blue" size="4">第一行文字</font></p> <br/>*********字符实体案例************<br/> <font size="6">© £ ®</font> <br/>***********超链接实例************<br/> <!-- target的_blank是表示打开一个新页面 --> <a href="/HTML/test/a.html" target="_blank">老鼠爱大米</a> <br/>**********图片元素*********<br/> <img alt="一只猫" src="/HTML/img/tomcat.gif" width="170px" border="1"/> <br/>*********表格**************<br/> <!-- cellpadding填充格子里面的大小 cellspaing表示两列间距大小 --> <table border="1" width="170" align="center" bgcolor="yellow" bordercolor="red" cellpadding="3" c> <tr align="center"> <td>1</td> <td>2</td> <td>3</td></tr> <tr align="center"> <td>4</td> <td>5</td> <td>6</td></tr> <tr align="center"> <td>7</td> <td>8</td> <td>9</td></tr> </table> </body> </html>
效果如下



下面是表单界面的显示,代码如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>提交选项</title> </head> <body> 名字:<input type="text" name="name"/><br/> 密码:<input type="password" name="password"/> <br/>************复选框***********<br/> <input type="checkbox" name="v1">西瓜<br/> <input type="checkbox" name="v1">苹果<br/> <br/>************单选框***********<br/> <input type="radio" name="sex">男<br/> <input type="radio" name="sex">女<br/> <br/>************隐藏域***********<br/> <input type="hidden" value="123" name="hiden"/> <br/>************下拉框***********<br/> <select name="place"> <option value="beijing">北京</option> <option value="beijing">天津</option> <option value="beijing">上海</option> </select> <br/>************文本框***********<br/> <textarea rows="10" cols="10" name="text"> 在这里留言 </textarea> <br/>************选择上传文件***********<br/> <input type="file" name="file"> </body> </html>
效果如下


转载于:https://www.cnblogs.com/sp2012/archive/2012/02/27/2465737.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/576593.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习笔记(十二)——马尔科夫模型

马尔科夫模型是一种概率图模型&#xff0c;它描述了一类重要的随机过程(随机过程又称为随机函数&#xff0c;是随时间而随机变化的过程)。我们常常需要考察一个随机变量序列&#xff0c;这些随机变量序列并不是相互独立的&#xff0c;每个随机变量的值都依赖于这个序列前边的状…

用Java代码在ElasticSearch中索引PDF文件?

以下是我的代码&#xff1a; InputStream inputStream new FileInputStream(new File("mypdf.pdf"));try {byte[] fileByteStream IOUtils.toByteArray(inputStream );String base64String new String(Base64.getEncoder().encodeToString(fileByteStream).getBy…

美国影视演员协会选择了Windows Azure

娱乐行业的主要组织之一的美国影视演员协会&#xff08;SAG&#xff09;最近因云计算的需要选择Windows Azure解决方案。美国影视演员协会将他们的网站从基于Linux的服务器迁移到支持他们的最大年度事件——美国演员工会奖的Windows Azure上。 每年的年度颁奖典礼的到来标志着一…

最优化学习笔记(十)——对偶线性规划

一、对偶问题 每个线性规划问题都有一个与之对应的对偶问题。对偶问题是以原问题的约束条件和目标函数为基础构造而来的。对偶问题也是一个线性规划问题&#xff0c;因此可以采用单纯形法&#xff08;有关单纯形法会在以后的笔记中补充&#xff09;求解。对偶问题的最优解也可以…

elasticsearch基本查询二(英文分词)term和terms查询

term和terms查询(查找zhaoliu这个人的信息) term query会去倒排索弓|中寻找确切的term,它并不知道分词器的存在。这种查询适合keyword、numeric. date. term:查询某个字段里含有某个关键词的文档 GET /lib3/user/_search/ { "query":{ "term": {interests&…

Iphone开发之音频101(part 2):转换和录音

iPhone开发之音频101(Part 2)&#xff1a;转换和录音 译者&#xff1a;大侠自来也 免责申明&#xff08;必读&#xff01;&#xff09;&#xff1a;本博客提供的所有教程的翻译原稿均来自于互联网&#xff0c;仅供学习交流之用&#xff0c;切勿进行商业传播。同时&#xff0c;转…

机器学习笔记(十三)——隐马尔科夫模型

一、隐马尔科夫模型 在马尔科夫模型中&#xff0c;每一个状态代表了一个可以观察的事件&#xff0c;所以&#xff0c;马尔科夫模型有时称为可视马尔科夫模型&#xff08;visible Markov model&#xff0c;VMM&#xff09;&#xff0c;这在某种程度上限制了模型的适应性。在隐马…

elasticsearch基本查询三(英文分词)match查询

#match查询 #match query知道分词器的存在&#xff0c;会对filed进行分词操作, 然后再查询 GET /ib3/user/_search { "query":{ "match":{ "name": "zhaoliu" }} } GET /lib3/user/_search { "query":{ "match"…

solr 3.5 配置及应用(二)

在 solr 3.5 配置及应用(一) 讲过一了 solr 3.5的详细配置&#xff0c;本节我们讲利用solr 的客户端调用solr的应用了&#xff01; 一、利用SolrJ操作solr API 使用SolrJ操作Solr会比利用httpClient来操作Solr要简单。SolrJ是封装了httpClient方法&#xff0c;来操作solr的API的…

elasticsearch控制返回字段查询三(英文分词)match查询

#_source指定查询返回的字段信息 #_source指定查询返回的字段信息 GET /lib3/user/_search {"from":0, "size": 2, "_source": ["address" , "name"] ,"query": {"match": {"interests": &…

通过日志恢复MSSQL数据例子

这段时间看了关于在SQL server 中通过日志和时间点来恢复数据。也看了一些网上的例子&#xff0c;看如何通过日志来恢复数据。 前提条件&#xff1a; 数据库的故障恢复改为非简单模式&#xff0c;去掉自动关闭和自动收缩两个选项 如果是简单模式&#xff1a; 类似下面的语…

最优化学习笔记(十一)——对偶问题的例子

某线性规划问题为&#xff1a; mincTxst.Ax≤b\min \boldsymbol{c}^T\boldsymbol{x} \\ st. \boldsymbol{Ax} \le \boldsymbol{b}这个例子和上节中的表2非对称形式的对偶关系比较接近&#xff0c;将上式改写为&#xff1a; maxxT(−c)st.xTAT≤bT\max \boldsymbol{x^T(-c)}\\ …

ElasticSearch查询返回信息根据字段排序(英文检索)

根据年龄降序排序 #排序 GET /lib3/user/_search {"query": {"match_all": {}},"sort":[{"age": {"order" :"desc"}}] } {"took" : 1,"timed_out" : false,"_shards" : {"t…

机器学习笔记(十四)——HMM估计问题和前向后向算法

一、隐马尔科夫链的第一个基本问题 估计问题&#xff1a;给定一个观察序列OO1O2…OT和模型u(A,B,π),如何快速地计算出给定模型u情况下,观察序列O的概率&#xff0c; 即P(O|u)? 二、求解观察序列的概率 其实&#xff0c;求解这个问题就是一个解码问题。 对于任意的状态序列Q…

windows中架设基于Apache的svn服务器

1.安装apache及svn的windows版我安装的版本是:httpd-2.2.22-win32-x86-openssl-0.9.8t.msi 和svn-win32-1.5.0.zipsvn是解压就可以了2. 解svn安装目录下\bin下的mod_authz_svn.so、mod_dav_svn.so拷贝到apache/modules下3.将 svn安装目录下\bin下的libdb44.dll拷贝到apache/bin…

ElasticSearch通配符 * 查询(英文检索)

#如果你要查询的字段信息记得不太清楚, 我们也可以使用通配符 * GET /lib3/user/_search {"from":0, "size": 2,"_source": {"includes": "addr*","excludes": ["name" , "bir*"]},"…

sqlserver agent不能启动

我启动了 event log 服务 &#xff0c;就好了&#xff0c;不知什么原因转载于:https://www.cnblogs.com/laogao/archive/2012/03/11/2390794.html

机器学习笔记(十五)——HMM序列问题和维特比算法

一、引言 这篇blog主要讲序列问题和其解法——维特比算法。 二、HMM中的第二个基本问题 序列问题&#xff1a;给定一个观察序列OO1O2…OT和模型u(A,B,π)&#xff0c;如何快速有效地选择在一定意义下”最优”的状态序列Qq1q2…qT,使得该状态序列“最好地解释”观察序列&#…

ElasticSearch范围查询(英文检索)

#根据日期范围查询 #范围查询 GET /lib3/user/_search {"query": {"range": {"birthday": {"from": "1990-10-10","to": "2020-03-15"}}} }{"took" : 24,"timed_out" : false,&qu…

(转)CDN是如何工作的?

转载自&#xff1a;CDN是如何工作的&#xff1f; CDN是互联网中使用较频繁的一种技术。你也许常听人说&#xff1a;“我们的网站使用了CDN技术”&#xff0c;但可能他们对CDN的了解并不多&#xff0c;也许只局限于--用了以后网站访问速度会变快。 其实&#xff0c;CDN的原理非常…