HTML5 - 语法 - 前端之家

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

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

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

大写标签名称.
引用对于属性是可选的.
属性值是可选的.
关闭空元素是可选的.

旧版HTML中的DOCTYPE

DOCTYPE较长，因为HTML语言基于SGML，因此需要引用DTD./p>

HTML 5作者将使用简单的语法指定DOCTYPE如下 :

<!DOCTYPE html>

以上语法不区分大小写.

字符编码

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

<meta charset = "UTF-8">

以上语法不区分大小写.

<script> tag

通常的做法是将一个值为"text/javascript"的type属性添加到脚本元素中，如下所示 :

<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>包含一个段落.但是，有些元素根本不包含任何内容，这些元素称为void元素.例如， br，hr，link，meta 等.

以下是 HTML5元素.

HTML5属性

元素可能包含用于设置元素的各种属性的属性.

某些属性是全局定义的，可用于任何元素，而其他属性仅针对特定元素定义.所有属性都有一个名称和一个值，如下例所示.

以下是HTML5属性的示例，该属性说明了如何使用名为的属性标记div元素class使用值"example" :

 <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.IT屋.com/html">HTML Tutorial</a></li> 
            <li><a href = "https://www.IT屋.com/css">CSS Tutorial</a></li> 
            <li><a href = "https://www.IT屋.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://IT屋.com/">Tutorials Point</a></p> 
      </footer> 
   
   </body> 
</html>