前言

放假闲来无事，便给自己写了一个个人页，顺便检验一下自己的 HTML 学习成果，结果踩了不少坑（（（
这篇是系列文章第一弹（？），之后遇到坑还会写出来w

P.S.:本人技术十分弱，有错误请在评论区指出qwq

正文

最开始实现首页上横排的三个按钮，枫是这么做的：

<input type="button" value="Blog" onclick="document.location='https://sakurai.in'" style="width:120px;height:45px;border: pink 2px solid;background-color:pink;margin: 5px;">

它看起来是这样的：
如果你看到的是一个方形的按钮上面显示着 Blog，那么你使用的可能是 Chromium 或者 Gecko 内核的浏览器，但如果你看到的是这样子的按钮的话：

那么你可能使用的是 Safari 或者 iOS 上面的其他的浏览器（按照 Apple 的要求，iOS 上的所有的浏览器必须使用与 Safari 相同的内核）
如图所示，这样写出来的按钮在 iOS 上的观感并不好，所以在写这种按钮的时候，建议使用<a>标签来写，例如：

HTML:
<a href="https://sakurai.in">Blog</a>
CSS:
a:link, a:visited {
display:inline-block;
text-align: center;
text-decoration: none;
width:100px;
color: black;
border: pink 2px solid;
background-color:pink;
margin: 5px;
padding: 10px;
}
a:hover, a:active {
background-color: hotpink;

（代码可应实际需求更改）