![2d4b7b02c21a7192352f1ec29dbdda3f.png](https://i-blog.csdnimg.cn/blog_migrate/0a430b3dec1673e3162ce29e703f0d18.jpeg)
如果用一个词来形容HTML5的语法,就是“宽容”,HTML5对Web前端开发者非常宽容,与Java语言对比,HTML5的语法几乎没有约束力。
1、HTML5的文档类型标识
HTML5文档的第一行,用DOCTYPE来声明本文档是HTML5文档:
2、HTML5文档的整体是一个html元素,html元素由head元素和body元素组成,head元素定义标题和字符集等,body元素定义网页的详细内容。
下面是一个完整的HTML5文档:
这是文档的标题 这是文档的内容
3、为了避免歧义,在HTML5文档中,下面的地方不要放置任何内容:
(1)在标签和标签之间不要放置任何内容;
(2)在标签和标签之间不要放置任何内容;
(3)在标签和标签之间不要放置任何内容。
例如:下面的html文件:
the first place cannot exist any contentthe second place cannot exist any contentthe third place cannot exist any content
很多浏览器将其解释为:
![fd59b6fbf8d97ab5bf10974b6d488416.png](https://i-blog.csdnimg.cn/blog_migrate/6f651da42672a3293f8b2cb9ab9380dd.jpeg)
这不一定是您的初衷。
4、在HTML5中,任何标签都可以为大写形式,也可以为小写形式,也可以是大小写混合的形式:
下面的写法中,body标签是小写形式,是合法的:
This is the body.
下面的写法中,BODY标签是大写形式,也是合法的:
This is the body.
下面的写法中,BodY是大小写混合的形式,还是合法的:
This is the body.
这三种写法,在浏览器中的展示效果都是:
![31c617f909cdc41c7a989b4acd0549a0.png](https://i-blog.csdnimg.cn/blog_migrate/1a96b2d327e41cd24856673b005f92ed.jpeg)
5、在HTML5中,开始标签和结束标签可以大小写形式不同:
下面的写法中,起始标签是
,结束标签是,是合法的:This is the body.
6、在HTML5中,空元素可以只有开始标签,也可以在开始标签中有结束的斜杠标志。
空元素,指开始标签和结束标签不能分开定义的元素,例如img、br、hr、input等等。
例如,下面的img和br是合法的表示形式:
first line
second line
修改为这样的表示形式,也是合法的:
first line
second line
这两种写法,在浏览器中的展示效果都是:
![1bda9a8522ee1b6a40f12573023e4fbe.png](https://i-blog.csdnimg.cn/blog_migrate/31dcf32a7b7c1bed11d4499b191e87a3.jpeg)
7、在HTML5中,有些元素可以省略结束标签,例如dt、dd、li、p、thead、tbody、ftoot、tr、td、th等等。
例如,下面的li元素没有结束标签,是合法的形式:
语文数学英语物理化学生物地理
这种写法,在浏览器中的展示效果是:
![a0e0cebe46f9a84b72dbb11a640441c7.png](https://i-blog.csdnimg.cn/blog_migrate/a2a9f9887a509cbe08bfff8a84132409.jpeg)
8、在HTML5中,html、head、body、colgroup、tbody可以同时省略开始标签和结束标签。
例如,下面的网页没有head元素和body元素,是合法的形式:
网页测试
网页测试的内容
这种写法,在浏览器中的展示效果是:
![23218b8703a2f0d638eaeccb63f6cad6.png](https://i-blog.csdnimg.cn/blog_migrate/924fbeb928676379a307cb513afdd181.jpeg)
9、在HTML5中,对于boolean值的属性,可以不赋值,可以赋boolean值,可以赋文本值,可以赋空值:
例如,下面的readonly和checked属性赋值为true,是合法形式:
将readonly和checked属性设置为未赋值,等同于赋值为“true”,是合法的形式:
将readonly属性设置为“readonly”,将checked属性设置为“checked”,等同于赋值为“true”,是合法的形式:
将readonly属性和checked属性设置为“”,等同于赋值为“true”,是合法的形式:
这四种写法,在浏览器中的展示效果都是:
![4c7c52bcb59b00b952aa98e7d982d0a5.png](https://i-blog.csdnimg.cn/blog_migrate/415fc5dfc902d4dbd1e7b09f334e1ec3.jpeg)
10、HTML5对语法的宽容,导致HTML文档比较容易编写,不过一旦出现语法错误,就比较难以排除。这时,我们可以通过validator.w3.org网站来帮我们定位错误。
该网站的截图如下:
![2d001ff2bbd29f5dab19c7ba681d1cec.png](https://i-blog.csdnimg.cn/blog_migrate/bd3a3e77bd375f2da29f40b5e175d961.jpeg)
使用该网站,我们可以检查某个网址对应网页,也可以上传html文件进行检查,还可以直接将html粘贴到该网站进行检查。
举例,对于下面的错误html文档:
good