如何用HTML写一个百度浏览器

如何用HTML写一个浏览器!!!

制作可以选择搜索引擎的浏览器

先写一个form表单,初始action为“http://www.baidu.com/baidu”,引用一个文本框输入搜索内容。
利用select标签来选择搜索引擎。代码如下!!!
360的action为"https://www.so.com/s"。

<form action="http://www.baidu.com/baidu" id="form" target="_black">
        <input type="text" name=word id="text">
        <input type="submit" value="提交" onclick="a()">
        <select name="" id="check">
            <option value="百度" >百度</option>
            <option value="360">360</option>
        </select>
    </form>

接下来写Javascript

function a(){
        var i=document.getElementById("form").action;
        var a=document.getElementById("check").value;
        if(a=="百度"){
            document.getElementById("form").action="http://www.baidu.com/baidu";
            var list = document.getElementsByTagName("input");
            list[0].name='word';
        }
        else{
            document.getElementById("form").action="https://www.so.com/s";
            var list = document.getElementsByTagName("input");
            list[0].name='q';
        }
    }

注意!!

通过Javascript,使用如下代码改变form表单的action document.getElementById(“form”).action=“http://www.baidu.com/baidu”;
百度的搜索和360搜索有所不同。
在form表单中,百度的name为word,而360的为q。
要改变name的值,可以使用如下代码。
var list = document.getElementsByTagName(“input”);
list[0].name=‘q’;

先获得所有的input标签,形成一个list,再改变第一个元素的name。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要了解HTML和CSS的基础知识,以及如何使用VSCode进行开发。然后按照以下步骤操作: 1. 打开VSCode,点击左侧的“打开文件夹”按钮,并选择一个文件夹作为你的项目文件夹。 2. 在项目文件夹中创建一个新文件,命名为“index.html”。 3. 在“index.html”文件中编HTML代码,包括网页的标题、头部导航、搜索框、底部导航等。例如: ``` <!DOCTYPE html> <html> <head> <title>百度百科</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <header> <nav> <ul> <li><a href="#">百度首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">贴吧</a></li> <li><a href="#">知道</a></li> <li><a href="#">音乐</a></li> <li><a href="#">图片</a></li> <li><a href="#">视频</a></li> <li><a href="#">地图</a></li> <li><a href="#">更多</a></li> </ul> <form> <input type="text" placeholder="请输入关键字"> <button type="submit">搜索</button> </form> </nav> </header> <main> <h1>百度百科</h1> <p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书。</p> </main> <footer> <nav> <ul> <li><a href="#">关于百度</a></li> <li><a href="#">百度推广</a></li> <li><a href="#">百度商务</a></li> <li><a href="#">使用百度前必读</a></li> <li><a href="#">意见反馈</a></li> </ul> </nav> <p>©2021 Baidu</p> </footer> </body> </html> ``` 4. 在项目文件夹中创建一个新文件,命名为“style.css”。 5. 在“style.css”文件中编CSS代码,包括网页的样式、布局等。例如: ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } nav { background-color: #3385ff; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; } nav ul { list-style: none; display: flex; } nav ul li { margin-right: 20px; } nav ul li:last-child { margin-right: 0; } nav ul li a { color: #fff; text-decoration: none; } nav form { display: flex; align-items: center; } nav input[type="text"] { height: 30px; padding: 0 10px; border: none; border-radius: 5px 0 0 5px; } nav button[type="submit"] { height: 30px; padding: 0 20px; border: none; border-radius: 0 5px 5px 0; background-color: #4d90fe; color: #fff; cursor: pointer; } main { max-width: 1200px; margin: 0 auto; padding: 20px; } main h1 { font-size: 36px; margin-bottom: 20px; } main p { font-size: 18px; line-height: 1.5; } footer { background-color: #f2f2f2; padding: 20px; } footer nav ul { display: flex; } footer nav ul li { margin-right: 20px; } footer nav ul li:last-child { margin-right: 0; } footer nav ul li a { color: #999; text-decoration: none; } footer p { font-size: 12px; color: #999; text-align: center; margin-top: 20px; } ``` 6. 保存“index.html”和“style.css”文件。 7. 右键单击“index.html”文件,选择“在默认浏览器中打开”,你就可以在浏览器中看到你的百度百科网页了。 以上是基本的网页创建方法,你可以在此基础上添加更多的内容和功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值