蓝客之星

html与css常见错误总结

我们在编写网页时,可能会出现一些微小的错误,导致网页不能正常显示,这里总结了一些html与css常见的错误

输入错误

我们在手工输入的时候,难免会出现一些失误,特别是一些元素的属性容易记忆混淆。所以我们在加强记忆的同时,可以使用带有提示的网页编写工具进行编写,这样可以大大避免这些错误

错误排查:链接的属性href拼写错误,将”href”拼成了”herf”
错误纠正:”href”是水平参考”horizontal reference”的缩写,正确记忆这个词组即可

1
2
错误:<a herf=""></a>
正确:<a href=""></a>

错误排查:图像的属性src拼写错误,将”src”拼写成了”scr”
错误纠正:”src”是来源”sources”的缩写,正确记忆这个单词就可以了

1
2
错误:<img scr="">
正确:<img src="">

标记间的嵌套

在使用嵌套标记时,要注意标记之间一一对应,被嵌套标记中的开始与结束标记必须放在嵌套标记的开始与结束标记之间,被嵌套标记中不能有结束标记的溢出

错误排查:下面实例中被嵌套标记em的结束标记</em>溢出:
错误纠正:标记元素之间的位置要一一对应

1
2
错误:<p>段落<em>强调内容</p></em>
正确:<p>段落<em>强调内容</em></p>

空元素与非空元素的结束标记

不要给空元素添加结束标记。虽然浏览器对这些错误也能正确显示,但我们需要养成严谨的编码习惯

错误排查:空元素图片标签多了一个结束标记
错误纠正:记住那些常见的空元素,它们仅有一个开始标签

1
2
错误:<img src="xxx.jpg"></img>
正确:<img src="xxx.jpg">

URL地址

在html中给超级链接或者图像使用URL时,无论是使用绝对路径还是相当路径,一定要保证URL是正确的

使用冒号:分隔属性和属性值

在html中,属性和属性值是通过等于号“=”分隔的;而在css中,属性和属性值是通过冒号“:”分隔开来的,并且我们习惯上在冒号后面加一个空格

1
2
错误:p{color=#FFF;}
正确:p{color:#FFF;}

以分号;结束每个属性

在css代码中,每个属性声明都以一个分号结束,不能有多余的分号,也不能缺少分号。为了更容易发生错误,最好的做法是让每个属性独占一行

1
2
3
4
5
6
7
8
9
10
错误:
P{
backage-color: #CCC
color: #CCC
}
正确:
P{
backage-color: #CCC;
color: #CCC;
}

属性与属性值的匹配

属性和属性值在使用的时候,要注意他们之间的匹配。因为某些属性的属性值为某些可选值,而不是任意值。这里例举这个text-align属性,它的属性可选值有left、right、center、justify和inherit五个,如果你赋值为top,那么这个top就不是text-align的有效值


好咖啡要和朋友一起品尝,好机会也要和朋友一起分享.