HTML学习

来源:互联网 发布:dns协议使用的端口号 编辑:程序博客网 时间:2024/05/17 04:58
HTML基本标记
标记 作用说明备注文件标记<HTML>●文件宣告让浏览器知道这是 HTML 文件 <HEAD>●开头提供文件整体信息 <TITLE>●标题定义文件标题,将显示于浏览器顶端 <BODY>●主体设计文件格式及内容所在 排版标记<!--注解-->○说明标记为文件加上说明,但不被显示 <P>○段落标记为字、图、表格等之间留下一空白行 <BR>○换行标记令字、图、表格显示于下一行 <HR>○水平线插入一水平线 <CENTER>●居中令字、图、表格等显示于中间反对<PRE>●预设格式令文件按原代码的排列方式显示 <DIV>●定位标记设定字、图、表格等的摆放位置 <NOBR>●不换行令文字不因太长而换行 <WBR>●建议换行预设换行部位 字体标记<STRONG>●加重语气产生字体加粗 Bold 的效果 <B>●粗体标记产生字体加粗的效果 <EM>●强调标记字体出现斜体效果 <I>●斜体标记字体出现斜体效果 <TT>●等宽字体Courier字体,字母宽度相同 <U>●加下划线加下划线反对<H1>●一级标题标记将字体变大,级数越高越小 <H2>●二级标题标记将字体变大 <H3>●三级标题标记将字体变大 <H4>●四级标题标记将字体变大 <H5>●五级标题标记将字体变大 <H6>●六级标题标记将字体变大 <FONT>●字体标记设定字体、大小、颜色反对<BASEFONT>○基准字体标记设定所有字体、大小、颜色反对<BIG>●字体加大令字体稍微变大 <SMALL>●字体缩小令字体稍微缩小 <STRIKE>●加删除线为文字加删除线反对<CODE>●程式码字体稍微加宽如<TT> <KBD>●键盘字字体稍微加宽,单一空白 <SAMP>●范例字体稍为加宽如<TT> <VAR>●变量斜体效果 <CITE>●斜体标记斜体效果 <BLOCKQUOTE>●向右缩排文字向右缩排 <DFN>●述语定义斜体效果 <ADDRESS>●地址标记斜体效果 <SUB>●下标字文字下标 <SUP>●上标字文字上标 清单标记<OL>●顺序清单清单项目将以数字、字母顺序排列 <UL>●无序清单清单项目将以实心圆点作为符号排列 <LI>○清单项目清单中的项目,一个标记一行 <MENU>●选项清单可用type参数指定项目符号。反对<DIR>●目录清单与<menu>相同反对<DL>●定义清单清单分两层出现 <DT>○定义条目清单项标题 <DD>○定义内容清单项内容 表格标记<TABLE>●表格标记设定该表格的各项参数 <CAPTION>●表格标题做成一打通列以填入表格标题 <TR>●表格列设定该表格的列 <TD>●表格栏设定该表格的栏 <TH>●表格标头相等于<TD>,但其内文字字体会变粗 表单标记<FORM>●表单标记决定该表单的运作模式 <TEXTAREA>●文字框提供文字输入栏 <INPUT>○输入标记决定输入形式 <SELECT>●选择标记建立弹出卷动清单 <OPTION>○选项每一个清单选项 图形标记<IMG>○图形标记用来插入图形及设定图形属性 链接标记<A>●链接标记加入链接 <BASE>○基准标记可将相对 URL 转绝对及指定链接 框架标记<FRAMESET>●框架设定设定框架 <FRAME>○窗口设定设定框架中的窗口 <IFRAME>○页内框架于网页中插入框架IE<NOFRAMES>●不支持框架设定浏览器不支持框架时的提示 影像地图<MAP>●影像地图名称设定影像地图名称 <AREA>○链接区域设定各链接区域 多媒体<BGSOUND>○背景声音令背景播放音乐或声音IE<EMBED>○多媒体加入声音、音乐或影像 其他标记<MARQUEE>●走马灯令文字走动IE<BLINK>●闪烁文字令文字闪烁NC<ISINDEX>○页内寻找器可输入关键字寻找该页反对<META>○开头说明提供关于此页的信息给浏览器 <LINK>○关系定义定义该文件与其他 URL 的关系 StyleSheet<STYLE>●式样表控制网页版面 <SPAN>●自订标记独立使用或与样式表一起用 

注:

·● 表示该标记属于围堵标记,即需要结束标记</标记>。
·○ 表示该标记属空标记,即不需要结束标记。
·IE 表示该标记只适应于 Internet Explorer。
·NC 表示该标记只适用于 Netscape Communicator。
·反对 表示该标记不为 W3C 所赞同,通常这标记是微软或网景自订,且已被大家支持,只是 HTML 标准中有其它功能相同或更好的选择。
·弃用 表示该标记已被 W3C 所抛弃,是过时的标记,但 HTML 有向下兼容性,所以浏览器仍然支持。
·新 表示该标记是 HTML 4.0 中新增的。

HTML语法大全


<!-- ...... --> 注释

 跑马灯

<marquee>...</marquee> 普通卷动
<marquee behavior=slide>...</marquee> 滑动
<marquee behavior=scroll>...</marquee> 预设卷动
<marquee behavior=alternate>...</marquee> 来回卷动
<marquee direction=down>...</marquee> 向下卷动
<marquee direction=up>...</marquee> 向上卷动
<marquee direction=right>...</marquee> 向右卷动
<marquee direction=left>...</marquee> 向左卷动
<marquee loop=2>...</marquee> 卷动次数
<marquee width=180>...</marquee> 设定宽度
<marquee height=30>...</marquee> 设定高度
<marquee hspace=30>...</marquee> 设定左右空白区域的大小
<marquee vspace=30>...</marquee> 设定上下空白区域的大小
<marquee bgcolor=FF0000>...</marquee> 设定背景颜色
<marquee scrollamount=30>...</marquee> 设定卷动距离
<marquee scrolldelay=300>...</marquee> 设定卷动时间

 字体效果

<h1>...</h1> 标题字(最大)
<h6>...</h6> 标题字(最小)
<b>...</b> 粗体字
<strong>...</strong> 粗体字(强调)
<i>...</i> 斜体字
<em>...</em> 斜体字(强调)
<dfn>...</dfn> 斜体字(表示定义)
<u>...</u> 底线
<ins>...</ins> 底线(表示插入文字)
<strike>...</strike> 横线
<s>...</s> 删除线
<del>...</del> 删除线(表示删除)
<kbd>...</kbd> 键盘文字
<tt>...</tt> 打字体
<xmp>...</xmp> 固定宽度字体(在文件中空白、换行、定位功能有效)
<plaintext>...</plaintext> 固定宽度字体(不执行标记符号)
<listing>...</listing> 固定宽度小字体
<fonr color=#000000>...</font> 字体颜色
<font size=1>...</font> 最小字体
<font style=font-size:100px>...</font> 无限增大

 区断标记

<hr> 水平线
<hr size=9> 水平线(设定大小)
<hr width=80%> 水平线(设定宽度)
<hr color=ff0000> 水平线(设定颜色)
<br> (换行)
<nobr>...</nobr> 水域(不换行)
<p>...</p> 水域(段落)
<center>...</center> 置中

 连结格式

<base href=地址> (预设好连结路径)
<a href=地址> 外部连结
<a href=地址 target=_blank> 外部连结(在新窗口中打开链接文档)
<a href=地址 target=_parent> 外部连结(将链接的网页加载目前页框的上一层页框(运用于多重窗口框架中),如果没有上层,则加载同一页框)
<a href=地址 target=_self> 外部连结(在同一框架或窗口中打开所链接的文档,此参数为默认值)
<a href=地址 target=_top> 外部连结(在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架)
<a href=地址 target=页框名> 外部连结(在指定页框连结)

 贴图/音乐

<img src=图片地址> 贴图
<img src=图片地址 width=180> 设定图片宽度
<img src=图片地址 height=30> 设定图片高度
<img src=图片地址 alt=提示文字> 设定图片提示文字
<img src=图片地址 border=1> 设定图片边框
<bgsound src=MID音乐文件地址> 背景音乐设定

 表格语法

<table aling=left>...</table> 表格位置(置左)
<table aling=center>...</table> 表格位置(置中)
<table background=图片路径>...</table> 背景图片的URL=就是路径网址
<table border=边框大小>...</table> 设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table> 设定表格的背景颜色
<table borderclor=颜色码>...</table> 设定表格边框的颜色
<table borderclordark=颜色码>...</table> 设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table> 设定表格亮边框的颜色
<table rules=all>...</table> 显示所有分隔线
<table rules=groups>...</table> 只显示组与组的分隔线
<table rules=rows>...</table> 只显示行与行的分隔线
<table rules=cols>...</table> 只显示列与列的分隔线
<table rules=none>...</table> 所有分隔线都不显示
<table cellpadding=参数>...</table> 指定内容与网格线之间的间距(使用数字)
<table cellspacing=参数>...</table> 指定网格线与网格线之间的距离(使用数字)
<table cols=参数>...</table> 指定表格的栏数
<table frame=参数>...</table> 设定表格外框线的显示方式
<table width=宽度>...</table> 指定表格的宽度大小(使用数字)
<table height=高度>...</table> 指定表格的高度大小(使用数字)
<td colspan=参数>...</td> 指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td> 指定储存格合并列的列数(使用数字)

 分割窗口

<frameset cols="20%,*"> 左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整
<frameset rows="20%,*"> 上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整
<frameset cols="20%,*"> 分割左右两个框架
<frameset cols="20%,*,20%"> 分割左中右三个框架
<frameset rows="20%",*> 分割上下两个框架
<frameset rows="20%,*,20%"> 分割上中下三个框架

<A HREF TARGET> 指定超级链接的分割窗口
<A HREF=#锚的名称> 指定锚名称的超级链接
<A HREF> 指定超级链接
<A NAME=锚的名称> 被连结点的名称
<ADDRESS>....</ADDRESS> 用来显示电子邮箱地址
<B> 粗体字
<BASE TARGET> 指定超级链接的分割窗口
<BASEFONT SIZE> 更改预设字形大小
<BGSOUND SRC> 加入背景音乐
<BIG> 显示大字体
<BLINK> 闪烁的文字
<BODY TEXT LINK VLINK> 设定文字颜色
<BODY> 显示本文
<BR> 换行
<CAPTION ALIGN> 设定表格标题位置
<CAPTION>...</CAPTION> 为表格加上标题
<CENTER> 向中对齐
<CITE>...<CITE> 用于引经据典的文字
<CODE>...</CODE> 用于列出一段程序代码
<COMMENT>...</COMMENT> 加上批注
<DD> 设定定义列表的项目解说
<DFN>...</DFN> 显示"定义"文字
<DIR>...</DIR> 列表文字卷标
<DL>...</DL> 设定定义列表的卷标
<DT> 设定定义列表的项目
<EM> 强调之用
<FONT FACE> 任意指定所用的字形
<FONT SIZE> 设定字体大小
<FORM ACTION> 设定户动式窗体的处理方式
<FORM METHOD> 设定户动式窗体之资料传送方式
<FRAME MARGINHEIGHT> 设定窗口的上下边界
<FRAME MARGINWIDTH> 设定窗口的左右边界
<FRAME NAME> 为分割窗口命名
<FRAME NORESIZE> 锁住分割窗口的大小
<FRAME SCROLLING> 设定分割窗口的滚动条
<FRAME SRC> 将HTML文件加入窗口
<FRAMESET COLS> 将窗口分割成左右的子窗口
<FRAMESET ROWS> 将窗口分割成上下的子窗口
<FRAMESET>...</FRAMESET> 划分分割窗口
<H1>~<H6> 设定文字大小
<HEAD> 标示文件信息
<HR> 加上分网格线
<HTML> 文件的开始与结束
<I> 斜体字
<IMG ALIGN> 调整图形影像的位置
<IMG ALT> 为你的图形影像加注
<IMG DYNSRC LOOP> 加入影片
<IMG HEIGHT WIDTH> 插入图片并预设图形大小

HEAD规范知识  HEAD区是指首页HTML代码的<head>和</head>之间的内容


必须加入的标签

 1.公司版权注释

<!--   The site is designed bywebjx.com 06/2006   -->

 2.网页显示字符集

简体中文:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">

繁体中文:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5">

英 语:

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

 3.网页制作者信息

<META name="author" content="Evance">

 4.网站简介

<META NAME="DESCRIPTION" CONTENT="*******************************">

 5.搜索关键字

<META NAME="keywords" CONTENT="****,****,****,****,****,">

 6.网页的CSS链入规范

<LINK href="style/style.css" rel="stylesheet" type="text/css">

 7.网页标题

<title>****************</title>

可选择加入的标签

 1.设定网页的到期时间。一旦网页过期,必须到服务器上重新调阅

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 2006 08:21:57 GMT">

 2.禁止浏览器从本地机的缓存中调阅页面内容

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

 3.用来防止别人在框架里调用你的页面

<META HTTP-EQUIV="Window-target" CONTENT="_top">

 4.自动跳转(CONTENT指时间停留5秒)

<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.01online.cn">

 5.网页搜索机器人向导。用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

<META NAME="robots" CONTENT="none">

CONTENT的参数有all | none | index | noindex | follow | nofollow。默认是all


 6.收藏夹图标

<link rel = "Shortcut Icon" href="favicon.ico">

所有的javaScript的调用尽量采取外部调用

<SCRIPT LANGUAGE="javascript" SRC="script/*****.js"></SCRIPT>

<body>标签:

<body>标签不属于head区,这里强调一下,为了保证浏览器的兼容性,必须设置页面背景<body bgcolor="#FFFFFF">

HTML序列标记


序列标记其实是一个大家都蛮熟悉的东西,只是在网页中换个名称来称呼罢了,序列标记的功能在WORD里面叫做「项目符号及编号」,也就是将每一要点以数字,如:1.2.3.4...或符号一条一条的清楚的列出的功能。
序列标记基本上可分为两种,一种是「无序卷标」,一种是「有序卷标」。

 无序卷标 <UL>

所谓「无序卷标」当然就是意指各条列间并无顺序关系,纯粹只是利用条列式方法来呈现资料而已,此种无序卷标,在各条列前面均有一符号以示区隔。代码显示效果<UL>
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</UL>

  • 姓名:吴弘凯
  • 生日:1973/6/16
  • 星座:双子座

其中<UL>卷标即为「无序列表卷标」,每增加一列内容,就必须加一个<LI>
前面的符号一定是要圆形的吗?不,我们可以加入TYPE="形状名称"属性来改变其符号形状,一共有三个选择:disk(实心圆)、square(小正方形)、circle(空心圆)三种:代码显示效果<UL TYPE="circle">
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</UL>

  • 姓名:吴弘凯
  • 生日:1973/6/16
  • 星座:双子座


 有序卷标 <OL>

所谓「有序卷标」就是指各条列之间是有顺序的,从1、2、3...一直延伸下去
我们来看看「有序列表卷标」如何使用:代码显示效果<OL>
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</OL>

  1. 姓名:吴弘凯
  2. 生日:1973/6/16
  3. 星座:双子座

其中<OL>卷标即为「有序列表卷标」,每增加一列内容,就必须加一个<LI>
和无序列表卷标一样,我们也可以选择不同的符号来显示顺序,一样是用TYPE属性来作更改,一更有五种符号:1(数字)、A(大写英文字母)、a(小写英文字母)、I(大写罗马字母)、i(小写罗马字母)等五种:代码显示效果<OL TYPE="A">
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</OL>

  1. 姓名:吴弘凯
  2. 生日:1973/6/16
  3. 星座:双子座

另外,我们亦可指定序列起始的数目,其方法如下:代码显示效果<OL START="6">
<LI>姓名:吴弘凯
<LI>生日:1973/6/16
<LI>星座:双子座
</OL>

  1. 姓名:吴弘凯
  2. 生日:1973/6/16
  3. 星座:双子座


 定义列表卷标 <DL>

接下来我们要说明的这个卷标,是「定义列表卷标」也是属于序列卷标之一。其方法如下:代码显示效果<DL>
<DT>小标题
<DD>标题的内容说明
</DL>

小标题
标题的内容说明

HTML中常用基本代码


 在网页中设置自己的浏览器ico图标

先准备一个.ico的文件放置在站点的根目录下、并在网页中加入以下代码

<head><!--IE地址栏前换成自己的图标--><link rel="Shortcut Icon" href="http://网址/favicon.ico"><!--可以在收藏夹中显示出你的图标--><link rel="Bookmark" href="http://网址/favicon.ico"> </head>

link为网页中的链接标签。rel指定ico图标将要显示的地方href设置的ico文件地址或路径。


 在网页中设置背景音乐

只适用于IE

<bgsound src='http://www.01itcn.com/music/Ring.wma' loop='-1'>

对Netscape ,IE 都适用

<embed src="http://www.01itcn.com/music.mid" autostart="true" loop="true" hidden="true">

bgsound为网页中的声音标签。src设置音乐的URL地址或路径。loop设置循环播放的次数,-1为无限循环。


 让body中的文字不被选中

<body onselectstart="return false">

 定义网页的关键字(KeyWords)

为了使网页在搜索引擎中能很容易地被检索到,准确定义网页中的关键字是一项很重要的工作。
定义网页中的关键字,在源代码中的<head>与</head>标签中,添加如下代码:

<meta name="keywords" content="Dreamweaver,Flash,Fireworks">

Dreamweaver中用(Insert)插入 → (HTML) → (Head)头文件标签 → (KeyWords)关键字。
为了提高检索的命中率,我们可以重复多次使用同一个关键字,content中的即为关键字,用逗号隔开。


 自动加入网页更改后的日期

只需要在源文件<body></body>之间添加如下代码即可。

<Script Language="javascript"><!--document.write("Last Updated:"+document.lastModified);--></Script>

在浏览器中的显示样式为: Last Updated:06/26/2012 22:29:14


 去除图片连接的虚线边框

<a href="http://www.baidu.com" onFocus="this.blur()"><img src="../images/logo.gif" border="0"></a>

 虚线效果水平线

<hr width="50%" style="border:3px dashed #FF0000; height:3px">

演示效果:



 定时自动刷新网页

<head><meta http-equiv="refresh" content="360; url=index.html"></head>

content设定自动刷新的间隔时间,单位是秒。url设定自动刷新的页面,若不写则自动刷新当前本页。也可指定其它地址,到达自动定时跳转页面效果


 自定义链接时状态栏的显示文本

<a href="index.html" OnMouseOver="window.status='这里是 ... 我自定的文本'; return true">胤羽</a>

当鼠标移到链接上,状态栏上将显示自定义的文本,即:这里是 ... 我自定的文本


 跳到页面的顶部

<a href="#top">返回本面顶部</a>

当然你也可以用按钮或图片,例如:返回本面顶部

Table表格


 表格单元下划虚线(若要设为实线,将dotted改为solid)

.td1 {border-bottom:1px dotted #990000;}.td2{border-top:1px dotted #999999;border-bottom:1px dotted #999999;}

1、上海2、武汉3、北京4、广州5、重庆1、上海2、武汉3、北京4、广州5、重庆


 背景色半透明表格

<style>.alphaTable{filter: Alpha(Opacity=60)}</style><table width="280" height="120" border="1" class="alphaTable" bgcolor="#00CCFF"><tr><td align="center">此嵌套表格为半透明效果演示</td></tr></table>

或直接在<table>标签插入

style="filter:alpha(opacity=60)"

效果演示 此嵌套表格为半透明效果演示


 阴影表格

<style>.shadow{filter:shadow(color=#cccccc,direction=120)}</style>

或直接在<table>标签插入

style="filter:shadow(color=#cccccc,direction=120)"

效果演示   此为阴影表格   


 只显示表格外边框

<table>标签中加入

style="border:1px solid #000000;"

效果演示单元格 a单元格 b单元格 c单元格 d单元格 e单元格 f

Form表单相关


 去除form表单下多的一行

<form name="form1" method="post" action="" style="margin:0px;padding:0px">

 定位表单中的光标位置

<body onload="javaScript:form1.username.focus();">

代码中form1为表单名,username为需将光标定位的文本框名


 禁用输入法转换(可用在只输入英文和数字时)

<input type="text" name="textfield" style="ime-mode:disabled">

演示 试试切转输入法,看会不会起做用


 自定义文本框

<input type="text" name="name" style="color: #666666; border-left: medium none; border-right: medium none;  border-top: medium none; border-bottom: 1px solid #336699;">

演示   UserName:    Password:


 没有凹凸感的表单

<input style="border:1px black solid #336699">

演示    


 输入的控制

1、不允许输入符号、在<input>中加入

onKeypress="if ((event.keyCode > 32 && event.keyCode < 48) || (event.keyCode > 57 && event.keyCode < 65) || (event.keyCode > 90 && event.keyCode < 97)) event.returnValue = false;"

演示

2、不允许输入单双引号、在<input>中加入

onKeypress="if (event.keyCode == 34 || event.keyCode == 39) event.returnValue = false;"

演示

3、只允许输入数字、在<input>中加入

 onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;"

演示

加入收藏夹及设为首页


 加入收藏夹,设为首页代码

把以下代码<Body>相应位置

<a href=# onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.01online.cn');">设为首页</a><span onclick="var strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.01online.cn');" style="CURSOR: hand">设为首页</span><a target=_top href=javascript:window.external.addfavorite("http://www.01online.cn","麟妖IT武汉站")>收藏本站</a>

 鼠标指向时提示设为首页

将下列代码插入<body>区中:

<a href=http://www.6882.com onmouseover="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.6882.com');" target="_blank">设为首页</a>

 打开页面时自动弹出窗口询问是否设为首页

将以下代码放在<head></head>之间

<script language="javascript">function myhomepage(){this.homepage.style.behavior='url(#default#homepage)';this.homepage.sethomepage('http://www.6882.com');}</script><p align="center"><a href="http:netbei.com" name="homepage" onclick="myhomepage();"></a>

再将下面代码加入<body>内:

<body onload="myhomepage();">

 离开时自动提示设为首页

<body onunload="BASEBody.style.behavior='url(#default#homepage)';if(!(BASEBody.isHomePage('http://www.6882.com')))BASEBody.setHomePage('http://www.6882.com/');">

 强行设为首页代码

<object data='http://www1.7169.com/homepage/set.asp?url=http://www.01online.cn;width='0' height='0'>

自定义滚动条  User-Defined ScrollBar


 去掉页面中的滚动条

<body scroll="no">   <!--去掉全部滚动条--><body style="overflow-y:hidden">   <!--去掉页面右边的滚动条--><body style="overflow:scroll; overflow-y:hidden"><body style="overflow-x:hidden">   <!--去掉页面底部的滚动条--><body style="overflow:scroll; overflow-x:hidden">

 自定义滚动条

body {Scrollbar-3DLight-Color: #999999;    /*滚动条亮边的颜色*/Scrollbar-Arrow-Color: #CCCCCC;      /*上下按钮上三角箭头的颜色*/Scrollbar-Base-Color: #E1E1E1;       /*滚动条的基本颜色*/Scrollbar-Shadow-Color: #CCCCCC;     /*立体滚动条阴影的颜色*/Scrollbar-DarkShadow-Color: #333333; /*滚动条动条阴影的颜色*/Scrollbar-Face-Color: #999999;       /*滚动条凸出部分的颜色*/Scrollbar-Highlight-Color: #F2F2F2;  /*滚动条空白部分的颜色*/Scrollbar-Track-Color: #F2F2F2;      /*滚动条的背景颜色*/}

 将滚动条放置在浏览器窗口的左边

<body dir=RTL>

自定义网页指针


首先,你需要一个鼠标指针文件
可以通过单击"开始" → 点击"查找" → 键入".ani"或".cur"(不含双引号)
也可以到网上下载你喜欢的指针,下面是两种实现个性鼠标的方法
注:.ani是动态效果的指针文件;.cur是静态效果的指针文件。

1.定义所有超链接的指针
Cursor:url(指针文件的路径)加入到超链接的CSS文件中。
例:

a {Color:#000000; Cursor:url(指针文件的路径);}

2.定义个别链接的指针
cstyle="Cursor:url(指针文件的路径)"放进<a>的容器中。
例:

<a href="指定链接地址" style="Cursor:url(指针文件的路径)">链接文字</a>

3.使用系统自带指针 把style="Cursor:(系统指针)"放进<a>的容器中。
例:

<a href="指定链接地址" style="Cursor:Hand">链接文字</a>

此示例中指定的系统指针为手形,了解更多系统指针请参照具体CSS鼠标样式

现在保存文件,预览一下你网页的个性鼠标指针吧!

MailTo的六则应用技巧


    mailto是网页设计制作中的一个非常实用的HTML标签,许多拥有个人网页的朋友都喜欢在网站的醒目位置处写上自己的电子邮件地址,这样网页浏览者一旦用鼠标单击一下由mailto组成的超级连接后,就能自动打开当前计算机系统中默认的电子邮件客户端软件,例如OutLook Express以及Foxmail等。
    当然有关mailto标签的使用,并不仅仅就象上面所说的那样简单,它还有其他方面的应用。为了能帮助各位用户对mailto标签有一个全面的认识,笔者在此就对mailto标签的使用做一个详细的总结,希望能与大家共享交流!

     如果我们在网页中创建一个形如"mailto: aaa@21cn.com"这样的超级连接时,用鼠标单击一下该超级连接的话,浏览器会自动调用系统默认的邮件客户端程序,同时在邮件编辑窗口的收件人设置栏中自动写上收件人的地址,而其他的内容都是空白,留给访问者自行填写;

     要是大家在单击电子邮件超级连接时,希望系统自动打开的电子邮件编辑窗口中,除了在收件人地址栏中自动填写上内容外,在抄送地址栏中也能自动填写上自己需要的电子邮件地址的话,就可以直接在网页的HTML源代码中插入形如"mailto:aaa@21cn.com?bbb@21cn.com"这样的语句,其中aaa@21cn.com将会自动出现在收件人地址栏中,bbb@21cn.com则会自动出现在抄送地址栏中;

     如果大家希望在弹出的邮件编辑窗口中能自动将邮件的主题内容填上的话,可以使用形如"mailto: aaa@21cn.com?subject=麟妖软圃"这样的HTML语句,当浏览者用鼠标单击由该语句组成的电子邮件超级连接时,在随后打开的邮件编辑窗口的收件人地址栏中自动出现aaa@21cn.com,主题设置栏中将自动出现"麟妖软圃"这样的内容;

     如果想在收件人地址栏中同时输入多个电子邮件地址时,那么就可以使用形如"mailto: aaa@21cn.com;bbb@21cn.com"这样的语句,记住每个电子邮件之间用""隔开,这样当浏览者单击由该语句创建的电子邮件超级连接时,在弹出的邮件编辑窗口的收件人地址栏中同时会出现aaa@21cn.com、bbb@21cn.com这样的收件人地址,浏览者就能同时向这些人发送电子邮件;

     在网页中出现的邮件地址经常会被一些诸如"mail-robot"的自动搜索程序搜索到,这样其他人很容易利用搜索到的邮件地址来向你发送各种各样的垃圾邮件,为了能将这些垃圾邮件拒之于千里之外,我们可以将在网页上公开的邮件地址写成ASCII码形式,同时要记住每一个ASCII码前面都必须添加"&#",例如我们在网页中使用"mailto: aaa@21cn.com"这样的语句来创建电子邮件超级连接的话,单击该超级连接后,我们发现在随后打开的邮件收发窗口中,收件人地址栏中仍然会显示aaa@21cn.com这样的内容,而其他的各种邮件自动搜索工具都不能正确识别这样的ASCII代码,因此用户收到的各种来历不明的垃圾邮件就会大大减少;

     通常,浏览者单击电子邮件超级连接时,系统在默认打开的邮件客户端软件中,只是自动在收件人地址栏处填上内容,而其他设置栏处仍然显示为空白,如果大家还希望自动把主题、抄送、暗送甚至内容都填写上的话,就可以使用形如

mailto:aaa@21cn.com?cc=bbb@21cn.com&bcc=ccc@21cn.com&subject=麟妖軟圃&body=mailto标签的综合应用举例说明

这样的语句,在这个语句中第一个功能以"?"开头,后面的每一个功能以"&"开头;
当用鼠标单击这个邮件地址时,在随后打开的邮件编辑窗口中,将看到在收件人地址栏中自动填写上了aaa@21cn.com
在抄送地址栏中自动填写上了bbb@21cn.com
在暗送地址栏中自动填写上了ccc@21cn.com
在主题栏中自动填写上了"麟妖軟圃",
在信件的正文部分将自动出现"mailto标签的综合应用举例说明"这样的文字。

    上面出现的aaa@21cn.combbb@21cn.comccc@21cn.com都是为方便说明,而由笔者随意设置的,大家可以根据自己的要求,用自己真实的邮件地址来代替他们。
    此外,如果要使用mailto同时实现多个功能的话,第一个功能必须以"?"开头,后面的每一个功能都以"&"开头;另外,cc后为抄送地址bcc后为暗送地址subject后为邮件的主题body后为邮件的内容

原创粉丝点击