超链接为HTML提供了基础,用户可以通过HTML在同一文档内和跨页面浏览内容。
您可以使用 a
元素创建超链接。
a
元素具有局部属性: href,hreflang,media,rel,target,type
。
id,coords,shape,urn,charset,methods
和 rev
属性已过时。
您可以通过将元素中的href
属性设置为以http://
开头的URL来创建指向其他HTML文档的超链接。
当用户单击超链接时,浏览器将加载指定的页面。
以下代码显示用于链接到外部内容的a
元素。
<!DOCTYPE HTML> <html> <body> I like <a href="http://www..cn"></a>. </body> </html>
并非所有网址都必须引用其他网页。
浏览器还支持其他协议,如 https
和 ftp
。如果要引用电子邮件地址,可以使用 mailto
协议; 例如, mailto:info@example.com
。
如果 href
属性的值不以start开头识别的协议,例如 http://
那么浏览器将超链接视为相对引用。
以下代码给出了相对URL的示例。
<!DOCTYPE HTML> <html> <body> I like <a href="index.html"></a>. </body> </html>
代码将 href
属性设置为 index.html
。
当用户单击链接时,浏览器使用的URL当前文档以确定如何加载链接的页面。
您可以创建超链接,使浏览器窗口中的另一个元素进入视图。
您可以使用CSS样式ID选择器#id创建内部超链接,如以下代码所示。
<!DOCTYPE HTML>
<html>
<body>
<a href="#">here</a>.
<br />
<br />
<br />
<br />
<br />
<br />
<p id="">This is a test.</p>
</body>
</html>
上面的代码用 href
创建了一个超链接 #tutorial
的值。
当用户单击链接时,浏览器将在文档中查找元素其 id
属性的值为 tutorial
。如果元素不可见屏幕,浏览器将滚动文档以显示它。
如果浏览器不能找到具有所需 id
属性值的元素,它会再次搜索,寻找一个与目标匹配的 name
属性。
元素的 target
属性告诉浏览器要显示链接资源的位置。
默认情况下,浏览器使用显示当前文档的窗口,选项卡或框架显示链接的文档并替换现有文档。
以下列表描述了目标属性支持的值。
这些值中的每一个表示浏览上下文。
链接可以以不同的方式显示:
a:link {color:#FF0000;} a:visited {color:#00FF00;} a:hover {color:#FF00FF;} a:active {color:#0000FF;}
每个伪类的含义在css注释中列出。
以下代码设置四个锚伪类。
<!DOCTYPE HTML>
<html>
<head>
<style>
a:link, a:visited {
text-decoration: underline;
color: #6A5ACD;
background-color: transparent;
}
a:hover, a:active {
text-decoration: underline overline;
color: #191970;
background-color: #C9C3ED;
}
</style>
</head>
<body>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</body>
</html>
伪类可以与CSS类组合。以下示例告诉浏览器以红色显示访问的锚点链接。
a.red:visited {color:#FF0000;} <a class="red" href="http://www..cn">www..cn</a>
HTML结构元素和属性用于标记HTML文档中的内容。HTML文档是具有.html文件扩展名的文本文件。您可以直接从磁盘或通过Web服务器将文...
HTML表单输入类型按钮输入输入元素的提交,重置和按钮类型创建与使用button元素时创建的按钮非常相似的按钮。创建按钮的输入元素...
HTML progressprogress元素可用于指示任务的逐渐完成。它有两个局部属性: value,max,form 。value属性定义当前进度,它在零和...
HTML 表单属性HTML表单属性Form autocomplete有时候你不想让浏览器自动填写表单。我们可以使用form元素中的autocomplete属性来控...
Web 浏览器通过 URL 从 web 服务器请求页面。URL 是网页的地址,比如http://www..cn。URL 编码URL 只能使用ASCII 字符集来通过因...
CSS3引入了几个新的文本属性,我们可以使用文本样式。CSS3文本阴影在CSS3中,我们可以使用 text-shadow 属性将阴影应用于文本。 ...