HTML页面优化技巧与jQuery AJAX设置详解

78 浏览量更新于2024-08-30 收藏 133KB PDF 举报

在HTML页面开发中，掌握一些实用的小技巧可以提升页面性能和用户体验。本文将介绍以下几个关键知识点： 1. HTTP头控制缓存: 在`<Head>`部分添加`<meta>`标签有助于控制浏览器缓存。例如： - `<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进行AJAX请求时，可以通过设置`$.ajaxSetup`的`cache`属性为`false`来避免缓存，如下所示： ```javascript $.ajaxSetup({ cache: false }); ``` 这样可以确保每次AJAX请求都会向服务器发送新的请求。 3. 保持页面滚动位置: 在服务器端处理（如ASP的Postback）后，可以使用`MaintainScrollPositionOnPostback`属性来保持用户之前的滚动位置，但这段内容没有具体的代码示例。 4. 隐藏超出单元格的内容: 使用CSS `TABLE-LAYOUT: fixed`属性可以保持表格布局不变，而当内容超出单元格时隐藏多余部分。 5. 窗口位置和滚动条控制: - 使用`<body onblur="this.focus();">`保持弹出窗口始终在最上方。 - 消除垂直滚动条：`<body style='overflow-y: hidden;'>` - 消除水平滚动条：`<body style='overflow-x: hidden;'>` - 同时移除两种滚动条：`<body scroll="no"></body>` 6. 去除图片链接虚线: 通过`<a>`标签的`onFocus`事件清除图片链接的边框，如下： ```html <a href="#" onFocus="this.blur()"> <img src="logo.jpg" border="0"></a> ``` 7. 电子邮件表单提交: 通过`<form>`标签设置邮件提交功能，使用`method="post"`和`action="mailto:..."`，表单数据以纯文本形式发送。 8. 刷新父窗口: 在子窗口中，使用`window.opener.location.reload()`可以刷新父窗口。 9. 设定页面加载大小: 页面加载完成后，可以通过`<body onload>`事件调整页面初始大小，如`top.resizeTo(300,200);`。 10. 动态背景图片: 使用CSS实现非全屏背景图片，背景图片在页面滚动时保持不动： ```html <html> <head> <style> body { background-image: url(logo.gif); background-repeat: no-repeat; background-position: center; } </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}

–>

</style>

超链接去虚线边框

在链接中加上onfocus="this.blur()"

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

weixin_38713801

粉丝: 6
资源: 930

HTML页面优化技巧与jQuery AJAX设置详解

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

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

js页面跳转的常用方法整理

JavaScript与HTML结合的基本使用方法整理

DIV+CSS网页布局常用的一些基础知识整理

Android应用开发中WebView的常用方法笔记整理

整理AngularJS中的一些常用指令

dwr utils.js常用方法整理

jsp常用方法整理，包括servlet等

整理HTML5的一些新特性与Canvas的常用属性

最新资源