最近在学习写个人网页，这里是学习过程中的一些笔记。参考代码：https://github.com/xueyuhanlang/xueyuhanlang.github.io
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- DocType是HTML文档中的第一个标记。它告诉Web浏览器客户端页面将使用哪种版本的标记语言。
head标签：
<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="Keywords"
content="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
<meta name="Description" content="Homepage of Dr. xx" />
<title> Dr. xx - Homepage </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="images/surf.ico" />
</head>
<link>标签定义文档与外部资源的关系,<link>标签最常见的用途是链接样式表,在XHTML中，<link>标签必须被正确地关闭。stylesheet样式表shortcut icon通常是.ico 格式的32像素乘32像素的图像文件，显示在页面选项卡。如果图标位于网站的根目录，则不必使用link元素，大多数浏览器会在加载网页时自动请求此文件。
<meta>元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。<title>元素可定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。
样式表style.css的内容如下：
a{
text-decoration: none;
color: #003399;
}
a:hover{
text-decoration: none;
color: #ad1400;
}
strong{
font-weight: bold;
}
body{font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;color:#222;font-size:0.8em;font-weight:400;}
dd,td{font-family:Verdana, Arial, Helvetica;color:#222;font-size:1em;font-weight:400;text-align:left;}
h1{color:#353689;font-size:1.5em;font-weight:700;}
h2{font-size:1.2em;margin-top:-5px;font-weight:700;}
h3{font-size:1.2em;font-weight:700;}
h4{font-size:1em;font-weight:700;}
table.bild td{padding:10px;}
address{border:1px;margin:20px;}
div.content{width:800px;max-width:800px;}
.main_link{
font-size: 100%;
font-family: georgia;
font-weight: 600;
color: #08529b;
}
.main_link:hover{
font-size: 100%;
font-family: georgia;
font-weight: 600;
color: #FF4D01;
}
<a>标签定义超链接，用于从一张页面链接到另一张页面。a{....}表示超链接无下划线， 颜色为#003399a:hover是a标签的伪类，这样的伪类总共有四个：a:link，a标签在页面上无任何操作时的样式a:visited，a标签被点击过后的样式a:hover，当鼠标放上a标签时的样式a:active，a标签被鼠标点击但未弹起时的样式
strong是字体加粗，font-weight对象值：从100到900- normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
- bold : 粗体。相当于number为700。也相当于b对象的作用
- bolder : IE5+ 特粗体
- lighter : IE5+ 细体
- number : IE5+ 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
- 规定了
<body>部分的字体、颜色、大小、粗细。 - 规定了
h2的上边距 <dd>在定义列表中定义条目的定义部分。<td>标签定义 HTML 表格中的标准单元格。简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。padding内边距属性。<address>标签定义文档作者/所有者的联系信息。如果<address>元素位于<body>元素内部，则它表示该文档作者/所有者的联系信息。如果<address>元素位于<article>元素内部，则它表示该文章作者/所有者的联系信息。<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过<div>的class或id应用额外的样式。可以对同一个<div>元素应用class或id属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。main_link为自定义类名。
body标签
<body alink="#32CC99" vlink="#236B8E" link="#0064FF">
...
</body>
body元素定义文档的主体。body元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）alink规定文档中活动链接（active link）的的颜色,vlink规定文档中已被访问链接的颜色。link规定文档中未访问链接的默认颜色。
计数代码
<script type="text/javascript">
//<![CDATA[
var sc_project = 7716070;
var sc_invisible = 1;
var sc_security = "d3264c26";
//]]>
</script>
<script type="text/javascript" src="http://www.statcounter.com/counter/counter.js">
</script> <noscript>
<div class="statcounter">
<a title="drupal statistics" href="http://statcounter.com/drupal/" target="_blank">
<img class="statcounter" src="http://c.statcounter.com/7716070/0/d3264c26/1/" alt="drupal statistics" />
</a>
</div>
</noscript>
- 这个的作用是计算访问量，具体运行原理待更
noscript元素用来定义在脚本未被执行时的替代内容（文本）。此标签可被用于可识别<script>标签但无法支持其中的脚本的浏览器。
table标签
<table align="center" width="1024">
</table>
align规定表格相对周围元素的对齐方式。width规定表格的宽度。
<tbody>标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容。
tr标签
<tr>
<td colspan="2" height="103">
<h1> xxx </h1>
<h1> Principal Researcher </h1>
<hr noshade="noshade" />
</td>
<td rowspan="4" align="right" height="240" width="276">
<div align="center"> <img style="width: 480px;" src="personal/me.jpg" />
</div>
</td>
</tr>
td的colspan属性指的是横跨的列数，height规定表格单元格的高度。align对其方式。不赞成使用，属性表？div创建一个新的分区，使图像居中<hr/>水平线分割，noshade指无阴影
<tr>
<td style="width: 208px;" valign="top" nowrap="nowrap"> <a
href="https://www.microsoft.com/en-us/research/group/internet-graphics/" target="_blank">Internet Graphics
Group</a> <br />
<a href="https://www.microsoft.com/en-us/research/lab/microsoft-research-asia/" target="_blank">Microsoft
Research Asia</a> <br />
13130, Microsoft Tower 2, <br />
No. 5 Dan Ling Street, <br />
Haidian District <br />
Beijing, P.R. China, 100080 </td>
<td style="height: 123.2px; width: 300px;" valign="top" nowrap="nowrap">
<p> <b>Tel:</b> +86-10-5917-4269 <br />
<br />
<b>Email:</b> yangliu at microsoft.com <br />
<br />
<a href="http://scholar.google.com/citations?hl=en&user=-FcA6oIAAAAJ" target="_blank">[Google
Scholar]</a> </p>
</td>
</tr>
<p>普通文本<b>粗体文本<br/>换行符td单元格参数设置：
<a>标签的target属性规定在何处打开链接文档。
<tr>
<td colspan="4">
<h4> Education and Work Experience </h4>
<ul>
<li> Researcher, <a href="https://www.microsoft.com/en-us/research/lab/microsoft-research-asia/"
target="_blank">Microsoft Research Asia</a>, 2010-now. </li>
<li> PostDoc, <a href="http://alice.loria.fr/" target="_blank">Alice
Group</a>, <a href="http://www.loria.fr/" target="_blank">LORIA/INRIA</a>,
2008-2010. </li>
<li> Ph.D in <a href="http://www.cs.hku.hk/" target="_blank">Computer
Science</a>, <a href="http://www.hku.hk/" target="_blank">The
University of Hong Kong</a> (HKU), 2008. </li>
<li> Bachelor, Master in <a href="http://math.ustc.edu.cn/" target="_blank">Mathematics</a>,
<a href="http://www.ustc.edu.cn" target="_blank">University of
Science and Technology of China</a> (USTC), 2000 and 2003,
respectively. </li>
</ul>
<hr noshade="noshade" />
</td>
</tr>
- HTML
<li>元素 用于表示列表里的条目。它必须包含在一个父元素里：一个有序列表(<ol>)，一个无序列表(<ul>)，或者一个菜单 (menu>)。
