HTML系列知识（三）

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>