HTML5 的 10 大新特性

HTML 代表超文本标记语言，它是用于创建网页和 Web 应用程序的标准标记语言。 HTML5 是 HTML 的第 5 个版本。随着 HTML5 功能的发明，不仅可以创建更好的网站，而且我们还可以创建动态网站。

现在让我们来看看 HTML5 中添加的所有新特性，这些特性使它比 HTML 更好：

1. 音频和视频的简介：

   音频和视频标签是 HTML5 的两个主要补充。它允许开发人员在他们的网站上嵌入视频或音频。 HTML5 视频可以使用 CSS 和 CSS3 来设置视频标签的样式。您可以更改边框、不透明度、反射、渐变、过渡、变换，甚至动画。 HTML5 使添加视频的速度非常快，而且无需构建视频播放器。这为开发人员节省了时间，并为客户提供了更优质、更实惠的解决方案。

   例子：

   HTML

   
   
   
   Example of video and audio tag
       
     
          
          
           Your browser does not support the video element.
      
       
      
   
   

   输出：生成的 UI 如下所示：

   

   视频输出

2. 矢量图形：

   这是对修订版的新增内容，极大地影响了网站中 Adobe Flash 的使用。它可用于通过脚本通常 JS 绘制具有各种形状和颜色的图形。矢量图形是可扩展的，易于创建和编辑。它还支持交互性和动画。文件越小，在网络上传输和加载图形的速度就越快。这就是为什么许多人更喜欢使用矢量图形的原因。

   例子：

   输出：

   

   矢量输出

3. 页眉和页脚：

   有了这些新标签，不再需要用

   标签来标识这两个元素。页脚放置在网页的末尾，而页眉放置在网页的开头。通过使用

   和

   HTML5 元素，浏览器将知道先加载什么，稍后加载什么。

   标题可以包含-

   • 一个或多个标题元素 (

     –

     )

   • 徽标或图标
   • 作者信息

   页脚可以包含-

   • 作者信息
   • 版权信息
   • 联系信息
   • 返回顶部链接

   它们都具有与显示块相同的默认 CSS 属性。

   

   HTML 与 HTML5 的布局

   示例：下面的示例说明了 HTML 中的

   元素：

   HTML

    
    
        
            
        
        
           
    
               
    
                   
   This is the heading.
    
                   
   This is the sub-heading.
    
                     
   This is the metadata.
      
               
    
           
    
        
                        
   

   输出：

   

   示例：下面的示例说明了 HTML 元素中的

   标签：

   HTML

    
    
        
            
            
        
        
           
    
               
    
                     
    
                       About Us| 
                       Privacy Policy| 
                       Careers 
                   
      
               
    
                 
   @geeksforgeeks, Some rights reserved
      
           
    
        
                        
   

   输出：

   

4. 图和图说明：

   HTML5 允许使用

   元素标记文档中的照片，并使用

   元素定义照片的标题。

   标签定义了

   元素的标题。该标签为相当于图形的内容提供了一个容器。它可用于将标题与一个或多个图像、代码块或其他内容组合在一起。

   例子：

   HTML

   
     
     
   Fig.1 - Geeksforgeeks.
   
   

   输出：

   

   图形和 figcaption 输出

5. 导航标签：
   标签定义了一组导航链接。它用于链接到网站上不同页面的互联网站点部分。可以通过多种方法来组织超链接。导航元素的常见示例是菜单、表格、内容和索引。此元素使创建导航菜单变得更加容易，创建一个整洁的文本链接水平菜单，并帮助屏幕阅读软件正确识别文档中的主要导航区域。

   例子：

   HTML

    HTML Nav tag
   
     HTML
     CSS
     JavaScript
     jQuery
   
   

   输出：

   

   导航输出

6. 进度标签：

   progress 标签用于检查任务在执行过程中的进度。 Progress 标签可以与 JavaScript 结合使用。

   例子：

   HTML

   The progress element
     
   Downloading progress:
    32% 
   

   输出：

   

7. 占位符属性：
   placeholder 属性指定了一个简短的提示，用于描述输入字段/文本区域的预期值。在用户输入值之前，简短提示会显示在字段中。

   例子：

   HTML

    
    
     
    
        
           
    
               GeeksforGeeks 
           
    
           
    
           Placeholder Attribute in Input Element 
           
    
           
    
                
               
    
                
               
    
                
           
    
    
    
     
    
   

   输出：

   

8. 电子邮件属性：
   当表单中的输入类型设置为电子邮件时，浏览器会从代码中获取指令以编写有效格式的电子邮件。输入的电子邮件 ID 会自动验证以检查电子邮件 ID 的格式是否正确。
   例子：

   HTML

    
    
        
            
        
         
        
             
           
    
               GeeksForGeeks 
           
    
             
           
   HTML 
    
             
           
    
               Email:  
           
    
        
   
   

   输出：
   

9. 贮存：

   在 HTML 的情况下，我们可以使用浏览器作为临时存储，而在 HTML5 的情况下，使用应用程序缓存、Web SQL 数据库和 Web 存储。

10. 便于使用：

    虽然 HTML5 确实存在持续更新等风险，但与其他版本的 HTML 相比，由于语法更简单，因此通常很容易跟上变化和更新。

HTML5 中添加了更多标签和功能。一些常见的标签是导航、旁白、部分、摘要、文章、仪表等等。