本片博客介绍一些简单的HTML&CSS语法规范。
HTML语法规范
- HTML中不区分大小写,但是一般使用小写。
- HTML中的注释不能嵌套,如下:
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>语法规范</title>
</head>
<body>
<!--
<!--
-->
-->
</body>
</html>
- HTML标签必须结构整,非自结束标签要成对出现。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>语法规范</title>
</head>
<body>
<h1>Hello, World!
</body>
</html>
上述结果可以看出,我们的HTML语句少了结束标签,但是运行结果是正确的,这是为什么呢?
这是因为浏览器在解析页面的时候,你所有的不符合语法规范的内容,浏览器都会为你自动修正,我们查看一下源代码:
我们可以看到,源码中并没有被修改,我们必须借助Chrome浏览器调试工具才能看出来,怎么用这个Chrome浏览器调试工具呢,按下F2即可:
我们再来看一个例子:
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>语法规范</title>
</head>
<body>
</body>
</html>
<h1>Hello, World!</h1>
结果也是没问题的,我们先来看一下源码:
我们再来借助Chrome调试工具来看一下:
可以看到,语句被自动调整到了根标签中的body标签中。
- HTML中标签可以嵌套,但是不能交叉嵌套。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>语法规范</title>
</head>
<body>
<!-- 标签嵌套 -->
<h1><font color = "green">Hello</font>, World!</h1>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>语法规范</title>
</head>
<body>
<!-- 标签交叉嵌套 -->
<h1><font color = "green">Hello, World!</h1></font>
</body>
</html>
这里标签有交叉嵌套,但是结果是对的,还是因为浏览器帮我们进行了调整,我们借助Chrome浏览器调试工具看一下:
- HTML标签中的属性必须有值,且值必须加引号。
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>语法规范</title>
</head>
<body>
<!-- 标签交叉嵌套 -->
<h1><font color = green>Hello, World!</h1></font>
</body>
</html>
这里看到,结果是对的,根据前面的经验,没错,是浏览器帮我们加上了引号。
总结:
- 综上,我们可以看到,浏览器能够帮我们解决很多小细节上的错误,是不是意味着,我们就可以对自己要求松一点呢?
- 当然不是,我们还是需要严格要求自己,因为浏览器只会进行一些简单错误的处理。
CSS语法规范
注意,style标签中的都是CSS代码,HTML的代码在里面是无效的,比如说,如果我们在style内部使用HTML的注释都是不行的,如下:
<!doctype html>
<html>
<head>
<meta charset = "utf-8" />
<title>Demo_06</title>
<style>
<!--
这是一条HTML的注释
-->
/*
这是一条CSS的注释
*/
</style>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
可以看到,CSS中的注释是以/*开始,以*/结束。
其实对于CSS的学习,我们可以分为两部分,选择器和声明块。
选择器:
- 通过选择器可以选中页面中指定的元素,并且将声明块中的样式应用到选择器选择的元素上。
声明块:
- 紧跟在选择器的后边,使用一堆{}括起来;
- 声明块中实际上就是一组一组的键值对结构;
- 这一组一组的键值对称为声明;
- 在一个声明块中可以写多个声明,多个声明之间使用;隔开;
- 声明的样式名和样式值之间使用:来连接。
代码示例:
选择器 {
样式名:样式值;
样式名:样式值;
/*
...
*/
}