HTML5 - 语法规则

HTML5 - 语法规则 首页 / HTML5入门教程 / HTML5 - 语法规则

HTML 5没有与XHTML相同的语法规则,在XHTML中,无涯教程需要使用小写标语法称,并引用属性,属性必须具有值并关闭所有空元素。

HTML5具有很大的灵活性,并且支持以下函数-

  • 大写标语法称。
  • 属性的引号是可选的。
  • 属性值是可选的。
  • 关闭空元素是可选的。

DOCTYPE

较早版本的HTML中的DOCTYPE描述很长,因为HTML语言基于SGML,因此需要引用DTD。

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

<!DOCTYPE html>

上面的语法不区分大小写。

无涯教程网

Character Encoding

HTML 5可以使用简单的语法来指定字符编码,如下所示:

<meta charset="UTF-8">

上面的语法不区分大小写。

无涯教程网

Script 标签

通常的做法是,向脚本元素中添加一个值为" 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属性的示例,该示例说明了如何使用值为" example"的名为class的属性标签div元素-

链接:https://www.learnfk.comhttps://www.learnfk.com/html5/html5-syntax.html

来源:LearnFk无涯教程网

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

属性只能在开始标签中指定,并且绝不能在结束标签中使用。

HTML5属性不区分大小写,并且可以全部大写或大小写混合使用,尽管最常见的约定是坚持小写。

这是HTML5属性的完整列表。

HTML5 Document

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

  • 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文件 Structure Example</h1> 
         <p>This page should be tried in safari, chrome or Mozila.</p> 
      </header> 
   
      <nav> 
         <ul> 
            <li><a href="https://www.learnfk.com/html">HTML Tutorial</a></li> 
            <li><a href="https://www.learnfk.com/css">CSS Tutorial</a></li> 
            <li><a href="https://www.learnfk.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://learnfk.com/">Learnfk Point</a></p> 
      </footer> 
   
   </body> 
</html> 

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

编辑训练营 -〔总编室〕

DDD实战课 -〔欧创新〕

设计模式之美 -〔王争〕

JavaScript核心原理解析 -〔周爱民〕

SRE实战手册 -〔赵成〕

To B市场品牌实战课 -〔曹林〕

HarmonyOS快速入门与实战 -〔QCon+案例研习社〕

超级访谈:对话汤峥嵘 -〔汤峥嵘〕

快手 · 音视频技术入门课 -〔刘歧〕

好记忆不如烂笔头。留下您的足迹吧 :)