语法

优质

小牛编辑

124浏览

2023-12-01

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

HTML 5与XHTML没有相同的语法规则，我们需要小写标签名称，引用我们的属性，属性必须有一个值并关闭所有空元素。

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

Uppercase tag names.
引号对于属性是可选的。
属性值是可选的。
关闭空元素是可选的。

DOCTYPE

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

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

<!DOCTYPE html>

以上语法不区分大小写。

字符编码

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

<meta charset = "UTF-8">

以上语法不区分大小写。

HTML5元素

HTML5元素使用开始标记和结束标记进行标记。标签使用尖括号分隔，标签名称介于两者之间。

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

以下是HTML5元素的示例 -

<p>...</p>

HTML5标记名称不区分大小写，可以全部大写或混合大小写，但最常见的约定是坚持使用小写。

大多数元素包含一些内容，如

... p>包含一个段落。

但是，有些元素根本不包含任何内容，这些元素称为void元素。例如， 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 - 此标记可用于将标题与某些嵌入内容（如图形或视频）相关联。

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://www.xnip.cn/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.xnip.cn/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.xnip.cn/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://xnip.cn/">xnip</a></p> 
      </footer> 
   </body> 
</html>