HTML(基本元素2)

HTML基本元素2

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

<img src="https://how2j.cn/example.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="https://how2j.cn/example.gif"/>

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

<div align="left">
  <img src="https://how2j.cn/example.gif"/>
</div>
 
<div align="center">
  <img src="https://how2j.cn/example.gif"/>
</div>
 
<div align="right">
  <img src="https://how2j.cn/example.gif"/>
</div>

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

<img src="https://how2j.cn/example_not_exist.gif" />
 
<br/>
 
<img src="https://how2j.cn/example.gif" alt="这个是一个图片" />
 
<br/>
<img src="https://how2j.cn/example_not_exist.gif" alt="这个是一个图片" />

2. 超链
   超链标签

(1)普通超链

<a href="http://www.12306.com">12306</a>

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

<a href="http://www.12306.cn" target="_blank">http://www.12306.cn</a>

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

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

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

<a href="http://www.12306.com">
<img src="https://how2j.cn/example.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="https://how2j.cn/example.gif"/>
  <br/>
 <img style="margin-left:50px" src="https://how2j.cn/example.gif"/>
 
<div style="margin-left:100px" >
 <img src="https://how2j.cn/example.gif"/>
  <br/>
 <img src="https://how2j.cn/example.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="https://how2j.cn/" width="600px" height="400px">
</iframe>

效果：