HTML5 语法

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

HTML5与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属性，展示如何使用值为”example”的属性名为class的属性标记一个div元素。

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

属性只能在开始标签中指定，并且不能在结束标签中使用。

HTML5属性不区分大小写，可以使用全大写或混合大小写书写，尽管最常见的惯例是使用小写。

这是一个完整的列表 HTML5属性。

HTML5文档

为了更好地组织结构，引入了以下标签 –

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

HTML5文档的标记如下 –

<!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://www.geek-docs.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.geek-docs.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.geek-docs.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://geek-docs.com/">Geek-Docs</a></p> 
      </footer> 

   </body> 
</html>

它将生成以下结果 –

HTML5 语法