Question

如何用HTML表示歌词和相应的翻译？

只是一个例子：

Может, поздно, может, слишком рано,        Maybe, it's too late or, maybe, early, 
И о чем не думал много лет,                It has not occurred to me for years,
Походить я стал на Дон-Жуана,              I resemble now Don Juan, really,
Как заправский ветреный поэт.              Like a proper flippant man of verse.

如何以SEO友好和语义的方式表示它？

P.S。我真的很讨厌桌子的解决方案而且不想把原始线条和翻译成一个容器（我认为这对于googgles来说是丑陋和糟糕的）。

Answer 1

我会完全放弃英文翻译。我想大多数音乐听起来更令人印象深刻，如果你实际上无法理解歌手所说的内容，而你的示例歌词似乎也证实了这一点。：）

除了所有的严肃性，我实际上只是将原始歌词和翻译用不同的字体替换，如下：

Je ne parle pas d'unbâtiment

[我不会说建筑物]

请不要拍我

[请不要开枪]

Answer 2

你使用div。您将每组歌词放在div标签中，然后使用一些CSS格式化彼此相邻的两个div，例如：

.lyrics {
 float: left;
}

还有许多其他CSS技术可以做同样的事情。

Answer 3

如上所述，使用带有CSS的div来实现你想要的特定效果，没有表。这是一个a pretty comprehensive overview of CSS positioning的页面，可以帮助您入门。
作为您可能使用的示例，请尝试以下操作：

<html>
<head>
<style type="text/css">
.lyrics {
   width: 200px;
   height: 100px;
   border: 1px solid black;
}
.original {
  float: left;
}
.translation {
  float: right;
}
</style>
</head>
<body>
<div class="lyrics original">(lyrics here)</div>
<div class="lyrics translation">(translation here)</div>
</body>
</html>

Answer 4

嗯。从语义上讲，我可以看到这些是列表或段落的论据。

我想我会选择这样的事情（为代码膨胀道歉）：

<style>
.song
{
  background: #444;
  overflow: auto;
  zoom: 1.0;
  padding-bottom: 1em;
  border: 1px solid #000;
}

.song .lyrics
{
  float: left;
  color: #ddd;
  margin: 1em;
  width: 20em;
}

.song #russian.lyrics { background: #009; }

.song #english.lyrics { background: #090; }   

.song .lyrics p { margin: .5em .2em; }
</style>

<div class="song">
    <div id="russian" class="lyrics">
        <p>Может, поздно, может, слишком рано,</p> 
        <p>И о чем не думал много лет,</p>
        <p>Походить я стал на Дон-Жуана,</p>
        <p>Как заправский ветреный поэт.</p>
    </div>
    <div id="english" class="lyrics">
        <p>Maybe, it's too late or, maybe, early,</p>
        <p>It has not occurred to me for years,</p>
        <p>I resemble now Don Juan, really,</p>
        <p>Like a proper flippant man of verse.</p>
     </div>
</div>

Answer 5

我实际上认为桌子在这里最有意义。

html中的歌词翻译

5 个答案: