前端练习——简单的四则运算计算器

文章目录

• 1. 页面布局
• 表格学习
• 按钮属性

通过前置的HTML、CSS、JS的简单学习，大概了解了这三者简单的使用方式。现在来写一个简单的四则运算计算器。
如果顺利的话，预期下一次完成：带清零、清除、连续计算和计算历史的计算器；科学计算器。

1. 页面布局

表格学习

预期的输入栏样式：
参考html标签列表，参考table标签的相关用法：

<table 表格属性，如宽度、空白间距>
	<tr> 第1行
		<th>行内第1格</th>
		<th>行内第2格</th>
	</tr>
</table>

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

元素	作用
tr	定义表格中的行
th	定义表格中的表头单元格
td	定义表格中的单元
caption	定义表格标题
col	定义表格中一个或多个列的属性值
colgroup	定义表格中供格式化的列组
thead	定义表格中的表头内容
tfoot	定义表格中的表注内容（脚注）
tbody	定义表格中的主体内容

这里将table标签的属性设置为：

<table border="1" width="180" cellspacing="10">

完成效果如下图，完整代码查看：

然后还需要一个显示栏

按钮属性

来源：CSDN

作者：Wby_Nju

链接：https://blog.csdn.net/Wby_Nju/article/details/104098901