第三章图片标签和表格标签
1.3学习要点：
1.图片标签
2.表格标签
3.多媒体标签
4.前端人员和美工的配合之图片基础理论
多媒体来自多种不同的格式，是组成网页的重要元素，包括文字、图片、声音、动画等。
1.4.1 图像标记
在制作网页的过程中，可以使用HMTL代码中的标记向网页中嵌入一副图像，也可以使CSS设置某元素的背景图像。利用
标记插入图像是网页中经常使用的图像插入方式。
标记并不是在网页中插入图像，而是从网页上链接显示一幅图像。
标记创建的是被引用图像的占位空间，语法格式如下。
标记的作用是嵌入图像，该标记含有多个属性。
标记的具体属性及说明如表4-1所示。
| 属性值 | 说 明 |
|---|---|
| src | 图像地址 |
| alt | 添加图像的代替文字 |
| width/height | 设置图像宽度/高度 |
| border | 设置图像边框 |
| align | 设置图像对齐方式 |
表 4-1 图像标记的常用熟悉
1．src属性
src属性为必须属性，其他属性为可选项。src属性用于指定图像文件所在的路径，这个路径可以是相对路径也可以是绝对路径。
2．alt属性
alt属性用于添加图像的替代文。标记的alt属性用于添加图像的替代文字，当浏览网页时，若图像下载完成，鼠标放在图像上时，鼠标旁会出现此替代文字。若图片没有被下载，图片位置会显示此替代文字，起到提醒说明的作用。
3．width/height属性
width/height属性用于设置图像宽度/高度。标记的属性width和height用来设置图像的宽度和高度，默认情况下，网页中显示的图像保持原图的尺寸。即不设置图像的宽度和高度，图像大小与原图一致。
图像高度和宽度的单位可以是像素，可以是百分比。若只设置宽度或高度中的一个，则图像会按原图宽高比例等显示。但单位两个属性没有按原始大小的缩放比例设置，图像会变形显示。
示例4-2在网页中插入了一幅名为“”的图像，并设置图像尺寸为X，同时为图像定义替代文字“风景图片”。图像加载成功时，鼠标指向图像会显示替代文字；图像加载失败时，会直接显示替代文字，显示结果如图4-3所示。
示例 4-2
<!DOCTYPE html>
图 4-3 添加图片、替代文字示例
4．border属性和align属性
border属性用来设置图像边框，align属性用来设置图像对齐方式。
（1）border属性
图像默认是没有边框的，除非图像在a元素内部。标记的border属性可以为图像定义边框的宽度，既可增加或者去掉(border=”0”)图像的边框。边框颜色默认为黑色。
（2）align属性
图像和正文文字的对齐方式可通过标记的align属性来定义。图像的绝对对齐方式和正文的对齐方式一样，有左对齐、居中对齐和右对齐;而相对正文文字的对齐方式则是指图像与同行文字的相对位置。
图 4-6 添加图片、替代文字示例
示例4-7插入了3幅图像，并运用align属性分别设置了不同的对齐方式。在浏览器中效果如图4-8所示。
示例 4-7
<!DOCTYPE html>
图 4-8 添加图片、替代文字示例
1.4.2 多媒体文件标记
网页中的多媒体文件除了图像和声音以外，还包括音频和视频文件以及FLASH文件等。音频文件常用格式有MP3、MID和WAV等，视频文件常用格式有MOV、AVI、ASP以及MPEG等。要在网页中插入这些文件就要使用
src属性用来指定插入的多媒体文件的地址或多媒体文件名，文件名一定要加上扩展名;width属性用于设置多媒体文件的宽度，height属性用于设置多媒体文件的高度，均用数字表示，单位为像素;autostart属性用于设置多媒体文件是否自动播放，有true和false两个取值，true表示在打开网页时自动播放多媒体文件，false是默认值，表示打开网页时不自动播放;loop属性用于设置多媒体文件是否循环播放，有true和false两个取值，true表示无限循环播放多媒体文件，false为默认值，表示只播放一次。
下面分别展示在网页中插入Flash动画、音频文件和视频文件，来说明标记的用法。
1. 插入Flash动画
示例4-9在网页中插入了FLASH动画“flash.swf”，并设置该动画显示宽度为200像素。
示例 4-7
<!DOCTYPE html>
2. 插入音频
示例4-9在网页中插入了FLASH动画“flash.swf”，并设置该动画显示宽度为200像素。
示例 4-7
<!DOCTYPE html>
3. 插入视频
示例4-9在网页中插入了FLASH动画“flash.swf”，并设置该动画显示宽度为200像素。
示例 4-7
<!DOCTYPE html>
表格是一种常用的HTML页面元素。使用表格组织数据，可以清晰地显示数据间的关系。表格用于网页布局，能将网页分成多个任意的矩形区域，合理地在网页上组织图形和文本。
1.6.1 表格标记
使用成对的
用来定义表格中的一行，可以通过在标记中设置属性来修改该行的显示效果。
（2） - 定义表行
| 标签 | 说 明 | |||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
（1） | ||||||||||||||||||||||||||||||||||||
| 和 | 用来定义表格，整个表格需包含若干单元格，其中可能会包含两种类型的单元格，对应着两种信息，一种是数据，另一种是头信息。 | 标记和 | 标记就是分别用来创建这两种单元格的。 1.6.2 表格属性 制作网页的过程中为了修饰表格效果，常常需要对表格属性做一些设置。下面对HTML属性的分类介绍。
 图 6-4 表格示例 1.4.3 表格的标签使用 … | |||||||||||||||||||||||||||||||||
| - 定义表头 | - 定义表元(表格的具体数据) 带边框的表格：
 不带边框的表格：
 表元的背景色彩和背景图象 | #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
 表格边框的色彩
 表格边框色彩的亮度控制 <table cellspacing=5 border=5 bordercolorlight=White bordercolordark=Maroon>
 表格内对齐 | ||||||||||||||||||||||||||||||||||
| #=left, center, right |
 | |||||||||||||||||||||||||||||||||||
| #=top, middle, bottom, baseline |
 4.前端人员和美工的配合之图片基础理论 常见的图片格式： PNG格式 1996年诞生 优点： 透明 无损压缩 渐进显示和留式读写保留图像名称作者版权创作时间 可以用js将代码压缩到图片里面 http://bbs.csdn.net/topics/390924241 也可以在githup开源网站上找到方法 渐进显示：一行一行的加载图片 留式读写：先看模糊的图片在逐渐清晰 缺点：色彩支持少 保存成png色彩少 IE6对png不支持 如何支持：http://wenku.baidu.com/view/bea3a87e27284b73f242508b.html atc.js文件 JPEG 格式 1992年诞生 优点： 色彩多 缺点：有损压缩 放大图片会模糊 Gif 1987年诞生 动态图可透明体积小 处理256种颜色 可透明不能全透 半透明 处理锯齿效果不好 百度地图 做统计日志 SVG 矢量图形 ，无损压缩 绘制路径xml语言 缺点：浏览器支持不好 主要用于移动端font-face UI 美工 UE div+css效果如何 前端的用户体验”,UE(User Experience)指的是软件应用和审美价值 不需要知道各种图片的渲染原理 只需要知道和美工配合的注意事项 | |||||||||||||||||||||||||||||||||||
若有收获，就点个赞吧
0 人点赞
