Question

我构建了一个带有表单的页面，由于某种原因，我的页面按钮和页脚元素没有显示在页面上。

我添加了一个链接，以便您查看我的代码。而且我知道它很热！所以如果你能给我任何有关css和html的提示，请随时告诉我。

http://jsfiddle.net/jeramiewinchell/j6n0w1tj/

enter code here

Answer 1

编辑中的公平点。我说没有给任何积极的东西是一团糟。

以下是一些可以改进HTML的提示（包含供参考的链接）：

您应指定doctype（例如：<!doctype html>），而不是使用空<!DOCTYPE>标记。 http://www.w3.org/TR/html-markup/syntax.html#doctype-syntax
最好让<html>包装所有内容，并<head>包装标题和链接。我不清楚它是否在技术上是否有效（W3C HTML验证器不会在没有<head>的情况下验证页面，尽管它会在没有<html>的情况下验证），但它很好，它会有所帮助保持井井有条。
链接应具有指示mime类型的类型（在本例中为type="text/css"）。 http://www.w3schools.com/tags/tag_link.asp
关闭空元素（例如：img，link，input）在HTML5中不是必需的，但它是在XHTML中。根据您选择的doctype，您应该相应地关闭它们。最后使用/>对HTML5和XHTML都有效，因此您可能需要考虑它。 http://www.456bereastreet.com/archive/201005/void_empty_elements_and_self-closing_start_tags_in_html/
不要嵌套<p>标签。段落是块元素，应该只包含短语内容（=不是块/段落元素）。如何解决此问题：将<p class="site_section1">替换为<div class="site_section1">。 http://www.w3.org/TR/html5/grouping-content.html#the-p-element
始终关闭您打开的块标记。例如，你永远不会关闭<p class="site_section1">（尽管我在上一点说过，你应该把它变成<div> ......然后关闭它）。浏览器中的结果可能无法预测。
我在上面的评论中提到过（抱歉，我不知道英文名称），你应该避免使用交叉标签/嵌套标签。这是不正确的：<label>...<select></label>...</select>，它应该是<label>...</label><select>...</select>。
同样，不是强制性的，但在value代码中设置<option>属性可能会很不错。如果您未指定值，则发送的值将是<option>标记之间的内容（在这种情况下可能是您想要的）。
不要忘记所有代码并正确关闭标签！这样的事情：<button type="submit">Save</buttons </div>可能会带来灾难性的后果（虽然它看起来更像是一个错字）。
请勿关闭代码两次（例如：您</body>两次）

对于CSS（也有一些链接供参考）：

避免不必要的样式。例如：border-radius:0px是不必要的，因为0是border-radius的默认值（除非您已经定义了一些以前的样式并且想要覆盖它）。 http://www.w3schools.com/cssref/css3_pr_border-radius.asp
对于不同于0的值，需要指定单位。例如：margin-left:15是px或em中的15？ http://www.w3.org/TR/CSS21/syndata.html#length-units
当值为0时，单位是可选的。有些人发现它更具可读性和更好，因为它更短;我个人很喜欢他们。你的电话，但总是：
保持一致：如果省略零值的单位，请在所有定义中执行此操作。看到padding:0旁边的margin:0px（没有单位），我觉得很尴尬。它将帮助您稍后阅读和维护代码。
您可以将多种样式合并在一起。例如：.zonelist23，.zonelist24和.zonelist25相同，您只能定义一种样式（例如：.zonelist_bml30）或将所有样式设置在一起：{{1 }}
不是强制性的，但很好：font-family标签应该有几个名称作为“后备”系统。这样，如果浏览器不支持第一个字体，它将转到下一个字体，依此类推。 http://www.w3schools.com/css/css_font.asp
出于好奇：您是否打算放入样式表.zonelist23, .zonelist24, .zonelist25 { ... }或是.header？我个人试图避免使用与标记同名的类/ ID来保持代码更容易理解，但这是个人选择。据我所知，没有什么可以反对命名类似标签的类。

获得乐趣和学习的一种方式（你现在可能认为我有一种奇怪的方式来获得乐趣和学习）：

转到W3C HTML Validator。
点击“直接输入验证”标签。
在框中复制您的代码。
点击“验证”按钮。
查看第一个错误，并阅读评论（请访问链接以供参考）。
根据您所阅读的内容修复代码。
点击“重新验证”按钮。
重复步骤5-7，直到找不到错误。

（您可以对W3C CSS Validator中的CSS

Answer 2

请看这个小提琴：http://jsfiddle.net/j6n0w1tj/1/

我已更正您的代码。

请按照@ monty82提到的步骤进行操作，@ monty82已就如何处理您的代码提供了很好的解释。

错误的HTML：

   <label>..<select></Label><option></option></select>

更正html

   <label>..</label><select><option></option></select>

<input>,<br>之类的标签是自动关闭标签，与<input type="radio"/> and <br/>关闭，而不是</br>。
请确保您的开始和结束标记是否匹配

无法在页面上看到我的表单按钮或页脚

2 个答案: