html amp,css网页链接

　　Html构建网站链接

　　链接是网络的主要特征，因为链接可以让你从一个网页跳到另一个网页——实现人们浏览和上网的想法。

　　一般来说，您会遇到以下链接：

　　从一个网站到另一个网站的链接。

　　l从一个网页到网站内另一个网页的链接。

　　从网页上的一个位置到同一网页中的另一个位置的链接。

　　l在新浏览器窗口中打开的链接

　　启动你的电子邮件程序，添加收件人的链接。

　　写链接

　　该链接是由A元素建立的。用户可以单击开始选项卡a和结束选项卡/a之间的任何内容.使用href属性指定要链接到的页面。

　　开始标记a和结束标记/a之间的文本称为链接文本。如果可能的话，试着在你的链接文本中告诉用户当他们点击这些文本时会跳转到哪里(而不是只说“点击这里”)。下图中，你看到的是第77页建立的IMDB的链接。

　　许多人通过搜索链接中的文本来浏览网站。清晰的链接文本有助于访问者找到他们需要的东西。此外，它会让他们对你的网站有更深的印象，并可能促使他们在你的网站上停留更长时间(它也可以帮助人们使用屏幕阅读软件)。

　　要编写合理的链接文本，您应该考虑人们在查找您要链接的文件时可能会使用什么词(例如，不要写“住宿的地方”，最好使用类似“纽约的酒店”这样更清晰的写法)。

　　其他网站的链接

　　a

　　网页中的链接是通过A标签建立的，A标签有一个重要的属性——href。href属性的值设置链接的目标，即网站用户单击链接时将到达的页面地址。

　　当网站用户点击链接开始页签A和链接结束页签/a之间的内容时，会打开href属性设置的页面。

　　如果链接指向另一个网站，那么href属性的值必须是这个网站的完整地址，也就是所谓的绝对URL。

　　默认情况下，链接文本在浏览器中显示为蓝色并带有下划线。

　　HTML:

　　第04章/链接到其他网站. html

　　p电影评论：

　　保险商实验所

　　阿利href= http://www . empire online . com

　　帝国/a/李

　　阿利href=http://www.metacritic.com

　　Metacritic /a /li

　　阿利href= http://www . rottentomatoes . com

　　/a/李

　　阿利href=http://www.variety.com

　　品种/a /li

　　/ul

　　/p

　　结果：

　　绝对URL

　　URL的全称是统一资源定位器(Uniform Resource Locator)。任何网页都有网址，网页的网址就是访问这个网页时需要在浏览器中输入的网址。

　　URL肯定是以网站的域名开头，域名后面可以指定特定页面的路径。如果没有指定特定页面，网站将显示主页。

　　链接到同一网站的其他页面

　　a

　　当链接指向同一网站的其他页面时，无需在URL中指定网站域名。这时候我们可以采用一个短的相对URL。

　　如果网站的页面文件都在同一个文件夹中，那么href属性的值就是页面的文件名。

　　如果网站的页面文件放在不同的文件夹中，就需要用稍微复杂一点的语法来表达链接目标和当前页面的位置关系。你会在81-84页学到更多。

　　如果你看一下每一章的代码，你会发现index.html文件中的链接使用了相对URL。

　　HTML:

　　第4章/链接到其他页面. html

　　p

　　保险商实验所

　　阿利href=index.html 主页/a /li

　　阿利href=about-us.html 关于/a /li

　　阿利href=movies.html 电影/a/李

　　阿利href=contact.html 联系人/a /li

　　/ul

　　/p

　　结果：

　　相对URL

　　如果你只是链接到同一个网站的其他网页，你可以使用相对网址。相对URL中不需要指定网站的域名，有点像绝对URL的缩写。

　　我们将在第72-73页详细解释相对URL，我们可以通过一些非常有用的快捷方式链接到网站中的其他页面。

　　因为相对URL可以用来建立网页之间的链接，不需要配置域名和服务器，所以在PC上搭建网站时，相对URL非常有用。

　　目录结构

　　在大型网站中管理文件时，将不同类型的页面放在不同的文件夹中更为合理。网站中的文件夹有时被称为目录。

　　l结构

　　第71页的图表显示了一个名为ExampleArts的网站的目录结构，这是一个虚拟娱乐列表网站。

　　图顶部的文件夹称为根文件夹(在本例中，根文件夹名为examplearts)。根文件夹包含网站中的所有文件夹和文件。

　　ExampleArts网站中的每个版块都放在一个单独的文件夹中，这对于网站文件的管理非常有利。

　　l关系

　　网站中的文件和文件夹之间的关系由系谱术语描述。

　　右图中已经画出了一些关系：examplearts文件夹是电影、音乐、剧场文件夹的父目录；同时，电影、音乐和剧院文件夹也是examplearts文件夹的子目录。

　　l主页

　　用HTML语言编写的网站的主页文件(包括子目录中各个版块的主页文件)通常被命名为index.html。

　　网站通常是这样设置的：如果没有指定文件名，会自动返回指定目录的主页。

　　因此，如果你访问examplearts.com，服务器将返回examplearts.com/index.html,如果你访问examplearts.com/music,服务器将返回examplearts.com/music/index.html.

　　如果您使用的是内容管理系统、博客平台或电子商务系统，网站可能不会为每个页面建立单独的文件。

　　这些系统通常使用相同的模板文件(例如，新闻文章、博客日志、产品信息等。)在一种类型的网页中。

　　编辑模板文件将修改使用该模板的所有页面。所以，不要修改HTML以外的任何代码，否则页面可能会损坏。

　　网站上的每个页面和图片都有一个URL(或统一资源定位器)。URL是附加到网站域名的页面或图像的路径。

　　ExampleArts网站的主页路径是www.examplearts.com/index.html,而该网站的徽标路径是www.examplearts.com/images/logo.gif.

　　当您需要链接到其他网页或在网页中包含图像文件时，您将使用URL。在下一页，我们将学习在网站中的文件之间建立链接的速记形式。

　　根文件夹包含：

　　Index.html文件，这是整个网站的主页。

　　电影、音乐和戏剧部分的独立文件夹

　　每个子目录包含：

　　主页index.html，这是这个子目录的主页。

　　一个评论页面，reviews.html

　　listings.html列表页面(DVD部分除外)

　　电影部分包含：

　　电影文件夹

　　DVD文件夹

　　相对URL

　　相对URL可以在网站内的页面之间建立链接。它以一种简单的方式告诉浏览器在哪里可以找到文件。

　　当需要链接到网站内部的文件时，可以使用相对URL的简写方式告诉浏览器目标文件相对于当前文件的位置，而不用在链接中指定域名。

　　对于创建新网站或学习HTML，相对URL非常有用，因为在启用域名并将网站上传到web服务器之前，您可以使用相对URL在本地计算机上自由建立页面之间的链接。

　　因为每个链接都不需要重复输入域名，相对URL写起来也更快。

　　如果您网站中的所有文件都存储在同一个文件夹中，则只有该页面的文件名可以用作该页面的链接地址。

　　如果你的网站是由多个文件夹(目录)组成的，你需要告诉浏览器如何从当前页面进入链接的页面。

　　所以，如果你从不同位置的两个页面链接到同一个页面，你可能需要写两个不同的相对URL。

　　相对URL关系描述使用与前面介绍的目录结构相同的术语(所有借用的术语都用来表示谱系关系)。

　　从音乐主页链接到音乐部分的评论页面：

　　a href=reviews.html 评论/a

　　从网站主页链接到音乐部分的列表页面：

　　a href=music/listings.html 列表/a

　　从网站主页链接到DVD部分的评论页面：

　　a href=movies/dvd/reviews.html 评论/a

　　祖父文件夹

　　重复的./表示您要到达上面两级文件夹(而不是上一级)，然后添加文件名。

　　从DVD部分的评论页面链接到网站主页：

　　a href= http://www . cn blogs . com/index . html Home/a

　　当你的网站打开的时候(也就是你上传到web服务器之后)，你可能会发现网站的一些其他功能，在网站打开之前是不起作用的。

　　比如一个没有附加文件名的子目录地址，服务器一般会显示这个子目录的主页。

　　一个正斜杠表示整个网站的首页，一个带文件名的正斜杠表示网站根目录下对应的文件。

　　电子邮件链接

　　邮件地址：

　　您还可以使用A标签来建立电子邮件链接。电子邮件链接的href属性值以mailto:开头，然后添加收件人的电子邮件地址。单击电子邮件链接将启动网站用户计算机上的电子邮件软件，并自动将链接中指定的电子邮件地址添加为收件人。

　　从右图可以看到，邮件链接看起来和其他链接没有什么不同，但是当你点击它的时候，网站用户的邮件软件会新建一个邮件，并将链接中指定的邮件地址添加为收件人。

　　HTML:

　　第四章/email-links.html

　　a href=mailto:jon@example.org 电子邮件Jon /a

　　结果：

　　在新窗口中打开链接

　　目标

　　如果要在新窗口中打开链接，需要使用A标签的target属性，并将该属性的值设置为_blank。

　　网页设计者想要在新窗口中打开一个链接的主要原因之一是这个链接指向另一个网站。在这种情况下，网站设计者希望网站用户在浏览另一个网站后能够返回到显示自己网站的窗口。

　　一般来说，尽量避免在新窗口中打开链接。如果真的有必要，最好提醒网站用户，链接会在新窗口打开后再点击。

　　HTML:

　　第04章/打开新窗口中的链接. html

　　a href= http://www . IMDB . com target= _ blank

　　Internet电影数据库/a(在新窗口中打开)

　　结果：

　　链接到当前页面上的特定位置。

　　在长页面的顶部，您可以添加一个内容列表，以链接到页面底部的相应部分。您还可以在页面底部创建一个可以返回页面顶部的链接，这样网站用户就不必一直滚动才能到达顶部。

　　在链接到页面上的特定位置之前，您需要确定链接将到达的目标位置。在确定目标位置时，需要使用id属性(一个可以应用于所有HTML元素的属性)。在本例中，您可以看到h1和h2元素都使用了id属性，id属性指定了页面中的这些部分。

　　id属性的值必须以字母或下划线开头(而不是数字或其他字符)，并且同一页面中不允许有两个相同的id属性值。

　　要链接到使用id属性的元素，还需要使用A元素。不同的是，它的href属性值以#开头，后面是要链接的元素的id属性值。在这个例子中，一个href="top "链接到h1元素，其id属性值为top，位于页面的顶部。

　　HTML:

　　第5章/链接到特定零件. html

　　h1 id=顶级电影制作术语/h1

　　a href=#arc_shot Arc Shot /a br /

　　a href= # interlude 插曲/a br /

　　a href= # Prologue Prologue/a br/br/

　　h2 id=arc_shot Arc Shot /h2

　　拍摄主体的镜头

　　通过环绕或移动的摄像机/p

　　h2 id=插曲插曲/h2

　　一个简短的，插入的电影场景或

　　序列，不专门绑定到

　　情节，出现在电影/p

　　h2 id=序言序言/h2

　　演讲、序言、介绍或简介

　　主要动作之前的场景或

　　电影的情节；与后记相反/p

　　p a href=#top Top /a /p

　　结果：

　　链接到当前页面上的特定位置。

　　在长页面的顶部，您可以添加一个内容列表，以链接到页面底部的相应部分。您还可以在页面底部创建一个可以返回页面顶部的链接，这样网站用户就不必一直滚动才能到达顶部。

　　在链接到页面上的特定位置之前，您需要确定链接将到达的目标位置。在确定目标位置时，需要使用id属性(一个可以应用于所有HTML元素的属性)。在本例中，您可以看到h1和h2元素都使用了id属性，id属性指定了页面中的这些部分。

　　id属性的值必须以字母或下划线开头(而不是数字或其他字符)，并且同一页面中不允许有两个相同的id属性值。

　　要链接到使用id属性的元素，还需要使用A元素。不同的是，它的href属性值以#开头，后面是要链接的元素的id属性值。在这个例子中，一个href="top "链接到h1元素，其id属性值为top，位于页面的顶部。

　　下面的例子是一个关于电影的网页。

　　id属性用在页面顶部的h1元素中，因此您可以向页面添加一个链接，将访问者从底部带回顶部。访问者可以通过页面中的电子邮件链接联系页面的设计者。页面中还有一些带有合法网址的各种电影节的链接。在这些链接列表的底部，有一个带有相对URL的链接，链接的目标是一个存储在同一个目录下的about页面。

　　超文本标记语言

　　头

　　标题链接/标题

　　/头

　　身体

　　h1 id=顶级电影人/h1

　　h2节日日记/h2

　　这是我们参加的一些电影节

　　今年将会出席。br /请

　　a href= mailto:film folk @ example . org

　　如需更多信息，请联系我们/a

　　信息。/p

　　h3一月/h3

　　p a href=http://www.sundance.org

　　圣丹斯电影节/a br /

　　美国犹他州帕克城br /

　　2011年1月20日至30日

　　h3二月/h3

　　p a href=http://www.tropfest.com

　　Tropfest /a br /

　　澳大利亚悉尼br /

　　2011年2月20日

　　！-附加内容-

　　p a href=about.html 关于电影人/a /p

　　p a href=#top 页首/a /p

　　/body

　　/html

　　总结

　　互连

　　链接是由A元素创建的。

　　元素指示要通过href属性链接到的页面。

　　如果是网站内部某个页面的链接，最好使用相对链接，而不是合法的URL。

　　您可以创建一个链接来启动电子邮件程序，并自动向其中添加收件人。

　　您可以使用id属性来定位可链接页面上的元素。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。