Question

在HTML5，CSS中制作这个计算器在语义上是什么标记？

enter image description here

Answer 1

CSS没有语义，只有HTML。

有很多方法可以为像计算器这样简单的东西编写标记。

使用input:button元素可行，或button元素或a[href="#some-action"]元素。您可以将div个元素与通过JavaScript添加的onclick处理程序一起使用，只要您提供了足够正确的信息，它就会在语义上有效。

我可以将计算器标记为：

<div class="calculator">
    <div class="output">
        <span>0</span>
    </div>
    <div class="input">
        <div class="memory">
            <a href="#memory-clear" class="memory-clear">MC</a>
            <a href="#memory-add" class="memory-add">M+</a>
            <a href="#memory-subtract" class="memory-subtract">M-</a>
            <a href="#memory-recall" class="memory-recall">MR</a>
        </div>
        <div class="operators">
            <a href="#cancel" class="cancel">C</a>
            <a href="#negate" class="negate">&plusmn;</a>
            <a href="#divide" class="divide">&divide;</a>
            <a href="#multiply" class="multiply">&times;</a>
            <a href="#subtract" class="subtract">&minus;</a>
            <a href="#add" class="add">+</a>
            <a href="#equals" class="equals">=</a>
        </div>
        <div class="numbers">
            <a href="#num-9" class="number number-9">9</a>
            <a href="#num-8" class="number number-8">8</a>
            <a href="#num-7" class="number number-7">7</a>
            <a href="#num-6" class="number number-6">6</a>
            <a href="#num-5" class="number number-5">5</a>
            <a href="#num-4" class="number number-4">4</a>
            <a href="#num-3" class="number number-3">3</a>
            <a href="#num-2" class="number number-2">2</a>
            <a href="#num-1" class="number number-1">1</a>
            <a href="#num-0" class="number number-0">0</a>
            <a href="#decimal" class="decimal">.</a>
        </div>
    </div>
</div>

Answer 2

说实话，我认为这不重要，因为你没有标记文档，而是一个功能丰富的应用程序，无论如何它将完全依赖于JavaScript。

虽然如果被迫选择，我会选择<input type="button" />代替<input type="submit" />，因为您在技术上并未提交表单。或者也许使用<button></button>元素。您的号码显示为<input type="text" />，因为我鼓励通过键盘/键盘直接输入。您可以使用<input type="number" />但是某些浏览器（例如Opera）会在输入右侧渲染向上/向下箭头，这在计算器上看起来很有趣，不确定这些是否可以被设置为样式，因此请使用type =“text”用JavaScript来拒绝非数字字符。

总而言之，我不会过分迷恋它，HTML5对于新元素而言没有任何特定的东西。

Answer 3

每个人都已经提到有多种有效方式来做这件事。

这是我的旋转。

<div class="calc">
    <div class="display">0</div>

    <div class="btn">MC</div>
    <div class="btn">M+</div>
    <div class="btn">M-</div>
    <div class="btn">MR</div>

    <div class="btn">C</div>
    <div class="btn">±</div>
    <div class="btn">÷</div>
    <div class="btn">x</div>

    <div class="btn">7</div>
    <div class="btn">8</div>
    <div class="btn">9</div>
    <div class="btn">-</div>

    <div class="btn">4</div>
    <div class="btn">5</div>
    <div class="btn">6</div>
    <div class="btn">+</div>

    <div class="btn">7</div>
    <div class="btn">8</div>
    <div class="btn">9</div>
    <div class="btn">-</div>

    <div class="btn">1</div>
    <div class="btn">2</div>
    <div class="btn">3</div>
    <div class="btn tall">=</div>

    <div class="btn wide">0</div>
    <div class="btn">.</div>
</div>

CSS

.calc {
  display: inline-block;
  border: 6px solid #009;
  width: 128px;
  padding: 12px 0px 2px 0px;
  background-color: #00a;
}
.display {
 width: 124px;
 background-color: #666;
 text-align: right;
}
.display:before {
 position: absolute;
 top: 7px;
 left: 7px;
 content: 'rlemon calc';
 font-size: 50%;
 color: #fff;
}
.display, .btn {
 height: 20px;
 margin: 1px;
 padding: 3px 1px;
 -webkit-border-radius: 4px;
 -moz-border-radius: 4px;
 border-radius: 4px;   
}
.btn {
 float: left;
 width: 28px;
 text-align: center;
 background-color: #999;
}
.wide {
 width: 60px;
}
.tall {
 height: 48px;
 float: right;
}

demo here CSS可能需要一些优化

在HTML5中使用这个计算器，在语义上哪个标记是正确的？

3 个答案: