<a href="https://www.caniuse.com" target="_self" title="_self">_self 默认，跳转自身页面</a>
<a href="https://www.caniuse.com" target="_blank" title="_blank">_blank 跳转新页面</a>
默认跳转
可以通过 <base> 标签实现整个页面的 a 标签默认跳转链接
<head>
<base href="www.google.com" target="_blank">
</head>
<body>
<a href="#">空链接的默认跳转到google首页</a>
</body>
邮件链接
| 参数 | 描述 |
|---|---|
| mailto:name@email.com | 邮件接收地址 |
| cc=name@email.com | 抄送地址（Carbon Cpoy） |
| bcc=name@email.com | 盲抄送地址（Blind Carbon Copy）让各个收件人无法查看这封邮件同时放送给了哪些人 |
| subject=email_theme | 邮件主题 |
| body=email_content | 邮件内容 |
| ? | 第一个参数分隔符 |
| & | 其它参数分隔符 |
| ; | 多个邮件地址用;隔开 |
| %20 | 空格用%20隔开 |
<a href="mailto:735326795@qq.com?subject=Mail%20Theme&body=Come%20On!&cc=char1081991@outlook.com;mailto:char1081991@outlook.com?subject=Mail%20Theme&body=Come%20On">mail</a>
锚点案例
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #FF6F91;
}
.nav_aside{
position: fixed;
top: 15%;
right: 3%;
list-style-type: none;
text-align: center;
z-index: 1;
}
.nav_aside li{
width: 40px;
background-color: plum;
margin: 5px 0;
padding: 10px;
}
.nav_aside li a{
font: normal bold 16px/16px Aria,微软雅黑;
text-decoration: none;
color: white;
}
.article{
width: 80%;
height: 300px;
background-color: aliceblue;
margin: 15px auto;
padding: 10px;
position: relative;
}
.article>b{
display: block;
width: 200px;
background-color: plum;
text-align: center;
color: white;
padding: 5px 0;
letter-spacing: 10px;
}
.article>span{
position: absolute;
top: 50px;
height: 250px;
overflow: auto;
line-height: 50px;
text-indent: 2em;
}
</style>
</head>
<body>
<ul class="nav_aside">
<li><a href="#recommend">今日推荐</a></li>
<li><a href="#favorate">我的收藏</a></li>
<li><a href="#comment">客服反馈</a></li>
<li><a href="#more">了解更多</a></li>
</ul>
<section id="recommend" class="article">
<b>今日推荐</b>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, illo dolore cumque consequuntur animi quis sint? Quidem expedita ipsam eaque quae eveniet doloremque natus, architecto cumque, labore voluptates iusto magni?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus quia autem unde, nemo quasi velit assumenda alias laborum sunt id. Voluptas quisquam reprehenderit cum culpa ipsum iure commodi temporibus fuga!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, quae? Distinctio modi deleniti ullam, mollitia eius officiis reiciendis consectetur consequatur excepturi. Nostrum nulla voluptatibus rem, esse corrupti nihil nam animi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus corrupti placeat eum itaque, temporibus iure! Nulla minus obcaecati amet quasi consectetur quaerat iure sapiente temporibus, incidunt fuga facilis exercitationem vero.
</span>
</section>
<section id="favorate" class="article">
<b>我的收藏</b>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, illo dolore cumque consequuntur animi quis sint? Quidem expedita ipsam eaque quae eveniet doloremque natus, architecto cumque, labore voluptates iusto magni?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus quia autem unde, nemo quasi velit assumenda alias laborum sunt id. Voluptas quisquam reprehenderit cum culpa ipsum iure commodi temporibus fuga!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, quae? Distinctio modi deleniti ullam, mollitia eius officiis reiciendis consectetur consequatur excepturi. Nostrum nulla voluptatibus rem, esse corrupti nihil nam animi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus corrupti placeat eum itaque, temporibus iure! Nulla minus obcaecati amet quasi consectetur quaerat iure sapiente temporibus, incidunt fuga facilis exercitationem vero.
</span>
</section>
<section id="comment" class="article">
<b>客服反馈</b>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, illo dolore cumque consequuntur animi quis sint? Quidem expedita ipsam eaque quae eveniet doloremque natus, architecto cumque, labore voluptates iusto magni?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus quia autem unde, nemo quasi velit assumenda alias laborum sunt id. Voluptas quisquam reprehenderit cum culpa ipsum iure commodi temporibus fuga!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, quae? Distinctio modi deleniti ullam, mollitia eius officiis reiciendis consectetur consequatur excepturi. Nostrum nulla voluptatibus rem, esse corrupti nihil nam animi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus corrupti placeat eum itaque, temporibus iure! Nulla minus obcaecati amet quasi consectetur quaerat iure sapiente temporibus, incidunt fuga facilis exercitationem vero.
</span>
</section>
<section id="more" class="article">
<b>了解更多</b>
<span>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, illo dolore cumque consequuntur animi quis sint? Quidem expedita ipsam eaque quae eveniet doloremque natus, architecto cumque, labore voluptates iusto magni?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus quia autem unde, nemo quasi velit assumenda alias laborum sunt id. Voluptas quisquam reprehenderit cum culpa ipsum iure commodi temporibus fuga!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, quae? Distinctio modi deleniti ullam, mollitia eius officiis reiciendis consectetur consequatur excepturi. Nostrum nulla voluptatibus rem, esse corrupti nihil nam animi?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus corrupti placeat eum itaque, temporibus iure! Nulla minus obcaecati amet quasi consectetur quaerat iure sapiente temporibus, incidunt fuga facilis exercitationem vero.
</span>
</section>
</body>
</html>
CSS选择器实现简单的折叠面板（不完全的手风琴效果）
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.list{
display: block;
font: normal bold 20px/25px Aria;
color: black;
}
.list:link,.list:visited{
text-decoration: none;
}
.list:hover,.list:active{
color: purple;
}
.content{
display: none;
padding: 10px;
}
.content:target{ /* 选取当前活动的锚点（目标）元素 */
display: block;
}
</style>
</head>
<body>
<section>
<a href="#content_list_one" class="list">List One</a>
<div id="content_list_one" class="content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cumque, deleniti quam obcaecati nihil, id repudiandae ipsam ex, atque repellendus modi dignissimos reiciendis adipisci aperiam dolore voluptatibus temporibus ratione possimus totam.
</div>
<a href="#content_list_two" class="list">List Two</a>
<div id="content_list_two" class="content">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nihil saepe, magnam ipsam placeat unde illum nobis nulla in. Eaque officiis neque expedita laboriosam unde quia tenetur vero, adipisci sint praesentium.
</div>
<a href="#content_list_three" class="list">List Three</a>
<div id="content_list_three" class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque optio maxime reiciendis sunt nisi minima asperiores earum ex veniam, illum nobis quis hic accusamus, vel repudiandae commodi iusto consequatur! Quam!
</div>
</section>
</body>
</html>
