『HTML&CSS』语法规范

最新推荐文章于 2020-07-14 16:26:15 发布

爱喝可乐的炸鸡

最新推荐文章于 2020-07-14 16:26:15 发布

阅读量298

点赞数

分类专栏：『HTML&CSS』文章标签： HTML语法规范 CSS语法规范

本文链接：https://blog.csdn.net/sss_0916/article/details/101388916

版权

『HTML&CSS』专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本片博客介绍一些简单的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的学习，我们可以分为两部分，选择器和声明块。
选择器：

通过选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器选择的元素上。

声明块：

紧跟在选择器的后边，使用一堆{}括起来；
声明块中实际上就是一组一组的键值对结构；
这一组一组的键值对称为声明；
在一个声明块中可以写多个声明，多个声明之间使用;隔开；
声明的样式名和样式值之间使用:来连接。

代码示例：

选择器 {
	样式名:样式值;
	样式名:样式值;
	/*
		...
	*/
}

爱喝可乐的炸鸡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
『HTML&CSS』语法规范

HTML语法规范。CSS语法规范。
复制链接

扫一扫

专栏目录

『HTML&CSS』语法规范

HTML语法规范

CSS语法规范

“相关推荐”对你有帮助么？