Html5 简明教程

HTML5 - Syntax

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

The HTML 5 language has a "custom" HTML syntax that is compatible with HTML 4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML 4.

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

HTML 5 does not have the same syntax rules as XHTML where we needed lower case tag names, quoting our attributes, an attribute had to have a value and to close all empty elements.

HTML5 具有很大的灵活性，它支持以下特性 −

HTML5 comes with a lot of flexibility and it supports the following features −

  1. Uppercase tag names.

  2. Quotes are optional for attributes.

  3. Attribute values are optional.

  4. Closing empty elements are optional.

The DOCTYPE

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

DOCTYPEs in older versions of HTML were longer because the HTML language was SGML based and therefore required a reference to a DTD.

HTML 5 作者会使用简单的语法指定 DOCTYPE，如下所示 −

HTML 5 authors would use simple syntax to specify DOCTYPE as follows −

<!DOCTYPE html>

上面的语法不分大小写。

The above syntax is case-insensitive.

Character Encoding

HTML 5 作者可以使用简单的语法指定如下字符编码：

HTML 5 authors can use simple syntax to specify Character Encoding as follows −

<meta charset = "UTF-8">

上面的语法不分大小写。

The above syntax is case-insensitive.

The <script> tag

添加一个值是 "text/javascript" 的类型属性到脚本元素是常见的做法，如下所示：

It’s common practice to add a type attribute with a value of "text/javascript" to script elements as follows −

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

HTML 5 删除了需要的额外信息，你可以简单地使用以下语法：

HTML 5 removes extra information required and you can use simply following syntax −

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

The <link> tag

到目前为止，你的编写 <link> 如下：

So far you were writing <link> as follows −

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

HTML 5 删除了需要的额外信息，你可以简单地使用以下语法：

HTML 5 removes extra information required and you can simply use the following syntax −

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

HTML5 Elements

HTML5 元素使用开始标签和结束标签标记。标签使用包含标签名称的尖角符号定界。

HTML5 elements are marked up using start tags and end tags. Tags are delimited using angle brackets with the tag name in between.

开始标签和结束标签的区别是后者在标签名称前包含一个斜杠。

The difference between start tags and end tags is that the latter includes a slash before the tag name.

下面是 HTML5 元素的示例：

Following is the example of an HTML5 element −

<p>...</p>

HTML5 标签名称不区分大小写，可以使用全部大写字母或混合字母，尽管最常见的惯例是坚持使用小写字母。

HTML5 tag names are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

大多数元素包含一些内容，如 <p>…​</p> 的内容时段落。不过，有些元素禁止包含任何内容，它们被称为空元素。例如 br, hr, link, meta 等。

Most of the elements contain some content like <p>…​</p> contains a paragraph. Some elements, however, are forbidden from containing any content at all and these are known as void elements. For example, br, hr, link, meta, etc.

下面是 HTML5 Elements 的完整列表。

Here is a complete list of HTML5 Elements.

HTML5 Attributes

这些元素可包含用于设置元素各种属性的属性。

Elements may contain attributes that are used to set various properties of an element.

有些属性在全局中定义，可在任何元素中使用，而有些属性仅针对特定的元素定义。所有属性均有一个名称和一个值，如下面的示例所示。

Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example.

下面是 HTML5 属性的示例，它展示了如何将一个 div 元素标记为带有"example"的值的 class 属性 −

Following is the example of an HTML5 attribute which illustrates how to mark up a div element with an attribute named class using a value of "example" −

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

属性只能在起始标签内指定，绝对不可在结束标签内使用。

Attributes may only be specified within start tags and must never be used in end tags.

HTML5 属性不区分大小写，可以全部采用大写或混合大小写编写，但最常见的惯例是坚持使用小写。

HTML5 attributes are case insensitive and may be written in all uppercase or mixed case, although the most common convention is to stick with lowercase.

下面是 HTML5 Attributes 的完整列表。

Here is a complete list of HTML5 Attributes.

HTML5 Document

为了更好的结构，引入了以下标签 −

The following tags have been introduced for better structure −

  1. section − This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.

  2. article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.

  3. aside − This tag represents a piece of content that is only slightly related to the rest of the page.

  4. header − This tag represents the header of a section.

  5. footer − This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.

  6. nav − This tag represents a section of the document intended for navigation.

  7. dialog − This tag can be used to mark up a conversation.

  8. figure − This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

HTML 5 文档的标记类似如下 −

The markup for an HTML 5 document would look like the following −

<!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.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>

它将产生以下结果 −

It will produce the following result −