如何创建动态 HTML 页面？

在本文中，我们将了解如何使用 HTML、CSS 和 JavaScript 创建动态 HTML 页面。首先让我们知道什么是动态 HTML 页面。

动态 HTML 页面，顾名思义是指动态的 HTML 页面，它可以根据用户输入进行自定义和更改。例如：-

• 使用 CSS，我们可以在用户每次单击网页上的按钮时更改网页的背景颜色。
• 使用 JavaScript 我们可以要求用户输入他/她的名字，然后在网页上动态显示。

如果你想进一步了解动态 HTML 页面，可以看看这篇文章 DHTML JavaScript
.

让我们举一些例子来了解如何使用 HTML 和 CSS 创建动态 HTML 页面。

示例1：以用户名为输入，动态改变网页的文本内容

HTML

  

    Enter Your Name
      
    
    Submit
    
  
  
    
        function EnterName()
        {
            var x= document.getElementById("name").value;
  
            document.getElementById("demo").innerHTML = 
                "Welcome to Geeks For Geeks "+ x ;
        }
    

    

输出：

示例 2：每次点击时动态更改网页的背景颜色

HTML

  

    
    

  

    Enter Your Color Choice
      
    
        Color
    
         
    
        function changecolor()
        {
            // Generating random color each time
            var color = "#"+(Math.random()*16777215|0).toString(16);
              
            $("body").css("background-color",color);
        }
    

    

输出：