HTML图像
<img> 即图像标签,需要设置其属性 src指定图像的路径
<img src="http://how2j.cn/example.gif"/>
如果是本地文件,只需把图片放在同一个目录下即可,src直接使用文件名,不需要/
<img src="example.gif"/>
图片在上级目录,则在src上加上 ../,即可访问上级目录的图片,如果是在上级目录的上级目录,则使用 ../../
<img src="../example.gif"/>
src使用图片所在的绝对路径,并在前面加上file://
<img src="file://c:/example.gif"/>
如果设置的大小比原图片大,则会产生失真效果
<img width="200" height="200" src="http://how2j.cn/example.gif"/>
img不能够自己居中,需要放在其他能够居中的标签中实现这个效果,比如h1标签,p标签.
经常采用的手段是放在div中居中
<div align="left">
<img src="http://how2j.cn/example.gif"/>
</div>
<div align="center">
<img src="http://how2j.cn/example.gif"/>
</div>
<div align="right">
<img src="http://how2j.cn/example.gif"/>
</div>
如果图片不存在,默认会显示一个缺失图片,这是不友好的,所以可以加上alt属性。
当图片存在的时候,alt是不会显示的
当图片不存在的时候,alt就会出现
<img src="http://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />
HTML超链
<a>标签即用来显示超链
完整元素是:<a href="跳转到的页面地址">超链显示文本</a>
在新的页面打开超链 ,新增属性target
<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>
超链上的提示文字,当鼠标放在超链上的时候,就会弹出提示文字
<a href="http://www.12306.com" title="跳转到http://www.12306.com">www.12306.com</a>
使用图片作为超链
<a href="http://www.12306.com">
<img src="http://how2j.cn/example.gif"/>
</a>
HTML表格
<table>标签用于显示一个表格
<tr> 表示行
<td> 表示列又叫单元格
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
带边框的表格 ,设置table的属性border
<table border="1">
...
设置table宽度 ,设置table的属性 width,px即像素的意思。
<table border="1" width="200px">
...
单元格宽度绝对值 ,设置td的属性width
在示例里,1单元格设置了宽度,那么3,和a单元格,自动继承该宽度
2单元格的宽度由table宽度和1单元格的宽度决定
<table border="1" width="200px">
<tr>
<td width="50px">1</td>
<td>2</td>
</tr>
...
单元格宽度相对值 ,设置td的属性width为百分数
<table border="1" width="200px">
<tr>
<td width="80%">1</td>
<td>2</td>
</tr>
...
单元格水平对齐 ,设置td的属性align
<table border="1" width="200px">
<tr>
<td width="50%" align="left">1</td>
<td>2</td>
</tr>
<tr>
<td align="center">3</td>
<td>4</td>
</tr>
<tr>
<td align="right">a</td>
<td>b</td>
</tr>
</table>
设置tr或者td的属性bgcolor
<table border="1" width="200px">
<tr bgcolor="gray">
<td width="50%">1</td>
<td>2</td>
</tr>
...
HTML列表
列表分无序列表和有序列表
分别用<ul>标签和<ol>标签表示
无序列表 :
<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>
有序列表 :
<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>
HTML字体
使用<font>标签表示字体
font常用的属性有 color和size, 分别表示颜色和大小
<font color="green">绿色默认大小字体</font>
<br>
<font color="blue" size="+2">蓝色大2号字体</font>
<br>
<font color="red" size="-2">红色小2号字体</font>
网友评论