上次讲了一些比较多的关于表格和用表格和div排版网页的知识。
这节课从网页图片的一些知识开始。
上节课的课后练习1.去网上搜索两张你喜欢的图片，一张图片作为整个网页的背景，另一张图片可以叠加起来形成网页的背景。
我找到了两张大尺寸图片和两张小尺寸图片，如下表所示:
2.在技术经验表中添加一个标题。标题是:技术类别、技术要点和多年经验。文本以粗体显示。
在技术经验表第一行加一个tr，在里面加3个td，然后复制一个CSS样式td1，重命名为tdh，加粗体文本，背景色设置为浅灰色。
css代码修改如下:
设置tdh的背景色:RGBA (200，200，200，0.6)；，这是一种新的写作方法。通过CSS的rgba函数，你可以设置RGBA颜色。这个颜色值有一个alpha通道，你可以设置颜色的透明度，也就是当前颜色的比例。
RGBA颜色值指定如下:rgba(红色、绿色、蓝色、alpha)。alpha参数是介于0.0(完全透明)和1.0(完全不透明)之间的数字。
rgba(200，200，200，0.6)；它是一种灰色半透明浅灰色，透明度为0.6。
因为全身底色是灰色的，所以我们看不出tdh的底色是半透明的。我们可以将身体的背景调整为一张图片，可以看到它是半透明的。
设置背景图片我们讨论了通过设置主体的背景色属性来设置整个网页的背景色。
颜色设置有时会受到限制。很多网站用图片来设置背景图片，可以让网页更加美观。
设置背景图片的CSS属性如下:
背景-图像:url(。/图片/背景. jpg)；
url是一个CSS函数，其参数是图片的目录路径。
一般采用相对目录路径，即假设index.html所在的目录，在该目录下创建一个images目录，将background.jpg文件放入images目录。
修改css文件体的样式，添加background-image，删除bigtitle的width属性，因为div的默认宽度是100%。为了防止该属性干扰背景图片，删除了不必要的属性。
css代码修改如下:
将CSS样式bigtitle的背景色属性值修改为半透明的颜色值。
css代码修改如下:
然而，我们发现了一个问题。因为背景图片的宽度只是自动适应浏览器的宽度，对应的高度可能不会完全填满浏览器的高度。因此，背景图片默认在Y轴方向自动重复显示，显示高度根据当前显示内容的高度自动截断。
所以可以看出有一个明显的极限，就是画面开始重复显示。
解决这种显示不好的方法有两种，一种是制作更高的画面，另一种是制作底部画面和顶部画面颜色非常接近或相同的画面，使画面重复显示时没有明显的边界。
设置可以重复的背景图片从之前的网络上找到了可以重复显示的背景图。我们来修改一下背景图，看看效果如何。
css代码修改如下:
背景图片是一个有效改变网页显示效果的方法，而图片更是一个网站上最常用的元素，利用好图片，可以让网页看起来更简洁美观大气，简称“高大上”。img标签和属性背景图片是改变网页显示效果的有效方式，图片是一个网站上最常用的元素。善用图片可以让网页看起来更简洁美观，简称“高大上”。
现在我们来谈谈如何给网页添加图片元素。
打算这样修改网页:在技术经历右侧增加一段“成果展示”，先修改成类似“工作经历”和“工作经历(部分)”的样子，用表格进行排版，然后在“成果展示”中增加两张图片，展示之前做过的项目成果。
首先将“技术经验”部分修改为2行2列的表格，并增加“成果展示”的标题。
使用上一个表格更改表格的最后一行
html代码修改如下:
首先准备两张图片，可以是jpg，png，gif等。，并将它们存储在图像目录中。
然后修改html代码，使用img标签来添加图片，使用形式是这样的：然后修改html代码，使用img标签添加图片。使用形式如下:
<img src="url"/>& ltimg src = " URL "/& gt；
Img标记是一个空标记，类似于前面的< br/>；标签。它只包含属性，没有结束标记。
使用属性src设置要显示的图像的URL地址。
这里的URL地址可以是本地路径和文件名，也可以是网络URL地址。
示例:
<img src="./images/coke12.png"/> 显示当前html文件同目录下的images目录下的coke12.png图片文件。& ltimg src= "。/images/coke12.png"/>在当前html文件所在的同一目录下的images目录中显示coke12.png图片文件。
<img src="http://www.w3school.com.cn/images/boat.gif"/>显示一个网站的图片网络地址。& ltimg src = " http://www . w3 school . com . cn/images/boat . gif "/& gt；显示网站的图片网址。
要增加成绩显示的图片，修改html代码如下:
可以看到第1个图片显示的非常成功。这里要注意在img标签设置了属性width="100%"，这里的宽度是指相对于img标签元素的父元素而言的，并不是指相对于整个浏览器的宽度。也就是前面说过的标签元素的属性继承关系要非常清楚。你可以看到第一张图非常成功。这里需要注意的是，属性width="100% "是在img标签中设置的。这里的宽度是指相对于img标签元素的父元素的宽度，而不是相对于整个浏览器的宽度。也就是前面提到的，标签元素的属性继承关系要非常清晰。
可以去掉属性width="100% "，刷新页面看一看，体验一下。
第二张图用的是网络地址。如果你把这个网络地址直接复制到浏览器的地址栏中访问，你会发现这个图片文件是不存在的。所以这里的网页上会出现一个小图标，说明图片资源文件不存在。
可以通过给img标签设置alt属性的方式来给图像定义一串预备的替换文本，当浏览器无法载入图像时，浏览器会显示这个文本而不是图像。给页面上的图像都加上替换文本是一个好习惯，这样有助于更好的显示信息。通过为img标记设置alt属性，可以为图像定义一系列准备好的可选文本。当浏览器无法加载图像时，浏览器将显示此文本而不是图像。为页面上的所有图像添加替代文本是一个好习惯，这有助于更好地显示信息。
将alt属性添加到两个图片，并修改html代码，如下所示:
图片不存在，但终究要修改，这样才能把图片修改成已有的文件。
修改html代码，如下所示:
刚才有一行代码:
标签的格式
注释的开始标记有一个感叹号，但在结束标记中没有。
浏览器不会显示注释内容，类似于python代码中用#注释一行不会执行的代码。
标签的作用一般是用来记录或解释代码的用途和功能，供程序员阅读。
也可以把暂时不需要的代码暂时保存起来，以后再用。
超文本标记语言
HTML注释前面已经解释过了，注释也可以添加到同一个CSS中。
使用//两个斜杠符号来注释一行CSS代码。
使用/* comment content */对单行或多行CSS代码进行注释。以“斜杠+模特”开头，以“星号+斜杠”结尾，都是英文半字母小写。
通常，/* */用于注释。这一行注释很方便。
带注释的CSS样式不会反映在浏览器页面样式显示中。
让我们验证一下CSS注释。
我觉得这次选的背景图不算太漂亮，还是之前的浅灰色背景色比较好看，所以打算修改CSS文件正文的背景设置，但是不确定以后如果找到更合适的背景图可能会改成背景图，所以可以暂时注释掉代码，以后可能会有用。
css代码修改如下:
你可能会发现，雪哥的html代码并不注重缩进，也就是标签元素的层次结构并不是通过缩进来显示的。
这是因为，雪哥为了截图，尽量把代码文字做大，为了让大家不容易看错代码，特意设置了一行文字，最多显示60个英文字符。如果在每一行前面加上缩进，那么一行文本实际能显示的字符数就更少了。不得已，雪哥只能放弃缩进，让每行文字都用顶格写。虽然这样写代码看起来不美，但是因为我丰富的编程经验，出错的可能性相对较小。
那么对于初学者来说，每一行都必须按照规范缩进，让代码的层次更加清晰。
下面，雪哥将对两种写代码方式进行截图。我们来对比一下。一定要按照标准的缩进格式写代码，这样才能减少错误。
非标准html代码(字可以读得更清楚):
因为教程是系列教程，关联性很强。请按照微信官方账号【零基础编程】历史新闻发布的时间顺序在微信上阅读。
