元素（Elements）
元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，一个元素包括一个首标签（start tag）、零或多个属性（attribute）、内容（content）和一个尾标签（end tag）。如下图：
标签（Tags）
格式：以小于号“<”开头，以大于号“>”结尾
分为首标签（start tag）和尾标签（end tag）。它们唯一的区别在于，尾标签多一条斜杠”/”。 首尾标签之间的为内容。
属性（Attributes）
为元素附加一些信息，这些附加信息被称为属性（attribute）。
属性应写在元素的首标签上。格式：属性名称（attribute name）后紧跟一个等号（“=”），后面写上用双引号括起来的属性值（attribute value）。
例如：
<h2 style="background-color:#ff0000;">红色二级标题</h2>
对于style属性的值，可以用分号（“;”）来分隔多个样式指令。
16进制以#开头，颜色符合RGB。
白色： #ffffff
黑色： #000000
红色： #ff0000
兰色： #0000ff
绿色： #00ff00
链接（Links）
做链接只需一个元素和一个属性就行了。
链接到另一个网站
<a href="http://www.baidu.com/">这是一个指向百度的链接</a>元素a代表“锚（anchor）”；属性href代表“超文本引用（hypertext reference）”，它用于指定链接指向何处——通常是一个因特网地址（如URL，URL必须包含http://）或者一个文件名。
同一个网站的网页之间的链接
不必拼写出网页的完整URL。假如有两个网页（比如说page1.html和page2.html），而且它们被存放在同一个文件夹中，那么在做链接的时候，只要写出文件名就行了。
<a href="page2.html">page1->page2</a>一个网页内做链接
使用id属性和“#”符号来实现。<a href="#heading1">转到标题1</a> <h1 id="heading1">标题1</h1>链接上使用title属性
<a href="http://www.baidu.com/" title="指向百度">百度</a>把鼠标光标停留在该链接上时，提示文字“指向百度”便会出现。
图像
有三种类型的图片可被插入到网页中：GIF，JPG或JPEG，PNG
插入一张图片
<img src="qi.jpg"> 图片来自文件夹 <img src="http://www.html.net/logo.png"> 图片来自网站 <a href="http://www.html.net"><img src="qi.jpg"></a> 图片用作链接属性src用来指出要插入图片的位置，若图片不存在，则在网页上显示不出来。
其他属性
alt用于给出图像的替用描述，假如由于某些原因该图像未能显示出来，浏览器就通过显示这个描述来替代图像。
<img src="q.jpg" alt="qi">title用于将光标停留在图片上时会显示出文本。和链接上使用的title属性的功能相同
<img src="q.jpg" title="qi">width和height用于设置图片的宽度和高度的像素。
<img src="qi.jpg" width="300" height="500">
表格
用于创建表格的3个基本元素：
1. 首标签 <table> 和尾标签</table>分别表示一个表格的开始与结束。 2. tr是“table row（表格行）”的缩写，用于表示一行的开始和结束。 3. td是“table data（表格数据）”的缩写，用于表示行中各个单元格（cell）的开始和结束。 <table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> 输出： Cell 1 Cell 2 Cell 3 Cell 4属性
border： 指定表格四周边框的厚度。
width： 用于设置屏占百分比<table border="1" width="30%">align： 指定整个表格、某行或某个单元格里内容的水平对齐方式，比如左对齐、居中或右对齐。
valign： 指定某个单元格里内容的垂直对齐方式，比如靠上、置中或靠下。<td align="right" valign="top">单元格1</td>colspan（column span）： 指定单元格横向跨越的列数
<td colspan="2">Cell 1</td>rowspan： 指定单元格纵向跨越的行数
<td rowspan="3">Cell 1</td>
页面布局
使用级联样式表（Cascading Style Sheets，简称CSS）为网站设计页面布局。HTML负责网页的具体内容（结构），而CSS则修饰网页的表现形式（布局）。
用style属性将CSS内联到网页中
<p style="font-size:20px;">这里的文字大小为20</p> <p style="font-family:courier;">这里的文字字体为黑体/p> <p style="font-size:20px; font-family:courier;">这里是文字大小为20、采用黑体的文字</p>CSS对页面布局进行集中管理
要将CSS嵌入文档，你只需通过标签
<style type="text/css">告诉浏览器该段为CSS即可。
<style type="text/css"> h1 {font-size: 30px; font-family: arial;} h2 {font-size: 15px; font-family: courier;} p {font-size: 8px; font-family: "times new roman";} </style>所有一级标题（h1）采用宋体，字体大小为30（象素）；所有二级标题（h2）采用黑体，字体大小为15（象素）；普通段落文字（p）采用隶书，字体大小为8（象素）。
CSS还可以控制页面设置与表现形式(边距，漂浮，对齐，宽度，高度等）
样例
<mata charset="UTF-8"> <!--防止中文乱码-->
<html>
<head>
<title>网站标题</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman"; color:green;}
</style>
</head>
<body>
<!-- 这里添加注释-->
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>
<p>文本段落</p>
<b>粗体</b>
<i>斜体</i>
<em>斜体</em>
<small>小字体</small>
<b><i>既是粗体又是斜体</i></b>
<br /> <!--插入一个换行符-->
<hr /> <!--画一条水平线-->
<ul> <!--列表：粗点代表一个列表项-->
<li>列表项</li>
</ul>
<ol> <!--列表：有序数字代表一个列表项-->
<li>列表项</li>
</ol>
<h2 style="background-color:#ff0000;">为二级标题附加红色属性</h2>
<a href="#heading1" title="转到heading1">转到标题1</a>
<h1 id="heading1">标题1</h1>
<table border="1" width="50%">
<tr>
<td align="right" valign="top">Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
<td>Cell 8</td>
</tr>
<tr>
<td colspan="4">Cell 9 </td>
</tr>
</table>
</body>
</html>
