第2版主页在代码上并没有做太多调整，只是把文字更新了，由于第2版文字较多，再用上一版整体居中的效果就不合适了，所以我把页面设计成了一篇文章的形式，如果做成信封的样式更会适合这次的主页，但我现在还不会写，所以这个主页就算1.5版本吧。



代码调整说明如下：

body { margin:auto; padding:1.2em; font-size:1.2em; line-height:1.6; max-width:660px; }

margin:auto

该属性是让文字所在的页面居中显示，而不是单纯的文字居中。

max-width:660px

该属性是把上面居中的文字页面设置一个固定像素宽度显示。

h1 {text-align: center; font-size:1.2em; margin-bottom: 1.2em;}

添加属性 text-align: center 只让标题居中显示。

h1 {text-align: center; font-size:1.2em; margin-bottom: 1.2em;}
h2 {font-size:1.0em; margin-bottom: 1.2em;}
p {font-size:0.9em; margin-bottom: 1.2em;}

在网页中我经常见的字体大小的单位是em，即％，是字体相对大小单位，不会随设备分辨率大小而改版。

px则正好相反，px是字体绝对大小单位css中的1px并不等于设备的1px，会随屏幕的分辨率变化而变化。

通常浏览器的默认字体高都是16px，所以1em=16px，em相对默认字体而定。

网页中的字体大小都用em单位的话，在一个页面上给定一个父元素的字体大小，这样就可以通过调整一个元素来成比例的改变所有元素字体大小，它可以自由缩放，比如我的主页<style mip-custom></style>标签里设定了一个整体内容body的字体大小，1.2em，然后又设定了标题h1、h2和段落p的字体大小，通过调整body里的字体大小就可以成比例改变h1、h2和p的字体大小。

还有一种字体大小单位rem，这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明，这些浏览器会忽略用rem设定的字体大小，比如p {font-size:14px; font-size:.875rem;}。

不过现在大家的浏览器应该基本都支持rem了，所以用rem最好。

<hr/>

这个标签会显示一条水平线，我用到了大标题下方。

<ul>
<li>aaa</li>
<li>bbb</li>
<ul>

无序列表，我应用到了内容介绍，html中有三种列表，除了无序列表，还有有序列表、自定义列表。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。如下：
<ol>
<li>111</li>
<li>222</li>
</ol>

规定列表中的列表项目的项目符号的类型
语法：<ol type="a"></ol>

1 数字顺序的有序列表（默认值）（1, 2, 3, 4）。
a 字母顺序的有序列表，小写（a, b, c, d）。 
A 字母顺序的有序列表，大写（A,B,C,D) 
i 罗马数字，小写（i, ii, iii, iv）。 
I 罗马数字，大写（I, ii, iii, iv）。

属性规定有序列表的开始点。
语法：<ol start="5"></ol>

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。如下：
<dl>
<dt>名词</dt>
<dd>注释</dd>
</dl>

此部分参考资料：
https://zhuanlan.zhihu.com/p/60825543
https://www.w3school.com.cn/html/html_lists.asp

div {text-align: center;}
div {font-size:0.9em; }

第2版的主页我把备案的标签<p></p>换成了<div></div>，这样能单独把备案信息居中，同时把文字缩小。

标签div没有什么特性的意义，什么都能装，一般用来布局，还有标签<span></span>和div很像，这三者的区别是<span>元素不会导致换行，而<div>元素会导致换行，<p>元素则会产生一个段落，所以段落与段落之间默认有更大的间距。

效果对比如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基本标签</title>
</head>
<body>
<span>Tomcat</span><span>Jetty</span><span>Resin</span>
<br/>
<div>Tomcat</div><div>Jetty</div><div>Resin</div>
<p>Tomcat</p><p>Jetty</p><p>Resin</p>
</body>
</html>

TomcatJettyResin

Tomcat
Jetty
Resin

Tomcat

Jetty

Resin

最后本来想在页面底部加上我邮箱，点击能自动弹出发邮件的那种效果，网上说这样很容易收到一堆垃圾邮件，应该可以自动抓取页面上邮箱然后自动发件，虽然可以通过把@换成at字母或者直接把邮箱做成图片能避免，但想了一下，我现在对邮箱等需求也不是太大，所以就不放了。

邮箱超链接代码如下：

<a href="mailto:email地址">EMAIL</a>

参考资料：
https://blog.csdn.net/u012884726/article/details/52226404
https://www.cnblogs.com/leejersey/p/3662612.html