做HTML帖子的几个建议

马黑黑

一、关于CSS的应用

HTML帖子离不开CSS，对CSS的把握要得要领。首先是CSS的引用，行内嵌入还是页内模块，选择根据需要来。CSS代码不复杂的，行内嵌入CSS语句就可以了，CSS代码量大或相对复杂的，独立的页内嵌入式CSS代码模块是最好的选择。

像一个简单的表格定位，行内style的CSS嵌入就很高效：

<tabel style="position:relative;width:1024px;height:600px; left:-200px;top:10px;"><tr>
    <td>sth. here</td>
</tr></table>

但如若需要丰富细致的CSS修饰样式，显然上面的写法会很繁杂，而且需要在tr、td子标签都得写上，此时聪明的做法是事先定义一组独立模块的CSS样式表：

<style type="text/css">
    #box1 { ... }
    .box2 { ... }
</style>

然后在HTML标签中通过 id 或 class 标识一一对应地使用它们制定的样式，id是唯一的只能用一次，class可反复使用：

<div id="box1">
    <div class="box2"></div>
</div>
<div class="box2"></div>

两种方式的CSS嵌入，都使用 style 关键字，行内嵌入式 style="..." ，页内嵌入独立模块是——

<style ...>
    /* ... */
</style>

——注意 style 的起始符和收尾符，不完整的关键字将引发灾难性的结果。

同时，CSS页内嵌入时，所定义的选择器名称尽量避免与论坛的选择器同名，如果发现怪异的现象发生，那多数是选择器同名，这时需要修改名称。

二、关于HTML父子元素

做HTML帖子，就是通过组织HTML代码来组织帖子内容，令帖子的内容在丰富细致的观感中得以呈现，从而淋漓尽致地表达帖子的思想。

代码可考虑有一个“容器”，用它来归拢帖子全部的内容，这时它就是父元素：

<div class="父容器">
    <!-- 子元素代码流一 -->
        <!-- 孙子元素代码流1 -->
            <!-- 曾孙子元素代码流a -->
            <!-- 曾孙子元素代码流b -->
        <!-- 孙子元素代码流2 -->
    <!-- 子元素代码流二 -->
    <!-- 子元素代码流四 -->
    <!-- 子元素代码流五 -->
</div>

注意，帖子的HTML代码都应该在父容器之内，这样帖子代码才不至于凌乱。归拢子元素是个好习惯，子元素、子子元素的代码缩进也是个好习惯，这样做层次分明，方便查阅与修改。

切记，非自闭性的HTML标签，都要有起始符和收尾符，缺漏所以发的后果严重时不堪设想。

三、关于元素定位

做宽幅HTML帖子，父元素要定位，使之相对于屏幕的水平方向的位置是居中的。要定位父元素，父元素必须设定 position 属性，其值可以是绝对定位（absolute），也可以是相对定位（relative），然后用 left、top 对之设置左右上下挪动，left和top支持负数值。留意一下父窗体是否做了高度设置，因为某些时候，尤其是absolute定位之时，父窗体的高度往往不会被子元素撑开，我们可以给它第一个最小高度，min-height: 460px; ，如此，它至少有 460 个像素的高度。

子元素往往也需要定位，但不建议对所要的子元素定位，尽可能地让子元素按其代码流所对应的位置展现，特殊情形时才少量地对特定子元素定位。要定位子元素，首先保证父元素有 position 属性设定，其次子元素也必须做 position 属性设定，两者的position设定值一般是absolute和relative，谁用哪一个值不重要，它们有了都可以实现定位，包括定位子元素到父元素以外的范围。

定位子元素还需要考虑的一个细节是，子元素是否做了 margin 的 auto 设定，或更复杂的，基于flex布局的align-items设定，因为这会让元素在某一个方向居中，我们要用left和top值定位它们时就得将居中本应拥有的距离纳入计算之中，所以不好把握，不如将 auto 之类的居中属性值去掉。

四、关于JS的使用

论坛默认支持JS，但对JS的友好度不够，在论坛编辑HTML帖子代码的时候，JS尽量最后再放，如果已经放有了JS代码，这个情况，不能再在边框栏的右上方点击“纯文本”前的勾选框按钮进行代码模式与直观模式切换，否则JS代码会被吞噬掉。比较理想的做法是帖子先在本地测试运行，满意后再发往论坛。

修改帖子时因为论坛屏蔽了模式切换，可不用担心上面描述的情况。

JS的关键引用字，<script>和</script>必须前后呼应，不可缺失，也不可增多！否则，也可能会引发灾难性后果！

五、关于CSS、HTML、JS代码的顺序问题

这不是硬性规定，习惯上遵循而已，不过，这个习惯是有道理的，这里不多说：

css
html
js

三种代码模块层次要分明，不要混在一起。但它们也有“交互”的情形，例如行中嵌入的style就是CSS参与到HTML中，某个标签单击事件的JS函数调用也可以写在HTML代码中。这种“参与”渗透是有规定的，不能胡来。

红影

非常详尽的各种功能总结，影子努力记住这些。再碰到问题也可以到这个帖子里来找原因了。

红影

这个综述太好了，黑黑辛苦了

加林森

谢谢老黑，讲解得非常清楚。我得好好用功才行。