|
|
HTML学习指南4
连结 (Links)
连结是 WWW 最吸引人的地方。你只要在萤幕上某个特别抢眼的字句上，
按一下滑鼠按钮，阅览器就会去抓取与该字句一个相关的档案，显示出来。
作为作者，你有责任把字句连到相关的地方，不过技术上来说，你可以随便
把它连到 Internet 上任何伺服器上的任何档案。当然，你可以连到另一个
WWW 上的文件档，不过你更可以连到任何 Gopher 文件、WAIS 查询、Usenet
讨论群、ftp、telnet、finger 等各式各样的 Internet 服务上。
连结的标签称为「锚」(anchor)，因为它可以是向外跳跃的出发点，也可以
是另一个连结跳跃的目的地。目的地的「地址」称为「寰宇资源地址」
(Universal Resource Locator)，简称 URL。
若要向外连结（也就是成为连结的发源地）：
请将你要强调的字句用 标签括起来，格式如下：
字句
其中引号里的 URL 如下组成：
* 「方式」为以下之一：
+ http - WWW 上面的文件档案 (档名结尾应为 .html)
+ file - 非 HTML 的档案（如纯文字档）
+ gopher - 所谓「小田鼠」(Gopher) 资讯系统上的档案
+ news - Usenet 讨论群
+ telnet - 直接与其他电脑进行终端机连线
+ ftp - 利用所谓「匿名档案索取」(anonymous ftp) 的方式
向公众档案库索取档案。
注意在「方式」的後面接著一个冒号与两根斜线。
* 「电脑」是 Internet 上面的电脑地址，通常的格式是「xxx.yyy.zzz」
（例如 info.cern.ch 是 WWW 的发源地），不过你也可以直接给出
该电脑的 IP 地址（如 143.239.1.8）。有些时候，在「电脑」後面
还跟著一个「港口编号」(port number)，如 lambda.parc.xerox.com:8888
就是。
* 「目录/子目录/档案名称」是那个档案的路径与档名。如果你把档名
省略而只给一个目录的名称，通常就会索取到一个「档案目录」或是
「欢迎」文件。
以下是一些例子。
http://info.cern.ch/hypertext/WWW/TheProject.html";>W
orld
ideWeb
Gopher
Telnet
任何规则都有例外，URL 的命名规则也不例外：
* news 後面只要跟个冒号以及讨论群名称就够了，阅览器应该会向自己
本地的讨论群伺服器要资料，如 news:comp.infosystems.www。
* 有些 Gopher, WAIS 及 HTTP 的文件是「可搜寻」的，此时你只要
在该文件的後面加个问号，後面就可以放要检索的字串。例如
http://curia.ucc.ie/htbin/acronym?ibm 会利用「连字语伺服器」
(acronym server) 去检索「IBM 的定义」。
* 你可以在 HTTP 档名的後面放 # 符号，跟著一个该文件中的「锚」
的名字。这样阅览器就会直接跳到该文件中那个锚的位置去，而不会
像平常那样从一开头开始显示。（见後。）
* 有些地方允许使用「相对 URL」而非「绝对 URL」。例如在一个本身
URL 为 http://www.tmck.edu.tw/inforclub/Index.html 的文件中，
若有一个 出现，则这个「锚」就会连到
http://www.tmck.edu.tw/inforclub/activities.html 去。
某些 HTTP 伺服器有所谓「伺服器脚本」(server scripts) 的功能。
有这种功能的伺服器，允许该伺服器负责的 URL 指到一个「要执行的程式」
而非「要取得的档案」。该程式在执行的时候，便需产生一串 HTML 输出，
这串输出再被传回发出 HTTP 要求的 WWW 阅览器。有关「伺服器脚本」
的细节请参阅该伺服器的说明文件。
有一些其他「锚」标签的属性，如 rel, rev, urn, title, methods 等，
大多时候很少用到，我们略过不提。
若要被连结（也就是成为连结的目的地）：
使用这样的标签：
其中「标记」是一个任你取的名字，以後如果你要以这个标签的位置为跳跃
目的地的话，就直接用「#标记」代表。例如你在 http://www.tmck.edu.tw/
inforclub/activities.html 之中的某处放了一个
标签，那麽
* 在该文件中的其他地方，可以用 建立连结。
* 在其他文件中，可以用 http://abc.edu/menu.html#widgets">...
会使这标签的内涵同时成为：
* 一个连向 http://abc.edu/menu.html#widgets 的连结。
* 一个称为 http://.../.../...#intro 的，可以让别人连过来的地方。
_________________________________________________________________
视觉效果
以上我们已经看了许多有关文件结构的标签，以下我们则来看看如何在文件中
增加一些简单的视觉效果，如改变字体等。需要谨记在心的是，有些视觉效果
可能需要图形模式下的 WWW 阅览器才能表现出来，在文字模式下就只能用比较
克难的方式代替，例如在文字两旁加星号或底线等。所以不要随便假设大家都
看得到你设计的每个效果。
强调文字
主要强调文字的方法有两种：
* 对於简短字句的强调，应使用 ... 标签。
* 更强烈的加强效果，可以用 ... 标签。
* 古代的 HTML 规格中，也有定义 代表划底线，不过可能
因为划底线一般并不好看的关系，很少看到有人在用。
至於到底萤幕上如何显示被强调的文字，那是阅览器的问题，你也管不著。
可能用斜体，可能用粗体，可能用不同的颜色或字体，也可能什麽也没有。
这里你不用担心用什麽方法强调字句，只要指定该字句有多麽重要就可以了。
如果你非常真的确切紧急绝对需要指定「斜体」或「粗体」的话，可以用
... 代表斜体，或者 ... 代表粗体。
非调和字 (Fixed-width type)
有几种方法可以指定使用固定宽度（也就是打字机那样）的非调和字。
这在你文件中包含电脑程式或表格的时候是很有用的。（目前的 HTML
尚无表格功能，可能 HTML+ 会有。）不要忘记，使用文字模式阅览器
的人无论如何看到的都是非调和字，所以不是所有的使用者都看得出
差别来。
* 电脑程式片段、电子邮件地址与机器的行号或名称，通常是混杂在
普通文字段落中的。这时请用 ... 标签把该段文字
夹起来就可以了。注意到即使是用 ... 刮起来的文
字，还是不可以直接打 < 与 > 的符号，要用 < 与 > 代替
才可以。（至於如何打出「<」，我们留给读者作为练习。）
* 对於较长的程式片段或使用□例，可以改用 <![CDATA[...]]> 标签。
这样会把被夹起来的文字单独放在一行（虽然你在原始的 .html 档
中不一定要单独放在一行——记得我们前面提过，HTML 档案中断行
跟空白是一样的）。这样你不用专门开个新段落，就可以打出
cd /; rm -rf *
这样的效果。在使用 <![CDATA[ 的时候，你可以在内涵中直接放入大於
<br> 或小於符号，不用改成 < 与 >。例如
<br>\\ifnum#1>\\prevarg\\&\\else\\message{Invalid data}\\fi
<br> * 小段的非调和文字，例如表格或程式□例等，可以用 <pre>...</pre>
<br> 标签来处理。在 <pre>...</pre> 的□围之内，你爱打几行就打几行，
<br> 而空格、断行与空行等都可以使用了：
<br>周末拳击赛成绩揭晓
<br>第一名 拳囚孳迅惘 二赔一
<br>第二名 小田鼠 一百赔一
<br>第三名 亚课罗被特 五百赔一
<br>这次共有七位选手参赛，其中六号「善终结」选手第一拳即被击倒。
<br> 在 <pre>...</pre> 的势力□围中，上述的文字强调标签（如 <b>, <i>
<br> 等）全都有效，但是相对来说，你碰到 < 或 > 就又必须换成 < 与
<br> > 了。
<br> * 最後一种方式，大量的程式列表，甚至整批档案，可以用 <listing>...
<br> </listing> 显示：
<br>Lstring:<img src="static/image/smiley/default/sweat.gif" smilieid="10" border="0" alt="" />string(const ALPHA *s)
<br>∶ ChunkString<Char, DEFAULT_CSIZE>(), Id()
<br>{
<br> length = a_len(s);
<br> marked = FALSE;
<br> LstringIterator i(*this);
<br> for (const ALPHA *t = s; !a_endP(*t); ++t, ++i)
<br> *((Char *)i) = *t;
<br> *((Char *)i) = *t; // final zero
<br> mark();
<br>}
<br> 你可以把要照单显示的文字直接夹在 <listing> 与 </listing> 之间，
<br> 也可以利用 HTML 的「安插 (include) 外部档案」功能把你要的档案
<br> 直接插进来。有关「安插档案」功能，我们在第三课中再详述。在 <listing>
<br> 标签的□围中，不论 < 与 > 还是断行空格等等，一概照收不误，所以你
<br> 爱用什麽字元就用吧！（译注：我用的 WWW 阅览器是文字模式的 Lynx，
<br> 而 Lynx 好像没有支援安插档案的功能。）
<br> * 还有，碰到「键盘使用□例」可以用 <kbd>...</kbd> 刮起来，还有若
<br> 是单独键盘上的键名，可以用 <key>...</key> 刮起来。这在有些阅览器
<br> 中并不支援。（译注：像我用的 Lynx 就不支援，所以我也不知道这样打
<br> 出来会是什麽样子。）
<br> 如果以上这些都不符合你的需要的话，可以试试 <tt>...</tt>，它可以把
<br> 简短的文句用打字机的字体显示。
<br> 其他花样
<br> 有一些新的标签，在 HTML 里还没有定义，到 HTML+ 的时候大概就会定义的，
<br> 我们列在下面。这些全部都是「空标签」，也就是说，他们都没有对应的「终
<br> 标签」。
<br> 如果你要在段落内特定的地方断行，有一个「秘密标签」
可以做到，
<br> 它的效果就像这样。
<br> 在上面的「这样。」後面就放了一个
。它在 HTML+ 里很可能会正式定义。
<br> 在文件里打个 <hr>，
<br> _________________________________________________________________
<br> 就会有像上面这样的一条横线。
<br> 如果两个英文字间有个空白，而你又不希望在该处断行的话，就把空白
<br> 换成 <nbsp>，比如说「insert<nbsp>between two words」中的「insert」与
<br> 「between」两字间就不会断行。
<br> 古代的 HTML 还定义了以下四个标签：
<br> * <samp>...</samp> 代表「□例文字」。
<br> * <var>...</var> 代表「变体文字」。
<br> * <dfn>...</dfn> 代表「定义」，当某个词语第一次被赋予定义的时候可以
<br> 使用。
<br> * <cite>...</cite> 代表「引用文献」，比如一般学术论文最後的「参考资
<br> 料」一节即是。
<br> 这些不一定会改变阅览器显示文字的方式；有时它们最大的用处在於方便
<br> 你自己编辑文件。
<br> _________________________________________________________________
<br>现在呢？
<br> 到这里，你已经学会了使用表列、连结与其他视觉效果美化你文件的方法。
<br> 在最後的第三课中，我们再告诉你如何制作「区块文字」、一些不存在的
<br> 功能（如数学式、表格等）、还有如何在档案中安插其他外部档案。有一项
<br> HTML+ 的重要新功能——「表单」(forms)，我们也会介绍
<br></td></tr></table>
</div>
<div id="comment_20584" class="cm">
</div>
<div id="post_rate_div_20584"></div>
</div>
</div>
</td></tr>
<tr><td class="plc plm">
</td>
</tr>
<tr id="_postposition20584"></tr>
<tr>
<td class="pls"></td>
<td class="plc" style="overflow:visible;">
<div class="po hin">
<div class="pob cl">
<em>
<a class="fastre" href="forum.php?mod=post&action=reply&fid=6&tid=1921&reppost=20584&extra=page%3D1&page=1" onclick="showWindow('reply', this.href)">回复</a>
</em>
<p>
<a href="javascript:;" id="mgc_post_20584" onmouseover="showMenu(this.id)" class="showmenu">使用道具</a>
<a href="javascript:;" onclick="showWindow('miscreport20584', 'misc.php?mod=report&rtype=post&rid=20584&tid=1921&fid=6', 'get', -1);return false;">举报</a>
</p>
<ul id="mgc_post_20584_menu" class="p_pop mgcmn" style="display: none;">
<li><a href="home.php?mod=magic&mid=bump&idtype=tid&id=1921" id="a_bump" onclick="showWindow(this.id, this.href)"><img src="static/image/magic/bump.small.gif" />提升卡</a></li>
<li><a href="home.php?mod=magic&mid=stick&idtype=tid&id=1921" id="a_stick" onclick="showWindow(this.id, this.href)"><img src="static/image/magic/stick.small.gif" />置顶卡</a></li>
<li><a href="home.php?mod=magic&mid=close&idtype=tid&id=1921" id="a_stick" onclick="showWindow(this.id, this.href)"><img src="static/image/magic/close.small.gif" />沉默卡</a></li>
<li><a href="home.php?mod=magic&mid=open&idtype=tid&id=1921" id="a_stick" onclick="showWindow(this.id, this.href)"><img src="static/image/magic/open.small.gif" />喧嚣卡</a></li>
<li><a href="home.php?mod=magic&mid=highlight&idtype=tid&id=1921" id="a_stick" onclick="showWindow(this.id, this.href)"><img src="static/image/magic/highlight.small.gif" />变色卡</a></li>
<li><a href="home.php?mod=magic&mid=namepost&idtype=pid&id=20584:1921" id="a_namepost_20584" onclick="showWindow(this.id, this.href)"><img src="static/image/magic/namepost.small.gif" />显身卡</a><li>
</ul>
<script type="text/javascript" reload="1">checkmgcmn('post_20584')</script>
</div>
</div>
</td>
</tr>
<tr class="ad">
<td class="pls">
</td>
<td class="plc">
</td>
</tr>
</table>
</div><div id="postlistreply" class="pl"><div id="post_new" class="viewthread_table" style="display: none"></div></div>
</div>
<form method="post" autocomplete="off" name="modactions" id="modactions">
<input type="hidden" name="formhash" value="69aa92ef" />
<input type="hidden" name="optgroup" />
<input type="hidden" name="operation" />
<input type="hidden" name="listextra" value="page%3D1" />
<input type="hidden" name="page" value="1" />
</form>
<div class="pgs mtm mbm cl">
<span class="pgb y"><a href="forum.php?mod=forumdisplay&fid=6">返回列表</a></span>
<a id="newspecialtmp" onmouseover="$('newspecial').id = 'newspecialtmp';this.id = 'newspecial';showMenu({'ctrlid':this.id})" onclick="showWindow('newthread', 'forum.php?mod=post&action=newthread&fid=6')" href="javascript:;" title="发新帖" class="pgsbtn showmenu">发新帖</a>
</div>
<!--[diy=diyfastposttop]--><div id="diyfastposttop" class="area"></div><!--[/diy]-->
<script type="text/javascript">
var postminchars = parseInt('10');
var postmaxchars = parseInt('10000');
var postminsubjectchars = parseInt('1');
var postmaxsubjectchars = parseInt('80');
var disablepostctrl = parseInt('0');
</script>
<div id="f_pst" class="pl bm bmw">
<form method="post" autocomplete="off" id="fastpostform" action="forum.php?mod=post&action=reply&fid=6&tid=1921&extra=page%3D1&replysubmit=yes&infloat=yes&handlekey=fastpost" onSubmit="return fastpostvalidate(this)">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="pls">
</td>
<td class="plc">
<span id="fastpostreturn"></span>
<div class="cl">
<div id="fastsmiliesdiv" class="y"><div id="fastsmiliesdiv_data"><div id="fastsmilies"></div></div></div><div class="hasfsl" id="fastposteditor">
<div class="tedt mtn">
<div class="bar">
<span class="y">
<a href="forum.php?mod=post&action=reply&fid=6&tid=1921" onclick="return switchAdvanceMode(this.href)">高级模式</a>
</span><script src="static/js/seditor.js?got" type="text/javascript"></script>
<div class="fpd">
<a href="javascript:;" title="文字加粗" class="fbld">B</a>
<a href="javascript:;" title="设置文字颜色" class="fclr" id="fastpostforecolor">Color</a>
<a id="fastpostimg" href="javascript:;" title="图片" class="fmg">Image</a>
<a id="fastposturl" href="javascript:;" title="添加链接" class="flnk">Link</a>
<a id="fastpostquote" href="javascript:;" title="引用" class="fqt">Quote</a>
<a id="fastpostcode" href="javascript:;" title="代码" class="fcd">Code</a>
<a href="javascript:;" class="fsml" id="fastpostsml">Smilies</a>
</div></div>
<div class="area">
<div class="pt hm">
您需要登录后才可以回帖 <a href="member.php?mod=logging&action=login" onclick="showWindow('login', this.href)" class="xi2">登录</a> | <a href="member.php?mod=register" class="xi2">立即注册</a>
</div>
</div>
</div>
</div>
</div>
<div id="seccheck_fastpost">
</div>
<input type="hidden" name="formhash" value="69aa92ef" />
<input type="hidden" name="usesig" value="" />
<input type="hidden" name="subject" value=" " />
<p class="ptm pnpost">
<a href="home.php?mod=spacecp&ac=credit&op=rule&fid=6" class="y" target="_blank">本版积分规则</a>
<button type="button" onclick="showWindow('login', 'member.php?mod=logging&action=login&guestmessage=yes')" onmouseover="checkpostrule('seccheck_fastpost', 'ac=reply');this.onmouseover=null" name="replysubmit" id="fastpostsubmit" class="pn pnc vm" value="replysubmit"><strong>发表回复</strong></button>
<label class="lb"><input type="checkbox" name="adddynamic" class="pc" value="1" />回帖并转播</label>
<label for="fastpostrefresh"><input id="fastpostrefresh" type="checkbox" class="pc" />回帖后跳转到最后一页</label>
<script type="text/javascript">if(getcookie('fastpostrefresh') == 1) {$('fastpostrefresh').checked=true;}</script>
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="wp mtn">
<!--[diy=diy3]--><div id="diy3" class="area"></div><!--[/diy]-->
</div>
<script type="text/javascript">
function succeedhandle_followmod(url, msg, values) {
var fObj = $('followmod_'+values['fuid']);
if(values['type'] == 'add') {
fObj.innerHTML = '不收听';
fObj.href = 'home.php?mod=spacecp&ac=follow&op=del&fuid='+values['fuid'];
} else if(values['type'] == 'del') {
fObj.innerHTML = '收听TA';
fObj.href = 'home.php?mod=spacecp&ac=follow&op=add&hash=69aa92ef&fuid='+values['fuid'];
}
}
fixed_avatar([20584], 1);
</script>
</div>
<div id="footer">
<div id="ft" class="wp cl">
<div id="xinxi">
<em> 电话Phone：0550-6732589</em>
<em> 邮箱E-mail：ahttc@163.com </em>
<span>安徽科技工程</span>
</div>
<div id="flk" class="y">
<p>
<a href="archiver/" >Archiver</a><span class="pipe">|</span><a href="forum.php?showmobile=yes" >手机版</a><span class="pipe">|</span><a href="forum.php?mod=misc&action=showdarkroom" >小黑屋</a><span class="pipe">|</span><strong><a href="http://www.ahstu.cn/" target="_blank">安科工记录</a></strong>
( <a href="https://beian.miit.gov.cn/" target="_blank">皖ICP备18004561号-3</a> )</p>
<p class="xs0">
GMT+8, 2025-1-7 04:10<span id="debuginfo">
, Processed in 0.071852 second(s), 15 queries
.
</span>
</p>
</div>
<div id="frt">
<p>Powered by <strong><a href="https://www.discuz.vip/" target="_blank">Discuz!</a></strong> <em>X3.5</em></p>
<p class="xs0">© 2001-2024 <a href="https://code.dismall.com/" target="_blank">Discuz! Team</a>.</p>
</div></div>
</div>
<script src="home.php?mod=misc&ac=sendmail&rand=1736194259" type="text/javascript"></script>
<div id="scrolltop">
<span><a href="forum.php?mod=post&action=reply&fid=6&tid=1921&extra=page%3D1&page=1" onclick="showWindow('reply', this.href)" class="replyfast" title="快速回复"><b>快速回复</b></a></span>
<span hidefocus="true"><a title="返回顶部" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>返回顶部</b></a></span>
<span>
<a href="forum.php?mod=forumdisplay&fid=6" hidefocus="true" class="returnlist" title="返回列表"><b>返回列表</b></a>
</span>
</div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
</body>
</html>]]> |
|
IP卡
狗仔卡
发表于 2003-11-7 02:10:00