HEAD FIRST HTML&CSS 读书笔记(3)

本文介绍了如何在HTML5中正确使用JPEG、PNG和GIF三种图像格式,并详细讲解了<img>元素的使用方法,包括设置图像源、提供替代文本、调整图像尺寸及创建图像链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、为页面增加图像

1、JPEG、PNG和GIF的不同

照片和复杂的图像使用JPEG。

JPEG:有损、不支持透明、比较小。

单色图像、几何图形和logo使用PNG和GIF。

PNG:最适合单色和线条构成的图像、无损、可以将颜色设置成透明、压缩优于GIF。

GIF:最适合单色和线条构成的图像、无损、只允许将一种颜色设置为透明、支持动画。


2、<img>元素

<img>元素最简单情况

<img src="../image/red.jpg">

a)可以指向另一个不同网站上的图像

<img src="https://img-my.youkuaiyun.com/uploads/avatar/0/D/2/1_xu3737284.jpg">
注:对相同网站上的链接或图像最好使用相对链接。

b)一定要提供候选格式

不同设备上查看网页图像的效果可能会不同,提供候选格式可以在图像无法显示时给出一些提示,告诉他们图像里有什么信息。

使用<img>元素的 alt属性

<img src="https://img-my.youkuaiyun.com/uploads/avatar/0/D/2/1_xu3737284.jpg" alt="a man">

c)调整图像大小

使用<img>元素的 widthheigth属性。宽度和高度都是用像素设定。
<img src="../image/red.jpg" width="48" height="100">

d)为图像添加链接

将<img>元素放在 <a>元素中。浏览器就会将这个图像当成可点击的链接。
		<a href="test.html">
			<img src="red.jpg" alt="red">
		</a>

二、HTML标准

1、使用HTML5标准

HTML5是HTML最好最棒的标准,其是随时间而不断完善的,也是HTML的最后一个版本。

最重要的是,HTML5不只被设计用来建立web页面,而且被设计建立成熟的web应用,如地图、游戏。

告诉浏览器你使用的是HTML5。HTML5的doctype:

<!doctype html>

注:doctype不是元素。

2、W3C验证工具

位于http://validator.w3.org

3、增加<meta>指定字符编码

<meta>加到head元素中所有其他元素的上面。
<pre name="code" class="html">	<head>
		<meta charset="utf-8">
		<title>hello world!</title>
	</head>

三、HTML小结

a、一定要以<doctype>开头
b、<html>要紧随<doctype>后
c、只有<head>和<body>元素能放在<html>中,其他元素必须放在<head>或<body>中
d、在<head>中指定正确的字符编码
e、一定要在<head>中包含<title>元素
f、嵌套元素时要当心,不允许在<img>等void元素中嵌套其他内联元素
g、检查属性

 

内容概要:本文档是关于基于Tecnomatix的废旧智能手机拆解产线建模与虚拟调试的毕业设计任务书。研究内容主要包括:分析废旧智能手机拆解工艺流程;学习并使用Tecnomatix软件搭建拆解产线的三维模型,包括设备、输送装置等;进行虚拟调试以模拟各种故障情况,并对结果进行分析提出优化建议。研究周期为16周,涵盖了文献调研、拆解实验、软件学习、建模、调试和论文撰写等阶段。文中还提供了Python代码来模拟部分关键流程,如拆解顺序分析、产线布局设计、虚拟调试过程、故障模拟与分析等,并实现了结果的可视化展示。 适合人群:本任务书适用于机械工程、工业自动化及相关专业的本科毕业生,尤其是那些对智能制造、生产线优化及虚拟调试感兴趣的学生。 使用场景及目标:①帮助学生掌握Tecnomatix软件的应用技能;②通过实际项目锻炼学生的系统建模和虚拟调试能力;③培养学生解决复杂工程问题的能力,提高其对废旧电子产品回收再利用的认识和技术水平;④为后续的研究或工作打下坚实的基础,比如从事智能工厂规划、生产线设计与优化等工作。 其他说明:虽然文中提供了部分Python代码用于模拟关键流程,但完整的产线建模仍需借助Tecnomatix商业软件完成。此外,为了更好地理解和应用这些内容,建议学生具备一定的编程基础(如Python),并熟悉相关领域的基础知识。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值