玩转HTML图像，链接，列表，表格等标签

约定不等于承诺〃 2021-12-04 09:34 231阅读 0赞

html的学习知道有哪些标签，怎么使用，其余就是如何将这些标签互相混合嵌套使用了。

### 1.html图像img标签的使用 ###

<img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。

**绝对路径和相对路径**

像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。

*  绝对地址：相对于磁盘的位置去定位文件的地址
 *  相对地址：相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：

*  “ ./ ” 表示当前文件所在目录下，比如“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
 *  “ ../ ” 表示当前文件所在目录下的上一级目录，比如“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

### **2.HTML的href链接标签使用** ###

<a>标签可以在网页上定义一个链接地址，通过src属性定义跳转的地址，通过title属性定义鼠标悬停时弹出的提示文字框。

**定义页面内滚动跳转**

页面内定义了“id”或者“name”的元素，可以通过a标签链接到它的页面滚动位置，前提是页面要足够高，有滚动条，且元素不能在页面顶部，否则页面不会滚动。

<a href="#mao1">标题一</a>
    ......
    ......
    <h3 id="mao1">跳转到的标题</h3>

###  3.HTML的list列表标签使用 ###

**3.1 有序列表**

在网页上定义一个有编号的内容列表可以用<ol>、<li>配合使用来实现，代码如下：

<ol>
        <li>列表文字一</li>
        <li>列表文字二</li>
        <li>列表文字三</li>
    </ol>

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。

**3.2  无序列表**

在网页上定义一个无编号的内容列表可以用<ul>、<li>配合使用来实现，代码如下：

<ul>
        <li>列表文字一</li>
        <li>列表文字二</li>
        <li>列表文字三</li>
    </ul>

在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。

**3.3 定义列表**

定义列表通常用于术语的定义。<dl>标签表示列表的整体。<dt>标签定义术语的题目。<dd>标签是术语的解释。一个<dl>中可以有多个题目和解释，代码如下：

<h3>前端三大块</h3>
    <dl>
        <dt>html</dt>
        <dd>负责页面的结构</dd>
    
        <dt>css</dt>
        <dd>负责页面的表现</dd>
    
        <dt>javascript</dt>
        <dd>负责页面的行为</dd>
    
    </dl>

###  4.列表，图像，链接混合使用案例 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>列表,图片，链接混合使用</title>
    </head>
    <body>
    	
    	<h1>图片</h1>
    	
    	<img src="./abc.png" alt="随便一张图"  />	
    	<a href="http://www.baidu.com" title="百度一下">到百度首页</a>
    	
    	
    	<h1>有序列表</h1>
    	
    	<ol>
    		<li>html</li>
    		<li>css</li>
    		<li>javascript</li>
    	</ol>
    	
    
    	<h1>无序列表</h1>
    	
    	<ul>
    		<li><a href="#">新闻标题一</a></li>
    		<li><a href="#">新闻标题二</a></li>
    		<li><a href="#">新闻标题三</a></li>
    	</ul>
    
    
    	<h1>定义列表</h1>
    	
    	<dl>
    		<dt>html</dt>
    		<dd>负责页面结构</dd>
    		<dt>css</dt>
    		<dd>负责页面的表现</dd>
    		<dt>javascript</dt>
    		<dd>负责页面的行为</dd>
    	</dl>
    	
    </body>
    </html>

## 5.html表格table标签的使用 ##

**5.1table常用标签**

*  1、table标签：声明一个表格
 *  2、tr标签：定义表格中的一行
 *  3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

**5.2 table标签里的常用属性：**

*  1、border 定义表格的边框
 *  2、cellpadding 定义单元格内内容与边框的距离
 *  3、cellspacing 定义单元格与单元格之间的距离
 *  4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right
 *  5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom
 *  6、colspan 设置单元格水平合并
 *  7、rowspan 设置单元格垂直合并
 *  border-collapse:collapse 设置边框合并，制作一像素宽的边线的表格

**5.3 表格的传统布局：**

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

*  1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0
 *  2、单元格里面嵌套表格
 *  3、单元格中的元素和嵌套的表格用align和valign设置对齐方式
 *  4、通过属性或者css样式设置单元格中元素的样式

传统布局目前应用：

*  1、快速制作用于演示的html页面
 *  2、商业推广EDM制作(广告邮件)

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>表格</title>
    </head>
    <body>
    	<h1>表格</h1>
    
    	<table border="1" cellpadding="20" cellspacing="20">
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    			<td>4</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    			<td>4</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    			<td>4</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    			<td>4</td>
    		</tr>
    	</table>
    
    	<table border="1" width="300" height="200" align="center">
    		<tr>
    			<th>1</th>
    			<th>2</th>
    			<th>3</th>
    		</tr>
    
    		<tr>
    			<td align="center">1</td>
    			<td align="center">2</td>
    			<td align="center">3</td>
    		</tr>
    
    		<tr>
    			<td valign="top" align="center">1</td>
    			<td>2</td>
    			<td>3</td>
    		</tr>
    
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    		</tr>
    
    	</table>
    
    	<br />
    	<br />
    	<br />
    
    	
    	<table border="1" width="700" height="300" align="center">
    		<tr>
    			<td colspan="5">基本情况</td>			
    		</tr>
    		<tr>
    			<td width="15%"></td>
    			<td width="25%"></td>
    			<td width="15%"></td>
    			<td width="25%"></td>
    			<td rowspan="5"><img src="images/person.png" alt="人物图片"></td>
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>			
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			
    		</tr>
    		<tr>
    			<td></td>
    			<td></td>
    			<td></td>
    			<td></td>
    			
    		</tr>
    	</table>
    
    </body>
    </html>