前端学习日记day4—

1.图像标记<img/>

语法：<img src="图像URL">

其中src属性用于指定图像文件的路径和文件名。

表1-1 <img/>标记相关属性
属性	属性值	描述
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.特殊字符标记

表1-2 常用特殊字符
特殊字符	描述	字符的代码
	空格
<	小于	<
>	大于	>
&	和	&
￥	人民币	¥
©	版权	©
®	注册商标	®
°	摄氏度	&deg
±	正负号	±
×	乘号	×
÷	除号	÷
²	平方	⊃
³	立方	³

【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/>
使用空格符&amp;nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;可以实现空白字符效果！<br/>
上一行代码中我们使用了&lt;br/&gt;换行标记<br/>
&copy;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B站早期是一个ACG（动画、漫画、游戏）内容创作与分享的视频网站。经过十年多的发展，围绕用户、创作者和内容，构建了一个源源不断产生优质内容的生态系统，B站已经涵盖7000多个兴趣圈层的多元文化社区，曾获得QuestMobile研究院评选的“Z世代偏爱APP”和“Z世代偏爱泛娱乐APP”两项榜单第一名并入选“BrandZ”报告2019最具价值中国品牌100强。</font></p><p><font size="2" color="#515151">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bilibili目前拥有动画、番剧、国创、音乐、舞蹈、游戏、知识、生活、娱乐、鬼畜、时尚、放映厅等 15 个内容分区，生活、娱乐、游戏、动漫、科技是B站主要的内容品类并开设直播、游戏中心、周边等业务板块。</font></p><p><font size="2" color="#515151">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;B站的特色是悬浮于视频上方的实时评论，即<font color="#0e5c9e">"弹幕"</font>。弹幕可以给观众一种“实时互动的错觉， 用户可以在观看视频时发送弹幕，其他用户发送的弹幕也会同步出现在视频上方。</font></p>

图1-8 控制文本