1.图像标记<img/>
语法：<img src="图像URL">
其中src属性用于指定图像文件的路径和文件名。
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像宽度 |
| height | 像素 | 设置图像高度 |
| border | 数字 | 设置图像边框的宽度 |
| vspace | 像素 | 设置图像顶部和底部的空白（垂直边距） |
| hspace | 像素 | 设置图像左侧和右侧的空白（水平边距） |
| align | left | 图像向左对齐 |
| right | 图像向右对齐 | |
| top | 图像顶端和文本第一行文字对齐，其它文字居于图像下方 | |
| middle | 将图像的水平中线和文本的第一行文字对齐，其它文字居于图像下方 | |
| bottom | 图像底部和文本的第一行文字对齐，其它文字居于图像下方 |
【demo1-1】图像的替换文本属性alt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像标记img的alt属性</title>
</head>
<body>
<img src="imgs/2233.jpeg" alt="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"/>
</body>
</html>
图1-1 图像的替换文本属性alt练习效果图（图像正常显示）
图1-2 图像的替换文本属性alt练习效果图（将图片路径改掉，图像不能正常显示）
【demo1-2】鼠标悬停title标记
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像标记img的alt属性</title>
</head>
<body>
<img src="imgs/2233.jpeg" alt="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" title="哔哩哔哩"/>
</body>
</html>
图1-2 鼠标悬停title标记练习运行效果图
【demo1-3】图像的宽度属性width、高度属性height
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像的宽高和边框属性</title>
</head>
<body>
<img src="imgs/2233.jpeg" alt="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" border="2"/>
<img src="imgs/2233.jpeg" alt="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" width="300"/>
<img src="imgs/2233.jpeg" alt="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" width="300" height="470"/>
</body>
</html>
图1-3 图像的宽高和边框属性练习效果图
【demo1-4】图像的边距属性vspace和hspcae、对齐属性align
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图像的边距和对齐属性</title>
</head>
<body>
<img src="imgs/2233.jpeg" alt="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" border="1" hspace="50" vspace="20" align="left"/>
哔哩哔哩是国内知名的视频弹幕网站,这里有及时的动漫新番,活跃的ACG氛围,有创意的Up主。大家可以在这里找到许多欢乐。
</body>
</html>
图1-4 图像的边距和对齐属性运行效果
2.关于图像路径的输入
①图像文件和html文件位于同一文件夹：只需输入图像的名称，如<img src="2233.jpeg">
②图像文件位于html文件的下一级文件夹：输入文件夹名和文件名，之间用“/”隔开，如<img src="imgs/2233.jpeg">
③图像文件位于html的上一级文件夹：在文件夹名之前加“../”，如果是上两级则需要加“../../”，以此类推，如<img src="../2233.jpeg">
3.特殊字符标记
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格 | | |
| < | 小于 | < |
| > | 大于 | > |
| & | 和 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ⊃ |
| ³ | 立方 | ³ |
【demo1-5】特殊字符标记练习
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>特殊字符标记</title>
</head>
<body>
什 么都 不 管的 空 格（无论多少都只能显示出一个空格）<br/>
使用空格符&nbsp; 可以实现空白字符效果！<br/>
上一行代码中我们使用了<br/>换行标记<br/>
©CSDN版权所有
</body>
</html>
图1-5 特殊字符标记练习效果图
3.实例实现
【example1】图文混排
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>哔哩哔哩官网简介</title>
</head>
<body>
<img src="imgs/blbl.jpg" alt="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili"/>
<h2>哔哩哔哩——你感兴趣的视频都在b站</h2>
<p>B站早期是一个ACG（动画、漫画、游戏）内容创作与分享的视频网站。经过十年多的发展，围绕用户、创作者和内容，构建了一个源源不断产生优质内容的生态系统，B站已经涵盖7000多个兴趣圈层的多元文化社区，曾获得QuestMobile研究院评选的“Z世代偏爱APP”和“Z世代偏爱泛娱乐APP”两项榜单第一名并入选“BrandZ”报告2019最具价值中国品牌100强。</p>
<p>bilibili目前拥有动画、番剧、国创、音乐、舞蹈、游戏、知识、生活、娱乐、鬼畜、时尚、放映厅等 15 个内容分区，生活、娱乐、游戏、动漫、科技是B站主要的内容品类并开设直播、游戏中心、周边等业务板块。</p>
<p>B站的特色是悬浮于视频上方的实时评论，即弹幕”。弹幕可以给观众一种“实时互动”的错觉， 用户可以在观看视频时发送弹幕，其他用户发送的弹幕也会同步出现在视频上方。</p>
</body>
</html>
图1-6 图文混排运行效果
①将【example1】中的图像加以控制,将图像信息代码改为：
<img src="imgs/blbl.jpg" alt="哔哩哔哩 (゜-゜)つロ 干杯~-bilibili" align="left" hspace="30"/>
图1-7 控制图像
②将【example1】中的文本加以控制：
具体文本信息代码
<h2><font face="微软雅黑" size="6" color="#0e5c9e">哔哩哔哩——你感兴趣的视频都在b站</font></h2>
<p>
<font size="2" color="#515151">
B站早期是一个ACG（动画、漫画、游戏）内容创作与分享的视频网站。经过十年多的发展，围绕用户、创作者和内容，构建了一个源源不断产生优质内容的生态系统，B站已经涵盖7000多个兴趣圈层的多元文化社区，曾获得QuestMobile研究院评选的“Z世代偏爱APP”和“Z世代偏爱泛娱乐APP”两项榜单第一名并入选“BrandZ”报告2019最具价值中国品牌100强。
</font>
</p>
<p>
<font size="2" color="#515151">
bilibili目前拥有动画、番剧、国创、音乐、舞蹈、游戏、知识、生活、娱乐、鬼畜、时尚、放映厅等 15 个内容分区，生活、娱乐、游戏、动漫、科技是B站主要的内容品类并开设直播、游戏中心、周边等业务板块。
</font>
</p>
<p>
<font size="2" color="#515151">
B站的特色是悬浮于视频上方的实时评论，即<font color="#0e5c9e">"弹幕"</font>。弹幕可以给观众一种“实时互动的错觉， 用户可以在观看视频时发送弹幕，其他用户发送的弹幕也会同步出现在视频上方。
</font>
</p>图1-8 控制文本
445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
