HTML页面实用技巧整理：Ajax、样式控制与交互提升

126 浏览量更新于2024-08-31 收藏 134KB PDF 举报

本文主要介绍了HTML页面中一些实用的小技巧，包括设置页面不缓存、JQuery AJAX跳转、保持页面回退时的滚动位置、控制表格内容显示、弹出窗口定位、隐藏滚动条、去除图片链接虚线、邮件表单提交以及子窗口刷新父窗口等方法。 1. 禁用页面缓存：在`<head>`标签中添加以下代码，可以防止HTML页面被浏览器缓存： ```html <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> <meta http-equiv="expires" content="Wed, 26 Feb 1978 08:21:57 GMT"> ``` 2. JQuery AJAX无缓存设置：使用JQuery的`ajaxSetup`方法，将`cache`参数设为`false`，可以确保每次AJAX请求都不使用缓存数据： ```javascript $.ajaxSetup({ cache: false }); ``` 3. 保持回退时的滚动位置：设置`MaintainScrollPositionOnPostback`属性为`true`，可以在页面回退时保持原来的滚动位置，但这个属性通常是ASP.NET中的，对于纯HTML页面可能需要JavaScript实现。 4. 控制表格内容超出显示：当表格内容超出单元格时，可以设置`TABLE-LAYOUT`属性为`fixed`，来固定表格布局： ```html style="TABLE-LAYOUT:fixed" ``` 5. 弹出窗口定位：可以使用`onblur`事件让弹出窗口始终保持在最前面： ```html <body onblur="this.focus();"> ``` 6. 隐藏滚动条：隐藏竖向滚动条：`<body style='overflow:scroll;overflow-y:hidden'></body>` 隐藏横向滚动条：`<body style='overflow:scroll;overflow-x:hidden'></body>` 同时隐藏两个滚动条：`<body scroll="no"></body>` 7. 去除图片链接虚线：当点击图片链接时，通过`onFocus`事件消除周围虚线： ```html <a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a> ``` 8. 电子邮件表单提交：创建一个表单，提交后会发送邮件到指定地址： ```html <form name="form1" method="post" action="mailto:@*.com" enctype="text/plain"> <input type="submit"></form> ``` 9. 子窗口刷新父窗口：在子窗口中使用JavaScript的`window.opener.location.reload()`可以刷新父窗口的内容。 10. 设置页面背景图片：为了设置非满屏且固定的背景图片，可以使用CSS样式： ```html <html> <head> <STYLE> body { background-image: url(logo.gif); background-repeat: no-repeat; } </STYLE> </head> ``` 这将使背景图片只显示一次，且在页面滚动时不会重复。以上技巧对HTML页面的开发和优化具有实用价值，可以帮助提升用户体验和页面性能。

html页面中常用的一些小方法整理页面中常用的一些小方法整理

html页面中常用的一些小方法整理，网页制作的朋友可以看下，确实不错。

在<Head>标签中加

如何用JQuery的ajax跳转，可以这样清理

//ajax请求不缓存

$.ajaxSetup({ cache: false

});

MaintainScrollPositionOnPostback="true"

如内容超出单元格，则隐藏

style="TABLE-LAYOUT: fixed"

让弹出窗口总是在最上面: <body onblur="this.focus();">

不要滚动条? 让竖条没有: <body style='overflow:scroll;overflow-y:hidden'> </body>

让横条没有: <body style='overflow:scroll;overflow-x:hidden'> </body>

两个都去掉？更简单了 <body scroll="no"> </body>

怎样去掉图片链接点击后，图片周围的虚线？ <a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

电子邮件处理提交表单 <form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain">

在打开的子窗口刷新父窗口的代码里如何写？ window.opener.location.reload()

如何设定打开页面的大小 <body onload="top.resizeTo(300,200);">

在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动 <html><head> <STYLE> body {background-

image:url(logo.gif); background-repeat:no-repeat; background-position:center } </STYLE> </head> <body

bgproperties="fixed" > </body> </html>

各种样式的光标 auto ：标准光标

default ：标准箭头

hand ：手形光标

wait ：等待光标

text ：I形光标

vertical-text ：水平I形光标

no-drop ：不可拖动光标

not-allowed ：无效光标

help ：?帮助光标

all-scroll ：三角方向标

move ：移动标

crosshair ：十字标 e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize

本机ip<%=request.servervariables("remote_addr")%>

服务器名<%=Request.ServerVariables("SERVER_NAME")%>

服务器IP<%=Request.ServerVariables("LOCAL_ADDR")%>

服务器端口<%=Request.ServerVariables("SERVER_PORT")%>

服务器时间<%=now%> IIS

版本<%=Request.ServerVariables"SERVER_SOFTWARE")%>

脚本超时时间<%=Server.ScriptTimeout%>

本文件路径<%=server.mappath(Request.ServerVariables("SCRIPT_NAME"))%>

服务器CPU数量<%=Request.ServerVariables("NUMBER_OF_PROCESSORS")%>

服务器解译引擎<%=ScriptEngine & "/"& ScriptEngineMajorVersion &"."&ScriptEngineMinorVersion

&"."& ScriptEngineBuildVersion %>

服务器操作系统<%=Request.ServerVariables("OS")%>

文本竖排方式

<!--

.shupai {Writing-mode:tb-rl}

-->

下载后可阅读完整内容，剩余9页未读，立即下载

weixin_38514660

粉丝: 6
资源: 946

HTML页面实用技巧整理：Ajax、样式控制与交互提升

网页常用特效整理网页常用特效整理.docx

HTML知识整理、网页制作基础教程 CHM.rar

前端html5css3笔记整理下载

python正则表达式整理网页文档页

html网页多人物介绍

为什么用浏览器打开网页 查看源码不规整 已经用vscode整理过了

html期末网页作业zip包

格式话静态页面和html

Dreamweaver制作一个网页关于古诗词

制作一个简单HTML传统端午节日网页实验目的

最新资源

为什么用浏览器打开网页查看源码不规整已经用vscode整理过了