HTML5 – 语法

HTML5语言具有兼容于在Web上发布的HTML 4和XHTML1文档的“自定义”HTML语法，但不兼容HTML 4的更深奥的SGML功能。

HTML5和XHTML不具有相同的语法规则，其中我们需要小写标记名称，引用属性，属性必须具有值和关闭所有空元素。

HTML5具有很大的灵活性，支持以下功能：

大写标记名。
属性可以选择使用引号。
属性值可以省略。
关闭空元素可以省略。

DOCTYPE

HTML较早版本中的DOCTYPE较长，因为HTML语言是基于SGML的，因此需要引用DTD。

HTML5作者会使用以下简单语法来指定DOCTYPE −

<!DOCTYPE html>

上述语法不区分大小写。

字符编码

HTML5作者可以使用以下简单语法来指定字符编码−

<meta charset = "UTF-8">

上述语法不区分大小写。

`<script>`标签

常见的做法是将类型属性添加一个值为”text/javascript”的脚本元素，如下所示−

<script type = "text/javascript" src = "scriptfile.js"></script>

HTML5删除了所需的额外信息，可以使用以下简单语法−

<script src = "scriptfile.js"></script>

`<link>`标签

到目前为止，您编写<link>如下所示−

<link rel = "stylesheet" type = "text/css" href = "stylefile.css">

HTML5删除了所需的额外信息，可以使用以下简单语法−

<link rel = "stylesheet" href = "stylefile.css">

HTML5元素

HTML5元素使用开始标记和结束标记进行标记。标记使用尖括号分隔，并将标记名称置于其中。

开始标记和结束标记之间的区别在于后者在标记名称前包含一个斜杠。

以下是HTML5元素的示例−

<p>...</p>

HTML5标记名称不区分大小写，可以全部使用大写字母或混合大小写字母，尽管最常见的约定是要使用小写字母。

大多数元素都包含一些内容，如<p>…</p>包含一个段落。但是，某些元素不允许包含任何内容，这些是空元素。例如，<br>，<hr>，<link>，<meta>等。

以下是 HTML5元素的完整列表。

HTML5属性

元素可以包含属性，用于设置元素的各种属性。

某些属性在全局范围内定义，可用于任何元素，而其他属性仅针对特定元素定义。所有属性都有名称和值，并且如以下示例所示。

以下是示例HTML5属性，说明如何使用名称为class的属性来标记具有值“example”的div元素−

<div class = "example">...</div>

属性仅能在开始标记中指定，不能在结束标记中使用。

HTML5属性不区分大小写，可以全部使用大写字母或混合大小写字母，尽管最常见的约定是要使用小写字母。

以下是 HTML5属性的完整列表。

HTML5文档

引入了以下标记以进行更好的结构−

section − 此标签代表文档或应用的通用部分。它可以与h1-h6一起使用，以指示文档结构。
article − 此标签代表文档中独立的内容部分，例如博客文章或报纸文章。
aside − 此标签代表与页面其他部分只有轻微关联的内容。
header − 此标签代表一个部分的头部。
footer − 此标签代表一个部分的页脚，并可以包含有关作者、版权信息等的信息。
nav − 此标签代表文档中用于导航的部分。
dialog − 此标签可用于标记对话。
figure − 此标签可用于将标题与一些嵌入式内容（例如图形或视频）关联起来。

HTML 5文档的标记如下所示 –

<!DOCTYPE html> 

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 

   <body> 
      <header>...</header> 
      <nav>...</nav> 

      <article> 
         <section> 
            ... 
         </section> 
      </article> 
      <aside>...</aside> 

      <footer>...</footer> 
   </body> 
</html>

<!DOCTYPE html>  

<html>  
   <head> 
      <meta charset = "utf-8"> 
      <title>...</title> 
   </head> 

   <body> 
      <header role = "banner"> 
         <h1>HTML5文档结构示例</h1> 
         <p>此页面应在Safari、Chrome或Mozila中尝试。</p> 
      </header> 

      <nav> 
         <ul> 
            <li><a href = "https://www.tutorialspoint.com/html">HTML教程</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS教程</a></li> 
            <li><a href = "https://www.tutorialspoint.com/javascript">
            JavaScript教程</a></li> 
         </ul> 
      </nav> 

      <article> 
         <section> 
            <p>一个文章可以有多个部分。</p>
         </section> 
      </article> 

      <aside> 
         <p>这是网页的侧边栏部分。</p> 
      </aside> 

      <footer> 
         <p>由<a href = "https://www.tutorialspoint.com/">Tutorials Point</a>创建。</p> 
      </footer> 

   </body> 
</html>

它将产生以下结果 –

HTML5 - 语法