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元素-

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

祝学习愉快! (发现内容有误?请选中要编辑的内容 -> 右键 -> 修改 -> 提交!帮助我们改进教程质量)

精选教程推荐

👇 以下精选教程可能对您有帮助,拓展您的技术视野

人人都是prompt工程师 -〔北冥〕

前端全链路优化实战课 -〔唐俊开〕

给程序员的写作课 -〔高磊〕

容量保障核心技术与实战 -〔吴骏龙〕

深入浅出云计算 -〔何恺铎〕

TypeScript开发实战 -〔梁宵〕

Spring Boot与Kubernetes云原生微服务实践 -〔杨波〕

Go语言从入门到实战 -〔蔡超〕

技术领导力实战笔记 -〔TGO鲲鹏会〕

📝 好记忆不如烂笔头,留下您的学习笔记吧!

暂无学习笔记,成为第一个分享的人吧!

您的笔记将帮助成千上万的学习者