HTML入门6—超链接

超链接

6.1 超连接简介

在html中,我们可以使用a标签定义超链接
语法:文本或图片
href表示想要跳转到连接的目的地址,可以是相对路径,也可以是绝对路径
例如文本超链接:

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8"/>
	head>
	<body>
		<dir>
			<a href="http://www.baidu.com">百度搜索a>
		dir>
	body>
html>

图片超链接

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8"/>
	head>
	<body>
		<dir>
			<a href="http://www.baidu.com"><img src="text/text.jpg" />a>
		dir>
	body>
html>

target属性

在默认情况下,超链接都是在当前浏览器窗口在新打开页面的。在HTML中,我们可以使用target属性来定义超链接打开窗口的方式
语法

<a herf="链接地址" target=“打开方式”>a>

target属性取值有4种
在这里插入图片描述

锚点链接

有些网页页面内容比价多,导致页面过长,此时用户需要不停在拖动浏览器上的滚动条才可以看到。为了方便用户操作,我们可以使用锚点链接来优化用户体验。
举例:

<!!DOCTYPE >
<html>
	<head>
		<meta charset="utf-8"/>
	head>
	<body>
		<div>
			<a href="#article">推荐文章a><br />
			<a href="#music">推荐音乐a><br />
			<a href="#movie">推荐电影a><br />
		div>
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		<div id="article">
			<h3>推荐文章h3>
			<ul>
				<li>荷塘月色li>
				<li>朝花夕拾li>
				<li>阿Q正传li>
			ul>
		div>
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		<div id="music">
			<h3>推荐音乐h3>
			<ul>
				<li>稻香li>
				<li>以父之名li>
				<li>一口气全念对li>
			ul>
		div>
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		~~~~~<br />
		
		<div id="movie">
			<h3>推荐电影h3>
			<ul>
				<li>肖生克的救赎li>
				<li>这个杀手不太冷li>
				<li>杀死比尔li>
			ul>
		div>
		body>
html>

你可能感兴趣的:(WEB前端,html)