- 通常情况下，将网站的导航放在左侧的栏中，广告或增补信息则放在右侧栏中。
<!doctype html>
<html>
<head>
<title>~~~~~~~~~~~~~~</title>
<style type=”text/css”>
body{ <!--为了确保所有浏览器使用相同的起点来创建页面布局,起点定义了框外部的外边距和内边距从哪里开始-->
margin:0px;
padding:0px;
}
header{
height:50px;
background-color:#ccc;
padding:5px;
}
nav{
position:absolute; <!--position属性包括的属性值：
static（静态定位）默认的定位类型，由浏览器来决定将元素放在何处；
relative（相对定位）相对元素自身调整页面上元素位置的方法；
absolute（绝对定位）用于在页面上精确的放置元素,即使已经指定了一个元素的位置，也必须相对于包含该元素的父容器的位置来进行定位。在很多情况下，并没有任何已经定位的父容器，则此时的页面正文将作为绝对定位元素的父容器-->
left:10px;
top:70px;
width:150px;
border:1px solid #000;
padding：5px;
}
#extras{
position:absolute; <!--z-index属性仅对那些设置了position属性的元素有效。通过z-index属性的设置，具有较高z-index属性值的元素将显示在“顶层”。-->
right:10px
top:70px;
width:150px;
border:1px solid #000;
padding:5px;
}
article{ <!--内容栏，默认情况下它将显示在header分块的下边。在内容栏添加边距特性设置是为了防止位于中间的内容栏的四边因自由扩展，与导航栏和extras栏发生重叠。-->
margin-left:162px;
margin-right:162px;
padding:5px;
color:black;
background-color:#ccc;
border:1px dashed black;
}
p{
font-size:10pt;
line-height:20pt;
font-family:verdana,arial,sans-serif;
margin:0px 0px 12px 0px;
}
h1{
font-size:14pt;
font-family:georgia;
}
h2{
font-size:12pt;
font-famiy:georgia;
font-style:italic;
}
footer{ <!--与header一样，该部分将自动填充浏览器窗口的水平空间。除非指定了其他样式选项，否则footer的高度将由放置在其中的内容多少来决定-->
border-top:2px solid #000;
padding:5px;
}
</style>
</head>
<body> <!--默认情况，浏览器通常在页面上按照从上到下的顺序，一个接一个的显示块级元素，并在水平方向上填充可用空间-->
<header>~~</header>
<article>
<h1><a name=”top”>~~~~</a></h1> <!--通过a元素的name特性可以为Web页面的一个部分定义一个名称,name属性值不含空格或标点符号-->
<h2>~~~~</h2>
<p>~~~~~~~~~~~~~</p>
<p>><a href=””>~~</a></p> <!--&:开始一个特殊符号，gt:<，使用a元素就可以添加链接，a元素最常用的特性是href(hypertext reference)-->
</article>
<nav>~~</nav>
<div id=”extras”>~~</div>
<footer>~~~</footer>
<p><a href=”#top”>~~~</a></p> <!--#号告诉浏览器要链接到页面中的一个特定的部分，要定义到锚点的链接，需将一个#号和锚点名称作为href特性的值即可-->
</body>
</html>
- 基本的链接类型包括：
- 绝对链接：必须在开头包含所使用的协议（http：//）
- 相对链接：所使用的路径名是相对于当前页面的，如果要链接到当前文件夹之上的父文件夹中的某个文件，就可为目录树之上的每一层目录添加一个“../“，要链接到当前文件夹之上的两级文件夹中的某个文件，添加“../../”。告诉浏览器返回网站根（root或base）目录的另外一种方法是简单的使用一条斜杠。
想链接到同一个Web页面中的多个不同部分时，可以使用锚点来命名。如果想创建一个指向另一个Web页面中的某个特定部分的链接，可在目标页面的文件名和锚点名称之间用一个#分隔
链接中避免给click加下划线，如果在一段文本中需要放置多个链接，最好将该段落转换为一个列表，并将每一个链接放在列表项的开头。
在样式表中，通过a元素来定义链接的颜色：
a:link定义链接被单击之前的颜色
a:visited被点击后和访问过后的颜色
a:hover鼠标悬停于链接之上时呈现的颜色
a:active正被单击是的颜色
若在a和：之间添加.navlinks表示用CSS类来定义导航栏中链接的颜色。
当在某个链接（或其他任何页面元素）中添加title特性时，是向用户发出一个警告。使用tabindex特性，可以手动制定Web页面上链接或表单字段元素的Tab键顺序。如果没有使用tabindex特性指定元素的Tab键顺序，浏览器将尽量采用某种合理的Tab键顺序，通常会按照HTML代码从顶到底的顺序依次选中链接或可单击元素。若使用Tab键凸显用户想访问的链接后，只需按Return或Enter键就可访问该链接。
【可使用0~32767之间的任何数字作为tabindex特性的值，要将一个元素完全排除在Tab键顺序之外，只需将tabindex特性设置为一个负数即可】
<a href=”page1.html” tabindex=”1” accesskey=”2” target=”_blank”>~~~~~</a>
【注意避免使用通用的键盘快捷键，如果Web页面中某个链接的键盘快捷键与打印页面的快捷键相同，用户将无法使用快捷键来打印页面】
- 用两种方法来引用一个外部样式表：
1；通过使用link元素可以链接外部样式。对于多种媒体，可以链接多个样式表。
<link rel=”stylesheet” href=”screen.css” media=”screen”> //在屏幕上显示页面
<link rel=”stylesheet” href=”print.css” media=”print”> //把页面发送给打印机
如果将一个特定的链接样式表应用于多种媒体，用逗号分隔media属性值
2；通过在<style>和</style>样式标记之间使用@import语句来导入样式表，适用于对网站中所有页面都使用相同的通用页面布局。@import可以导入多个样式表，可用来定义页面布局，也可用来定义页面不同的样式设计。
让用户轻松的访问你的电子邮件地址，在电子邮件地址之前使用电子邮件协议mailto:
<a href=”mailto:me@home.com?Subject=HTMLBook&cc=~~~~~”>~~~~~~~</a>
【在href特性中不能包含空格，除非空格是主题行的一部分】
为避免自己的电子邮件地址成为垃圾邮件的目标，可通过将@符号和句点替换为等价的十进制数值表示方式，在mailto链接中隐藏电子邮件地址。
即：<a href=mailto:me@home.com>
<a href=mailto:me@home.com>
RSS（Really Simple Syndication）真正简单的聚合。
FTP表示文件传输协议，通过Internet发送和接收文件的一种协议。很多公司即可用于承载Web网站的HTTP服务器，也可用于承载可下载文件的FTP服务器。要引用一个FTP站点的文件，使用a标记，并将href特性设置为FTP协议。
