HTML5 - 语法

HTML 5 语言具有与 HTML 4 和 XHTML 1 文档兼容的“自定义”HTML 语法，这些文档已发布在 Web 上，但不兼容 HTML 4 的更深奥的 SGML 功能。

HTML 5 的语法规则与 XHTML 不同，在 XHTML 中，我们需要小写标签名，引用我们的属性，属性必须具有值并且必须关闭所有空元素。

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

大写标签名。
属性引号是可选的。
属性值是可选的。
关闭空元素是可选的。

DOCTYPE

在旧版本的 HTML 中，DOCTYPE 更长，因为 HTML 语言基于 SGML，因此需要引用 DTD。

HTML 5 作者将使用简单的语法来指定 DOCTYPE，如下所示：

<!DOCTYPE html>

上述语法不区分大小写。

字符编码

HTML 5 作者可以使用简单的语法来指定字符编码，如下所示：

<meta charset = "UTF-8">

上述语法不区分大小写。

<script> 标签

通常的做法是在 script 元素中添加一个 type 属性，其值为“text/javascript”，如下所示：

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

HTML 5 删除了所需的多余信息，您可以简单地使用以下语法：

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

<link> 标签

到目前为止，您一直在这样编写 <link>：

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

HTML 5 删除了所需的多余信息，您可以简单地使用以下语法：

<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 Document Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href = "https://tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://tutorialspoint.com/javascript">
            JavaScript Tutorial</a></li> 
         </ul> 
      </nav> 
   
      <article> 
         <section> 
            <p>Once article can have multiple sections</p>
         </section> 
      </article> 
   
      <aside> 
         <p>This is  aside part of the web page</p> 
      </aside> 
   
      <footer> 
         <p>Created by <a href = "https://tutorialspoint.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>

它将产生以下结果：

打印页面