计算器简单的代码实现HTML

最新推荐文章于 2024-05-10 11:30:24 发布

xyhhhhhhhha

最新推荐文章于 2024-05-10 11:30:24 发布

阅读量708

点赞数

分类专栏：测试

原文链接：https://www.bilibili.com/video/BV1QC4y147Ey?p=7

版权

测试专栏收录该内容

6 篇文章 0 订阅

订阅专栏

html first test

文字

<font color='blue' size='70' face='隶书' ><b><I><u>hello world</b><I><u></font>（双标记）

在这里插入图片描述

图片

源可为本地路径或者网络资源

<img src='https://profile.csdnimg.cn/1/C/B/1_xyh_qianxiao'\>（单标记）

长宽属性
一般改一个就行，浏览器自动调宽度

<img src='https://profile.csdnimg.cn/1/C/B/1_xyh_qianxiao' width="500" height="500"\>

在这里插入图片描述

换行

<br/>（单标记）

段落

<p/>

超链接

target控制新生成的页面是新的页面还是原来的页面，新的页面：
target=’_black’
原来的页面：
target=’_self’

<a href='https://www.baidu.com/' target='_black'>百度</a>

表格

（1）用来便于存储数据
（2）用于页面布局，控制图片不乱跑

表格顶层标签行列如果和之前总设长宽不同，则是按比例 HTML5 不支持

cellspacing 属性。

cellspacing 属性规定单元之间的空间，以像素计。若不设置该属性，则其默认值为 cellspacing=“2”。（单元格和单元格之间的距离）

cellpadding 属性规定的是单元边沿与单元内容之间的空间。（单元格自身的距离，内容与边框的距离）

在这里插入代码片

计算器简单的代码

<!DOCTYPE html>
<html lang="en">
<!--头部信息用于定义配置啥的-->
<head>
    <meta charset="UTF-8">
    <title>first test</title>
</head>
<body>
    <!--table 标签-->
    <table width="450" height="120" border="0" bgcolor="gray" cellpadding="0" cellspacing="2" align="center" bordercolor="red">
        <tr>
            <td height="50">
                <table align="top" cellspacing="10">
                    <tr>
                        <td width="10" height="10" bgcolor="red" style="border-radius: 10pt" align="top"></td>
                        <td width="10" height="10" bgcolor="blue" style="border-radius: 10pt" align="top"></td>
                        <td width="10" height="10" bgcolor="green" style="border-radius: 10pt" align="top"></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td height="70">
                <table width="446" height="70" border="2" bgcolor="gray" cellpadding="0" cellspacing="2" align="center" bordercolor="red">
                    <tr>
                        <td bgcolor="white" cellspacing="0">
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
    <table width="450" height="350" border="0" bgcolor="gray" cellspacing="3" align="center">
        <!--底层铺一个背景色然后对表格上也有个北京社-->
        <tr>
            <td bgcolor="aqua" align="center" width="25%">AC</td>
            <td bgcolor="aqua" align="center" width="25%">+/-</td>
            <td bgcolor="aqua" align="center" width="25%">%</td>
            <td bgcolor="aqua" align="center" width="25%">/</td>
        </tr>
        <tr>
            <td bgcolor="aqua" align="center" width="25%">7</td>
            <td bgcolor="aqua" align="center" width="25%">8</td>
            <td bgcolor="aqua" align="center" width="25%">9</td>
            <td bgcolor="aqua" align="center" width="25%">x</td>
        </tr>
        <tr>
            <td bgcolor="aqua" align="center" width="25%">4</td>
            <td bgcolor="aqua" align="center" width="25%">5</td>
            <td bgcolor="aqua" align="center" width="25%">6</td>
            <td bgcolor="aqua" align="center" width="25%">-</td>
        </tr>
        <tr>
            <td bgcolor="aqua" align="center" width="25%">1</td>
            <td bgcolor="aqua" align="center" width="25%">2</td>
            <td bgcolor="aqua" align="center" width="25%">3</td>
            <td bgcolor="aqua" align="center" width="25%">+</td>
        </tr>
        <tr>
            <td bgcolor="aqua" align="center" width="25%">0</td>
            <td bgcolor="aqua" align="center" width="25%">保留</td>
            <td bgcolor="aqua" align="center" width="25%">.</td>
            <td bgcolor="aqua" align="center" width="25%">=</td>
        </tr>
    </table>
</body>
</html>

<script><!--java script代码-->

</script>