html基础入门（2）

最新推荐文章于 2023-05-17 19:46:30 发布

Lou.....

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量113

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/lhblmd/article/details/108710088

版权

html 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

html基础入门（2）

传智专修学院****传智专修学院

学习目标:

能够使用img显示指定位置的图片
能够看懂ul ，li进行列表信息的展示
能够使用a完成多个页面之间切换

1.网站图片页面显示案例

1.1案例介绍

在上面的案例中，我们发现这个页面都是文字的内容，而我们看到的页面往往文字和图片是并存的，或者很多地方都是图片的效果，那么我们如何在页面中显示图片呢？那么我们来实现这样的案例：
在这里插入图片描述
当然，大家现在还不知道怎么来完成这个案例，因为我们还没有学习HTML中的图片标签，那么我们现在就来学习一下吧。

1.2相关知识点

1.2.1案例相关标签

图片标签：img
img 在html页面中引用一张图片
src ：指定需要显示图片的URL（路径）。
alt ：图片无法显示时的替代文本。
width ：设置图像的宽度。
height ：定义图像的高度。

<!--显示图片“registImg.jpg”-->
		<img src="img/registImg.jpg"  alt="剁手不够解恨" 
                           width="200px" height="200px" title="鼠标移上显示"/>

		<img src="img/registImg2.jpg" alt="剁手不够解恨" 
                                 width="200px" height="200px" title="鼠标移上显示"/>

在这里插入图片描述

练习:

1.网页中引入两张图片实现如下效果
05_lianxi.html
2.网页中引入动态图片实现如下效果
05_imgTest02.html

1.3案例分析:

1.3.1知识点分析

在这里插入图片描述

1.3.2步骤分析

1.创建案例二:网站图片页面显示.html
2.使用图片标签标签的src属性引入图片

1.4代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="logo2.png" height="50" width="200" title="logo"/>
		<img src="header.png" height="50" width="250" title="正品"/>
	</body>
</html>

2.网站列表页面显示

2.1案例介绍

在页面中显示文字和图片我们已经完成了，那么如果想在页面中显示一组友情链接信息，效果如下：
在这里插入图片描述

点击这几个链接，可以跳转到相应的网站上.那么现在我们就来实现这样的效果

2.2相关知识点

2.2.1列表标签：

ol 定义有序列表。
type 列表类型，取值：A、a 、I 、i 、1 等
ul 定义无序列表。
type 符号的类型，取值：disc 实心圆、square 方块、circle 空心圆
li 定义列表项。是ul 或 ol 的子标签
例如：

	<!--列表标签-->
		<ul type="circle"> 	<!--以“空心圆”显示无序列表-->
			<li>无序</li>
			<li>无序</li>
			<li>无序</li>
		</ul>
		<ol type="I">		<!--以大写阿拉伯数字显示序号-->
			<li>有序</li>
			<li>有序</li>
			<li>有序</li>
		</ol>

在这里插入图片描述练习:
把寝室4人的名字按照有序列表的形式进行显示,序号使用大写的英文字母
把隔壁寝室4人的名字按照无序列表的形式进行显示,名字前面使用空心圆圈标识
两个寝室之间打一条横线
效果如下:

在这里插入图片描述

2.2.2超链接标签 a

href：用于确定需要显示页面的路径（URL）
target：确定以何种方式打开href所设置的页面。常用取值：_blank、_self 等
_blank 在新窗口中打开href确定的页面。
_self 默认。使用href确定的页面替换当前页面。
例如：

<!--超链接-->
		<a href="http://www.itcast.cn" target="_self">
			访问“传智”官网，以默认方式打开
		</a><br />
		<a href="http://www.itheima.com" target="_blank">
			访问“黑马”官网，以新窗口方式打开
		</a><br />

在这里插入图片描述

2.3案例分析

2.3.1知识点分析

在这里插入图片描述

2.4案例实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul type="square">
			<li><a href="../案例一：网站信息页面的显示/案例一：网站信息页面的显示.html">传智播客</a></li>
			<li><a href="http://www.baidu.com" target="_self">百度</a></li>
			<li><a href="http://www.163.com" target="_blank">网易</a></li>
			<li>百合</li>
		</ul>
	</body>
</html>

3.表格标签

实现如下案例
在这里插入图片描述

3.1.1表格标签

HTML表格由table标签以及一个或多个tr、th或td标签组成。
table 是父标签，相当于整个表格的容器。
border 表格边框的宽度。
width 表格的宽度(整个table的宽度)。
cellpadding 单元边沿与其内容之间的空白。
cellspacing 单元格之间的空白。
bgcolor 表格的背景颜色。
tr标签用于定义行
td标签用于定义表格的单元格（一个列）
colspan 单元格可横跨的列数。
rowspan 单元格可横跨的行数。
align 单元格内容的水平对齐方式, 取值：left 左、right 右、center 居中。
nowrap 单元格中的内容是否折行。
th标签用于定义表头。单元格内的内容默认居中、加粗。
在这里插入图片描述

3.1.2实例

a) 表格的基本创建
在这里插入图片描述

<h3>这是一个无边框的2行3列表格</h3>
		<table >
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
		</table>
		
		<h3>这是一个有边框的3行3列的表格 </h3>
		<table  border="1">
			<tr>
				<td>100</td>
				<td>200</td>
				<td>300</td>
			</tr>
			<tr>
				<td>400</td>
				<td>500</td>
				<td>600</td>
			</tr>
			<tr>
				<td>700</td>
				<td>800</td>
				<td>900</td>
			</tr>
		</table>

练习:
实现如下效果
在这里插入图片描述
b）利用th标签实现如下效果

<table border="1" width="400px" >
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>家乡</th>
			</tr>
			<tr >
				<td>张三</td>
				<td>18</td>
				<td>男</td>
				<td>河南</td>
			</tr>
			
			<tr >
				<td>李四</td>
				<td>19</td>
				<td>女</td>
				<td>上海</td>
			</tr>
		</table>

练习:
实现如下效果:
在这里插入图片描述

c) 表格内部添加其他标签
实现如下效果,按照之前所学知识综合即可

d) 编写3*3表格，将第一行全部合并

		<!--3*3表格,将第一行全部合并-->
		<table border="1"  width="400px" cellpadding="0" cellspacing="0">
			<tr>
				<td colspan="3" bgcolor="#ddd">a</td>
			</tr>
			<tr>
				<td>4</td>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>7</td>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>

练习:
在这里插入图片描述
e) 实例3：编写3*3表格,将第一列全部合并

<!--3*3表格,将第一列全部合并-->
		<table border="1"  width="400px" cellpadding="0" cellspacing="0">
			<tr>
				<td rowspan="3" bgcolor="#ddd">1</td>
				<td>2</td>
				<td>3</td>
			</tr>
			<tr>
				<td>5</td>
				<td>6</td>
			</tr>
			<tr>
				<td>8</td>
				<td>9</td>
			</tr>
		</table>