[初学HTML5日记]又是元气满满的第三天

来啦来啦，他来啦，今天咱们约起来，一起总结一下HTML的图像标记，超链接标记，然后呢，前期的一些小块就总结完啦。

常用的图像格式

GIF格式	特点：支持动画，无损图片格式（修改图片之后，图片的质量几乎没有损失），支持透明（全透明或者全不透明）缺点：只能处理256种颜色 GIF常用于LOGO，小图标等色彩相对单一的图像
PNG格式	优点：PNG支持高级别无损耗压缩。PNG支持alpha通道透明度。PNG支持伽玛校正。PNG支持交错。PNG受最新的Web浏览器支持。缺点：较旧的浏览器和程序可能不支持PNG文件。作为Internet文件格式，与JPEG的有损耗压缩相比，PNG提供的压缩量较少。作为Internet文件格式，PNG对多图像文件或动画文件不提供任何支持。GIF格式支持多图像文件和动画文件。
JPG格式	优点：具有占用空间小、存储迅速、浏览方便、兼容性强等好处。缺点：会将图像中重或不重要的数据予以合并，这样就会让图像的质量受到一定的影响。
BMP格式	比较老的图片，文件过大，不推荐用，在Windows操作系统常见

图像标记<img />

要想让网页中显示就需要图像标记，其基本语法为：

<img src="图像URL" /> #src属性指定图片文件的路径和文件名
#alt="替换文本" #显示不出图片时，可以告诉用户该图片的信息，如果img只有scr 没有alt 左边的提示会变黄
#如：
<img src="../Pictures/laosedemao.webp" alt="老舍的《猫》" />

之后，我们将在下面的例子里，总结一些<img />标记的属性

title：鼠标指针悬停时的显示的内容
width：图像的宽度
height: 图片的高度
border：图片边框的宽度
vspace: 图片垂直边距的空白
hspace: 图片水平边距的空白
align:left-right ->图片对齐靠左/靠右 Top :将图片顶端和文本的第一行文字对齐，其他文字在图片下方。 middle：将图片水平中线和文本的第一行文字对齐，其他文字在图片下方。 bottom：将图片底部和文本的第一行文字对齐，其他文字在图片下方。

好啦，现在让我们实现这些属性吧

<img src="../Pictures/laosedemao.webp" alt="老舍的《猫》" title="老舍的《猫》" height="350" width="520" />

注：为了图片的美观，图片的高度和宽度就不调这么离谱啦

设置图片上下边距的空白

设置图片左右边距的空白

设置图片的align到左边，调整hspace的左右边距就可以变成这样啦

剩下的属性大家可以一一尝试，我在这就先不敲了，边框？加了就不好看了，不加了。

HTML不赞成图片标记使用border,vspace,hspace及align属性，可用css样式代替（所以，我们在DW的HTML文件中，输入以上四个属性是没有快捷方式的）。

网页制作中，装饰性的图片都不要直接用<img />标记插入，而是通过css设置背景图像来实现。

我们知道，在网页中路径分为绝对路径和相对路径两种，在此就不敲下来了，有需要的同学可以找度娘。

超链接标记

在HTML5中，只需要输入<a><a/>标记链接对象即可，具体格式如下：

<a href="跳转目标" target="目标窗口的打开方式">文本或图像</a>

target: 用于指定链接页面的打开方式：_self，_blank，_parent三种，_self为默认值，意为在原窗口打开。_blank为在新窗口打开。_parent在父窗口打开

<a href="../Pictures/laosedemao.webp" target="_blank">《猫》</a>

暂时没有确定目标链接时，通常将<a>标记的href属性值定义为”#“：href="#",表示为空

图片，文字，音频等可添加超链接

锚点链接

点击链接，直接到达链接的目标内容，适用于同一页面上

这样点击看不出来，加张图片，效果杠杠的！

晚安，玛卡巴卡！

[初学HTML5日记]又是元气满满的第三天相关推荐

[初学HTML5日记]又是元气满满的第二天
哈喽,没错,我又来了,我是灰太狼...喜欢(吃)的懒羊羊,我接下来要记录的是HTML5文本控制标记,图像标记以及超链接标记. 文本控制标记标题标记基本语法格式 <hn align='对齐方式 ...
html5 游戏限制,HTML5新技术让游戏解决了三个大问题
原标题:HTML5新技术让游戏解决了三个大问题如今,手游已经成为了人们娱乐生活的一部分,不管是在大街上还是地铁上我们总能看到埋头玩手游的人,不过现阶段手机游戏还是存在三个不方便的地方: 1.安卓与i ...
大厂程序员元气满满的一天！
在东八区的清晨,一轮红日从东方冉冉升起,我又一次完美避开了自然醒,在智能音箱天猫精灵甜美轻柔.宛如夜莺般的歌声唤呼中醒来,然它却惊扰了我的美梦,让人很是烦躁,我直接粗暴的打断了它,让它暂停播放,它却丝 ...
通过代码编写，输出一句话：“我要开始学习JAVA了，今天又是知识量满满的一天~”
public class 练习 {public static void main(String[] args) {System.out.println("我要开始学习JAVA了,今天又是知识 ...
html5 小太阳系模型,初学html5太阳系
下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. var cxt=document.getElementById('canvas').get ...
向元气满满的日本中小企业学习2
向元气满满的日本中小企业学习2 企业的评估分析首先实施了相关的调研,研究分析各家企业实现价值创造的体系.基于各种文献的学习以及调查验证总结出了6项重要要素.内容如下. 谁当成功要因的6项要素进行新 ...
初学HTML5——视频
<video>标签 1.具体语法格式: <video src="视频文件路径" controls="controls"> 你的浏览器不支 ...
html5 小车动画_HTML5实现动画三种方式
编者注:作者以一个运动的小车为例子,讲述了三种实现HTML5动画的方式,思路清晰,动画不仅仅是canvas,还有css3和javascript.通过合理的选择,来实现最优的实现. PS:由于显卡.录制 ...
python初学到底怎么学？大神三天快速学习python的方法留下的笔记
以下是一些Python实用技巧和工具,希望能对大家有所帮助. 交换变量 x = 6 y = 5 x, y = y, x print x 5 print y 6 if 语句在行内 print " ...