人机交互实践02

课堂笔记

1.24位真彩色,表示2的24次方,1000多万种颜色

   最终用数字表示颜色

   用6位16进制数表示#FF0000,#66CCFF

   一个F表示4位,两个F表示8位,

2.位图与矢量图的区别

   位图:bmp/gif/jped/png表示图像灰度:与像素点有关,放大可看见马赛克

   矢量图:eps/SVG:与分辨率无关,放大不变

   文件格式GIF、JPEG、PNG

   有损压缩:技术含量高

   无损压缩:技术含量低

 

3.<img>元素

   语法

  <img src = "图像的URL"width = "300" height = "200",alt = 提示"/>

  <br/>:分图

   按照顺序显示:"steady flow"静态流显示方式:1、依次排序,排列不下时会自动换行

4.行高由本行中最高的元素决定

 

<img src = "Koala.jpg" width = "300" height = "300" title = "Koala" />

<img src = "X.jpg" width = "300" height = "300" alt = "请插入郁金香图片" />

 

5.图像与字符窜分批显示

先是字符窜到达,之后字符窜进入内存进行解析,解析到<img src = "图像的URL"width = "300" height = "200",alt = 提示"/>

发出二次HTTP请求,需要图片

第一次要字符窜,第二次要第二张图片,第三次要第三次图片,三次HTTP请求

 

 

6.热区坐标

shape = "circle" coords = "200,52,12"x,y,半径(圆心,半径)

shape = "rect" coords = "100,35,100,65"x1,y1,x2,y2,(左上角,右下角)

shape = "poly" coords = "180,3,5,6,7,8,10,20"x1,y1,x2,y2,x3,y3,x4,y4,(点1,2,3,4)

 

 

7.热点区域(只可以在图片内起作用)

<img src = "xxx.gif" usemap = "#映射名"/>

<map name = "映射名">

<area shape = "x",coords = "x" href = "x"/>

......

<area shape = "x",coords = "x" href = "x"/>

</map>

 

 

8.表格结构——简化表格结构

tr代表行

td代表列

 

<html>

<head>

</head>

<body>

<table border = "1">

<tr> <td>a</td> <td>b</td> <td>c</td> </tr>

<tr> <td>d</td> <td>e</td> <td>f</td> </tr>

<tr> <td>g</td> <td>h</td> <td>i</td> </tr>

</table>

以最宽的单元格作为整列的宽度

 

 

除了结构性标记,其他都可以放入<td>

原文地址:https://www.cnblogs.com/chenglaiyong/p/7722258.html