版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/woshisangsang/article/details/84755823
毛哥的通知页面有点乱
发布了几天通知之后，毛哥的网站上的信息有点乱：
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>公司通知</title>
<head>
<body>
<p> 2018-01-01 【全体都有】 通知：今天晚上加班1小时，加班时间:6:30——7:30，5:30——6:30有工作餐。 </p>
<p> 2018-01-02 【公司业务】 通知：今天晚上请自觉加班整理公司信息。 </p>
<p> 2018-01-03 【公司业务】 通知：今天晚上请自觉加班继续整理公司信息。 </p>
<p> 2018-01-03 【个人业务】 通知：今天晚上请自觉加班学习外汇业务。 </p>
<p> 2018-01-03 【公司业务】 通知：今天晚上请自觉加班继续整理公司信息。 </p>
<p> 2018-01-03 【个人业务】 通知：今天晚上请自觉加班学习理财知识。 </p>
<p> 2018-01-04 【公司业务】 通知：今天晚上请自觉加班整理一胡同公司信息。 </p>
<p> 2018-01-04 【公司业务】 通知：今天晚上请自觉加班整理二胡同公司信息。 </p>
<p> 2018-01-04 【个人业务】 通知：今天晚上请自觉加班学习保险业务。 </p>
<p> 2018-01-04 【公司业务】 通知：今天晚上请自觉加班继续整理公司信息。 </p>
<p> 2018-01-04 【个人业务】 通知：今天晚上请自觉加班学习假币识别知识。 </p>
</body>
</html>
毛哥觉得这样不好，显示不出自己的水平来，但是该如何整理呢。
怎么改进
目前广大同事朋友们反映不同业务类型的通知应该单独放到一个页面，然后通知有点乱，最好整理下。
以毛哥多年的上网经验，要想把通知整的条理点，应该有一个导航页面，然后在导航页选择具体业务类型后，跳转到对应的通知页面。然后通知页面的通知最好以表格的形式显示，这样看起来一目了然。
#带着目的去学习HTML
首先学习了下注释，毕竟是计算机专业的正规毕业生，注释的重要性那必须了解，毛哥还是很专业的。
注释：在在Html中，<!--xx-->被夹在中间的xx没有意义。
<!-- 你好，本段程序的作者是毛哥，请献上你们的膝盖（本段话的意义仅仅是为了表明毛哥对本网页代码负责！）。-->
然后学习下导航和表格相应的知识，网上相关知识有的是：
<!--首先是导航标签，显示的内容是`点此跳转`，然后点击后跳转网页`www.xxx.com`-->
<a href="htt://www.xxx.com">点此跳转</a>
<table border="1"><!--表格的开始，边框宽度是1-->
<tr><!-- 表格的第一行 -->
<td>老王</td><!-- 第一行第一列 -->
<td>25岁</td><!-- 第一行第而列 -->
</tr><!-- 第一行结束 -->
<tr><!-- 第二行 -->
<td>row 2, cell 1</td> <!-- 第二行第一列 -->
<td>row 2, cell 2</td> <!-- 第二行第二列 -->
</tr><!-- 第二行结束 -->
</table>
利用<a>做一个导航页
可以大体把通知分为全体通知、个人业务、公司业务、文体活动（这个哈哈，应该有）。
代码如下：
<!-- 通知导航页面notice_nav.html，作者：毛哥 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>公司通知导航</title>
<head>
<body>
<p> <a href="notice_all.html">全体通知</a> </p>
<p> <a href="notice_company.html">公司业务</a> </p>
<p> <a href="notice_person.html">个人业务</a> </p>
<p> <a href="notice_activity.html">文体活动</a> </p>
</body>
</html>
打开浏览器，显示如下，果然很牛啊。
利用表格将通知现实的井井有条
之后的工作依然不少，点了导航标签后，跳转到具体的页面，公司业务标签为例，点击之后调到对应的页面notice_company.html，因为这个两个网页文件在一个目录下，所以按相对路径来算直接写名字就行。当然此处也可以写绝对地址如下：
<!-- 相对路径 -->
<p> <a href="notice_company.html">公司业务</a> </p>
<!-- 绝对路径，从协议出发，找到对应IP地址机器，该机器下的项目，该项目下的网页 -->
<p> <a href="http://192.168.1.108/info/notice_company.html">公司业务</a> </p>
然后就可以利用html中的表格标签了，如下：
<!-- 公司业务通知页面notice_company.html，作者：毛哥 -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>公司业务</title>
<head>
<body>
<table border="1">
<tr>
<td>通知时间</td>
<td>通知内容</td>
</tr>
<tr>
<td>2018-06-26 10:00</td>
<td>今天加班1小时，整理13号街道公司信息</td>
</tr>
<tr>
<td>2018-06-26 10:00</td>
<td>今天加班2小时，整理14号街道公司信息</td>
</tr>
<tr>
<td>2018-06-26 10:00</td>
<td>今天加班1小时，整理133号街道公司信息</td>
</tr>
<tr>
<td>2018-06-26 10:00</td>
<td>今天加班1小时，整理1322号街道公司信息</td>
</tr>
<tr>
<td>2018-06-26 10:00</td>
<td>今天加班1小时，整理1333号街道公司信息</td>
</tr>
<tr>
<td>2018-06-26 10:00</td>
<td>今天加班1小时，整理143号街道公司信息</td>
</tr>
</table>
</body>
</html>
这样在导航页点击公司业务标签后，跳转到如下界面：
干了不少活，美滋滋的入睡了
真是厉害了，现在的通知信息页面真的是厉害炸了，哈哈。
一看表，已经晚上11:00了，得睡觉了，明天得给猫哥看看我的网站，吓他一大跳哈哈。
美滋滋的，毛哥进入了梦乡。