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

BradyZhu

浏览: 247848 次
性别:
来自: 上海

最近访客更多访客>>

yhtppp

Sonicery_D

mf1389004071

liuxiao723846

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2016-01 ( 34)
2015-12 ( 14)
2015-11 ( 14)
更多存档...

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>

效果如下