在进行营销型网站建设时HTML5的基本语法

文章作者:济南网络公司 发布时间:2020-12-11 10:12:02 浏览次数:0

1.内容类型(ContentType)


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


2.DOCTYPE声明


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

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

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

<!DOCTYPE html>

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

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

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


3.指定字符编码


在HTML 4中,使用meta元素的形式指定文件中的字符编码,如下所示:

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

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

<meta charset="UTF-8">

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

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

三、HTML 5确保了与之前HTML版本的兼容性


HTML 5的语法是为了保证与之前的HTML语法达到最大程度的兼容而设计的。例如,符合“没有<p>的结束标记”的HTML代码随处可见,HTML 5中并没有把这种情况作为错误来处理,而是允许存在这种情况,但明确地规定了这种情况应该怎么处理。


那么,针对这个问题,让我们从元素标记的省略、具有boolean值的属性、引号的省略这几方面来详细看一下在HTML 5中是如何确保与之前版本的HTML达到兼容的。


1.可以省略标记的元素


在HTML 5中,元素的标记可以省略。具体来说,元素的标记分为“不允许写结束标记”、“可以省略结束标记”和“开始标记和结束标记全部可以省略”三种类型。让我们来针对这三类情况列举一个元素清单,其中包括HTML 5中的新元素(关于这些新元素,下节将进行介绍)。


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


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


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


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


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


2.具有boolean值的属性


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


属性值的设定方法可以参考下面的代码示例:

<!--只写属性不写属性值代表属性为true-->

<input type="checkbox" checked>

<!--不写属性代表属性为false-->

<input type="checkbox">

<!--属性值=属性名,代表属性为true-->

<input type="checkbox" checked="checked">

<!--属性值=空字符串,代表属性为true-->

<input type="checkbox" checked="">

3.省略引号


大家已经知道,指定属性值的时候,属性值两边既可以用双引号,也可以用单引号。


HTML 5在此基础上做了一些改进,当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时,属性值两边的引号可以省略。如下面的代码所示:

<!--请注意type的属性值两边的引号-->

<input type="text">

<input type='text'>

<input type=text>

四、标记示例


现在,让我们通过前面学到的HTML 5的语法知识来看一个关于HTML 5标记的示例。


示例1完全是用HTML 5写成的,省略了<html>、<head>、<body>等元素。可以通过这个示例复习一下HTML 5的DOCTYPE声明、用<meta>元素的charset属性指定字符编码、<p>元素的结束标记的省略、使用<元素 />的方式来结束<meta>元素,以及<br>元素等本节中所介绍到的知识要点。


示例1:

<!DOCTYPE html>

<meta charset="UTF-8">

<title>HTML 5标记示例</title>

<p>这段代码是根据HTML 5语法

<br/>编写出来的。

营销型网站建设

版权声明:文章来源于www.zboec.com/jjzs/55.html,转载请注明出处!