HTML 4.0 语 法 教 学

最新推荐文章于 2021-08-10 19:50:15 发布
最新推荐文章于 2021-08-10 19:50:15 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： 学点HTML玩玩 文章标签： html 浏览器 border 图形 c 作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zpx833/article/details/1482210
版权

HTML 4.0 语 法 教 学

 

■ 认识HTML语法 (标签快速导览)

◆ 网页架构
◆ 分隔标签
◆ 排版标签
◆ 字体标签
◆ 文字标签
◆ 影像标签
◆ 背景标签
◆ 连结标签		◆ 表格标签
◆ 序列标签
◆ 表单标签
◆ 框架标签
◆ 其他技巧

■ 细说HTML标签

在HTML语法中，大致上可以分为： ( 节录自‘网站建置百宝箱’)

  1. 网页架构：主要网页主架构的介绍
  2. 分隔标签：也就是所谓的水平线
  3. 排版标签：针对标签的属性，可做适当的版面编排
  4. 字体标签：教导您设定文字的字体。
  5. 文字标签：教导您设定文字的颜色、行距、变化.....等等。
  6. 影像标签：教导您如何在网页中，植入图像。
  7. 背景标签：教导您如何设定背景颜色或是背景图像。
  8. 连结标签：教导您如何设定超连结，以及开视窗的条件。
  9. 表格标签：教导您如何在网页中运用表格。
  10. 序列标签：教导您如何设定文字序列或图形序列。
  11. 表单标签：教导您如何制作可填写用的表单。
  12. 框架标签：可让同一个视窗由多个网页一起组成。
  13. 其他技巧：让您的整个网页背景可以让您设定为图片或是声音。

4.1 网页架构 <回细说索引>

<HTML>
　<HEAD>
　　<TITLE>网页制作教学</TITLE>
　　<Meta>
　</HEAD>
　<BODY>
　　BODY之间则为主要语法所在，也是网页的主要呈现部分。
　</BODY>
</HTML>

【标签解说】

以上看到的就是一篇最简单架构的网页。没错，网页其实就是一堆标签（所谓标签就是指被<>包起来的语法）集合起来的，透过浏览器的消化整理，就便成了美仑美奂的网页了。

简单而言，通常一份完整的网页包含了二个部份：抬头（HEAD）、文件本体（BODY）。也就是各位在上面所看到的<HEAD></HEAD>以及<BODY></BODY>。

在抬头的部份<HEAD></HEAD>中，有另一组标签<TITLE></TITLE>。打在<TITLE></TITLE>这里面的文字会出现在浏览器视窗最上头蓝色部份里，当作一篇网页的主题。

您可能会发现，为什么我一直没提到<HTML></HTML>这一组标签，嗯！因为它可有可无。这一组标签是告诉浏览器说：我是一份HTML文件喔！也就是说它是一个网页的格式啦！通常都包在网页的最上下两端，将所有的原始码都包起来。

4.2 分隔标签 <回细说索引>


【文字上的分隔标签】

或许你已经发现这个问题了：天啊！我不是在记事本里排版排得很漂亮，为何透过浏览器看起来一切都走了样？对啊！别太讶异，在网页的编排里，并不像汉书或WORD一样，只要拼命按Enter键或空白键，便能完成分段或分行，因为，HTML语言是不认识我们所谓的Enter键或空白键，所以不管您按了多少次的空白或Enter，浏览器都会当作没看见啦！

 

  1.  

  2. 使用方法：强制断行标签<br>、强制分段标签<p>

     

  3. 标签解说：我们在写文章时，有时候在特定的地方会强迫断行（<br>），或是在写完某一段的时候便会分段（<p>），写网页也一样，而且更需要断行及分段的功能，以免整个网页看起来乱糟糟的。

     

  4. 使用范例：
    原始码呈现结果
    这是一个断行的范例<br>看出来了吗？这是一个断行的范例
    看出来了吗？
    这是一个分段的范例<p>基本上他会比断行还多空出一行这是一个分段的范例

    基本上分段会比断行还多空出一行



【分隔线标签】

 

  1.  

  2. 使用方法：上一段文字内容<hr>下一段文字内容

     

  3. 标签解说：利用<hr>这个标签便可产生一条横分隔线。另外，其有些属性分别说明如下：

     

  4. 使用范例：
    一般用法尚未加任何属性。
    原始码普通分隔线<hr>
    呈现结果普通分隔线

    颜色属性用法：<hr color="颜色码或颜色名称">
    原始码橘色分隔线<hr color="#ff8000">
    呈现结果橘色分隔线

    宽度属性用法：<hr width="宽度">，其单位为px（像素），宽度亦可用百分比来作设定，如50%即意为宽度占荧幕50%。
    原始码宽度为240px的分隔线<hr width="240">
    呈现结果宽度为240px分隔线

    厚度属性用法：<hr size="厚度">
    原始码厚度为5的分隔线<hr size="5">
    呈现结果厚度为5分隔线

    位置属性用法：<hr align="水平对齐位置">，其设定值有三个，也就是置左align="left"、置中align="center"、置右align="right"
    原始码靠右的分隔线<hr align="right">
    呈现结果靠右的分隔线

    阴影属性用法：<hr noshade>，无设定值，只要将 noshade 加入即可，通常会配合颜色设定，效果较佳。
    原始码实心分隔线（无阴影）<hr noshade>
    呈现结果实心分隔线（无阴影）

     

4.3 排版标签 <回细说索引>


【文字置左、置中、置右】

 

  1.  

  2. 使用方法：老实说，刚刚我们学过的分段标签<p>再加上一些简单的属性设定，就可以让其整个文字段落置左、置中或置右了，就如下表所示：

    原始码呈现结果
    <p align="left">文字靠左</p>

    文字靠左

    <p align="center">文字置中</p>

    文字置中

    <p align="right">文字靠右</p>

    文字靠右

    标签解说：嗯！秘诀就在于“align=对齐位置”而已啦！align是分段标签<p>的属性之一，这个属性将来会常常在不同标签中看到，它的功能是专门在设定“水平对齐位置”，其常见的设定值有三个，也就是置左（align="left"）、置中（align="center"）、置右（align="right"）。



【置中标签】

 

  1.  

  2. 使用方法：<center>这是置中</center>

     

  3. 标签解说：这个标签是最常用到的标签了，除了文字，对于图片、表格，任何可以显现在网页上的东西都可以置中喔！

     

  4. 使用范例：
    原始码呈现结果
    <center>这是最中间</center>
    这是最中间


【向右缩排标签】

 

  1.  

  2. 使用方法：<blockquote>要缩排的文字</blockquote>

     

  3. 标签解说：利用<blockquote></blockquote>这个标签可以将其包起来的文字，全部往右缩排。而且加一组标签，往右缩排一单位，加两组标签，往右缩排两单位，依此类推。

     

  4. 使用范例：
    原始码呈现结果
    <blockquote>缩排1单位</blockquote>
    缩排1单位
    <blockquote><blockquote>缩排2单位</blockquote></blockquote>
    缩排2单位


【保存原始格式标签】

 

  1.  

  2. 使用方法：<pre>文字内容<pre>

     

  3. 标签解说：利用<pre></pre>这个标签可以将其包起来的文字排版、格式，原封不动的呈现出来。算是相当好用的标签之一。

     

  4. 使用范例：
    原始码呈现结果
    <pre>
    文　字
    　格　式
    </pre>    		 
    文　字
　格　式

4.4 字体标签 <回细说索引>


【标题标签】

 

  1.  

  2. 使用方法：<h1>标题内容</h1>

     

  3. 标签解说：标题的大小一共有六种，两个标签一组，也就是从<h1>到<h6>，<h1>最大，<h6>最小。使用标题标签时，该标签会将字体变成粗体字，并且会自成一行。

     

  4. 使用范例：
    原始码呈现结果
    <h1>标题一</h1>

    标题一

    <h2>标题二</h2>

    标题二

    <h3>标题三</h3>

    标题三

    <h4>标题四</h4>
    标题四
    <h5>标题五</h5>
    标题五
    <h6>标题六</h6>
    标题六


【设定字体大小标签】

 

  1.  

  2. 使用方法：<font size=3>文字内容</font>

     

  3. 标签解说：标题的大小一共有七种，也就是<font size=1>（最小）到<font size=7>（最大），另外，还有一种写法：<font size=+1>文字内容</font>，其意思就是说：比预设字大一级。当然也可以 font size=+2（比预设字大二级），或是 font size=-1（比预设字小一级），以一般而言，预设字体多为 3。

     

  4. 使用范例：
    原始码呈现结果
    <font size=1>字体一</font> 或是
    <font size=-2>字体一</font>    		字体一
    <font size=2>字体二</font> 或是
    <font size=-1>字体二</font>    		字体二
    <font size=3>字体三</font> 或是
    <font size=+0>字体三</font>    		字体三
    <font size=4>字体四</font> 或是
    <font size=+1>字体四</font>    		字体四
    <font size=5>字体五</font> 或是
    <font size=+2>字体五</font>    		字体五
    <font size=6>字体六</font> 或是
    <font size=+3>字体六</font>    		字体六
    <font size=6>字体七</font> 或是
    <font size=+4>字体七</font>    		字体七


【字型变化标签】

 

  1.  

  2. 使用方法：<b>文字</b>

     

  3. 标签解说：在文字标签里，对于文字的格式也有相当多的变化，如粗体、斜体...等，此外，也定义了一些现成的格式供编者使用，如‘强调’、‘原始码’...等，当然，这只是方便您参考用，并无强迫说遇到原始码就要加上‘原始码’的标签。

     

  4. 使用范例：
    原始码呈现结果
    <b>粗体</b>粗体
    <i>斜体</i>斜体
    <u>底线</u>底线
    <sup>上标</sup>上标
    <sub>下标</sub>下标
    <tt>打字机</tt>打字机
    <blink>闪烁</blink>（ie没效果） 闪烁
    <em>强调</em>强调
    <strong>加强</strong>加强
    <samp>范例</samp>范例
    <code>原始码</code>原始码
    <var>变数</var>变数
    <dfn>定义</dfn>定义
    <cite>引用</cite>引用
    <address>所在地址</address>
    所在地址


【文字颜色设定】

 

  1.  

  2. 使用方法：<font color="#fefecb">文字颜色</font>

     

  3. 标签解说：文字也可以设定 颜色喔！至于颜色有哪些....这....哪天我心血来潮再来做个色彩对应表吧！

     

  4. 使用范例：
    原始码呈现结果
    <font color="#ff0000">红</font>红色的字喔！
    <font color="#ff8000">橙</font>橙色的字喔！
    <font color="#ffff00">黄</font>黄色的字喔！
    <font color="#00ff00">绿</font>绿色的字喔！
    <font color="#0080ff">蓝</font>蓝色的字喔！
    <font color="#0000a0">靛</font>靛色的字喔！
    <font color="#8000ff">紫</font>紫色的字喔！
    <font color="#000000">黑</font>黑色的字喔！
    <font color="#c0c0c0">灰</font>灰色的字喔！

4.5 文字标签 <回细说索引>

【文字字型设定】

 

  1.  

  2. 使用方法：<font face="字型名称">文字</font>

     

  3. 标签解说：网页上也可以使用字型喔！唯一的一个限制是：对方也要有该字型！否则看到的仍然还是宋体。另外要说明的是，这个标签并无法保证在每个浏览器上都能正常的显现，不过这并没有关系，看不到特殊的字型时，浏览器仍会以宋体来显示，所以不用怕会一团乱！

    另外，如果您的网页中有加上这一行叙述<meta http-equiv="content-type" content="text/html;charset=big5">（指定网页的语言格式，以后我会解释），那么，netscape可以正确显示出中文，但英文无反应。若没有加该行，那么英文会正确显示，但中文却仍是宋体。至于 ie 系列，均能正常显示。

     

  4. 使用范例：
    原始码呈现结果
    <font face="楷体_GB2312">楷体_GB2312</font>楷体_GB2312
    <font face="华康俪中黑">华康俪中黑</font>华康俪中黑


【特殊字元】

 

  1.  

  2. 使用方法：&nbsp;

     

  3. 标签解说：很多特殊的符号是需要特别处理的，比如说" < "、" > "这两个符号若想要呈现在网页上是没有办法直接打" < "的，要呈现" < "必须输入编码表示法：“&lt;”，常用的如下：

     

  4. 使用范例：
    原始码呈现结果
    &nbsp;  (&nbsp;代表一个不断行空白)
    &lt;<
    &gt;>
    &amp;&
    &quot;"


【设定文字内定值大小】

 

  1.  

  2. 使用方法：<basefont size="1~7">

     

  3. 标签解说：这个标签可以改变文字大小的内定值，直接加在<body>标签之后就行了。一般而言，若是没有特别设定，文字大小内定值预定值为3。

4.6 影像标签 <回细说索引>

【影像标签】

在使用影像标签时有两件事值得注意一下，一是档名，二是路径。首先要注意的就是，档名是否正确以及大小写是否一致！图档名称不正确，任电脑再厉害也找不到您要的图，档名大小写不一致，如Image.gif、image.gif、image.GIF在自己的电脑中看都能正确的显示，但是一但传到网路上去时，因为系统不一样的关系（电脑伺服器的作业系统可比个人用电脑的作业系统严谨多了）就变成三个不一样的档案了，所以，可别忽略档名大小写不一致的影响。

另外一个就是路径问题了，这个问题也不难，我们在稍后会提到。我们先来看看影像的标签如何写。

 

  1.  

  2. 使用方法：<img src="boy.gif" alt="本站特约模特儿" align=right border=0 hspace=2 vspace=2 height=56 width=32>

     

  3. 标签解说：目前常见的网页图形格式有两种就是gif及jpg两种格式。gif格式只有256色，不过色彩比较鲜艳干净漂亮，适合电脑美工图案。而jpg格式的图案是全彩失真压缩，比较适合一大堆颜色的图片，如照片就较适合用jpg格式来呈现。

     

  4. 使用范例：

    基本用法用法：<img src="图档名称、路径">
    显示图片最基本的方法（就是不加任何属性啦！）其中 boy.gif 就是图档的档名。
    原始码<img src="images/G-FASE4.GIF">嗨！我是本站的模特儿喔！
    呈现结果嗨！我是本站的模特儿喔！

    长宽设定用法：<img src="图档" height="高度" width="宽度">
    设图片的大小，其实不用设也可以，但是有设更好，可以加快浏览速度，因为浏览器就不用在那边花时间算您的图片有多大啦！此外您也可以自己随意设定图片大小。
    原始码<img src="images/G-FASE4.GIF" height=32 width=32>
    呈现结果

    加上说明用法：<img src="图档" alt="说明文字">
    滑鼠一到图上时，说明文字就会自动出现。此外，在图片未显示出来或显示不出来时，也会以这一段字代替，让使用者知道这个未显示出来的图片究竟是干嘛用的。
    原始码<img src="images/G-FASE4.GIF" alt="本站特约模特儿">移到图上看看。
    呈现结果本站特约模特儿移到图上看看。

    图片位置用法：<img src="图档" align="位置">
    图片位置设定！可以靠左放：align=left、靠上align=top、靠下align=bottom、垂直置中align=middle，其中靠左放可以造成‘文绕图’的效果。
    原始码<img src="images/G-FASE4.GIF" align=right>嗨！我往右边靠！
    呈现结果嗨！我往右边靠！
    原始码<img src="images/G-FASE4.GIF" align=left>嗨！我往左边靠！
    呈现结果嗨！我往左边靠！
    原始码<img src="images/G-FASE4.GIF" align=top>文字对齐我头顶！
    呈现结果文字对齐我头顶！
    原始码<img src="images/G-FASE4.GIF" align=bottom>文字对齐我脚底！
    呈现结果文字对齐我脚底！
    原始码<img src="images/G-FASE4.GIF" align=middle>文字对齐我中间！
    呈现结果文字对齐我中间！
    原始码<img src="images/G-FASE4.GIF" align=absmiddle>文字对齐我绝对中间！
    呈现结果文字对齐我绝对中间！

    边框设定用法：<img src="图档" border="边框粗细">
    设定边框大小，通常都设成 0 感觉比较美观啦！因为内定的框框实在是不怎么漂亮....。尤其在连结时，设框框简直是丑毙了...。
    原始码<img src="images/G-FASE4.GIF" border="4">
    呈现结果

    左右间距用法：<img src="图档" hspace="离左右物件的距离">
    离文字的水平距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
    原始码左边的字<img src="images/G-FASE4.GIF" hspace="15">右边的字
    呈现结果左边的字右边的字

    上下间距用法：<img src="图档" vspace="离上下物件的距离">
    离文字的垂直距离，通常多少也设一点，以免靠文字太近，看起来才不会有太挤的感觉。
    原始码上面的字<br><img src="images/G-FASE4.GIF" vspace="15"><br>下面的字
    呈现结果上面的字

    下面的字

    由于此网页有用css控制版面图文，故在netscape下观看，会稍有不正确。



【网页影像重要观念】

 

  1.  

  2. 关于路径：现在我们来谈谈图片路径的事，路径不对，不管您的网页名称写的多正确也没用，因为浏览器无法寻着您的路径去找到该有的图片，所以，我们来看看该如何正确的使用路径。有些人并不喜欢将网页及图通通放在同一个目录下，比如说有人将图档全放在c:/images里，而网页档放在c:/demo里，这样子的话，我们该如何正确的写图片的路径呢？我将几种常见的情形整理成下表：
    html档的位置图档的位置写法情形说明
    c:/democ:/demo<img src="tad.gif">图文均在同一目录
    c:/democ:/demo/images<img src="images/tad.gif">图在网页下一层目录
    c:/democ:/<img src=" ../tad.gif">图在网页上一层
    c:/democ:/image<img src=" image/tad.gif">图文在同一层但不同目录

    或许有人看到不明就理，我来说明一下，“../”是回到上一层目录的意思。“images/”则是进入下一层目录image之意，而“images/”的意思就是，回到上一层目录，然后再进入目录images中。以上我们使用的均为“相对路径”的概念。

     

  3. 影像单位：或许您会常常看到px这个单位，没错，这是我们在制作最常用的一个单位了。这个单位完整的写法是“pixels”，我们称之为“像素”。像素，是荧幕上的一个小光点，然而这一小光点的大小，并非是固定的，举个例子而言，荧幕本身十五吋，不会因为你的任何设定而变成十七吋。但是，其解析度是可以改变的，我们常见的解析度有以下几种：“640 ×480”、“800 ×600”、“1024 ×768”。举其中之一的640 ×480来说，其代表的就是在荧幕上有宽640个光点，高有480光点，若是我们将解析度调整为800 ×600其宽势必要从640变成800个光点，也因此，该光点便会变小一点，所以，我们看起来就会觉得解析度调高后，荧幕内的东西，变得小小的，很精致，那就是因为光点变小的原因。

     

  4. 影像格式：网页用的图档目前只有gif格式（即副档名为gif的图档，如：bg.gif）以及jpg格式（即副档名为jpg的图档，如：bg.jpg）为一般的浏览器所接受。其他如bmp格式或是pcx格式都是无法在网页上使用的，若非得要用，那就利用影像绘图软体来作格式的转换吧！

    图档范例说明
    gif格式的图形只能以256个颜色显示，虽然其色彩较少，但颜色鲜艳亮丽，若是图形颜色不多，用gif格式存档会较漂亮。
    jpg格式的图形是以全彩显示，适合用在相片或是渐层颜色的图片上，压缩比例以75%为适中。

     

4.7 背景标签 <回细说索引>

【背景标签】

说穿了，背景标签只有<BODY>这个标签，其余的效果，只要加上一些简单的属性便可做到。

 

  1.  

  2. 使用方法：<body bgcolor="#ffffff" background="bg.jpg">

     

  3. 标签解说：这个标签其实应该老早就要讲了，毕竟它是构成网页不可或缺的基本要素之一（哎哎哎...现在放马后炮有什么用！）。我们背景颜色或图片的设定以及连结字体的颜色，通通都放在<body>这标签里面。我就其属性来一一解说：
    背景颜色用法：<body bgcolor="颜色码">
    设定背景颜色。有人会说：‘我已经设定了背景图片，那背景颜色还有用吗？’当然有用！当使用者连结到贵站时，若背景图案还没传输完之前（有的背景图蛮大的），就会先显现背景颜色，您说，是不是比一片灰灰的好看多了呢！
    原始码<html>
    <head>
    <title>这是标题</title>
    </head>

    <body bgcolor="#f9e6a2">

    这里是本文区

    </body>
    </html>

    呈现结果按下此处观看结果

    背景图案用法：<body background="图档名称、路径">
    g设定背景图案。图档可以是jpg或gif格式的图档，我建议：图档不要太大，否则网页载入会蛮慢的。
    原始码<html>
    <head>
    <title>这是标题</title>
    </head>

    <body background="bg.jpg">

    这里是本文区

    </body>
    </html>

    呈现结果按下此处观看结果

     



【内文、连结文字颜色设定】

 

  1.  

  2. 使用方法：<body text="#000000" link="#0000ff" vlink="#ff00ff" alink="#ff0000>

     

  3. 标签解说：用字体标签中的颜色属性，可以设定文字的颜色，不过，却没有提到文字的颜色内定值该如何修改，这个<body>标签中，便有设定内文、连结等文字的颜色内定值功能。用法如下：

    内文颜色用法：<body text="颜色码">
    设定一般文字颜色，也就是说，若没有特别去设定文字颜色的话，浏览器就会自动显现您所设定的颜色。
    原始码<html>
    <head>
    <title>这是标题</title>
    </head>

    <body text="#0906a2">

    这里是本文区

    </body>
    </html>

    呈现结果按下此处观看结果

    连结颜色用法：<body link="颜色码">
    设定“连结”的颜色。只要是有连结的地方就会出现你指定的颜色，当然，如果按下连结后，那又会变成另一个颜色了，这底下会说明。
    原始码<html>
    <head>
    <title>这是标题</title>
    </head>

    <body link="#ff6600">

    <a href="index.htm">连结文字</a>

    </body>
    </html>

    呈现结果按下此处观看结果（设定连结为橘色）

    连结时颜色用法：<body alink="颜色码">
    设定“按下连结”的颜色，也就是当您滑鼠按下那连结的瞬间所呈现的颜色。
    原始码<html>
    <head>
    <title>这是标题</title>
    </head>

    <body alink="#0099ff">

    <a href="index.htm">连结中文字</a>

    </body>
    </html>

    呈现结果按下此处观看结果（滑鼠点下连结瞬间才会出现我们设定的浅蓝色）

    已连结颜色用法：<body vlink="颜色码">
    设定“按下链结后”的颜色，也就是如果该连结已经有被按过了，那么就会呈现的颜色。如此的做法，是要让使用者容易识别到底哪些连结有去过了，哪些没去过。
    原始码<html>
    <head>
    <title>这是标题</title>
    </head>

    <body vlink="red">

    <a href="demo1-10-6.htm">连结文字</a>

    </body>
    </html>

    呈现结果按下此处观看结果（设定已执行过的连结以红色显示）

     

4.8 连结标签 <回细说索引>

【WWW连结标签基本概念】

 

  1.  

  2. 连结基本概念：一般而言，所谓连结就是，在网页中有些字会有特别的颜色，而且字的底下会有条线，当游标移到那些字上时，会变成手指形状，按下去，则会连到别的文章或网站，就像这样（以上这段是给超级新手看的...）。

    扯到连结，最基本来看有‘内部连结’及‘外部连结’，所谓‘内部连结’就是自己网站间网页的连结，至于外部连结我们稍后再来讨论。

    要了解内部连结，首先必须先了解一下这两种东西，一个是‘相对路径’，一个是‘绝对路径’。

    现在假设一个情形：我们在自己的电脑里设计网页，所有网页相关的档案我们通通放在 c:/www 里面，现在假设 c:/www 里面目前有 index.htm 、 text1.htm 、 p1.gif 、 p2.gif 这四个档案。ok！

    现在我们想在 index.htm 里面设一个连结，能够按一下就连到 text1.htm，那我们该怎么做呢？基本上，有两中方式可以做到，在 index.htm 里面加上下面任一叙述：

    <a href="/c|/www/text1.htm">这就是‘绝对路径’
    <a href="text1.htm">这就是‘相对路径’

    瞧出什么端倪了没有？嗯嗯....没错，‘绝对路径’要给电脑一个非常详尽的位置，让电脑寻着这路径去找到档案。而‘相对路径’就简单多啦！如果没有特别指定，他就会直接在 index.htm 的所在目录下找，也就是在 c:/www 底下去找text1.htm。

    如果说，今天我们将 c:/www 里所有的档案都上传到网路上的网页伺服器（总不能做好了只给自己看吧！），且该伺服器是别人的电脑，而非你自己架设的主机，那么问题就来了！你猜，哪一种连结会出问题？呵呵...答案是‘绝对路径’，您猜对了吗？

    为什么说‘绝对路径’会出问题呢？因为，当您将档案上传到网路上时，您的整个网页目录架构一定会变，到时候，电脑可能找不到 c:/ （尤其是unix系列的主机）更可能找不到 www 这目录（有些会规定要放在特定的目录下才能显示网页），所以说，没事的话，尽量用‘相对路径’来作连结吧！好写又不容易出错。

    另外一个情形是：为了整理方便，有些网友喜欢将图档通通放到同一个目录下，如：c:/www/gif/ 底下放进了p1.gif 、 p2.gif两个图，而index.htm 、 text1.htm 依旧在 c:/www 底下。现在我们想在 index.htm 下设个连结到 p1.gif 这图档（连结不限于只能连html档，图档、文字档均可），那我们又该如何来使用‘相对路径’呢？他们又不在‘同一个目录’下...？

    <a href="/c|/www/gif/p1.gif">这是‘绝对路径’的写法
    <a href="gif/p1.gif">这是‘相对路径’的写法

    如何？不难吧！（只是字有点多，看到脑子发胀）

  1.  

  2. 总整理：很乱吗？嗯...看看这表，或许会清楚些。

    相对路径表示方式代表连结位置
    <a href="text1.htm">text1.htm在目前的目录中（就例子而言，就是在c:/www中）
    <a href="docs/text1.htm">text1.htm在名为docs的次目录中（就本例而言，就是在c:/www/docs中）
    <a href="../text1.htm">text1.htm在目前目录的上一层目录中（就本例而言，就是在c:/底下了）

     

zpx833
关注
专栏目录
HTML语法教学
06-06
HTML语法教学，HTML格式
HTML4.0语法教学
心静思远
08-17 4272
出处：http://chinese.allproducts.com.tw/GB/html/#t2 HTML 4.0 语 法 教 学 ■ 认识HTML语法 (标签快速导览)◆ 网页架构◆ 分隔标签◆ 排版标签◆ 字体标签◆ 文字标签◆ 影像标签◆ 背景标签◆ 连结标签◆ 表格标签◆ 序列标签◆ 表单标
HTML4.0标准语法--字体
无界编程
10-30 2213
◇ 标题字体(Header) ... #=1, 2, 3, 4, 5, 6今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！--- 这些标记显示黑体字。 --- 这些标记自动迦胍桓隹招校槐赜? 标记再加空行。因此在一行中无法使
HTML Grammar(HTML 语法)
04-07
HTML 4.0 语 法 教 学 在HTML语法中，大致上可以分为： 网页架构：主要网页主架构的介绍 分隔标签：也就是所谓的水平线 排版标签：针对标签的属性，可做适当的版面编排 字体标签：教导您设定文字的字体。 文字...
阿拉伯语知识图谱的构建与挑战
制作和主办：Elsevier沙特国王大学学报阿拉伯语知识图谱构建：近距离观察现在和未来易卜拉欣作者：Ahmeda，Fatima N.AL-Aswadib，c，Khaled M.G.Noamand，Wafaa沙特阿拉伯纳季兰纳季兰大学社区学院b马来西亚槟榔屿...
"构建阿拉伯语知识图谱：挑战、解决方案和未来
制作和主办：Elsevier沙特国王大学学报阿拉伯语知识图谱构建：近距离观察现在和未来易卜拉欣作者：Ahmeda，Fatima N.AL-Aswadib，c，Khaled M.G.Noamand，Wafaa沙特阿拉伯纳季兰纳季兰大学社区学院b马来西亚槟榔屿...
阿拉伯语重复问题检测方法：基于上下文表征、类别标签匹配和结构化自我注意
沙特国王大学学报基于上下文表征、类别标签匹配和结构化自我注意的阿拉伯语重复问句检测Alami Hamzab，Said El Alaoui Ouatikb，Khalid Alaoui Zidania，Noureddine En-Nahnahiaa信息学、信号、自动化和认知主义实验...
基于上下文表征的阿拉伯语重复问句检测方法的研究
沙特国王大学学报基于上下文表征、类别标签匹配和结构化自我注意的阿拉伯语重复问句检测Alami Hamzab，Said El Alaoui Ouatikb，Khalid Alaoui Zidania，Noureddine En-Nahnahiaa信息学、信号、自动化和认知主义实验...
HTML 语法教学
04-22
非常好的html 语法教材 同样是老师给的,与PPT一起看效果更好
HTML所以教学
07-24
HTML相关总结，描述的是HTML的语法 用法等相关内容。。。。
html的标准语法规则
欢迎光临1st灬伪装的博客
09-27 852
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>xHtml的语法规范</title> </head> <body> <!-- 1.HTML中不区分大小写,但是我们一般都使用小写 --> <!-- 2.HTML中的注释不能嵌套 --> <!-- 3.HT.
  HTML 4.0 语 法 教 学
weixin_33672400的博客
12-28 122
HTML 4.0 语 法 教 学 ■ 认识HTML语法 (标签快速导览) ◆ 网页架构◆ 分隔标签◆ 排版标签◆ 字体标签◆ 文字标签◆ 影像标签◆ 背景标签◆ 连结标签 ◆ 表格标签◆ 序列标签◆ 表单标签◆ 框架标签◆ 其他技巧 ...
初识HTML
qq_43764769的博客
08-10 117
注：老师的课堂笔记，自己整理了一下 1.基本html5结构 1.1.概览html5基本结构 快捷方式生成html5文件：新建后缀名为.html的文件，输入"!"或"html:5"，回车 。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
HTML语法
ytuglt的博客
08-14 3262
HTML语法一、什么是HTML标记语言表示网页信息的符号标记语言特点：1.可以设置文本的格式，比如标题、字号、文本颜色、段落等2.可以创建列表3.可以插入图像和媒体4.可以建立表格5.超链接，可以使用鼠标点击超链接来实现页面之间的跳转二、HTML的标记和他的属性1.HTML文档的保存格式.html.htm.xhtml2.标记和被标记的内容构建出HTML文档格式： <标记> 内容
HTML语法格式
O_326326的博客
09-13 370
1.定义css样式的标签 <style type="text/css"></style> 2.定义客户端脚本语言的标签 <script type="text/javascript"></script> 3.外部导入标签 <link type="text/css" rel="styelsheet" href="./style.css"/> 4.<!-- 每3秒刷新一次页面 --> <!-- <meta http
HTML基本语法格式（元素、标签）
热门推荐
qq_44598397的博客
03-06 2万+
HTML的语法格式 阅读提醒：由于博客显示问体所以元素的&lt;&gt;开始和&lt;/&gt;被省略了 HTML的主体格式 第一部分：和是网页文件的最外层标签，HTML中所有的内容都要在这里面； 第二部分：和标签之间文本是头信息，放在元素的最上面使用，头部分信息不会显示在浏览器窗口中，主要包括页面的一些基本描述语句，用于说明文件的标题和文件的公共属性。 第三部分：标签是HTML文件的主体标记，标...
XNA 4.0 游戏开发入门教程
"XNA 4.0 学习指南 - C#语言讲解游戏开发，适用于PC，Xbox360和WindowsPhone的游戏开发教程。由Araon Reed著，裴小星译。" 《XNA 4.0 学习指南》是针对初学者和有一定编程经验的开发者的一本全面介绍游戏开发的书籍...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值