0201 图片格式、img标签、列表、表格、rgba、【表格+锚点】

1 图片的格式

　　BMP：占用空间大色彩丰富，点阵图

　　JPEG：（JPG） 压缩方式通常是破坏数据性压缩，在压缩过程中图像的质量会遭受到可见的破坏（常用）

　　GIF：对透明色和多帧动画的支持。

　　PNG：无损压缩的位图格式，支持Alpha通道的透明/半透明特性（常用）

 

2 img标签

　　<img src="../img/Rod Johnson.jpg" alt="这是springMVC之父" height="357px" width="268px" title="这是springMVC之父"> <!-- 本地加载方式 -->
　　<img src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=2b88383d3af33a879a6d0718f65d1018/e61190ef76c6a7ef30aa132bfdfaaf51f3de662b.jpg" alt="Rod Johnson" /> <!-- 远程加载方式 -->

1 <img src="../img/Rod Johnson.jpg" alt="这是springMVC之父" height="357px" width="268px"  title="这是springMVC之父"> <!-- 本地加载方式 -->
2     <img src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=2b88383d3af33a879a6d0718f65d1018/e61190ef76c6a7ef30aa132bfdfaaf51f3de662b.jpg" alt="Rod Johnson" /> <!-- 远程加载方式 -->
img标签

　　　　src：图片路径

　　　　alt：图片描述（用于搜索用）

　　　　title：鼠标放上去显示的名字

　　　　height：图片显示时的高度

　　　　width：图片显示时的宽度

　　　　　　不是定height和width时浏览器会自动计算，但是需要时间，所以最好都加上这两个属性

　　

3 列表

　　3.1 无序列表

1 <ul type="circle">
2         <!-- li{item$}*3 -->
3         <li>item1</li>
4         <li>item2</li>
5         <li>item3</li>
6     </ul>
无序列表格式

　　3.2 有序列表

1 <ol type="i">
2         <li>item1</li>
3         <li>item2</li>
4         <li>item3</li>
5 </ol>
有序列表格式

　　3.3 自定义列表

1 <dl> <!-- 定义自定义列表 -->
2         <dt>姓名</dt> <!-- 定义标题 -->
3         <dd>三少</dd> <!-- 定义数据 -->
4         <dd>老三</dd>
5 
6         <dt>爱好</dt>
7         <dd>篮球</dd>
8         <dd>轮滑</dd>
9 </dl>
自定义列表格式

注意：列表都是块级元素

 

4 表格

　　caption：表格名字

　　thead：表头

　　tbody：表身

 1     <table border="1px">
 2         <caption><strong>学生信息</strong></caption>
 3         <tr>
 4             <th colspan="4">学生信息</th>
 5         </tr>
 6         <tr>
 7             <td>学号</td>
 8             <td>名字</td>
 9             <td>年龄</td>
10             <td>性别</td>
11         </tr>
12         <tr>
13             <td>1</td>
14             <td>WYM</td>
15             <td>27</td>
16             <td rowspan="2">女</td>
17         </tr>
18         <tr>
19             <td>2</td>
20             <td>WYC</td>
21             <td>25</td>
22             <!-- <td>女</td> -->
23         </tr>
24         <tr>
25             <td>3</td>
26             <td>WYS</td>
27             <td>24</td>
28             <td>男</td>
29         </tr>
30     </table>
表格格式
 1 <table border="1px">
 2         <caption><strong>学生信息</strong></caption>
 3         <tr>
 4             <th colspan="4">学生信息</th> <!-- 表格头部 -->
 5         </tr>
 6 
 7         <tr>
 8             <td>学号</td>
 9             <td>名字</td>
10             <td>年龄</td>
11             <td>性别</td>
12         </tr>
13         <tr>
14             <td>1</td>
15             <td>WYM</td>
16             <td>27</td>
17             <td rowspan="2">女</td>
18         </tr>
19         <tr>
20             <td>2</td>
21             <td>WYC</td>
22             <td>25</td>
23             <!-- <td>女</td> -->
24         </tr>
25         <tr>
26             <td>3</td>
27             <td>WYS</td>
28             <td>24</td>
29             <td>男</td>
30         </tr>
31     </table>
表格格式2

 

5 rgba

　　background-color: rgba(255,0,0,0.5);

　　r：green，范围[0,255]

　　g：green，范围[0,255]

　　b：blue，范围[0,255]

　　a：alpha 透明度，范围是[0,1]，例如0.5表示透明度为0.5

 

6 小练习

　　使用表格列出图画信息（编号、名称、作者）

　　在表格下方插入图画信息，并做相应的描述

　　点击表格中的图画名称可以调到相应的图画

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title>网页标题</title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13     </style>
14 </head>
15 
16 <body>
17     <table border="1px" id="bg">
18         <caption>夜景表格</caption>
19         <thead>
20             <tr>
21                 <td>编号</td>
22                 <td>名称</td>
23                 <td>作者</td>
24             </tr>
25         </thead>
26         <tbody>
27             <tr>
28                 <td>1</td>
29                 <td><a href="#yj1">cqyj6</a></td>
30                 <td>warrior</td>
31             </tr>
32             <tr>
33                 <td>2</td>
34                 <td><a href="#yj2">cqyj6</a></td>
35                 <td>warrior</td>
36             </tr>
37             <tr>
38                 <td>3</td>
39                 <td><a href="#yj3">cqyj6</a></td>
40                 <td>warrior</td>
41             </tr>
42             <tr>
43                 <td>4</td>
44                 <td><a href="#yj4">cqyj6</a></td>
45                 <td>warrior</td>
46             </tr>
47             <tr>
48                 <td>5</td>
49                 <td><a href="#yj5">cqyj6</a></td>
50                 <td>warrior</td>
51             </tr>
52             <tr>
53                 <td>6</td>
54                 <td><a href="#yj6">cqyj6</a></td>
55                 <td>warrior</td>
56             </tr>
57         </tbody>
58     </table>
59     <hr />
60     <img src="../img/cq1.jpg" height="400px" width="400px" alt="重庆夜景" title="重庆夜景01">
61     <span id="yj1">这是重庆夜景1</span><a href="#bg">点击回到表格信息</a>
62     <hr />
63     <img src="../img/cq2.jpg" height="400px" width="400px" alt="重庆夜景" title="重庆夜景01">
64     <span id="yj2">这是重庆夜景2</span><a href="#bg">点击回到表格信息</a>
65     <hr />
66     <img src="../img/cq3.jpg" height="400px" width="400px" alt="重庆夜景" title="重庆夜景01">
67     <span id="yj3">这是重庆夜景3</span><a href="#bg">点击回到表格信息</a>
68     <hr />
69     <img src="../img/cq4.jpg" height="400px" width="400px" alt="重庆夜景" title="重庆夜景01">
70     <span id="yj4">这是重庆夜景4</span><a href="#bg">点击回到表格信息</a> 
71     <hr />
72     <img src="../img/cq5.jpg" height="400px" width="400px" alt="重庆夜景" title="重庆夜景01">
73     <span id="yj5">这是重庆夜景5</span><a href="#bg">点击回到表格信息</a> 
74     <hr />
75     <img src="../img/cq1.jpg" height="400px" width="400px" alt="重庆夜景" title="重庆夜景01">
76     <span id="yj6">这是重庆夜景6</span><a href="#bg">点击回到表格信息</a>      
77     <hr />
78     <script type="text/javascript">
79         
80     </script>
81 </body>
82 </html>
小练习源代码

 

  1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
  2 <html>
  3 <head>
  4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
  5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
  6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
  7     <title>网页标题</title>
  8     <style>
  9         *{
 10            /* margin: 0;
 11             padding: 0;*/
 12         }
 13         table tbody tr:hover{
 14             background-color: rgba(255,0,0,0.5);
 15             color: white;
 16         }
 17         table tbody td:hover{
 18             background-color: blue;
 19             color: white;
 20         }
 21     </style>
 22 </head>
 23 
 24 <body>
 25     <h2>img标签</h2>
 26     <img src="../img/Rod Johnson.jpg" alt="这是springMVC之父" height="357px" width="268px"  title="这是springMVC之父"> <!-- 本地加载方式 -->
 27     <img src="http://g.hiphotos.baidu.com/baike/s%3D220/sign=2b88383d3af33a879a6d0718f65d1018/e61190ef76c6a7ef30aa132bfdfaaf51f3de662b.jpg" alt="Rod Johnson" /> <!-- 远程加载方式 -->
 28     <hr />
 29 
 30     <h2>无序列表ul</h2>
 31     <ul type="circle">
 32         <!-- li{item$}*3 -->
 33         <li>item1</li>
 34         <li>item2</li>
 35         <li>item3</li>
 36     </ul>
 37     <hr />
 38 
 39     <h2>有序列表ol</h2>
 40     <ol type="i">
 41         <li>item1</li>
 42         <li>item2</li>
 43         <li>item3</li>
 44     </ol>
 45     <hr />
 46 
 47     <h2>自定义列表</h2>
 48     <dl> <!-- 定义自定义列表 -->
 49         <dt>姓名</dt> <!-- 定义标题 -->
 50         <dd>三少</dd> <!-- 定义数据 -->
 51         <dd>老三</dd>
 52 
 53         <dt>爱好</dt>
 54         <dd>篮球</dd>
 55         <dd>轮滑</dd>
 56     </dl>
 57     <hr />
 58 
 59     <table border="1px">
 60         <caption><strong>学生信息</strong></caption>
 61         <tr>
 62             <th colspan="4">学生信息</th> <!-- 表格头部 -->
 63         </tr>
 64 
 65         <tr>
 66             <td>学号</td>
 67             <td>名字</td>
 68             <td>年龄</td>
 69             <td>性别</td>
 70         </tr>
 71         <tr>
 72             <td>1</td>
 73             <td>WYM</td>
 74             <td>27</td>
 75             <td rowspan="2">女</td>
 76         </tr>
 77         <tr>
 78             <td>2</td>
 79             <td>WYC</td>
 80             <td>25</td>
 81             <!-- <td>女</td> -->
 82         </tr>
 83         <tr>
 84             <td>3</td>
 85             <td>WYS</td>
 86             <td>24</td>
 87             <td>男</td>
 88         </tr>
 89     </table>
 90     <hr />
 91     
 92     <table border="1px">
 93         <caption><strong>人口普查</strong></caption>
 94         <thead>
 95             <tr>
 96                 <td>#</td>
 97                 <td>name</td>
 98                 <td>gender</td>
 99                 <td>marry</td>
100             </tr>
101         </thead>
102 
103         <tbody>
104             <tr>
105                 <td>01</td>
106                 <td>warrior</td>
107                 <td>男</td>
108                 <td>否</td>
109             </tr>
110             <tr>
111                 <td>02</td>
112                 <td>fury</td>
113                 <td>男</td>
114                 <td>是</td>
115             </tr>
116         </tbody>
117     </table>
118 
119     <script type="text/javascript">
120         
121     </script>
122 </body>
123 </html>
本博客所有源代码

 

posted @ 2017-05-09 15:56  寻渝记  阅读(344)  评论(0)    收藏  举报