java前端学习笔记（第一天）

最新推荐文章于 2024-04-30 23:00:09 发布

ACE1125

最新推荐文章于 2024-04-30 23:00:09 发布

阅读量173

点赞数 2

分类专栏： java 文章标签： HTML 简易计算器

本文链接：https://blog.csdn.net/h_h_1122/article/details/96368388

版权

java 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何使用HTML创建表格，并展示了如何构建一个简单的计算器。涵盖了表格的元素和属性，如<table>, <tr>, <td>, <caption>, <thead>, <tbody>, <tfoot>，以及样式设置，包括边框、宽度、高度、对齐方式等。同时，给出了一个实际的HTML代码示例，用于创建一个带有加减乘除和清除功能的计算器。" 90299672,8420188,Oracle数据库创建并填充日历表,"['数据库管理', 'Oracle']

摘要由CSDN通过智能技术生成

使用表格
定义表格:<table></table>
创建表行:使用成对的<tr></tr>
创建单元格:<td></td>
表格的常用属性
1.<table>元素
-border 边框，-width/height,align 水平制衡
-cellspacing:单元格之间的间距
2.<tr>元素
-align/valign 属性规定表格行中内容的垂直对齐方式
3.<td>元素

-align/valign/width/height/colspan/rowspan
表格标题<caption>居中，必须紧随表格标签之后
行分组
表格可以划分为3个部分:表头，表主体，表尾
表头行分组:<thead></thead>
表主体行分组:<tbody></tbody>
表尾行分组:<tfoot></tfoot>

表格的嵌套
在单元格中放置另一个表
即<td>元素中再包含<table>

样式按键背景色

第一天学习的整体代码

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title>简易计算器</title>
   </head>
   <style>
       table {
           width: 400px;
           height: 600px;
       }

       #btn {
           width: 100px;
           height: 100px;
           font-size: 40px;
       }

       .color {
           background-color: gold;
       }

       .color1 {
           background-color: yellow;
       }
   </style>

   <body>
       <table border="1px" cellspacing="0" align="center">
           <caption>浩浩牌计算器</caption>
           <tr>
               <td colspan="4"><input type="text" style="width: 410px;height: 100px;background-color: #7CFC00;" align-text="center" /></td>
           </tr>
           <tr>
               <td><input type="button" name="btn" id="btn" value="C" class="color" /></td>
               <td><input type="button" name="btn" id="btn" value="<--" class="color" /></td>
               <td><input type="button" name="btn" id="btn" value="÷" class="color1" /></td>
               <td><input type="button" name="btn" id="btn" value="×" class="color1" /></td>
           </tr>
           <tr>
               <td><input type="button" name="btn" id="btn" value="9" /></td>
               <td><input type="button" name="btn" id="btn" value="8" /></td>
               <td><input type="button" name="btn" id="btn" value="7" /></td>
               <td><input type="button" name="btn" id="btn" value="+" class="color1" /></td>
           </tr>
           <tr>
               <td><input type="button" name="btn" id="btn" value="6" /></td>
               <td><input type="button" name="btn" id="btn" value="5" /></td>
               <td><input type="button" name="btn" id="btn" value="4" /></td>
               <td><input type="button" name="btn" id="btn" value="-" class="color1" /></td>
           </tr>
           <tr>
               <td><input type="button" name="btn" id="btn" value="3" /></td>
               <td><input type="button" name="btn" id="btn" value="2" /></td>
               <td><input type="button" name="btn" id="btn" value="1" /></td>
               <td rowspan="2"><input type="button" name="btn" id="btn" value="=" style="width: 100px;height: 200px; background-color: red;" /></td>
           </tr>
           <tr>
               <td><input type="button" name="btn" id="btn" value="√" class="color" /></td>
               <td><input type="button" name="btn" id="btn" value="0" /></td>
               <td><input type="button" name="btn" id="btn" value="." class="color" /></td>