Html代码编写技巧二

最新推荐文章于 2024-08-08 14:18:17 发布
最新推荐文章于 2024-08-08 14:18:17 发布
阅读量1.3k 收藏 3
点赞数
分类专栏： html 文章标签： html javascript iframe image microsoft features

导航条

1. 控制横向和纵向滚动条的显隐
2. 表格变色
3. 禁止复制，鼠标拖动选取
4. 普通iframe页面
5. iframe自适应高度
6. IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标
7. 字号缩放
8. 简单的跳转网页代码
9. iframe(嵌入式帧)自适应高度
10. 跳转菜单新窗口
11. flash透明选项
12. 添加到收藏夹和设为首页
13. 记录并显示网页的最后修改时间
14. 节日倒计时
15. 加在HEAD里，禁止缓存
16. 让IFRAME框架内的文档的背景透明
17. 打开窗口即最大化
18. 加入背景音乐
19. 滚动marquee
20. 防止点击空链接时，页面往往重置到页首端
21. 文字或图片弹出指定大小的窗口
22. 跳转页面代码
23. 细线分隔线
24. 表格中的自动换行
25. 消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no .
26. 禁止页面正文内容被选取
27. 不能点右键，不用CTRL+A，不能复制作!
28. IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:
29. 随机变换背景图象（一个可以刷新心情的特效）
30. 图片表单按钮
31. 左右阴影背景的CSS定义方法
32. 划过链接 手型鼠标
33. 如何关闭层
34. 关闭窗口的脚本
35. 如果文字过长,则将过长的部分变成省略号显示
36. 进入主页后自动最大化
37. 凹陷文字
38. 运行代码框
38. 给表格做链接
39. 让弹出窗口总是在最上面
40. CSS文字阴影
41. 后退&关闭窗口
42. 表格透明
43. 如何避免别人把你的网页放在框架中
44. Alt和Title的区别
45. 所有的javascript的调用尽量采取外部调用
46. 链接到
47. 基本链接样式
48. 在同一页面设置不同文字链接效果的样式
49. 下拉跳转菜单
50. select挡住div的解决方法
51. 整页的全部链接都 _blank 新窗口打开
-----------------------------------------------------------------------------------------------------------------------------------


1.控制横向和纵向滚动条的显隐？
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显

2.表格变色
<TD οnmοuseοver="this.style.backgroundColor='#FFFFFF'"
οnmοuseοut="this.style.backgroundColor=''"
style="CURSOR: hand">

3.禁止复制，鼠标拖动选取
<body οndragstart=window.event.returnValue=false οncοntextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>
--------------------------------------------------------------------------------
4.普通iframe页面
<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>

--------------------------------------------------------------------------------
5.iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no οnlοad="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe>
--------------------------------------------------------------------------------
6.IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标
<link rel="Shortcut Icon" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico">
--------------------------------------------------------------------------------
7.字号缩放
越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
--------------------------------------------------------------------------------
8.简单的跳转网页代码
如果你要让页面显示3秒钟之后跳转，可以在html代码的<head></head>部分加上这样的代码：
<meta http-equiv="refresh" content="3; url=http://www.webkkk.com">
--------------------------------------------------------------------------------
9.iframe(嵌入式帧)自适应高度
填写的嵌入地址一定要和本页面在同一个站点上，否则会提示“拒绝访问！”。对跨域引用有权限问题，请查阅其他资料。
<iframe name="guestbook" src="gbook/index.asp" scrolling=no width="100%" height="100%" frameborder=no οnlοad="document.all['guestbook'].style.height=guestbook.document.body.scrollHeight"></iframe>
--------------------------------------------------------------------------------
10.跳转菜单新窗口
<select name="select" οnchange="window.open(this.options[this.selectedIndex].value)">
<option value="http://www.microsoft.com/ie"> Internet Explorer</option>
<option value="http://www.microsoft.com"> Microsoft Home</option>
<option value="http://msdn.microsoft.com"> Developer Network</option>
</select>
--------------------------------------------------------------------------------
11.flash透明选项
<param name="wmode" value="transparent">
--------------------------------------------------------------------------------

12.添加到收藏夹和设为首页
<a href=# ="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.makewing.com/lanren/');">设为首页</a>

<a href="javascript:window.external.AddFavorite('http://www.makewing.com/lanren/','站长设计网')">收藏本站</a>


--------------------------------------------------------------------------------
13.记录并显示网页的最后修改时间
<script language=JavaScript>
document.write("最后更新时间: " + document.lastModified + "")
</script>
--------------------------------------------------------------------------------
14.节日倒计时
<Script Language="JavaScript">
　　 var timedate= new Date("October 1,2002");
　　 var times= "国庆节";
　　 var now = new Date();
　　 var date = timedate.getTime() - now.getTime();
　　 var time = Math.floor(date / (1000 * 60 * 60 * 24));
　　 if (time >= 0)
　　 document.write( "现在离"+times+"还有: "+time +"天")
</Script>
--------------------------------------------------------------------------------
15.加在HEAD里 禁止缓存
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">

--------------------------------------------------------------------------------
16.让IFRAME框架内的文档的背景透明
<iframe src="about:<body style='background:transparent'>" allowtransparency></iframe>
--------------------------------------------------------------------------------
17.打开窗口即最大化
<script language="JavaScript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>
--------------------------------------------------------------------------------
18.加入背景音乐
<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用
--------------------------------------------------------------------------------
19.滚动
<marquee direction=up height=146 οnmοuseοut=start() οnmοuseοver=stop() scrollAmount=2>滚动信息
</marquee>
--------------------------------------------------------------------------------
20.防止点击空链接时，页面往往重置到页首端
代码“javascript:void(null)”代替原来的“#”标记
--------------------------------------------------------------------------------

21.文字或图片弹出指定大小的窗口
在body中加入
<script language="JavaScript" type="text/JavaScript">
function MM_openBrWindow(theURL,winName,features) {window.open(theURL,winName,features);}
</script>
弹出代码
<a href="#" target="_self" ="MM_openBrWindow('windows01.htm','','width=550,height=380')" width="550" height="380" border="0">图片或文字</a>


--------------------------------------------------------------------------------
22.跳转页面代码
<meta http-equiv="refresh" content="5;url=http://www.makewing.com">
--------------------------------------------------------------------------------
23.细线分隔线
<hr noshade size=0 color=#C0C0C0>
--------------------------------------------------------------------------------
24.网页中的自动换行
<td style="word-break:break-all">就搞定了。
完整的是
style="table-layout: fixed;WORD-BREAK: break-all; WORD-WRAP: break-word"
--------------------------------------------------------------------------------
25.消除ie6自动出现的图像工具栏，设置 GALLERYIMG属性为false或no .
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">
--------------------------------------------------------------------------------
26.禁止页面正文内容被选取
<body οncοntextmenu="return false" οndragstart="return false" onselectstart ="return false" οnselect="document.selection.empty()" οncοpy="document.selection.empty()" onbeforecopy="return
false"οnmοuseup="document.selection.empty()">

--------------------------------------------------------------------------------
27.不能点右键，不用CTRL+A，不能复制作!
<body οncοntextmenu="window.event.returnValue=false"
οnkeypress="window.event.returnValue=false"
οnkeydοwn="window.event.returnValue=false"
οnkeyup="window.event.returnValue=false"
οndragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">
</body>
--------------------------------------------------------------------------------
28.IE浏览器支持一个 Body 属性 bgproperties，它可以让背景不滚动:
<Body Background="图片文件" bgproperties="fixed">
--------------------------------------------------------------------------------
29.随机变换背景图象（一个可以刷新心情的特效）
<Script Language="JavaScript">
　　 image = new Array(4); //定义image为图片数量的数组
　　 image [0] = 'tu0.gif' //背景图象的路径
　　 image [1] = 'tu1.gif'
　　 image [2] = 'tu2.gif'
　　 image [3] = 'tu3.gif'
　　 image [4] = 'tu4.gif'
　　 number = Math.floor(Math.random() * image.length);
　　 document.write("<BODY BACKGROUND="+image[number]+">");
</Script>

--------------------------------------------------------------------------------
30.图片表单按钮
<form id="form1" name="form1" method="post" action="">
<img src="login.gif" width="62" height="22" ="document.form1.submit()" />
</form>
--------------------------------------------------------------------------------
31.左右阴影背景的CSS定义方法
body {
text-align:center;
background-repeat: repeat-y;
background-position: center;
background-image: url(../images/bg.jpg);
}
--------------------------------------------------------------------------------
32.划过链接 手型鼠标
style="cursor:hand"
--------------------------------------------------------------------------------
33.如何关闭层
<div id="Layer1"></div>
<a href="#" ="Layer1.style.display='none'">关闭层</a>
--------------------------------------------------------------------------------
34.关闭窗口的脚本
<a href=javascript:close()>[关闭窗口]</a>
--------------------------------------------------------------------------------
35.如果文字过长,则将过长的部分变成省略号显示
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>
--------------------------------------------------------------------------------
36.进入主页后自动最大化
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>

--------------------------------------------------------------------------------
37.凹陷文字
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all; font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样，我凹下去了吧？<br>
你不想试试吗？<br>
<a href="http://www.lenvo.cn/">www.lenvo.cn</a></font>
</div>
--------------------------------------------------------------------------------
38.运行代码框
<script>
function Preview()
{var TestWin=open('');
TestWin.document.write(code.value);}
</script>
<textarea id=code cols=60 rows=15></textarea>
<br>
<button =Preview() >运行</button>
--------------------------------------------------------------------------------

38.给表格做链接
<table width="100%" ="window.open('http://www.makewing.com/', '_blank')" style="CURSOR:hand">
<tr>
<td height="100" bgcolor="f4f4f4">&nbsp;</td>
</tr>
</table>


--------------------------------------------------------------------------------
39.让弹出窗口总是在最上面
<body οnblur="this.focus();">
--------------------------------------------------------------------------------
40.CSS文字阴影
.shadowfont{FILTER: dropshadow(color=#666666, offx=1, offy=1, positive=1); FONT-FAMILY: "宋体"; FONT-SIZE: 9pt;COLOR: #ffffff;}
--------------------------------------------------------------------------------
41.后退&关闭窗口
后退：javascript:history.back(1)
关闭：javascript:window.close();
--------------------------------------------------------------------------------
42.表格透明
style="FILTER: alpha(opacity=72)"
--------------------------------------------------------------------------------
43.如何避免别人把你的网页放在框架中
<script language=“javascript”><!--if (self!=top){top.location=self.location;} -->< /script>
--------------------------------------------------------------------------------
44.Alt和Title的区别
alt 用来给图片来提示的。Title用来给链接文字或普通文字提示的。

<a href="#" Title="给链接文字提示">文字</a>
<p Title="给链接文字提示">文字</p>

<img src="图片链接" alt="给图片提示">

--------------------------------------------------------------------------------
45.所有的javascript的调用尽量采取外部调用
<SCRIPT LANGUAGE="javascript" SRC="js/xxxxx.js"></SCRIPT>
--------------------------------------------------------------------------------
46.链接到
response.redirect"login.asp"
location.href="xx.asp"
="window.location='login.asp'"
="window.open('')"


--------------------------------------------------------------------------------

47.基本链接样式
a:link 表示链接的样式
a:active 表示当前活动连接的样式
a:hover 表示鼠标划过时的样式
a:visited 表示已经访问过的连接的样式

"link-visited-hover-active" 简记为 "lvha" 即 "love"+"hate"


--------------------------------------------------------------------------------
48.在同一页面设置不同文字链接效果的样式
<style type="text/css">
.green {COLOR: #309633}
.green A:link {COLOR: #309633; TEXT-DECORATION: none}
.green A:visited {COLOR: #309633; TEXT-DECORATION: none}
.green A:hover {COLOR: #309633; TEXT-DECORATION: underline}
.green A:active {COLOR: #309633; TEXT-DECORATION: none}
</style>
<a href="#" class="green">文字</a>

--------------------------------------------------------------------------------
49.下拉跳转菜单
<select name=select οnchange="javascript:window.open(this.options[this.selectedIndex].value)"style="color:#333">
<option>----请选择----</option>
<option value="http://www.webkkk.com">站长设计网</option>
<option value="http://www.makewing.com/store/">MakeWing Store</option>
<option value="http://www.izhu.com/">爱烛网</option>
</select>
--------------------------------------------------------------------------------
50.select挡住div的解决方法
在div里加入下面的代码，根据需要调整就可以了。
<iframe src="javascript:false" scrolling="no" frameborder="0" -1;position:absolute; top:5px; left:2px;width:168;height:100px;">
</iframe>


--------------------------------------------------------------------------------
51.整页的全部链接都 _blank 新窗口打开

<base target="_blank">

cation
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML-JavaScript-onclick与addEventlistener的使用以及优缺点
星河灿烂的博客
04-02 1433
2018.04.2********************************Day02******************************** author：wills 在html的具有交互功能的标签，比如button标签，或者type为botton的input的标签，它们都可以绑定属性，onclick，当这个按钮被点击时就触发事件。下面是一个简单的网页上添加内容的html文档代...
HTML 代码编写的30条技巧
01-19
1. 一定要闭合HTML标签 在以往的页面源代码里，经常看到这样的语句： <li>Some text here. <li>Some new text here. <li>You get the idea. 也许过去我们可以容忍这样的非闭合HTML标签，但在今天的标准来看，这是非常不可取的，是必须百分百避免的。一定要注意闭合你的HTML标签，否则将无法通过验证，并且容易出现一些难以预见的问题。 最好使用这样的形式： <ul> <li>Some text here. </li> <li>Some new text here. </li> <li>You get the idea. </li>
30条HTML代码编写指南 for入门者
hyperzhen的专栏
08-24 823
转自[url]http://paranimage.com/30-html-guidelines-for-beginners/[/url] 本文总结了30条HTML代码编写指南，只要在编写HTML代码的过程中牢记它们，灵活运用，你一定会写出一手漂亮的代码，早日迈入专业开发者的行列。 1. 一定要闭合HTML标签 在以往的页面源代码里，经常看到这样的语句： Some text ...
HTML 编程入门秘籍
一学就会小小王的博客
09-20 2014
作者有话说：欢迎来到好文章太长没人看系列~且看且珍惜本文会详细展示html编写细节，html代码编写难度较低，可读性较强，仔细认真看一遍本文，即可按照自己喜欢的想法设计网页排版布局，希望大家学有所获！
html link 追加事件,jQuery如何将onClick事件绑定到动态添加的HTML元素
weixin_33791488的博客
05-31 146
jQuery如何将onClick事件绑定到动态添加的HTML元素我想将onClick事件绑定到我用jQuery动态插入的元素。但它从不运行绑定函数。如果您能指出这个示例不起作用的原因，以及如何让它正常运行，我会很高兴的：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">test of click bindingjQ...
html中的超链接（a标签）加onclick点击事件
_江屿_
11-21 4557
html中的超链接（a标签）加onclick点击事件
JavaScript中onmouseover时如何让鼠标指针变成一个小手状
guohuo123的专栏
07-21 1360
onmouseout="this.style.cursor='normal'>asfd cursor其他取值 auto ：标准光标 default ：标准箭头 hand ：手形光标 wait ：等待光标 text ：I形光标
HTML超详细教程
weixin_60535956的博客
03-27 9318
详细介绍HTML相关基础知识（含大量实例）
关于html链接点击事件,Javascript 模拟点击事件(点击链接与html点击) 兼容IE/Firefox...
weixin_42138780的博客
06-07 474
一把情况下模拟点击一般两个方面，模拟点击超级连接事件firefox的兼容的函数为对HTMLAnchorElement 加入onclick事件try {// create a element so that HTMLAnchorElement is accessibledocument.createElement('a');HTMLElement.prototype.click = function...
html+link+点击次数,计算单击链接的次数
weixin_32126033的博客
06-19 537
所以我试图记录链接被点击但无法克服最后一道障碍的次数。到目前为止，我有以下内容：配置/ routes.rb中resources :papers doresources :articles doresources :clicksendendclick.rbclass Click < ActiveRecord::Basebelongs_to :article, counter_cache: tr...
编写HTML5的实用小技巧
爱笑的刚刚的博客
06-22 420
1. 新的文档类型（Doctype） <!DOCTYPE html>（注意：你的doctype的申明需要出现在你html文件的第一行。） 2. 重新定义 可以利用元素来创建与logo密切相关的副标题。不过，现在HTML5修改了这个用法，元素被重新定义了，它现在用来代表小字或其他边注 3. 不再需要脚本、链接类型 <link rel=”stylesheet” href=”path/to/stylesheet.css” /> <script src=
编写html5程序的小技巧
任性的wo的博客
04-09 2161
1.使用标签分行显示文本 对于上一小节的例子，我们想让那首诗显示得更美观些，如显示下面效果： 怎么可以让每一句诗词后面加入一个折行呢？那就可以用到<br />标签了，在需要加回车换行的地方加入，标签作用相当于word文档中的回车。 上节的代码改为： 语法： xhtml1.0写法： html4.01写法： 大家注意
html中location的用法详解
热门推荐
帅气的鎏氓兔
09-03 2万+
Location介绍 location指示了其所连接对象的url位置。Document和window对象中都有location属性，可以通过window.location和document.location访问。 注意 如果想要获得当前文档的完整url字符串，有四种方式 document.locationdocument.location.hrefdocument.URLdocument
剖析HTML 元素——WEB开发系列02
一条晒干的咸鱼的博客
08-07 897
HTML元素是构成HTML文档结构的基本单位，定义了页面上的不同部分和内容。HTML元素可以包含不同类型的内容，如文本、图片、链接、表格等，每种元素都有其特定的用途和语义。通过组合和嵌套不同的HTML元素，可以创建复杂的网页结构和布局。一、HTML 元素语法HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容...
【Dash】HTML 组件创建直方图
最新发布
持续更新中...
08-08 1144
创建一个标题组件 html.H1，显示 Hello Dash，文本居中，并定义文本颜色。设置 app 布局，用 html.Div 组件包裹所有子组件，并设置背景颜色。创建一个 dcc.Graph 组件，用于显示之前创建的图表 fig。创建一个 html.Div 组件，文本居中，并定义文本颜色。children是一个列表，包含所有要显示的子组件。id 参数用于标识这个图表，以便在应用程序中引用。
探索Python的文本转换魔法：html2text库的奥秘
AIGC搞起
08-07 767
以下是html2text库中一些基本函数的使用示例，每个示例都附有代码和逐行说明。基本转换这段代码将一个简单的HTML文档转换为文本。忽略链接设置可以忽略HTML中的链接。自定义样式使用baseurl参数可以为相对URL添加基础URL。使用Unicode字符设置会使用Unicode字符代替某些HTML实体。处理表格参数可以设置表格的宽度。html2text是一个功能强大且易于使用的Python库，它能够帮助开发者在多种场景下将HTML内容转换为文本。
Html实现全国省市区三级联动
qq_36973384的博客
08-02 580
关键技术：SpringBoot、Html、Jquery、js、ajax在网上找到的资料都比较乱，对于初学者来说，可能不太友好。以前，我刚开始学习Html的时候，也搞不清楚这个要怎么做，找了好久的资料都没法实现，就算是实现了，也没有完整的教程，现在实现了，整理好了，就想分享一下给每一位热爱编程的小伙伴。
提升HTML编写技巧：整洁、规范与语义化
通过遵循这些原则，不仅可以提升HTML代码的质量，还能提升整个网站的用户体验，使得网页不仅对人类用户友好，也利于搜索引擎抓取和机器处理。同时，一个结构清晰、规范的代码也能让团队成员更容易协作和维护。记住，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值