《HTML5与CSS3网页设计》_《HTML5与CSS3网页设计》_HTML5 与CSS5 网页设计（第二版）第十四章.pptVIP

第14章网站的调试与发布14.1常见错误14.2HTML中的常见错误14.3CSS中的常见错误14.4验证代码14.5测试网页14.6发布网站14.7综合实例返回14.1常见错误现将如何检查这些常见的错误归纳如下:(1)对代码进行验证，对代码语法的相关错误进行排查。(2)确认需要测试的文件已经上传。(3)确认上传的文件的位置是正确的。(4)确认输入的URL与需要测试的文件是对应的，如果查看的页面是从另一个页面中跳转过来的，就需要确认链接中的URL与页面的文件名和位置是否完全匹配。(5)确认上传的文件已经保存过了。(6)确认上传了所有的辅助文件，包括CSS文件、图像文件、音频文件以及视频文件。下一页返回14.1常见错误(7)确认URL的大小写没有问题，确认文件名中没有使用空格。(8)确认测试时禁用的功能是否已经重启。(9)换个浏览器进行测试，确认浏览器是否有问题。上一页返回14.2HTML中的常见错误下面介绍HTML中的常见错误。(1)输入错误。输入错误是很容易出现的，也是比较难检查出来的，因为人们容易进入思维定式。但是拼写和属性值的设置必须确保正确。使用HTML验证器可以查出这种错误。(2)元素的嵌套。由于HTML代码都是由元素组成的，元素的嵌套是非常容易出错的，需要特别注意。(3)属性值引号的使用。当属性值内容里面需要用到引号的时候，那么引用属性值使用引号的时候就需要注意，当属性值是用双引号包围的时候，则属性值中间可上一页下一页返回14.2HTML中的常见错误以使用单引号。(4)元素的开始标记和结束标记。一般的元素都有开始标记和结束标记，使用的时候需要注意正确使用，不要对空元素使用分开的开始标记和结束标记。虽然对于网页的显示来说，对空元素添加结束标记，浏览器也能正确显示，但是我们需要的严谨的编码习惯。上一页返回14.3CSS中的常见错误虽然CSS的语法非常简单，但是在书写CSS代码的时候也会出现一些常见错误。CSS的错误也可以使用验证器来查找。下面我们来看看这些常见错误。(1)属性和属性值的分隔。在CSS中，属性和属性值是通过冒号分隔开来的，而在HTML代码中，属性和属性值是通过等号分隔的，所以在书写的时候要注意不要因为习惯HTML代码而将CSS代码写错。(2)分号的使用。在CSS代码中，每个声明结束后都应该有一个分号，不要多也不要少。想更清晰地检查分号的使用，最好的方法就是让每个声明都单独占一行，这样错误就更容易发现了。下一页返回14.3CSS中的常见错误(3)注意单位的使用。在有些声明中需要使用单位，在单位前面出现的是数值，数值和单位之间是不允许出现空格的。(4)属性和属性值的匹配。在使用属性和属性值的时候，要注意它们之间的匹配。(5)使用样式表时，不要丢掉了/style结束标记。(6)建立正确的HTML文档指向CSS文件，而且保证URL地址正确。(7)使用选择器时应注意空格和符号的使用。(8)确认浏览器是否支持编写好的CSS代码，特别注意新的语法。(9)确认括号的配对。上一页返回14.4验证代码1.安装FirebugFirebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑,JavaScript控制台、网络状况监视器于一体，是开发JavaScript,CSS,HTML和Ajax的得力助手。Firebug的界面如图14-2所示。Firebug包含了7个标签:控制台HTML,CSS、脚本、DOM、网络、Cookies。2.HTML代码验证使用HTML验证器可以在浏览器解析文档结构之后对结构进行检查，将它与预期的元素嵌套进行比较，这可以帮助我们快速定位标记格式不正确、元素为闭合或者过早闭合等错误。下一页返回14.4验证代码HTML标签是Firebug中的第二个标签，它分两个视图，左边的视图可以查看HTML代码，右边的视图又分为4个子面板:样式、计算出的样式、布局和DOM。“代码视图”面板位于HTML标签的左边，它以层次结构展示HTML代码，而且将不同的关键字标以不同的颜色，相当人性化。它还允许我们随意地将元素进行折叠或展开，这样就很容易使我们快速掌握一个web页面的大致结构。“代码视图”面板还有一个相当不错的功能，就是可以对即时打开的web页面中的各种元素进行删除、增加、属性修改等操作，而且操作后的效果将立即在浏览器上展现出来，如图14-3所示。在Firebug中审查段落时，Firefox在遇到有错的代码时会将HTML按上一页下