HTML（三）

最新推荐文章于 2022-08-26 10:52:11 发布

原创最新推荐文章于 2022-08-26 10:52:11 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

JavaWeb 专栏收录该内容

48 篇文章

订阅专栏

本文介绍了HTML中列表的创建方法，包括定义列表、无序列表和有序列表，并详细讲解了如何在网页中插入图片，设置图片属性如提示文字、尺寸及对齐方式。

1.06 列表和使用列表

一，列表类型

定义列表dl
无序列表ul
有序列表ol

二，插入定义列表< dl>

基本语法：
在这里插入图片描述
< dt>定义组成列表项名称部分
< dd>解释说明定义的项目名称

实例代码：
在这里插入图片描述
效果：

三，插入无序列表< ul>

基本语法：
在这里插入图片描述
实例代码：

效果：

四，插入有序列表

基本语法：

实例代码：

效果：
1.07 插入图像

一，插入图片< img>

基本语法：
在这里插入图片描述
实例代码：

效果：

二，添加图片提示文字< alt>

基本语法：
在这里插入图片描述
alt提示文字可以是中文也可以英文。

实例代码：
在这里插入图片描述
效果：

三，设置图片的宽度和高度

基本语法：
在这里插入图片描述
图片高度和宽度的单位可以是像素也可以是百分比。

实例代码：
在这里插入图片描述
效果：

四，设置图片对其方式

基本语法：
在这里插入图片描述
关键字：top,middle,bottom,left,right

实例代码：

<html>
<head>
  <title>设置图片对齐方式</title>
</head>
<body>
  <center>
  <h2>设置图片对齐方式</h2>
  </center>
  <hr>
  <p>
 <img src="06.jpg" align=top>
  图片顶部与同行的文字顶部对齐
  </p>
  <p>
  <img src="06.jpg" align=middle>
  图片中部与同行的文字中部对齐
  </p>
  <img src="06.jpg" align=bottom>
  图片底部与同行的文字底部对齐
</body>
</html>

效果：
在这里插入图片描述