HTML案例

  • Post author:
  • Post category:其他




案例1 标题和超链接

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>    
        <title>第一个HTML文档</title>
        <!-- 设置页面中文的显示编码-->        
        <meta charset="UTF-8"/>
        
        
    </head>
    <body>
         <center>
             <h1>Java 语言基础</h1>
         </center>
         <p>1. 个人所得税计算器</p>
         <ul>
             <li type="circle">
                 <a href="http://www.baidu.com" target="_self">问题</a>
             </li>
             <li type="circle">
                 <a href="http://www.baidu.com" target="_self">方案</a>
             </li>
             <li type="circle">
                 <a href="http://www.baidu.com" target="_self">实现</a>
             </li>
         </ul>
         <p>2. 命令解析器</p>
         <ul>
             <li type="circle">问题</li>
             <li type="circle">方案</li>
             <li type="circle">实现</li>
         </ul>
         <h1>1 个人所得税计算器</h1>
         <h2>1.1 问题</h2>
         <p>计算个人所得税的缴纳情况。用户从控制台输入税前工资的金额,系统根据用户输入的工资金额计算应缴纳的税额。</p>
         <h2>1.2 方案</h2>
         <p>使用if语句来实现该程序。</p>
         <h2>1.3 实现</h2>
         <p>使用记事本建立一个名称为 IncomeTax.java 的文本文件。定义一个类,代码如下:
            <br/>
            public class IncomeTax<br/>
            {
                <br/>
                <br/>
                <br/>
            }

         </p>
</html>



案例2 表格

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>    
        <title>第一个HTML文档</title>
        <!-- 设置页面中文的显示编码-->        
        <meta charset="UTF-8"/>
        
        
    </head>
    <body>
         <p>个人所得税的计算方式如表1-1所示:</p>
         <table align="center" border="1" cellspacing="1" width="900" height="300">
              <caption>
              表1-1
              </caption>
              <tr>
                  <td align="center">全月应缴纳所得额</td>
                  <td align="center">税率</td>
                  <td align="center">速算扣除数</td>
                  
              </tr>

              <tr>
                  <td>全月应缴纳税所得额<1500</td>
                  <td>3%</td>
                  <td>0</td>
                  
              </tr>

              <tr>
                  <td>1500<=全月应缴纳税所得额<4500</td>
                  <td>10%</td>
                  <td>105</td>
              </tr>
              <tr>
                  <td rowspan="1" colspan="3">
                    <marquee direction="left">......</marquee>
                  </td>
              </tr>
              <tr>
                  <td rowspan="1" colspan="3">计算公式为:应纳税额=全月应纳税所得额*适用税率-速算扣除数</td>
              </tr>
              
          </table>
    </body>
</html>



案例3 增加管理员

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>基础表单</title>
	<!-- 设置页面中文的显示编码-->        
    <meta charset="UTF-8"/>
</head>
<body>
	<h1>增加管理员</h1>
	<div>
		<form action="" method="post">
			<p>姓名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" name="name"> &nbsp;10个字符以内
			</p>
			<p>密码:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="password" name="pwd"> &nbsp;10个字符以内
			</p>
			<p>性别:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="radio" name="gender"/>女士&nbsp;&nbsp;
			<input type="radio" name="gender"/>男士
            </p>
            <p>角色:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <input type="checkbox" name="manage" value="Super" id="01" />
              <label for="01">超级管理员</label>
              <input type="checkbox" name="manage" value="Master" id="02" />
              <label for="02">账单管理员</label>
               至少选择一个角色
            </p>
            <p>头像:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            	<input type="file" name="pub_file" />
            </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            	<input type="submit" name="submit" value="保存"/>
            <input type="reset" name="input" value="重填"/>
            </p>
              
              
		</form>
	</div>
</body>
</html>



案例4 修改个人信息

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>基础表单</title>
	<!-- 设置页面中文的显示编码-->        
    <meta charset="UTF-8"/>
</head>
<body>
	<h1>修改个人信息</h1>
	<div>
		<form action="" method="post">
			<p>姓名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" name="name" value="marry"> </p>
			
			<p>性别:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="radio" name="gender" checked="checked" /> 女士
			<input type="radio" name="gender"/> 男士
		     </p>
         
            <p>学历:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <select name="xueli">
            	<option value="其他" selected="selected">其他</option>
                <option value="GZ">高中</option>
                <option value="DX">本科</option>
                <option value="YJS">研究生</option>
              </select>
            </p>
            <p>个人描述:<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            	<textarea rows="8" cols="30"></textarea>
            </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            	<input type="checkbox" name="null" value="NO" id="03" />
            <label for="03">不要公开我的个人信息</label>
            </p>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="submit" name="submit" value="保存"/>
            <input type="reset" name="input" value="重填"/>   
              
		</form>
	</div>


</body>
</html>



版权声明:本文为gezongbo原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。