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

本文介绍了HTML的基础标签使用方法,包括字体颜色、大小设置、超链接、图片展示及表格布局等,并展示了表单中常见元素的应用,如文本输入、密码输入、复选框、单选按钮等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

效果如下


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值