day14-HTML的body内标签之图片及列表、表格

一、直接开搞

1.1、图片  img 标签

1 <body>
2     <img src="mv.jpg">
3 
4 </body>

 1.1.1 鼠标移动到图片上显示名字，添加 title 属性

1 <img src="mv.jpg" title="美女" alt="呵呵">

 

1.1.2 如果图片挂了，不显示，默认显示，加 alt 属性

　　ps:这边要注意的是，只有a 标签可以使用超链接，其他任何标签都不可以使用超链接，想用超链接，只能用 a 标签　　

1.2、类表标签

1.2.1、ul

说明：ul=>unordered lists 无序列表，跟li标签配合着使用  前面有加黑点

1 <ul>
2         <li>niubi</li>
3         <li>niubi2</li>
4         <li>niubi3</li>
5     </ul>

效果：

 

1.2.2、ol

说明：ol=>ordered lists 有序列表，也是跟li标签配合着使用

    <ol>
        <li>niubi</li>
        <li>niubi2</li>
        <li>niubi3</li>
    </ol>

 效果：

1.2.3、dl

说明：dl=>defintion list 定义一个列表   配合着dt=>defintion title(定义标题)和dd=>defintion description(描述)两个标签配合使用

 

 <dl>
        <dt>我是大标题一</dt>
        <dd>我是小标题1</dd>
        <dd>我是小标题2</dd>
        <dd>我是小标题3</dd>
        <dt>我是大标题二</dt>
        <dd>我是小标题1</dd>
        <dd>我是小标题2</dd>
        <dd>我是小标题3</dd>
    </dl>

 

 

效果：

1.3、table 标签

　　1.3.1 说明：table标签是设计表格的，跟tr(行)和td(列)两个标签结合使用的，加上border属性，显示边框。

　　　　ps:完整的表格，包含表头 thead，行：<tr></tr>  列： <th>     表体，tbody  ,行：<tr>下面搞一个完整的例子：

 
 1  <table border="1px">
 2         <thead >
 3             <tr>
 4                 <th>姓名</th>
 5                 <th>年龄</th>
 6                 <th>性别</th>
 7             </tr>
 8         </thead>
 9 
10         <tbody>
11             <tr>
12                 <td>alex</td>
13                 <td>22</td>
14                 <td>M</td>
15             </tr>
16             <tr>
17                 <td>tom</td>
18                 <td>23</td>
19                 <td>M</td>
20             </tr>
21             <tr>
22                 <td>niubi</td>
23                 <td>22</td>
24                 <td>F</td>
25             </tr>
26         </tbody>

效果

1.3.2、列和行合并

a、列合并

这边列合并需要使用到colspan=>colum span属性，表示是列合并

 1       <thead >
 2             <tr>
 3                 <th>姓名</th>
 4                 <th>年龄</th>
 5                 <th>性别</th>
 6             </tr>
 7         </thead>
 8 
 9         <tbody>
10             <tr>
11                 <td>alex</td>
12                 <td colspan="2">22</td>  #两列合并在一起，
13                 
14             </tr>
15             <tr>
16                 <td>tom</td>
17                 <td>23</td>
18                 <td>M</td>
19             </tr>
20             <tr>
21                 <td>niubi</td>
22                 <td>22</td>
23                 <td>F</td>
24             </tr>
25         </tbody>

 效果：

 

b、行合并

这边行合并需要使用到rowspan=>row span属性，表示是行合并

 1 <table border="1px">
 2         <thead >
 3             <tr>
 4                 <th>姓名</th>
 5                 <th>年龄</th>
 6                 <th>性别</th>
 7             </tr>
 8         </thead>
 9 
10         <tbody>
11             <tr>
12                 <td>alex</td>
13                 <td rowspan="2">22</td>
14                 <td>M</td>
15             </tr>
16             <tr>
17                 <td>tom</td>
18                
19                 <td>M</td>
20             </tr>
21             <tr>
22                 <td>niubi</td>
23                 <td>22</td>
24                 <td>F</td>
25             </tr>
26         </tbody>

 

效果：

 

posted @ 2018-05-16 17:17  东郭仔  阅读(223)  评论(0)    收藏  举报