传统的"HTML仅用于内容"思路如何处理动态格式化?

Nic*_*ynt 6 html css code-generation code-formatting standards-compliance

很长一段时间,我已经阅读并理解了有关Web开发的以下事实:

  1. HTML代表内容
  2. CSS用于演示
  3. JavaScript用于行为.

这通常都很好,我发现当我严格遵循这些指导并使用外部.css.js文件时,它使我的整个网站更易于管理.但是,我认为我发现了一种打破这种思路的局面.

我有一个自定义论坛系统,我为我的一个网站建立.除了这种系统的常用格式(链接,图像,粗体斜体和下划线等)之外,我还允许用户设置文本的格式,包括颜色,字体系列和大小.所有这些都由论坛消息数据库保存为格式化代码,然后在查看页面时转换为相应的HTML.(有点效率低,技术上我应该在保存前翻译,但这样我就可以在系统上工作.)

由于这个和其他类似系统的性质,我最终在生成的HTML代码周围浮动了很多标签,我认为这是非正式弃用的,因为我应该使用CSS进行格式化.这打破了规则1和规则2,它规定HTML不应包含格式信息,而是更喜欢将信息放在CSS文档中.

有没有办法在CSS中实现动态格式化而不在标记中包含该信息?这值得吗?或者,考虑到正确代码的隐含限制,我可以限制用户可以执行哪些操作以遵循"正确"格式化代码的方式?

str*_*ger 5

可以使用style元素的属性:

This is <span style="color: red;">red text</span>.
Run Code Online (Sandbox Code Playgroud)

如果用户仅限于某些选项,则可以使用classes:

This is <span class="red">red text</span>.
Run Code Online (Sandbox Code Playgroud)

一定要使用语义HTML元素:

This is <strong>strong and <em class="blue">emphasized</em></strong>
text with a <a href="http://www.google.com" rel="external">link</a>.
Run Code Online (Sandbox Code Playgroud)

常见的语义元素及其用户空间术语:

  • <p> (段)
  • <strong> (胆大)
  • <em> (斜体)
  • <blockquote> (引号)
  • <ul><ol><li>(名单)
  • 更多...?

在论坛帖子中可能不太常见,但仍然可用的语义元素:

  • <h1>,<h2>等(税号;一定要在一个值,使你的网页是有道理的开始)
  • <del>,以及在较小程度上<ins>(三振出局)
  • <sup><sub>(上标和下标)
  • <dl><dt><dd>(对的列表)
  • <address> (联系信息)
  • 更多...