html 制作简单的搜索功能

html-css0433

html 制作简单的搜索功能,第1张

1.打开Hbuilder编辑器,创建一个输入框和一个按钮,水平放置。

2.首先,将“#7FCC0B”颜色的边框添加到输入框中,设置宽度和高度。然后,设置按钮按钮的白色字体和背景色“#7FCC0B”。

3.按CRTL+s可以在软件的右边看到最终的效果。这就是如何在HTML中创建一个搜索框。

扩展资料:

1. 语言概述

WWW上的超媒体文档称为页面。作为组织或个人在万维网上的起点的页面称为主页,而主页通常包含指向其他相关页面或其他节点的指针(超链接)。从逻辑上讲作为一个整体处理的一系列页面的有机集合称为一个网站(网站或Web)。

Web页面,也称为Web页面,在这里没有区别。

2. 规范和标准

HTML是一种规范,一种标准,它使用标记符号来标记要显示的web页面的各个部分。web文件本身是一个文本文件,通过在文本文件中添加标记,您可以告诉浏览器如何显示内容(例如,如何处理文本、如何安排图片、如何显示图片等)。

浏览器依次读取网页文件,然后根据标记解释并显示其标记的内容。错误的标记不会被指出,也不会停止其解释的执行。编译器只能通过显示效果来分析错误的原因和部分原因。但是,需要注意的是,不同的浏览器可能对相同的标记有不同的解释,并且可能具有不同的显示效果。

3.标记语言

HTML被称为超文本标记语言,因为文本包含所谓的“超链接”点—URL指针,使浏览器能够通过激活(单击)新网页来轻松检索它们。这是为什么HTML被广泛使用的最重要的原因之一。

因此,Web页面的本质是HTML,通过结合其他Web技术(如脚本语言、CGI、组件等)可以创建功能强大的Web页面。因此,HTML是Web编程的基础,这意味着万维网是基于超文本的。

通俗了解,通过html语法规则让图片、文字等内容,在浏览器显示出来的代码我们称之为网页源代码。源代码(源文件)是指网页的html代码,这里可以将CSS代码也称为CSS源代码。

第一种:打开一个网页后点击鼠标的

右键就会有"查看源文件",操作 鼠标右键--->查看源文件 即可弹出一个记事本,而记事本内容就是此网页的html代码。可能会碰到一些网页鼠标右键无反应或提出提示框,那是因为做网页的加入了JS代码来禁止用户查看源文件代码或复制网页内容,但是这种方法也没用,只有你稍微懂得以下第二种方法即可查看此网页的源代码源文件。

第二种:通过浏览器状态栏或工具栏中的点击

“查看”然后就用一项“查看源代码”,点击查看源代码即可查看此网页的源代码源文件。在微软IE下截图:在微软IE下 查看--->源文件 即可查看此网页代码在傲游浏览器下截图:

查看别人网页的源代码可以为我们制作网页时候有帮助,以后将介绍查看源代码更多方法及怎么运用到别人的源代码文件。

第三种:也可以通过一些网页查找源代码的网站去搜索,有一些专门的这些网站的,只需要你想要网站的地址就可以了。

分类: 电脑/网络 >>程序设计 >>其他编程语言

问题描述:

类似于按F3的功能~!

只搜索当前页中是文字~!

不要查询数据库

解析:

<>

<head>

<meta -equiv="Content-Language" content="zh-">

<meta -equiv="Content-Type" content="text/charset=gb2312">

<title>test</title>

</head>

<body class="page_speeder_724936674">

<script language="JavaScript">

var NS4 = (documentyers)Which browser?

var IE4 = (document.all)

var win = windowwindow to search.

var n = 0

function findInPage(str) {

var txt, i, found

if (str == "")

return false

Find next occurance of the given string on the page, wrap around to the

start of the page if necessary.

if (NS4) {

Look for match starting at the current point. If not found, rewind

back to the first match.

if (!win.find(str))

while(win.find(str, false, true))

n++

else

n++

If not found in either direction, give message.

if (n == 0)

alert("本页没有查到.")

}

if (IE4) {

txt = win.document.body.createTextRange()

Find the nth match from the top of the page.

for (i = 0i <= n &&(found = txt.findText(str)) != falsei++) {

txt.moveStart("character", 1)

txt.moveEnd("textedit")

}

If found, mark it and scroll it into view.

if (found) {

txt.moveStart("character", -1)

txt.findText(str)

txt.select()

txt.scrollIntoView()

n++

}

Otherwise, start over at the top of the page and find first match.

else {

if (n >0) {

n = 0

findInPage(str)

}

Not found anywhere, give message.

else

alert("本页没有查到此题目,请尝试用下百度的搜索引擎在网上查下.")

}

}

return false

}

</script>

<div id="floater" class="page_speeder_1555397322">

<div align=center class="page_speeder_1173002127">

<script language=JavaScript>

self.onError=null

currentX = currentY = 0

whichIt = null

lastScrollX = 0lastScrollY = 0

NS = (documentyers) ? 1 : 0

IE = (document.all) ? 1: 0

<!-- STALKER CODE -->

function heartBeat() {

if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}

if(NS) { diffY = self.pageYOffsetdiffX = self.pageXOffset}

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelTop += percent

if(NS) document.floater.top += percent

lastScrollY = lastScrollY + percent

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelLeft += percent

if(NS) document.floater.left += percent

lastScrollX = lastScrollX + percent

}

}

<!-- /STALKER CODE -->

<!-- DRAG DROP CODE -->

function checkFocus(x,y) {

stalkerx = document.floater.pageX

stalkery = document.floater.pageY

stalkerwidth = document.floater.clip.width

stalkerheight = document.floater.clip.height

if( (x >stalkerx &&x <(stalkerx+stalkerwidth)) &&(y >stalkery &&y <(stalkery+stalkerheight))) return true

else return false

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement

while (whichIt.id.indexOf("floater") == -1) {

whichIt = whichIt.parentElement

if (whichIt == null) { return true}

}

whichIt.style.pixelLeft = whichIt.offsetLeft

whichIt.style.pixelTop = whichIt.offsetTop

currentX = (event.clientX + document.body.scrollLeft)

currentY = (event.clientY + document.body.scrollTop)

} else {

window.captureEvents(Event.MOUSEMOVE)

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater

StalkerTouchedX = e.pageX-document.floater.pageX

StalkerTouchedY = e.pageY-document.floater.pageY

}

}

return true

}

function moveIt(e) {

if (whichIt == null) { return false}

if(IE) {

newX = (event.clientX + document.body.scrollLeft)

newY = (event.clientY + document.body.scrollTop)

distanceX = (newX - currentX)distanceY = (newY - currentY)

currentX = newXcurrentY = newY

whichIt.style.pixelLeft += distanceX

whichIt.style.pixelTop += distanceY

if(whichIt.style.pixelTop <document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop

if(whichIt.style.pixelLeft <document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft

if(whichIt.style.pixelLeft >document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20

if(whichIt.style.pixelTop >document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5

event.returnValue = false

} else {

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY)

if(whichIt.left <0+self.pageXOffset) whichIt.left = 0+self.pageXOffset

if(whichIt.top <0+self.pageYOffset) whichIt.top = 0+self.pageYOffset

if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17

if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17

return false

}

return false

}

function dropIt() {

whichIt = null

if(NS) window.releaseEvents (Event.MOUSEMOVE)

return true

}

<!-- DRAG DROP CODE -->

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN)

window.onmousedown = grabIt

window.onmousemove = moveIt

window.onmouseup = dropIt

}

if(IE) {

document.onmousedown = grabIt

document.onmousemove = moveIt

document.onmouseup = dropIt

}

if(NS || IE) action = window.setInterval("heartBeat()",1)

</script>

<form name=search onSubmit="return findInPage(this.string.value)">

<font size=3><font color="#FF0000"><br>

请输入关键字:<br>

</font><br>

<input name=string type=text size=10 onChange="n = 0"><br>

</font><br>

<input type=submit value="查找">

<input type=submit value="继续查"><br>

</form>

</div>

</div>

<script language=JavaScript>

self.onError=null

currentX = currentY = 0

whichIt = null

lastScrollX = 0lastScrollY = 0

NS = (documentyers) ? 1 : 0

IE = (document.all) ? 1: 0

<!-- STALKER CODE -->

function heartBeat() {

if(IE) { diffY = document.body.scrollTopdiffX = document.body.scrollLeft}

if(NS) { diffY = self.pageYOffsetdiffX = self.pageXOffset}

if(diffY != lastScrollY) {

percent = .1 * (diffY - lastScrollY)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelTop += percent

if(NS) document.floater.top += percent

lastScrollY = lastScrollY + percent

}

if(diffX != lastScrollX) {

percent = .1 * (diffX - lastScrollX)

if(percent >0) percent = Math.ceil(percent)

else percent = Math.floor(percent)

if(IE) document.all.floater.style.pixelLeft += percent

if(NS) document.floater.left += percent

lastScrollX = lastScrollX + percent

}

}

<!-- /STALKER CODE -->

<!-- DRAG DROP CODE -->

function checkFocus(x,y) {

stalkerx = document.floater.pageX

stalkery = document.floater.pageY

stalkerwidth = document.floater.clip.width

stalkerheight = document.floater.clip.height

if( (x >stalkerx &&x <(stalkerx+stalkerwidth)) &&(y >stalkery &&y <(stalkery+stalkerheight))) return true

else return false

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement

while (whichIt.id.indexOf("floater") == -1) {

whichIt = whichIt.parentElement

if (whichIt == null) { return true}

}

whichIt.style.pixelLeft = whichIt.offsetLeft

whichIt.style.pixelTop = whichIt.offsetTop

currentX = (event.clientX + document.body.scrollLeft)

currentY = (event.clientY + document.body.scrollTop)

} else {

window.captureEvents(Event.MOUSEMOVE)

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater

StalkerTouchedX = e.pageX-document.floater.pageX

StalkerTouchedY = e.pageY-document.floater.pageY

}

}

return true

}

function moveIt(e) {

if (whichIt == null) { return false}

if(IE) {

newX = (event.clientX + document.body.scrollLeft)

newY = (event.clientY + document.body.scrollTop)

distanceX = (newX - currentX)distanceY = (newY - currentY)

currentX = newXcurrentY = newY

whichIt.style.pixelLeft += distanceX

whichIt.style.pixelTop += distanceY

if(whichIt.style.pixelTop <document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop

if(whichIt.style.pixelLeft <document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft

if(whichIt.style.pixelLeft >document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20

if(whichIt.style.pixelTop >document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5

event.returnValue = false

} else {

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY)

if(whichIt.left <0+self.pageXOffset) whichIt.left = 0+self.pageXOffset

if(whichIt.top <0+self.pageYOffset) whichIt.top = 0+self.pageYOffset

if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17

if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17

return false

}

return false

}

function dropIt() {

whichIt = null

if(NS) window.releaseEvents (Event.MOUSEMOVE)

return true

}

<!-- DRAG DROP CODE -->

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN)

window.onmousedown = grabIt

window.onmousemove = moveIt

window.onmouseup = dropIt

}

if(IE) {

document.onmousedown = grabIt

document.onmousemove = moveIt

document.onmouseup = dropIt

}

if(NS || IE) action = window.setInterval("heartBeat()",1)

</script>

<p><b>题库 </b></p>

<p>请在右边的搜索框中查找在此页面查找<br>

<br>

"馒头是谁发明的?","诸葛亮",<br>

"“蚕蚁”是蚂蚁还是蚕?","蚕",<br>

"古诗的体制称为“风雅颂”,其中“颂”是指:","宗庙乐歌",<br>

" 目前,唯有哪个金融机构可在县一级的地方设立分支机构?","中国农业银行",<br>

"东汉末年我国的一位杰出的医学家是:","华佗",<br>

"离地面越高空气越稀薄是因为:","空气受到地球引力的影响",<br>

</P>

</body>

</>