極客書

HTML5 - Syntax

HTML5語言有一種「自定義」的HTML語法，它與在Web上發布的HTML4和XHTML1文檔兼容，但與HTML4更深奧的SGML功能不兼容。

HTML5沒有XHTML那樣的語法規則，我們需要小寫的標記名，引用我們的屬性，一個屬性必須有一個值並關閉所有的空元素。

HTML5具有很大的靈活性，它支持以下特性;

  • Uppercase tag names.
  • Quotes are optional for attributes.
  • Attribute values are optional.
  • Closing empty elements are optional.

The DOCTYPE

舊版本HTML中的DOCTYPEs較長，因爲HTML語言基於SGML，因此需要引用DTD。

HTML 5作者將使用簡單的語法指定DOCTYPE，如下所示−

<!DOCTYPE html>

以上語法不區分大小寫。

Character Encoding

HTML 5作者可以使用簡單的語法來指定字符編碼，如下所示−

<meta charset = "UTF-8">

以上語法不區分大小寫。

The <script> tag

通常的做法是向腳本元素添加一個值爲「text/javascript」的type屬性，如下所示−

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

HTML 5刪除了所需的額外信息，您可以簡單地使用以下語法−

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

The <link> tag

到目前爲止，您編寫的<link>如下所示;

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

HTML 5刪除了所需的額外信息，您可以簡單地使用以下語法−

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

HTML5 Elements

HTML5元素使用開始標記和結束標記進行標記。標記使用尖括號分隔，標記名在中間。

開始標記和結束標記的區別在於後者在標記名之前包含斜線。

下面是一個HTML5元素的例子−

<p>...</p>

HTML5標記名不區分大小寫，可以全大寫或混合大小寫，儘管最常見的約定是使用小寫。

大多數元素都包含一些內容，如<p>…</p>包含段落。但是，有些元素被禁止包含任何內容，這些元素被稱爲void元素。例如，br、hr、link、meta等。

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

HTML5 Attributes

元素可以包含用於設置元素的各種屬性的屬性。

有些屬性是全局定義的，可以在任何元素上使用，而另一些屬性只爲特定元素定義。所有屬性都有一個名稱和一個值，如下例所示。

下面是一個HTML5屬性的例子，它說明了如何使用一個值「example」−用一個名爲class的屬性標記div元素;

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

屬性只能在開始標記中指定，不能在結束標記中使用。

HTML5屬性是不區分大小寫的，可以用全大寫或混合大小寫編寫，儘管最常見的約定是堅持使用小寫。

以下是html5屬性的完整列表。

HTML5 Document

爲了獲得更好的結構，引入了以下標籤&負;

  • 節−此標記表示通用文檔或應用程式節。它可以與h1-h6一起使用來指示文檔結構。

  • article−此標記表示文檔的獨立內容，例如博客條目或報紙文章。

  • aside−此標記表示與頁面其餘部分僅略微相關的內容。

  • 標題−此標記表示節的標題。

  • footer−此標記表示節的頁腳，可以包含有關作者、版權資訊等的信息。

  • nav−此標記表示文檔中用於導航的部分。

  • dialog−此標記可用於標記對話。

  • 圖−此標記可用於將標題與某些嵌入內容（如圖形或視頻）相關聯。

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>
Live Demo 
<!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.tutorialspoint.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.tutorialspoint.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.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>

它將產生以下結果&負;