HTML标签（2）

HTML标签（2）

---

一、img标签

图像格式

JPG:有损压缩，色彩丰富图片
GIF:简单动画
PNG:无损压缩、透明、交错、动画

img标签

<img />

src属性——图片的的来源
src属性：路径+文件名
alt 属性：设置图片的替换文本

二、绝对路径与相对路径

引例：

• 站点文件夹site
• 网页文件：
•    C:/site/index.html
• 图片文件loge：
•    C:/site/logo.git
  要求：在index.html中引用图片logo.git
  方法一：绝对路径

存在问题：
这个图片文件只能在C盘的这个位置找到。随着服务器端的迁移，它可能迁移到服务器端的其他位置，此时图片没有办法被正确找到
方法二：相对路径

方法：
    以哪一个**基准点**开始查找？

答：网页文件所在的位置
就是网页文件当前所在的文件夹为查找的基准点，然后来查找对应的图片文件所在位置

                                 图1

                                 图2

如何表示向上一级文件夹？

• 用“..”来表示当前文件夹的上一级文件夹

src属性填写方法：

• 找到当前文件所在的文件夹——这是基准点
• 在向上找到站点文件夹，用".."表示
• 填写src属性时，应当从根节点开始填写

二、区域div

区域是页面的一个组成部分，一个栏目板块
每个区域都可以进行单独的排版，非常容易修改

div标签

成对使用
<div> </div>
id属性：给区域取名字

居中属性

• div标签的最大用处就是结合css样式，对每个区域进行排版布局
  

使用sup标签引用上角标
<sup>1</sup>——上角标显示为1

div标签的嵌套使用，每一个部分使用一个div标签好处：
        之后可以通过css样式，来者之每个区域它的单独样式

三、列表

1、无序列表（unorded list）

ul标签成对使用

<h1>web 前端开发</h1>
<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>JS</li>
</ul>

·无序列表内部添加一些列表项，每个列表项都用li标签表示，列表i想内容写在li标签内部
·快速生成：ul>li*3

2、有序列表(orded list)

<h1>web 前端开发</h1>
<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>JS</li>
</ol>

四、表格（table）

tr—行
td—列

<table>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
        <td>data</td>
    </tr>
</table>

table属性

table属性：border的取值代表边框是粗细，没有border属性，表格是没有边框的

表头单元格

第一行用th标签代替td标签