首页 > 技术文章 > HTML5基本结构和语法

bindu 2022-01-09 11:33 原文

1.1HTML5文档基本结构

  HTML5文档省略了<html>,<head>,<body>等元素,使用HTML5的DOCTYRE声明文档类型,简化<meta>元素的charset属性值,省略<p>元素的结束标记,使用<元素 />的方式来结束<meta>元素,以及<br>元素等语法知识要点。

【示例】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>HTML基本语法</title>
    </head>
    <body>
        <h1>HTML5的目标</h1>
        <p>HTML5的目标是为了能够创建更简单的Web程序,书写出更简洁的HTML代码。</p><br />
    </body>
</html>

1.2HTML5基本语法

1.2.1内容类型

  HTML5文件扩展名为:“。html”或“.htm”,内容类型(ContentType)为“text/htmml”。

1.2.2文档类型

  DOCTYRE命令声明文档的类型,它是HTML文档必不可少的组成部分,且必须位于代码的第一行。

1.2.3标记省略

  元素的标记分为3种类型:不允许写结束标记、可以省略结束标记、开始标记和结束标记全部可以省略。

  不允许写结束标记的元素是指,不允许使用开始标记与结束标记将元素括起来的形式,只允许使用<元素 />的形式进行书写。例如:

错误的书写方式:

<br></ br>
<br />

正确的书写方式:

1.2.4布尔值

  对于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=""/>

1.2.5属性值

  属性值两边既可以用双引号,也可以用单引号。当属性值不包括空字符串、<、>、=、单引号、双引号等字符时,属性值两边的引号可以省略。

【示例】

<input type="text"/>
<input type='text'/>
<input type=text/>

推荐阅读