HTML5 与 HTML4 的区别(1) - 语法的改变

HTML5 中的标记方法

1、内容类型(ContentType)

HTML5 的文件扩展符与内容类型保持不变。也就是说,扩展符仍然为“.html”或“.htm”,内容类型(ContentType)仍然为“text/html”。

2、DOCTYPE声明

DOCTYPE 声明是 HTML 文件中必不可少的,它位于文件第一行。在 XHTML 1.0 Transitional 中,它的声明方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在 HTML5 中,刻意不使用版本声明,一份文档将会适用于所有版本的 HTML。HTML5 中的 DOCTYPE 声明方法(不区分大小写)如下:

<!DOCTYPE html>

另外,当使用工具时,也可以在 DOCTYPE 声明方式中加入 SYSTEM 识别符,声明方法如下面的代码所示:

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

在 HTML5 中像这样的 DOCTYPE 声明是允许的(不区分大小写,引号不区分是单引号还是双引号)。

3、指定字符编码

在 HTML4 中,使用 meta 标签的形式指定文件中的字符编码,如下所示:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" >

在 HTML5 中,可以使用对 <meta> 标签直接追加 charset 属性的方式来指定字符编码,如下所示:

<meta charset="UTF-8">

两种方法都有效,可以继续使用前面那种方式(通过 content 属性来指定),但是不能同时混合使用两种方式,在以前的 HTML 代码中可能会存在下面代码所示的标记方式,但在 HTML5 中,这种字符编码方式将被认为是错误的,这一点请注意:

<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

从 HTML5 开始,对于文件的字符编码推荐使用 UTF-8。

HTML5 确保了与之前 HTML 版本的兼容性

1、标签标记的省略

在 HTML5 中,标签的标记分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。让我们来针对这三类情况列举一个标签清单,其中包括 HTML5 中的新标签。

不允许写结束标记的标签有:
        area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

可以省略结束标记的标签有:
        li、dt、dd、p、rt、rp、op、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

可以省略全部标记的标签有:
        html、head、body、colgroup、tbody。

“不允许写结束标记的标签”是指,不允许使用开始标记与结束标记将标签括起来的形式,只允许使用“<标签/>”的形式进行书写。例如“<br>...</br>”的书写方式是错误的,正确的书写方式为“<br/>”。当然,HTML5之前的版本中<br>这种写法可以被沿用。

“可以省略全部标记的标签”是指,该标签可以完全被省略。请注意,即使标记被省略了,该标签还是以隐式的方式存在的。例如将body标签省略不写时,但它在文档结构中还是存在的,可以使用document.body进行访问。

2、具有布尔值的属性

对于具有boolean值的属性,例如 disabled 与 readonly 等,当只写属性而不指定属性值时,表示属性值为true;如果想要将属性值设为flase,可以不使用该属性。另外,要想将属性值设为true时,也可以将属性名设定为属值,或将空字符串设定为属性值。属性值的设定方法可以参考下面的示例:

<!--只写属性不写属性值代表属性为true-->
<input type="checkbox" checked>
<!--不写属性代表属性为false-->
<input type="checkbox">
<!--属性值=属性名,代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串,代表属性为true-->
<input type="checkbox" checked="">

3、省略引号

在之前的 HTML 版本中,大家已经知道,指定属性值的时候,属性值两边既可以用双引号,也可以用单引号。HTML5 在此基础上做了一些改进,当属性值不包括空字符串、“<”、“>”、"="、单引号、双引号等字符时,属性值两边的引号可以省略。如下面的代码所示:

<!--请注意type的属性值两边的引号-->
<input type="text">
<input type='text'>
<input type=text>

小结:标记示例

下面,让我们通过前面学到的 HTML5 的语法知识来完成一个 HTML5 标记的示例:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5 标记示例</title>
<p>这段代码是根据HTML5语法
<br/>编写出来的。
1、该代码完全是用 HTML5 写成的;
2、省略了<html>、<head>、<body>等标签;
3、DOCTYPE申明使用了 HTML5 支持的简洁申明方式;
4、用<meta>标签的 charset 属性指定字符编码;
5、省略了<p>标签的结束标记;
6、使用<标签/>的方式来结束<title>标签以及<br>标签。

转载于:https://www.cnblogs.com/jasonsoop/p/4003189.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值