HTML5 - 语法
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">
以上语法不区分大小写。
通常的做法是将一个值为“text/javascript”的type属性添加到脚本元素中，如下所示 -
<script type = "text/javascript" src = "scriptfile.js"></script>
HTML 5删除了所需的额外信息，您可以使用以下语法 -
<script src = "scriptfile.js"></script>
标签
到目前为止，您正在编写，如下所示 -
<link rel = "stylesheet" type = "text/css" href = "stylefile.css">
HTML 5删除了所需的额外信息，您只需使用以下语法 -
<link rel = "stylesheet" href = "stylefile.css">
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.iowiki.com/html">HTML Tutorial</a></li>
<li><a href = "https://www.iowiki.com/css">CSS Tutorial</a></li>
<li><a href = "https://www.iowiki.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://iowiki.com/">IOWIKI</a></p>
</footer>
</body>
</html>
它会产生以下结果 -
新页面打开