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

来源：互联网发布：值乎下载编辑：程序博客网时间：2024/04/26 12:22

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>

效果如下