松果灯饰照明 發表於 2019-9-21 11:21:00

HTML5-超链接和路径

<p><span style="font-size: 14pt"><strong><span style="color: rgba(0, 0, 0, 1)">一、超链接</span></strong></span></p>
<p><span style="color: rgba(0, 0, 255, 1)">&lt;a href="http://baidu.com/" target="_blank"&gt;百度&lt;/a&gt;</span><span style="color: rgba(255, 0, 0, 1)"><br></span></p>
<p>  <span style="color: rgba(255, 0, 0, 1)">href属性是必须的,用来指定超链接跳转的外部链接地址。</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">  target属性不是必须的,是告诉浏览器希望将所链接的外部网站在哪里打开,</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">    _self(默认值,表示在当前页面打开链接),</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">    _blank(比较常用,表示在新窗口或标签页钟中打开链接),</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">    _parent(是基于frameset框架页面的,表示在父窗口打开链接),</span></p>
<p><span style="color: rgba(255, 0, 0, 1)">    _top(同样基于frameset框架页面,表示在整个窗口打开链接),</span></p>
<p><span style="color: rgba(0, 0, 0, 1)">在HTML5中,框架基本被废弃,只能使用&lt;iframe&gt;&lt;/iframe&gt;元素,且以后将大量结合JavaScript和PHP使用。</span></p>
<p><span style="color: rgba(0, 0, 0, 1)">&lt;a&gt;&lt;/a&gt;元素也可用来将同一文档中的另一元素移入视野,可通过属性id或name实现锚点定位。例:</span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;">&lt;a href="#1"&gt;第一章&lt;/a&gt;&lt;a href="#2"&gt;第二章&lt;/a&gt;&lt;a href="#3"&gt;第三章&lt;/a&gt;

&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;

&lt;a id="1"&gt;&lt;/a&gt;第一章</pre>
<pre class="brush:html;gutter:true;">&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</pre>
<pre class="brush:html;gutter:true;">&lt;a name="2"&gt;&lt;/a&gt;第二章 </pre>
<pre class="brush:html;gutter:true;">&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</pre>
<pre class="brush:html;gutter:true;">&lt;a name="3"&gt;&lt;/a&gt;第三章</pre>
</div>
<p><span style="font-size: 14pt"><strong>二、相对路径和绝对路径</strong></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">1.相对路径</span></span></p>
<p><span style="font-size: 12px; color: rgba(0, 0, 255, 1)"><span style="font-size: 13px">&lt;a href="index.html"&gt;index&lt;/a&gt;</span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">相对路径是相对于当前文档而言的同一文件夹下的另一个文档,条件是两个文档必须在同一个磁盘下的同一目录下的同一个文件夹内;</span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">如果在同一主目录下,有多个子目录层次,就需要使用目录结构语法。</span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">2.绝对路径</span></span></p>
<p><span style="font-size: 12px; color: rgba(0, 0, 255, 1)"><span style="font-size: 13px">&lt;a href="file:///D:备课/HTML5/code/index2.html"&gt;index2&lt;/a&gt;</span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">绝对路径就是直接以file:///开头的完整路径,首先是file:///开头,后是磁盘符,然后一个个的目录结构,最后是相应的文档。</span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">这种方式最致命的问题是,当整个目录移动到其它磁盘或电脑时,目录结构一旦出现任何变化,链接当即失效。</span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">3.目录语法</span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">同一目录:<span style="color: rgba(255, 0, 0, 1)">index2.html 或 ./index2.html;</span></span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">在子目录;<span style="color: rgba(255, 0, 0, 1)"> ***/index2.html;</span></span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">在孙子目录:<span style="color: rgba(255, 0, 0, 1)">***/***/index2.html;</span></span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">在父目录:<span style="color: rgba(255, 0, 0, 1)"> ../index2.html;</span></span></span></p>
<p><span style="font-size: 12px"><span style="font-size: 13px">在爷爷目录:<span style="color: rgba(255, 0, 0, 1)">../../index2.html;</span></span></span></p>
<p>&nbsp;</p><br><br>
来源:https://www.cnblogs.com/wellsblog/p/11562074.html
頁: [1]
查看完整版本: HTML5-超链接和路径