一、常用标签
（一）、字体及字符实体
语法：<i></i> |<em></em>
说明：倾斜标记
语法：<b></b> |<strong></strong>
说明：加粗标记
语法：<u></u>
说明：下划线标记
语法：<br />
说明：空标记，用来设置字体换行
语法：<hr />
说明：空标记，用做水平线
语法：<p></p>
说明：段落标记，标识一个段落（段落与段落之间有段间距）
（二）、字符实体
常见的有：
//不换行空格
< //左尖括号
> //右尖括号
© © //备案中的图标
（三）、常用元素
<div></div> 块元素
<span></span> 行内元素，可以是某一小段文本，也可以是某一个字。
（四）、列表元素
1、无序列表
语法：
<ul>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
.............
</ul>
每一个列表项内容前面都有一个项目符号.png
2、有序列表
语法：
<ol>
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
.............
</ol>
每一个列表项内容前面都有一个有序符号.png
3、自定义列表
语法：
<dl>
<dt>名词</dt>
<dd>解释</dd>
<dd>解释</dd>
.............
</dl>
自定义列表.png
（五）、超链接
语法：
<a href="目标文件路径及全称/连接地址URL" alt="替换文本" title="提示文本">文字</a>
例子：
<a href="http://www.1000phone.com">北京千锋互联网科技公司</a>
文字变成蓝颜色，点击浏览之后变成紫色，同时出现提示文本“千锋教育”.png
（六）、图像
语法：
<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题">
例如：
<img src="images/1.jpg" alt="图片示例" title="图片标题" />
title显示图片标题.png
当你的图片路径写错或者找不到这个图片时，alt中的文字显示提示，如“图片示例”.png
二、表格元素
1、语法：
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
说明：一对tr表示一行；一对td表示一列（单元格）
行列.png
表格的相关属性.png
示例：
<table width="600" height="300" border="1" bordercolor="#f00">//#f00表示红色
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
下图， width="600" height="300" border="1" bordercolor="#f00"
红色边框.png
3、表格其他属性
表格其他属性.png
3.1cellspacing
<table width="600" height="300" border="1" bordercolor="#f00" cellspacing="10">
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
这里的cellspacing单元格空间为10个像素，如下图。
单元格空间为10个像素点.png
这里的cellspacing单元格空间也可以为0个像素，两个单元格的边框紧挨在一起，需要注意这里的两根边框线并没有消失，如下图。
单元格空间为0个像素点.png
3.2cellpadding
1、这里先将宽度和高度去掉，表格自适应文字。代码和结果如下。
<table border="1" bordercolor="#f00" cellspacing="0" >
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
表格自适应文字.png
2、添加cellpadding
<table border="1" bordercolor="#f00" cellspacing="0" cellpadding="30">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
如下图，cellpadding为30个像素点，结果增加单元格和文字之间的间隙。（cell为单元格，padding为内边距的意思，合在一起就是单元格和文字之间的间隙。）
cellpadding为30个像素点.png
3、align和valign
align是水平对齐方式，默认是左对齐。
valign是垂直对齐方式，默认是中间对齐（居中）。
如下图：
align和valign默认对齐方式.png
align属性值有left、center、right。
valign属性值有top、middle、bottom。代码和效果如下：
<table width="600" height="300" border="1" bordercolor="#f00" cellspacing="0" >
<tr>
<td align="left">第一行第一列</td>
<td align="center">第一行第二列</td>
<td align="right">第一行第三列</td>
</tr>
<tr>
<td valign="top">第二行第一列</td>
<td valign="middle">第二行第二列</td>
<td valign="bottom">第二行第三列</td>
</tr>
</table>
align和valign效果.png
变化前代码：
<table width="600" height="300" border="1" cellspacing="0" >
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
变化前效果：
变化前效果.png
4、colspan和rowspan
colspan:合并第一行两个单元格
<table width="600" height="300" border="1" cellspacing="0" >
<tr>
<td colspan="2">1-1</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</table>
colspan添加后效果图：
colspan添加后效果.png
rowspan:合并第一列两个单元格
<table width="600" height="300" border="1" cellspacing="0" >
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-2</td>
</tr>
</table>
合并第一列两个单元格.png
网友评论