HTML(基本元素2)

元素2)"/>

HTML(基本元素2)

HTML基本元素2

1. 图像
   图像标签
   (1)插入图像

<img src=".gif"/>

(2)本地图像-同级目录
只需要把图片保存在同一个目录下即可
src直接引用文件名

<img src="example.gif"/>

(3)本地图像-上级目录
只需要在文件名前加上…/即可
同理上上级则加上…/…/

<img src="../example.gif"/>

(4)其他目录图像
需要使用绝对路径

<img src ="file://c:/example.gif"/>

(5)设置图像大小
在src前定义width，和height

<img width="200" height="200" src=".gif"/>

(6)图像居中
img不能自己居中，必须要放在其他可以居中的标签中，比如h1，p
常采用放在div标签中居中

<div align="left"><img src=".gif"/>
</div><div align="center"><img src=".gif"/>
</div><div align="right"><img src=".gif"/>
</div>

(7)替换图片上的文字
如果图片不存在，默认会显示一个缺失图片，这是不友好的
所以可以加上alt属性。
当图片存在的时候，alt是不会显示的
当图片不存在的时候，alt就会出现

<img src=".gif" /><br/><img src=".gif" alt="这个是一个图片" /><br/>
<img src=".gif" alt="这个是一个图片" />

2. 超链
   超链标签

(1)普通超链

<a href="">12306</a>

(2)在一个新的页面打开的超链
target

<a href="" target="_blank">;/a>

(3)超链上显示提示文字
当鼠标放在超链上时会显示提示文字
title

<a href="" title="跳转到">www.12306</a>

(4)把图片作为超链
就是在超链标签的内部引用一个图片

<a href="">
<img src=".gif"/>
</a>

3. 表格
   table标签用于显示一个表格
   tr表示行
   td表示列又叫单元格
   (1)
   一个3行2列的表格

<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>

(2)带边框的表格
border

<table border="1"><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>

(3)设置表格宽度
width

<table border="1" width="200px"><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>

(4)单元格宽度绝对值/百分比
在第一行设置了之后，后面同一列的单元格会继承
绝对值

<table border="1" width="200px"><tr><td width="50px">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="1" width="200px"><tr><td width="80%">1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr><tr><td>a</td><td>b</td></tr></table>

(5)单元格水平对齐
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>

效果：

(6)单元格垂直对齐
valign

<table border="1" width="200px"><tr><td width="50%" valign="top" >1</td><td>2   <br/>2   <br/>2   <br/></td></tr><tr><td valign="middle"  >3</td><td>4   <br/>4   <br/>4   <br/></td></tr><tr><td valign="bottom" >a</td><td>b   <br/>b   <br/>b   <br/></td></tr></table>

效果：

(7)横跨两个，水平合并
colspan

<table border="1" width="200px"><tr><td colspan="2" >1，2</td></tr><tr><td>3</td><td>4</td></tr><tr><td>a</td><td>b</td></tr></table>

效果：

(8)横跨两行，垂直合并
rowspan

<table border="1" width="200px"><tr><td rowspan="2">1,3</td><td>2</td></tr><tr><td>4</td></tr><tr><td>a</td><td>b</td></tr></table>

(9)设置表格背景颜色
bgcolor

<table border="1" width="200px"><tr bgcolor="gray"><td width="50%">1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr><tr><td>a</td><td  bgcolor="pink">b</td></tr></table>

4. 列表
   无序列表：ul

<ul>
<li>DOTA</li>
<li>LOL</li>
</ul>

效果：

有序列表：ol

<ol>
<li>地卜师</li>
<li>卡尔</li>
</ol>

5. 块，div/span
   div和span没有任何效果
   (1)div布局
   用我的理解，一个div相当于一个swing里的JLabel/或者panel，可以将那些无法定位的组件加入到这个div中，通过控制div的位置，来控制组件的位置
   比如需要对两个图片进行左边距控制
   如果不使用div,则需要对每一个图像设置边距
   使用了div后，先把两个图像都放在一个div里
   只需要设置div的边距，就可以达到两个图片都移动的效果

<img style="margin-left:50px" src=".gif"/><br/><img style="margin-left:50px" src=".gif"/><div style="margin-left:100px" ><img src=".gif"/><br/><img src=".gif"/>
</div>

效果：

(2)div和span的区别
div是块元素，会自动换行；类似的还有h，table，p
span是内联元素，不会自动换行；类似的有img，a，b，strong

<div>第一个div
</div><div>第二个div
</div><span>第一个span
</span><span>第二个span
</span>

效果：

6. 内联框架

通过内联框架可以实现在网页里创造一个小网页`

<iframe src="/" width="600px" height="400px">
</iframe>

效果：