我有一个草图，我想把它放在我的网站上，我也打算在某些时候写一个短片，我也想免费提供。
我正在尝试找出用HTML表示这种方法的最佳方法。我基本上需要两列 - 一个用于角色讲话，一个用于文本。每个演讲显然都需要与演讲者对话。换句话说，这样的事情：
Jeff This sure is a nice website we've got now.
Joel It certainly is. By the way, working at FogCreek rocks.
Jeff Of course it does. Have you played Rock Band yet? It's
a lot of fun.
（当然它比Lorem存有好...）
我知道如何使用HTML表格（每个语句有一个表格行），但这看起来非常难看，而且每个人似乎都热衷于使用CSS来表示非表格数据。我无法看到这对表格数据有多重要 - 我之前使用的“行”和“列”与布局而不是基本数据有关。
那么，有什么想法吗？我认为我见过的大多数脚本网站（不是很多，不可否认）或者像我上面的例子一样使用<pre>，或者不打算尝试保持正常的脚本格式，而只是在每个段落前加上说话者的名字。 （请参阅播客维基以获取此样式的示例。）我甚至无法确定我应该用什么HTML元素来表示这一点，坦率地说 - 一个字典定义列表，其中发言人为术语，语音为定义可能是我想到的最接近的，但这感觉就像是虐待。
我是第二个异端邪说:-)
在使用表之前总是考虑使用CSS - 但通常表最适合。在这种情况下看起来像它。
唯一的额外考虑因素是可访问性。我听说表格使得文本阅读器软件更难以处理表格，但我不明白为什么会出现这种情况（如果您了解更多，请随时在此处发表评论）。
另一件事 - 我认为你首先要用其他格式保存原始数据 - 可能是数据库，xml或其他结构化文本？
在任何情况下，将其转换为xml格式并使用xslt将其转换为html在玩这些内容时可能会非常自由。
鼓励作者使用
p元素和标点符号标记对话。鼓励使用span或b的作者需要为造型目的标记扬声器。包含在i元素中的文本段落可用于标记舞台方向。
<article class=stage-script>
<h1>Water Cooler Talk at FogCreek</h1>
<p><b>Jeff</b> This sure is a nice website we've got now.
<p><b>Joel</b> It certainly is. By the way, working at FogCreek rocks.
<p><b>Jeff</b> Of course it does. Have you played Rock Band yet? It's a lot of fun.
<p><i>Joel and Jeff walk into the sunset</i>
</article>
.stage-script > p > b:first-child {
display: inline-block;
width: 5em;
}
.stage-script > p > b:first-child::after {
content: ':';
}
我会在这种情况下使用div元素，使用描述域的好类。你可以争论使用各种HTML元素来提供更好的意图语义，但是例如在对话框元素的情况下，它不是用于在剧本中的字符之间编写对话框，而是用于向用户显示一个对话框以进行交互。但事实上，你可以在CSS中改变和塑造这个元素的心愿是很好的 - 但我不建议这样做。
原因很简单，除非你小心，否则你会覆盖每个这样的元素的行为和外观。假设这是一个剧作家的交互式应用程序，除了播放中的“对话框”之外，您可能还想要包含对话框。
我提出这个解决方案：
.character{
display: block;
float: left;
}
.line{
margin-bottom: 20pt;
width: 400px;
margin-left: 50pt;
}
使用以下HTML：
<div class="character">Jeff</div>
<div class="line">This sure is a nice website we've got now.</div>
<div class="character">Joel</div>
<div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
<div class="character">Jeff</div>
<div class="line">Of course it does. Have you played Rock Band yet?
<br/>It's a lot of fun.</div>
运行JSFiddle：https://jsfiddle.net/quz9cj2f/6/
现在你可以实际实现一些标准的播放格式，我从这个地方开始：http://ptfaculty.gordonstate.edu/lking/CPF_play_formatting2.pdf
.play {
font-family: courier;
}
.play{
margin-top: 1in;
margin-left: 1.5in;
margin-right: 1in;
margin-bottom: 1in;
}
.character {
display: block;
margin-left: 4in;
text-transform: uppercase;
}
.direction:before{
margin-left: 2.75in;
content: "(";
}
.direction:after{
content: ")";
}
.line {
margin-bottom: .3in;
}
使用此HTML：
<div class="play">
<div class="character">Jeff</div>
<div class="direction">JEFF is enthusiastic!</div>
<div class="line">This sure is a nice website we've got now.</div>
<div class="character">Joel</div>
<div class="direction">Jumping continuously</div>
<div class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
<div class="character">Jeff</div>
<div class="line">Of course it does. Have you played Rock Band yet?
<br/>It's a lot of fun.</div>
</div>
工作JSFiddle：https://jsfiddle.net/quz9cj2f/9/
或者你可以全力以赴并使用CSS属性选择器并为元信息创建自定义属性：
.play {
font-family: courier;
}
.play{
margin-top: 1in;
margin-left: 1.5in;
margin-right: 1in;
margin-bottom: 1in;
}
.character {
display: block;
margin-left: 4in;
text-transform: uppercase;
}
.line[direction]:before{
margin-left: 2.75in;
content: "(" attr(direction) ")";
display: block;
}
.line {
margin-bottom: .3in;
}
现在你已经摆脱了额外的元素，并添加了元信息作为属性 - 现在你可以很容易地将它从一些好的数据结构从JSON或XML或其他交换格式转换为：
<div class="play">
<div class="character">Jeff</div>
<div direction="Enthusiastic" class="line">This sure is a nice website we've got now.</div>
<div class="character">Joel</div>
<div direction="Shaking his head" class="line"> It certainly is. By the way, working at FogCreek rocks.</div>
<div class="character">Jeff</div>
<div class="line">Of course it does. Have you played Rock Band yet?
<br/>It's a lot of fun.</div>
</div>
如果你想在语义上做，我会使用标签，如：
<div class="script">
<label for="Jeff1">Jeff<label>
<div id="Jeff1">
<p>This sure is a nice website we've got now.</p>
</div>
<label for="Joel1">Joel</label>
<div id="Joel1">
<p>It certainly is.</p>
<p>By the way, working at FogCreek rocks.</p>
</div>
<label for="Jeff2">Jeff</label>
<div id="Jeff2">
<p>Of course it does.</p>
<p>Have you played Rock Band yet? It's a lot of fun.</p>
</div>
</div>
这很好地退化了，我认为标签更适合你想要做的事情。然后，在你的样式表中，我将它的样式设置为Eran Galperin的示例CSS。
如果你对这个问题很认真的话，我会提出另一个建议，那就是进一步研究死树脚本的写法，并尽最大努力保持自己的风格。这将有助于确保您的观众熟悉（阅读专业）。
更合适（语义）和更短的是使用定义列表：
<dl>
<dt>Jeff</dt>
<dd>This sure is a nice website we've got now.</dd>
</dl>
dl {
overflow:hidden;
}
dl dt {
float:left;
width:30%;
}
dl dd {
float:left;
width:70%;
}
我会说
<dialog>
<dt>Jeff
<dd>This sure is a nice website we've got now.
<dt>Joel
<dd>It certainly is. By the way, working at FogCreek rocks.
<dt>Jeff
<dd>Of course it does. Have you played Rock Band yet? It's a lot of fun.
</dialog>
如HTML5中所定义。
当然，你需要一个<script>document.createElement('dialog');</script>来让IE做一些合理的事情，并在你的CSS中使用dialog { display:block; }来让它完全发挥作用。
我最喜欢标记这样的东西的例子是Tantek的XHTML化合物之一http://tantek.com/presentations/2005/03/elementsofxhtml/（查看对话位）
总之它是这样的：
<ol>
<li><cite>Jeff</cite>
<blockquote><p>This sure is a nice website we've got now.</p><blockquote>
</li>
<li><cite>Joel</cite>
<blockquote><p>It certainly is. By the way, working at FogCreek rocks.</p></blockquote>
</li>
...etc...
</ol>
不确定你如何标记舞台指示等...也许你最终会创建一个新的微格式:)
此外，该标记具有一些理想的CSS挂钩，与定义列表不同，具有离散LI。
我会使用标题和段落。
<div class="play">
<h2>Jeff</h2>
<p>This sure is a nice website we've got now.</p>
<h2>Joel</h2>
<p>It certainly is. By the way, working at FogCreek rocks.</p>
<h2>Jeff</h2>
<p>Of course it does. Have you played Rock Band yet? It's<br />
a lot of fun.</p>
</div>
使用以下样式时，它会按照您的介绍进行排列：
.play h2 {
float:left;
clear:left;
width:100px;
margin:0;
}
.play p {
margin-left:100px;
}
请避免“大锤综合症”（如果你唯一的工具是锤子，你试着像钉子一样对待每一个问题）。 HTML是一种表示语言，而不是源语言。
所以我的建议是将戏剧写成可以最好地代表你的想法（不一定是XML），然后将其转换为HTML。对于我自己的作品，我使用的是一个递归的XML解析器，它可能不属于某些元素的XML解析：
<content><<Hello,>> Forne smiled and thought: <<T Idiot.>></content>
我的解析器将调用自定义解析器来解析<content>的内容。在我的例子中，它将创建一个中间XML树：
<content><say>Hello,</say> <char>Forne</char> smiled and thought: <think>Idiot.</think></content>
然后将此树转换为HTML，TeX，PDF等等。
[编辑]我提出一种紧凑语言的策略是这样的：我从XML开始。过了一会儿，我查看XML并尝试查看模式。然后我想我如何能够以更紧凑的方式表达这些模式1.）作为XML，2。）作为XML文本（使用自定义标记）和3.）作为完全不同的东西。当一个想法袭击我时，我会为新格式编写一个解析器。
坦率地说，编写可以将某些内容转换为XML以进行自动后台处理的解析器是一项次要任务。
IMO实际上是表格数据。第一列是扬声器，第二列是文本。
但是，如果你想要时尚并且积极地避开桌子，那么我相信这与网络专家本赛季所要求的一致是一个结构，如：
<div class="play">
<div class="line">
<div class="speaker">Jeff</div>
<div class="text">This sure is a nice website we've got now. </div>
</div>
<div class="line">
<div class="speaker">Joel</div>
<div class="text">It certainly is. By the way, working at FogCreek rocks.</div>
</div>
</div>
然后你可以用适当的CSS来控制它的配置方式。
如果看起来你基本上是在编写XML并使用CSS来指定它的布局，那就是因为这就是Web专家认为你应该做的事情，AFAICT。
表格是要走的路。
使用<div> s和css或XSLT搞乱其他任何事情只是重新发明<table>但使用c ** p语法。
我会选择三到四个固定宽度的列。 （任何非平凡的比赛都需要舞台指示，特效，音效等）。
你不会得到这个问题的明确答案，因为HTML有很多空白，其中一个就是这个 - 网上有一些关于他的主题的非常扎实的文章，一个好的起点是Bruce Lawson's article from 2006。
考虑到问题没有答案，我们能做的最好的事情就是根据我们（和社区）对指南的解释，查看我们可以使用的元素并做出自己的妥协。
我个人喜欢cite / blockquote和数据列表路线。我知道数据列表没有任何语义标记，但我真的相信数据列表的意图不是纯粹以字典方式列出数据定义，而是将uls和ols所不能的数据配对。
我花了很多时间考虑语义，有一点我（以及该领域的大多数其他人）确信在查看标记的所有问题时，表格不是99.9％标记问题的答案（如果它不是表格数据，你可以使用th，caption然后表格应该从你的库存中删除）。也就是说，我也会说完全使用divs也可能不是正确答案。
我非常怀疑这个问题的最高票数将反映最佳方法，但更有可能反映出基于选民当前知识和HTML使用方法的协议。